Understanding & Facilitating Semantic Search - #SearchFest 2016

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Understanding and Facilitating
Semantic Search

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Get this deck
bit.ly/structure-all-the-data

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Hey SearchFest 2016!!!
Mike Arnesen
Founder & CEO at UpBuild
Semantic Markup Geek

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Hey SearchFest 2016!!!
<link itemprop="sameAs" href="..." />

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
If you know HTML,
you know semantic markup!
It’s Just Semantics!

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
An Understanding of HTML
W3Schools
http://www.w3schools.com/html/
Code Academy
https://www.codecademy.com/learn/web
Prerequisites

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
But HTML is Just the Beginning
<h1>SearchFest</h1>

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
But HTML is Just the Beginning
WEBPAGE
has the property
LEVEL 1 HEADING
which is equal to
SEARCHFEST.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Ambiguity Strikes!
Is it…
an article about the
subject, “SearchFest”?

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Ambiguity Strikes!
Is it…
a page about an org. called
“SearchFest”?

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Ambiguity Strikes!
Is it…
an offer to sell tickets for
“SearchFest”?

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Ambiguity Strikes!
Is it…
discussing this
“SearchFest”
or some other
“SearchFest”?

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Ambiguity Strikes!
Is it…
a list of events on a page
where
“SearchFest” is one of
many topics.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Ambiguity Strikes!
Is it…
a piece about an epic
pilgrimage of wanderers
searching for inner
meaning?

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Ambiguity Strikes!
Or is it just about this thing
we’re at
RIGHT NOW?!

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Semantic Markup vs. HTML
Semantic markup takes us
a level deeper
than good old HTML markup

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
a level deeper

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
to achieve a greater level of detail & specificity!
Semantic markup allows us

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
to achieve a greater level of detail
and specificity!
Semantic markup allows us
to focus in on
a single point

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
no common language
A web without semantic markup has

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Fashion axe brooklyn truffaut, poutine tacos farm-to-table readymade selfies pop-up. Mlkshk ennui fashi
axe offal, ugh flannel ramps listicle. Locavore kale chips pickled selvage PBR&B. Slow-carb scenester
chambray four dollar toast authentic, dreamcatcher church-key polaroid fanny pack PBR&B. Freegan for
tumblr, narwhal cornhole you probably haven't heard of them beard 8-bit celiac. Put a bird on it salvia kog
listicle selfies venmo, single-origin coffee humblebrag hashtag chambray kitsch vegan pug mlkshk. Gastro
vice forage umami, mumblecore vegan messenger bag retro pinterest you probably haven't heard of them
organic cornhole art party leggings. Fixie fap mustache, authentic knausgaard butcher scenester gentrify
hammock cred man bun. Single-origin coffee art party cold-pressed, iPhone direct trade leggings next lev
taxidermy pop-up blog squid thundercats disrupt. Mustache synth green juice, DIY tote bag farm-to-table
humblebrag knausgaard ethical dreamcatcher squid banjo. Keffiyeh fixie flexitarian, umami venmo godar
poutine 8-bit chartreuse chillwave. Banjo deep v ethical you probably haven't heard of them, man braid p

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Semantic markup is like
a Rosetta Stone

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Again, common language
<h1>SearchFest</h1>
<div>SearchFest</h1>
<p>Search<span class="blue">FEST</></p>
<h2>SearchFest</h2>
<a href="/">SearchFest</a>

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Again, common language
<h1 itemprop="name">SearchFest</h1>
<div itemprop="name">SearchFest</h1>
<p itemprop="name">Search<span class="blue">FEST</></p>
<h2 itemprop="name">SearchFest</h2>
<a itemprop="name" href="/">SearchFest</a>

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Data Models vs. Vocabularies
Microdata
RFDa
Your
Data
schema.org
JSON-LD
Dublin Core
GoodRelations

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Schema.org
Our dictionary of choice.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
In Your Toolbox
- Itemscope
- Itemtype
- Itemprop

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
In Your Toolbox
- Itemscope
- Itemtype
- Itemprop
- Itemref
- Itemid

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
What is Itemscope?
“I’ve got something to say!”

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
What is Itemtype?
Now that you have everyone’s attention…
“Okay, I want to talk about _______.”

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
What is Itemprop?
All the details about what you just said you’d be
talking about.
“And another thing!”
You can (and will) use many itemprops.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
What is Itemprop?
These are specific data points
about the thing (itemtype) you’re talking about.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
What is Itemprop?
Many itemprops appear across all itemtypes.
NAME
DESCRIPTION
URL
IMAGE

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
What is Itemprop?
Others are unique to one or a few itemtypes.
DIRECTOROFFERS
DURATION
MANUFACTURERSKU
CONTAINSPLACE
BREADCRUMB
ARRIVALBUSSTOP
BIRTHDATE

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
What are Embedded Entities?
Itemscopes within itemprops!

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
An Event entity is declared with an itemtype.
A PostalAddress entity is, too.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
An Event entity has a location itemprop
which should be an PostalAddress.
The value of the parent entity’s itemprop
is another entity embedded within in.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Event
Location Place
City
State
Name SearchFest
Name
Address
The Sentinel Hotel
Portland
Oregon

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Implementation
That’s all well and good,
but how do we do it?

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Finding Your Schema
Use schema.org/docs/schemas.html

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Finding Your Schema
A) Use “Full List of Types”
B) Find a good starting point and
drill down as much as required

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Pro Tips
● More is better - except hidden text
● Pay attention to “Text” vs. “Expected Types”
● Test with multiple tools

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
No Hidden Text
Don’t apply semantic
markup to text that’s not
visible to users.
When it’s okay:
Dates/times
Implicit information
References to entities

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Text vs. Expected Types
Some itemprops can just be text.
Some itemprops must refer to other itemtypes(entities).

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Test with Multiple Tools
Structured Data Testing Tool
https://developers.google.com/structured-data/testing-tool/
Structured Data Linter
http://linter.structured-data.org/

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Overcoming Common Issues
Microdata (aka, inline markup)
is restrictive and breaks easily.
It’s not uncommon for information
to be in different locations on the page.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Enter Itemref & Itemid
Bringing us all together

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Itemref & Itemid
These tools allow you to bridge the gap
between <divs>, structures, and even pages and websites.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Itemref
Reference data points to use as properties
in your main entity.
Itemid
Link to other identified entities as properties for
to your main entity.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Using Itemref
TL;DR - Create an independent “data blob” that you can
refer to from your main entity using itemref.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Using Itemref
1) Wrap a <span> or <div> around your data to form your
data blob. Give it an itemscope but not an itemtype.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Using Itemref
2) Markup the data you want to reference using an
itemprop, just like it was part of your main entity.
Give it a unique id as well.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Using Itemref
3) On your main entity, add an itemref attribute to the main
itemscope and itemtype declaration. Specify the unique id
that you gave your “data blob”

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Using Itemid
TL;DR - Give a whole entity a unique identifier that you can
link to in order to fill out a property.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Using Itemid
1) Markup the entity like normal. Start with itemscope and
itemtype and then get into the specific itemprops.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Using Itemid
2) Add itemid with a fragment identifier.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Using Itemid
3) Within your main entity, include a <link> tag.
Specify both the itemprop that the entity will relate to and
the fragment identifier.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Itemref & Itemid In Action
Visit: http://codepen.io/mike_arnesen/pen/jqWzgb

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
No email for the org!
Missing offers!

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Email & offers have
been integrated!

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
JavaScript Object Notation for Linked Data

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Supported Types
● Organizations
○ Logos
○ Social Profiles
○ Contact Points
● Events
● Music & Movie Actions
● Articles & Recipes
● (NEW!) Reviews
● (NEW!) Products

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
JSON-LD vs. Inline Microdata
JSON-LD
A method of encoding structured data using
Javascript Object Notation
Microdata
A method of encoding structured data using
HTML attributes

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
JSON-LD vs. Inline Microdata
Microdata
RFDa
Your
Data
schema.orgJSON-LD

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Breaking Down JSON-LD
Context
@context": "http://schema.org/"
It’s the front half of “itemtype”.
Set it and forget it.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Type
"@type": "Product"
It’s the back half of “itemtype”.
Set a new one anytime you need to create another entity -
nested or separate.

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Properties & Values
"name": "SearchFest",
"startDate" : "2016-03-10T08:30"

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Nested Entities
"location" : {
"@type" : "Place",
"sameAs" : "http://sentinelhotel.com",
"name" : "The Sentinel Hotel"
}
No need redeclare @context; just start a new @type in {}

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
ItemID!!!
Using “@id” to identify entities
"@type": "Organization",
"@id": "#organizer",
"name": "SEMpdx",
This entity can now be referenced
from within other entities!

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
ItemID!!!
This entity can now be referenced
from within other entities!
"organizer": {
"@id": "#organizer"
}

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
JSON-LD in Action
Visit: http://codepen.io/mike_arnesen/pen/jqWzgb

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
JSON-LD in Action

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Separate Entity
Separate Entity

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
One Mega Entity!

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Which one?

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
“Use structured data. Google can
get information without it, but
we can make the processes easier.”
- Ian Lurie, @portentint

@SEMpdx
#SearchFest
@mike_arnesen
upbuild.io
Thank you!
Get this deck
bit.ly/structure-all-the-data
Resources
upbuild.io/blog/searchfest-links/

Understanding & Facilitating Semantic Search - #SearchFest 2016

More Related Content

Viewers also liked (19)

Similar to Understanding & Facilitating Semantic Search - #SearchFest 2016 (20)

More from Mike Arnesen (13)

Recently uploaded (20)

Understanding & Facilitating Semantic Search - #SearchFest 2016