Structured SEO Data:
An overview and how to for Drupal
Greg Monroe
SolarWind MSP
Drupal Camp Asheville 2019
The information here is my own and not the views of my employer
Why Use Structured Data?
Improved SEO results because it lets Search Engines understand
your content better
Enhanced display of your content in search results such as:
Site Information
Knowledge graphs
Product panels
Rich snippets
Use by aggregating sites
Better Social Sharing
Higher click thru rates and conversions
Site Information Example
Knowledge Graphs
Product Panels
Search: Samsung TabletsSearch: Best Pizza in Asheville
Rich Snippets / Social
How did they do these?
Search Engine magic sauce…
Social Graphing… who you are, where you are,
what you are/have search(ing/ed) for.
Context specific results pages
Use site specific structured data to find and build
the results.
Structured Data Definition
Web pages are often filled with free form text, which
is easy for humans to read but more difficult for
computers to understand.
Structured data formats are rules that standardize the
structure and content of a web page. They are
additional markup that lets computers more easily
process the text meaning or semantics.
Structured Data
A Fractured Fairy Tale History
In the beginning… HTML metadata definitions: title,
description, keywords
The Babel Period: RSS, RDF, RDFa, Open Graph,
vCard/hCard, hCalendar, FOAF, Twitter Cards, and
the like.
Unified Field Theory – Schema.org
Schema.org
Schema.org is a collaborative, community activity with a
mission to create, maintain, and promote schemas for
structured data on the Internet.
The Schema.org vocabulary can be used with many different
encodings, including RDFa, Microdata and JSON-LD.
These vocabularies cover entities, relationships between
entities and actions, and can easily be extended through a
well-documented extension model.
See: http://www.schema.org/
Schemas
Schemas are a set of 'types' or classes, e.g. Organization
These types are arranged in a hierarchy. E.g.
Organization is derived from Thing and has multiple
subtypes like EducationalOrganization, Corporation,
LocalBusiness, and more.
Each type has a set of properties, e.g. Organization has a
name property
Types inherit properties from the type above them.
Schemas Hierarchy Sample
Thing
CreativeWork Event Organization Person Place Product
Corporation EducationalOrganization GovernmentOrganization LocalBusiness MedicalOrganization
Dentist DiagnosticLab Hospital MedicalClinic Pharmacy Physician VeterinaryCare
Type Properties Sample
Has 112 properties
Each has an expected
type the property
takes.
Some properties can
reference other
types.
Embedding Schema Information
Three choice:
Microdata – Requires span tags and special attributes
to be embedded in HTML
RDFa – Similar to Microdata but requires different
attributes inside the HTML
JSON-LD – Google’s preferred method. Information is
added in JSON format in the HTML as script tags of
type application/ld+json
JSON-LD Example
<script type="application/ld+json">
{"@context": "https://schema.org",
"@graph": [{
"@type": "Organization", "additionalType": "Corporation",
"@id": "https://www.solarwindsmsp.com/#organization",
"sameAs": ["https://www.youtube.com/channel/UClnp77HHg4aME-S-3fWQhFw",
"https://twitter.com/solarwindsmsp", "https://www.facebook.com/SolarWindsMSP/"],
"name": "SolarWinds MSP UK Ltd.",
"url": "https://www.solarwindsmsp.com/",
"telephone": "+1 919-957-5099",
"logo": { "@type": "ImageObject", "url": "https://www.solarwindsmsp.com/msp-
logo.png",
"width": "649", "height": "256"},
"address": { "@type": "PostalAddress", "streetAddress": "3030 Slater Rd",
"addressLocality": "Morrisville", "addressRegion": "NC",
"postalCode": "27560", "addressCountry": "USA" }}]}
</script>
Linking Objects with
JSON-LD Node Identifiers
@type: Organization
@id: http://my.org/#org
@type: Website
@id: http://my.org/#web
Publisher: {
@type: Organization,
@id: http://my.org/#org
}
InLanguage: en
WorkTranslation: {
@id: http://my.org/de#web
}
@type: Website
@id: http://my.org/de#web
Publisher: {
@type: Organization,
@id: http://my.org/#org
}
InLanguage: de
TranslationOfWork: {
@id: http://my.org/#web
}
See: https://www.w3.org/TR/2014/REC-json-ld-20140116/#node-identifiers
Note: The @id URI can be anywhere on the web, they just have to match.
Quick Case Study: Duke Health
Home Page
Organization
WebSite
Doctor Pages
Physician
AggregateRating
Clinic Pages
MedicalClinic
Person
Hospital Pages
Hospital
Doctor Search
AggregateRating
Blog Articles
Og:title, og:type,
Og:description,
Og:url, og:image,
Og:site_name
Event Pages
Event
Place
Notes:
●
Uses microdata
embedding (ld-json
was too new at the
time)
●
Blended Drupal /
AngularJS site so
most info built into
Angular code and
templates.
Structured Data in Drupal
MetaTag module with Schema.org Metatag FTW!
(drupal.org/project/metatag & drupal.org/project/schema_metatag)
Supports all the major structured data standards,
including the a growing group of Schema.org types
Global defaults based on Tags per content type
Allows for individual pages to be customized
I18N Support
Views support
A Quick Setup Guide
Add and enable the MetaTag module to your site
Recommended Submodules to enable:
Metatag: Open Graph
Metatag: Views
Schema.org Metatag
Schema.org Website
Schema.org Organization
Any other Schema type you think you will need.
A Quick Setup Guide (cont)
Go to Admin → Configuration → Search and Metadata
→ Metatag
Adjust the global and entity defaults.
To allow individual entities to be managed:
Go to the entity’s Manage Fields page
(Structure→Content Types)
Add a new field using the Meta Tags type.
If you are using translations, select “User may translate
this field”
Setting up Default Settings
Setting Defaults
Blog Entry Social Settings
Node.field_featured_image.half_page:height
Simple Data Tagging.. all the Blog author
has to do is create the summary.
Quick Tags Aside
MetaTag Schema- Organization
Global Front Page Settings
MetaTag Schema – Org. (cont)
MetaTag Schema – Org. (cont)
Single Entity Tag Info
Views Metatags
Schema Validation
https://search.google.com/structured-data/testing-tool/u/0/
OG Validation
https://developers.facebook.com/tools/debug/
Some Things to Know
The Schema Metatags modules add a large number
of fields to the edit forms… only use what you need.
Translation linkage properties are only available in
the dev version (Issue #3034233)
Don’t overuse common types like Organization /
Website. These should be on a few pages like the
home page or “About” pages.
Adding data via Code
Use the hook:
page_attachments_alter()
Add your JSON encoded
information to the
$attachments parameter.
$attachments['#attached']['html_head']
['my_custom_schema'] = [
[
'#type' => 'html_tag',
'#tag' => "script",
'#value' => theme_build_schema_elements(),
'#attributes' => [
'type' => 'application/ld+json',
],
],
];
Drupal Camp Ashville 2018
Questions?
?And Thank You
Google: Slideshare CGMonroe Stuctured Data
Drupal.org/u/cgmonroe

Structured SEO Data: An overview and how to for Drupal

  • 1.
    Structured SEO Data: Anoverview and how to for Drupal Greg Monroe SolarWind MSP Drupal Camp Asheville 2019 The information here is my own and not the views of my employer
  • 2.
    Why Use StructuredData? Improved SEO results because it lets Search Engines understand your content better Enhanced display of your content in search results such as: Site Information Knowledge graphs Product panels Rich snippets Use by aggregating sites Better Social Sharing Higher click thru rates and conversions
  • 3.
  • 4.
  • 5.
    Product Panels Search: SamsungTabletsSearch: Best Pizza in Asheville
  • 6.
  • 7.
    How did theydo these? Search Engine magic sauce… Social Graphing… who you are, where you are, what you are/have search(ing/ed) for. Context specific results pages Use site specific structured data to find and build the results.
  • 8.
    Structured Data Definition Webpages are often filled with free form text, which is easy for humans to read but more difficult for computers to understand. Structured data formats are rules that standardize the structure and content of a web page. They are additional markup that lets computers more easily process the text meaning or semantics.
  • 9.
    Structured Data A FracturedFairy Tale History In the beginning… HTML metadata definitions: title, description, keywords The Babel Period: RSS, RDF, RDFa, Open Graph, vCard/hCard, hCalendar, FOAF, Twitter Cards, and the like. Unified Field Theory – Schema.org
  • 10.
    Schema.org Schema.org is acollaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet. The Schema.org vocabulary can be used with many different encodings, including RDFa, Microdata and JSON-LD. These vocabularies cover entities, relationships between entities and actions, and can easily be extended through a well-documented extension model. See: http://www.schema.org/
  • 11.
    Schemas Schemas are aset of 'types' or classes, e.g. Organization These types are arranged in a hierarchy. E.g. Organization is derived from Thing and has multiple subtypes like EducationalOrganization, Corporation, LocalBusiness, and more. Each type has a set of properties, e.g. Organization has a name property Types inherit properties from the type above them.
  • 12.
    Schemas Hierarchy Sample Thing CreativeWorkEvent Organization Person Place Product Corporation EducationalOrganization GovernmentOrganization LocalBusiness MedicalOrganization Dentist DiagnosticLab Hospital MedicalClinic Pharmacy Physician VeterinaryCare
  • 13.
    Type Properties Sample Has112 properties Each has an expected type the property takes. Some properties can reference other types.
  • 14.
    Embedding Schema Information Threechoice: Microdata – Requires span tags and special attributes to be embedded in HTML RDFa – Similar to Microdata but requires different attributes inside the HTML JSON-LD – Google’s preferred method. Information is added in JSON format in the HTML as script tags of type application/ld+json
  • 15.
    JSON-LD Example <script type="application/ld+json"> {"@context":"https://schema.org", "@graph": [{ "@type": "Organization", "additionalType": "Corporation", "@id": "https://www.solarwindsmsp.com/#organization", "sameAs": ["https://www.youtube.com/channel/UClnp77HHg4aME-S-3fWQhFw", "https://twitter.com/solarwindsmsp", "https://www.facebook.com/SolarWindsMSP/"], "name": "SolarWinds MSP UK Ltd.", "url": "https://www.solarwindsmsp.com/", "telephone": "+1 919-957-5099", "logo": { "@type": "ImageObject", "url": "https://www.solarwindsmsp.com/msp- logo.png", "width": "649", "height": "256"}, "address": { "@type": "PostalAddress", "streetAddress": "3030 Slater Rd", "addressLocality": "Morrisville", "addressRegion": "NC", "postalCode": "27560", "addressCountry": "USA" }}]} </script>
  • 16.
    Linking Objects with JSON-LDNode Identifiers @type: Organization @id: http://my.org/#org @type: Website @id: http://my.org/#web Publisher: { @type: Organization, @id: http://my.org/#org } InLanguage: en WorkTranslation: { @id: http://my.org/de#web } @type: Website @id: http://my.org/de#web Publisher: { @type: Organization, @id: http://my.org/#org } InLanguage: de TranslationOfWork: { @id: http://my.org/#web } See: https://www.w3.org/TR/2014/REC-json-ld-20140116/#node-identifiers Note: The @id URI can be anywhere on the web, they just have to match.
  • 17.
    Quick Case Study:Duke Health Home Page Organization WebSite Doctor Pages Physician AggregateRating Clinic Pages MedicalClinic Person Hospital Pages Hospital Doctor Search AggregateRating Blog Articles Og:title, og:type, Og:description, Og:url, og:image, Og:site_name Event Pages Event Place Notes: ● Uses microdata embedding (ld-json was too new at the time) ● Blended Drupal / AngularJS site so most info built into Angular code and templates.
  • 18.
    Structured Data inDrupal MetaTag module with Schema.org Metatag FTW! (drupal.org/project/metatag & drupal.org/project/schema_metatag) Supports all the major structured data standards, including the a growing group of Schema.org types Global defaults based on Tags per content type Allows for individual pages to be customized I18N Support Views support
  • 19.
    A Quick SetupGuide Add and enable the MetaTag module to your site Recommended Submodules to enable: Metatag: Open Graph Metatag: Views Schema.org Metatag Schema.org Website Schema.org Organization Any other Schema type you think you will need.
  • 20.
    A Quick SetupGuide (cont) Go to Admin → Configuration → Search and Metadata → Metatag Adjust the global and entity defaults. To allow individual entities to be managed: Go to the entity’s Manage Fields page (Structure→Content Types) Add a new field using the Meta Tags type. If you are using translations, select “User may translate this field”
  • 21.
  • 22.
  • 23.
    Blog Entry SocialSettings Node.field_featured_image.half_page:height Simple Data Tagging.. all the Blog author has to do is create the summary.
  • 24.
  • 25.
  • 26.
    MetaTag Schema –Org. (cont)
  • 27.
    MetaTag Schema –Org. (cont)
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
    Some Things toKnow The Schema Metatags modules add a large number of fields to the edit forms… only use what you need. Translation linkage properties are only available in the dev version (Issue #3034233) Don’t overuse common types like Organization / Website. These should be on a few pages like the home page or “About” pages.
  • 33.
    Adding data viaCode Use the hook: page_attachments_alter() Add your JSON encoded information to the $attachments parameter. $attachments['#attached']['html_head'] ['my_custom_schema'] = [ [ '#type' => 'html_tag', '#tag' => "script", '#value' => theme_build_schema_elements(), '#attributes' => [ 'type' => 'application/ld+json', ], ], ];
  • 34.
    Drupal Camp Ashville2018 Questions? ?And Thank You Google: Slideshare CGMonroe Stuctured Data Drupal.org/u/cgmonroe