understanding & facilitating semantic search - #searchfest 2016

@SEMpdx#SearchFest

@mike_arnesenupbuild.io

Understanding and Facilitating

Semantic Search

@SEMpdx#SearchFest


Get this deckbit.ly/structure-all-the-data

http://bit.ly/structure-all-the-data


@SEMpdx#SearchFest


Hey SearchFest 2016!!!

Mike ArnesenFounder & CEO at UpBuildSemantic Markup Geek

@SEMpdx#SearchFest


Hey SearchFest 2016!!!

<link itemprop="sameAs" href="..." />

@SEMpdx#SearchFest


If you know HTML,

you know semantic markup!

It’s Just Semantics!

@SEMpdx#SearchFest


An Understanding of HTMLW3Schools

http://www.w3schools.com/html/

Code Academy

https://www.codecademy.com/learn/web

Prerequisites





@SEMpdx#SearchFest


But HTML is Just the Beginning

<h1>SearchFest</h1>

@SEMpdx#SearchFest


But HTML is Just the Beginning WEBPAGE

has the property

LEVEL 1 HEADING which is equal to

SEARCHFEST.

@SEMpdx#SearchFest


Ambiguity Strikes!Is it…

an article about the

subject, “SearchFest”?

@SEMpdx#SearchFest



a page about an org. called

“SearchFest”?

@SEMpdx#SearchFest



an offer to sell tickets for

“SearchFest”?

@SEMpdx#SearchFest



discussing this

“SearchFest”

or some other

“SearchFest”?

@SEMpdx#SearchFest



a list of events on a page

where

“SearchFest” is one of

many topics.

@SEMpdx#SearchFest



a piece about an epic

pilgrimage of wanderers

searching for inner

meaning?

@SEMpdx#SearchFest


Ambiguity Strikes!Or is it just about this thing

we’re at

RIGHT NOW?!

@SEMpdx#SearchFest


Semantic Markup vs. HTML

Semantic markup takes us

a level deeper

than good old HTML markup

@SEMpdx#SearchFest


a level deeper

@SEMpdx#SearchFest


@SEMpdx#SearchFest


to achieve a greater level of detail & specificity!

Semantic markup allows us

@SEMpdx#SearchFest


to achieve a greater level of detail

and specificity!

Semantic markup allows us

to focus in on a single point

@SEMpdx#SearchFest


no common languageA web without semantic markup has

@SEMpdx#SearchFest


Fashion axe brooklyn truffaut, poutine tacos farm-to-table readymade selfies pop-up. Mlkshk ennui fashion

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 forage

tumblr, narwhal cornhole you probably haven't heard of them beard 8-bit celiac. Put a bird on it salvia kogi

listicle selfies venmo, single-origin coffee humblebrag hashtag chambray kitsch vegan pug mlkshk. Gastropub

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 level

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 godard

poutine 8-bit chartreuse chillwave. Banjo deep v ethical you probably haven't heard of them, man braid pug

@SEMpdx#SearchFest


Semantic markup is like

a Rosetta Stone

@SEMpdx#SearchFest


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


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


@SEMpdx#SearchFest


Data Models vs. Vocabularies

Microdata

RFDa

Your Data

schema.org

JSON-LD

Dublin Core

GoodRelations

@SEMpdx#SearchFest


Schema.orgOur dictionary of choice.

@SEMpdx#SearchFest


In Your Toolbox- Itemscope- Itemtype

- Itemprop

@SEMpdx#SearchFest


In Your Toolbox- Itemscope- Itemtype

- Itemprop- Itemref- Itemid

@SEMpdx#SearchFest


What is Itemscope?“I’ve got something to say!”

@SEMpdx#SearchFest


What is Itemtype?Now that you have everyone’s attention…

“Okay, I want to talk about _______.”

@SEMpdx#SearchFest


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


What is Itemprop?These are specific data points about the thing (itemtype) you’re talking about.

@SEMpdx#SearchFest


What is Itemprop?Many itemprops appear across all itemtypes.

NAMEDESCRIPTION

URLIMAGE

@SEMpdx#SearchFest


What is Itemprop?Others are unique to one or a few itemtypes.

DIRECTOROFFERSDURATION

MANUFACTURERSKU

CONTAINSPLACE

BREADCRUMB

ARRIVALBUSSTOP

BIRTHDATE

@SEMpdx#SearchFest


What are Embedded Entities?Itemscopes within itemprops!

@SEMpdx#SearchFest


@SEMpdx#SearchFest


What are Embedded Entities?An Event entity is declared with an itemtype.

A PostalAddress entity is, too.

@SEMpdx#SearchFest


What are Embedded Entities?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


Event

Location Place

City

State

Name SearchFest

Name

Address

The Sentinel Hotel

Portland

Oregon

@SEMpdx#SearchFest


ImplementationThat’s all well and good,

but how do we do it?

@SEMpdx#SearchFest


Finding Your Schema Use schema.org/docs/schemas.html

@SEMpdx#SearchFest


Finding Your SchemaA) Use “Full List of Types”

B) Find a good starting point and

drill down as much as required

