This document summarizes Eric Enge's presentation on recent updates to structured markup. It discusses structured data and schema.org, providing examples of rich snippets and rich cards. It also covers using structured data in social media like Open Graph, Facebook Instant Articles, and Apple News. The document discusses implementing structured data in AMP pages and highlights new areas like GTIN for e-commerce. It introduces JSON-LD and structured data testing tools.
2. #SMX #22A1 @stonetemple
ERIC ENGE, CEO
STONE TEMPLE CONSULTING
2016 Landy’s Search Marketer of the Year
2016 US Search Awards Search Personality of the Year
Eric’s Studies Have Been Covered In:
4. #SMX #22A1 @stonetemple
Definition of Structured Data
Structured data refers to any data that resides in a
fixed field within a record or file. This includes data
contained in relational databases and
spreadsheets
Source: Webopedia
5. #SMX #22A1 @stonetemple
What is Schema.org?
Schema.org is a joint effort, in the spirit of sitemaps.org,
to improve the web by creating a structured data markup
schema supported by major search engines. On-page
markup helps search engines understand the
information on web pages and provide richer search
results.
Source: Schema.org
6. #SMX #22A1 @stonetemple
“If Google were to implement major search
functions solely based on people implementing
Schema correctly, it would be a very empty search
engine”
12. #SMX #22A1 @stonetemple
Google’s John Mueller
"One thing that you can do to test ….
whether or not your site is high quality
or not is to do a site: query to look at
the pages that were indexed, and if the
site query shows rich snippets in the
search results, but the normal searches
don't show it then usually that's a sign
that from a quality point of view we
don't quite trust your site perfectly yet.“
https://www.youtube.com/watch?v=EaSyuH2D7Mw&t=6m20s&t=6m2
0s
15. #SMX #22A1 @stonetemple
Rich cards are a new Search result format building on the success of
rich snippets. Just like rich snippets, rich cards use schema.org
structured markup to display content in an even more engaging and
visual format, with a focus on providing a better mobile user
experience.
https://webmasters.googleblog.com/2016/05/introducing-rich-cards.html
19. #SMX #22A1 @stonetemple
The Open Graph Protocol
“The Open Graph protocol enables any
web page to become a rich object in a
social graph. For instance, this is used
on Facebook to allow any web page to
have the same functionality as any
other object on Facebook”
Source: ogp.me
20. #SMX #22A1 @stonetemple
og:title - The title of your object as it should appear within the graph, e.g.,
"The Rock”.
og:type - The type of your object, e.g., "video.movie". Depending on the
type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the
graph.
og:url - The canonical URL of your object that will be used as its
permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
Required on Every Page
22. #SMX #22A1 @stonetemple
With No OG Tags
• Image defaults to the post
featured image (but if no
featured image was set in
Wordpress, could be any
random image from the
post).
• Title is the post title
• Description is just the first
few lines (truncated) of the
post.
29. #SMX #22A1 @stonetemple
Topic Specific
Site Specific
Requires:
• Article, NewsArticle,
BlogPosting, or
VideoObject type
• image and logo
information
If no structured data, your
page will only show as a
blue link
AMP News Carousels
30. #SMX #22A1 @stonetemple
• Support Added: Nov 21,
2016
• Requires:
• Restaurant list
pages in AMP HTML
with ItemList markup
• Individual restaurant
pages with
Restaurant markup
Host-Specific
Lists For
Restaurants
34. #SMX #22A1 @stonetemple
• Global Trade Item Number (GTIN) is an identifier for trade
items
• Used to look up product information in a database
• Allows matching of a product in one database with the same
product in another database
Schema.org
Extension
Specific to
e-commerce
Adds “many
more detailed
properties”
What is GTIN?
41. #SMX #22A1 @stonetemple
“JavaScript Object Notation… is an open-standard file format that uses human-readable text to
transmit data objects consisting of attribute–value pairs and array data types ” (Wikipedia)
JSON-LD (Linked Data) uses JSON in a specific context to enable Linked Data, and is used by
schema.org as a way to encode Structured Data.
JSON and JSON-LD
{“menu”: {
“id”: “file”,
“value”: “File”,
“popup”: {
“menuitem”: [
{“value”: “New”, “onclick”: “CreateNewDoc()”},
{“value”: “Open”, “onclick”: “OpenDoc()”},
{“value”: “Close”, “onclick”: “CloseDoc()”},
]
}
}}
<script type=“application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “PostalAddress”,
“addressCountry”: “United States”,
“addressLocality”: “Mountain View”,
“addressRegion”: “CA”,
“name”: “Google Inc.”,
“postOfficeBoxNumber”: “1234”,
“postalCode”: “94043”
}
</script>
Sample JSON Sample JSON-LD, Including Script Tag
42. #SMX #22A1 @stonetemple
Structured Data encoded in JSON-LD is placed in a SCRIPT block in the document
HEAD.
• Separates the content from the document BODY.
JSON-LD Structured Data is not dependent on the HTML to be properly nested.
Improper nesting of Structured Data is a common mistake
Machines can read Structured Data content without parsing the entire document.
How is JSON-LD used for Structured Data?
43. #SMX #22A1 @stonetemple
• Microdata can be added to a document by placing attributes in the pertinent
HTML tags
• Familiarity with HTML is sufficient to implement Microdata
• JSON-LD requires some amount of understanding of JavaScript or at least JSON
More complex from a coding standpoint
• Structured Data content exists both in the BODY HTML and in the HEAD HTML
• Microdata turns the content in the BODY HTML into Structured Data
For most sites, JSON-LD requires duplicating data
What are the downsides of JSON-LD?
44. #SMX #22A1 @stonetemple
Eric Enge
eenge@stonetemple.com
@stonetemple
+Eric Enge
Thank
You!
Stone Temple Consulting
sales@stonetemple.com
@stc_corp
(508) 879-0995