@SEMpdx#SearchFest


@SEMpdx#SearchFest


Pro Tips● More is better - except hidden text● Pay attention to “Text” vs. “Expected Types”● Test with multiple tools

@SEMpdx#SearchFest


No Hidden TextDon’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


Text vs. Expected Types

Some itemprops can just be text.

Some itemprops must refer to other itemtypes(entities).

@SEMpdx#SearchFest


Test with Multiple ToolsStructured Data Testing Toolhttps://developers.google.com/structured-data/testing-tool/

Structured Data Linterhttp://linter.structured-data.org/

https://developers.google.com/structured-data/testing-tool/

https://developers.google.com/structured-data/testing-tool/

http://linter.structured-data.org/

http://linter.structured-data.org/

@SEMpdx#SearchFest


Overcoming Common IssuesMicrodata (aka, inline markup) is restrictive and breaks easily.

It’s not uncommon for information to be in different locations on the page.

@SEMpdx#SearchFest


Enter Itemref & ItemidBringing us all together

@SEMpdx#SearchFest


Itemref & ItemidThese tools allow you to bridge the gap between <divs>, structures, and even pages and websites.

@SEMpdx#SearchFest


ItemrefReference data points to use as properties in your main entity.

ItemidLink to other identified entities as properties forto your main entity.

@SEMpdx#SearchFest


Using ItemrefTL;DR - Create an independent “data blob” that you can refer to from your main entity using itemref.

@SEMpdx#SearchFest


Using Itemref1) Wrap a <span> or <div> around your data to form your data blob. Give it an itemscope but not an itemtype.

@SEMpdx#SearchFest


Using Itemref2) 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


Using Itemref3) 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


@SEMpdx#SearchFest


Using ItemidTL;DR - Give a whole entity a unique identifier that you can link to in order to fill out a property.

@SEMpdx#SearchFest


Using Itemid1) Markup the entity like normal. Start with itemscope and itemtype and then get into the specific itemprops.

@SEMpdx#SearchFest


Using Itemid2) Add itemid with a fragment identifier.

@SEMpdx#SearchFest


Using Itemid3) Within your main entity, include a <link> tag. Specify both the itemprop that the entity will relate to and the fragment identifier.

@SEMpdx#SearchFest


@SEMpdx#SearchFest


Itemref & Itemid In ActionVisit: http://codepen.io/mike_arnesen/pen/jqWzgb

@SEMpdx#SearchFest


@SEMpdx#SearchFest


No email for the org!

Missing offers!

@SEMpdx#SearchFest


Email & offers have been integrated!

@SEMpdx#SearchFest


JavaScript Object Notation for Linked Data

@SEMpdx#SearchFest


Supported Types● Organizations

○ Logos○ Social Profiles○ Contact Points

● Events● Music & Movie Actions● Articles & Recipes● (NEW!) Reviews● (NEW!) Products

@SEMpdx#SearchFest


JSON-LD vs. Inline MicrodataJSON-LDA method of encoding structured data using Javascript Object Notation

MicrodataA method of encoding structured data using HTML attributes

@SEMpdx#SearchFest


JSON-LD vs. Inline Microdata

Microdata

RFDa

Your Data schema.orgJSON-LD

@SEMpdx#SearchFest


Breaking Down JSON-LDContext@context": "http://schema.org/"

It’s the front half of “itemtype”.

Set it and forget it.

http://schema.org/

@SEMpdx#SearchFest


Breaking Down JSON-LDType"@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


Breaking Down JSON-LDProperties & Values"name": "SearchFest",

"startDate" : "2016-03-10T08:30"

@SEMpdx#SearchFest


Breaking Down JSON-LDNested Entities"location" : {

"@type" : "Place",

"sameAs" : "http://sentinelhotel.com",

"name" : "The Sentinel Hotel"

}

No need redeclare @context; just start a new @type in {}

@SEMpdx#SearchFest


ItemID!!!Using “@id” to identify entities"@type": "Organization",

"@id": "#organizer","name": "SEMpdx",

This entity can now be referenced from within other entities!

@SEMpdx#SearchFest


ItemID!!!This entity can now be referenced from within other entities!"organizer": { "@id": "#organizer" }

@SEMpdx#SearchFest


JSON-LD in ActionVisit: http://codepen.io/mike_arnesen/pen/jqWzgb

@SEMpdx#SearchFest


JSON-LD in Action

@SEMpdx#SearchFest


Separate Entity

Separate Entity

@SEMpdx#SearchFest


One Mega Entity!

@SEMpdx#SearchFest


Which one?

@SEMpdx#SearchFest


@SEMpdx#SearchFest


“Use structured data. Google can get information without it, but we can make the processes easier.”

- Ian Lurie, @portentint

@SEMpdx#SearchFest


@SEMpdx#SearchFest


Thank you!

Get this deckbit.ly/structure-all-the-data Resourcesupbuild.io/blog/searchfest-links/



http://www.upbuild.io/blog/searchfest-links/

http://www.upbuild.io/blog/searchfest-links/

understanding & facilitating semantic search - #searchfest 2016

Marketing