How to Optimize Your Drupal Site with Structured Content

FFWagency.com @FFWglobal

How to Optimize Your Drupal Site with Structured Content

Tuesday, December 13, 2016

Dave SawyerSenior Solutions ArchitectFFWdave.sawyer@ffwagency.com

About me:

@cmsdave

cmsdave

FFWagency.com @FFWglobal

> Full-service digital agency> World’s largest Drupal agency> 450 employees worldwide> Portfolio includes Pfizer, NBC, Stanford University, City of Copenhagen, and General Electric

> http://ffwagency.com> https://www.drupal.org/ffw

About FFW

Agenda.Today 1. What is “Structured Content“?2. Benefits3. Structured Data Markup and Schema.org4. Drupal Implementation (D7 and D8)6. Recommended Tools7. Workflow and Auto-Tagging7. Social Sharing8. Why Drupal is the Best CMS for Structured Content

FFWagency.com @FFWglobal

Web of pages à Web of objects

Make data meaningful.

Image from: https://vimeo.com/36752317

Make data discoverable.

Image from: http://money.cnn.com/2015/07/28/technology/digital-assistant-interview/

Make data understandable.

Connect data to other data.

What is “Structured Content”?

Structured ContentContent that is separated into parts and enriched with meaning through taxonomy and machine readable metadata.

Structured ContentHighly organized and predictable.

Structured Content Optimization

Making content understandable to search engines and other systems through increased metadata and adherence to open data standards.

Benefits ofStructured Content

Structured Content is…

• Understandable

• Discoverable

• Engaging

• Adaptive

FFWagency.com @FFWglobal

• Reusable

• Sharable

• Translatable

• Consistent

Understandable(Machine-readable)

Structured content is understandable to search engines and other systems so that information can be presented to users in context.

DiscoverableStructured content is more discoverable to users and search engines alike.

EngagingOnce Google or other systems “understand” the data on your site, your data can be presented more attractively and in new ways.

AdaptiveStructured content can more easily be adapted to different platforms, formats, and devices.

ReusableStructured content can be repurposed according to the context of the channel or user.Efficiencies and cost savings can be achieved as more and more content components are reused.

Shareable

Content that enriched with metadata formats (such as OpenGraph) conveys more context and looks better in previews on social platforms.

Translatable

Content that has been broken out into fields and that is presented with semantic structure is easier to translate and maintain for a global audience.

Consistent

Content that has consistent structure can allow publishers to ensure accuracy and integrity.

Structured Data Markup

SEO and Rich Results

FFWagency.com @FFWglobal

Structured Data Markup• Structured data markup refers to a text-based

organization of data that is included in a file and served from the web.

• It describes things on the web, along with their properties.

• Uses the schema.org vocabulary

FFWagency.com @FFWglobal

Schema.org• An open community effort to promote standard

structured data in a variety of online applications

• Schema.org provides a vocabulary to describe things such as Products, Places, Persons, Organizations, Events, etc.

• Schema.org vocabulary can be used with several different encodings

FFWagency.com @FFWglobal

Schema.org Encodings• Microdata

• RDFa

• JSON-LD

FFWagency.com @FFWglobal

Microdata• Approach: exposing additional data directly within

HTML markup

• Uses HTML attributes itemscope and itemprop

• https://www.w3.org/TR/microdata/

FFWagency.com @FFWglobal

Simple Microdata Example<div itemscope itemtype="http://schema.org/Movie">

<h1 itemprop="name">Avatar</h1><span>Director: <span itemprop="director">James Cameron</span>(born August 16, 1954)</span><span itemprop="genre">Science fiction</span><a href="../movies/avatar-theatrical-trailer.html"

itemprop="trailer">Trailer</a></div>

FFWagency.com @FFWglobal

RDFa• Similar approach to Microdata: data embedded in

HTML markup

• Uses property and typeof attributes

• Default format for Drupal 7 and 8

• https://rdfa.info/

FFWagency.com @FFWglobal

Simple RDFa Example<div vocab="http://xmlns.com/foaf/0.1/" typeof="Person">

<p><span property="name">Dave Sawyer</span>,Email: <a property="mbox"

href="mailto:dave.sawyer@ffwagency.com">dave.sawyer@ffwagency.com</a>,Phone: <a property="phone" href="tel:+1-732-792-6566">+1 732-792-6566</a>

</p></div>

FFWagency.com @FFWglobal

JSON-LD• JavaScript Object Notation for Linked Data

• Uses JavaScript instead of HTML attributes

• Not as easy for humans to read but provides separation between layout and data structure.

• Google’s recommended format

• http://json-ld.org/

FFWagency.com @FFWglobal

Simple JSON-LD Example<script type="application/ld+json">{

"@context": "http://json-ld.org/contexts/person.jsonld","@id": "http://dbpedia.org/resource/John_Lennon","name": "John Lennon","born": "1940-10-09","spouse": http://dbpedia.org/resource/Cynthia_Lennon

}</script>

FFWagency.com @FFWglobal

Drupal Implementation

Structured Content with Drupal1. HTML Markup (Theme)

2. Metadata (Metatag Module)

3. Structured Data Markup (Schema.org)

4. Entity Structure (Content Types)

5. Taxonomy (Tagging)

6. Sitemap (XML Sitemap)

FFWagency.com @FFWglobal

Under the hood: RDF• Resource Description Framework

• W3C standard for data modeling and sharing

• Built-into Drupal 7 and 8

• Enables semantically enriched output for Drupal sites in the form of RDFa.

• Great video overview:The Semantic Web and Drupal by Lin Clarkhttps://www.youtube.com/watch?v=xcPf4PeF57Y

FFWagency.com @FFWglobal

High Level Approach1. Create a structured content type in Drupal

2. Identify which schema from schema.org is associated with your content type(e.g. Person, Event, Product, etc.)

3. Create a mapping of fields on your content type to properties from the schema(e.g. a Job Title field on a Person content type would map to the jobTitleproperty on the Person schema)

FFWagency.com @FFWglobal

Drupal 8Drupal 7

Drupal 7 module• Schema.org Module

• Enable the collections of schemas available at schema.org on your Drupal 7 site.

• https://www.drupal.org/project/schemaorg

FFWagency.com @FFWglobal

D7 Approach• Schema.org module adds a “Schema.org settings” panel to

the node edit form where you define the schema type. Autocomplete of types.

• Provides a UI to map fields on your content types to schema.org properties.

• Great video walk-through by Stephane Corlosquet!Using Schema.org in Drupal 7 and RDFa:https://vimeo.com/29821887

FFWagency.com @FFWglobal

Drupal 8• Schema.org

configuration tool(RDF UI) module

• Specify mappings between content types and fields with types and properties of Schema.org

• Mappings will be embedded in HTML as RDFa, to provide semantically rich data.

FFWagency.com @FFWglobal

https://www.drupal.org/project/rdfui

D8 Approach• Similar to D7 approach, provides a UI to map fields on your

content types to properties on a schema

• Also provides a simple way to create a new content type based on a schema.org schema.

• Helpful video walk-through by Sachini Herath:https://www.youtube.com/watch?v=l31MlxOCG-4

FFWagency.com @FFWglobal

Recommended Tools

Structured Data Testing Tool• Provides a variety of ways to develop, test, and modify your

structured markup.

• Prototype and make on-the-fly adjustments.

• https://search.google.com/structured-data/testing-tool

Reference: https://developers.google.com/search/docs/guides/prototype

FFWagency.com @FFWglobal

Structured Data Markup Helper• Shows you how to update your site so that Google and

other systems can understand the data it contains.

• https://www.google.com/webmasters/markup-helper/

Reference: https://support.google.com/webmasters/answer/3069489?topic=3070267

FFWagency.com @FFWglobal

Auto-Tagging

Auto-tagging with Drupal• Automatic tagging (or suggestion of

tagging) based on analyizingcontent and metadata

FFWagency.com @FFWglobal

Two types of auto-tagging• Third-party system that parses and analyzes the

content then returns structured content metadata such as categories (e.g. Thomson Reuters Open Calais™)

• CMS-driven: based on criteria within the CMS or content workflow, tags are automatically applied

FFWagency.com @FFWglobal

Auto-tagging:

Example Use Cases1. Combined criteria

• Different team members tagging content with different vocabularies• Auto-tagging applies when criteria is met across vocabularies or field values

2. Imported ContentTags are automatically applied when content is imported or ingested via feeds.

3. Workflow or Event-basedExample: When editor places a reference to content, a rule fires and tags the content as “featured”

4. Time-based

FFWagency.com @FFWglobal

Drupal 8Drupal 7

Drupal 7 Auto-Tagging• Many contrib modules for different approaches

• Comparison wiki page:https://groups.drupal.org/node/38290/

FFWagency.com @FFWglobal

Example Approach for D7 #1• Taxonomy Autotagger module

https://www.drupal.org/project/autotag• Allows a vocabulary to be searched against for suggestions of

terms related to the content of a node.

• Additional option is provided on a content type configuration page to specify which text fields should be searched for terms in specified vocabularies, and which field should then be populated with the results.

FFWagency.com @FFWglobal

Example Approach for D7 #2• Rules Autotag module

https://www.drupal.org/project/rules_autotag

• Light-weight approach for auto-tagging full-text content by matching taxonomy terms

• Extracts terms from a given text which match a given vocabulary

FFWagency.com @FFWglobal

Drupal 8 Auto-Tagging• Not many contrib options yet.

• D8 solution may require custom module(s)

FFWagency.com @FFWglobal

Example Approach for D8• Suggested Terms module

https://www.drupal.org/project/suggestedterms

• Provides "suggested terms" for free-tagging Taxonomy fields based on terms already submitted.

• Replaces the description field on free-tagging fields with a clickable list of previously entered terms.

FFWagency.com @FFWglobal

Use of multiple vocabularies• Best practice is to use multiple taxonomy

vocabularies to describe various aspects of the content

• What the content is about AND who it is intended for

• Public-facing tags – e.g. Topic tags

• Private/Internal tags – e.g. Audience/Persona tags

FFWagency.com @FFWglobal

Social Sharing

Social Sharing• Improve the social “shareability” of your content

through the use of Twitter Cards and OpenGraphtags

• Make your Drupal content look great when shared on social media

• Create a documented guidelines for your content contributors and editors

FFWagency.com @FFWglobal

OpenGraph Example<html prefix="og: http://ogp.me/ns#">

<head><title>The Rock (1996)</title><meta property="og:title" content="The Rock" /><meta property="og:type" content="video.movie" /><meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /><meta property="og:image" content="http://ia.media-

imdb.com/images/rock.jpg" />...</head>...</html>

FFWagency.com @FFWglobal

Twitter Card Metatags Example<html>

<head><title>Small Island Developing States Photo Submission</title><meta name="twitter:card" content="summary" /><meta name="twitter:site" content="@flickr" /><meta name="twitter:title" content="Small Island Developing States Photo

Submission" /><meta name="twitter:description" content="View the album on Flickr." /><meta name="twitter:image"

content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" /></head>

…

FFWagency.com @FFWglobal

Drupal Implementation (D7 and D8)• Metatag module

https://www.drupal.org/project/metatag

• Module provides access to numerous types of metatags

• For social optimization, enable and configure the use of Twitter Card tags and OpenGraph tags.

• Further reading from FFW blog:https://ffwagency.com/blog/integrating-twitter-cards-and-facebook-opengraph

FFWagency.com @FFWglobal

Twitter Card Validatorhttps://cards-dev.twitter.com/validator

Facebook Sharing Debuggerhttps://developers.facebook.com/tools/debug/

(Facebook login required)

Why Drupal is the best CMS for Structured Content1. Separation Structure and Presentation2. Excellent tools for managing fielded entites3. Powerful taxonomy and tagging4. Native RDF and contrib options for Schema.org5. Full-featured metatag controls

FFWagency.com @FFWglobal

Dave Sawyerdave.sawyer@ffwagency.com

@cmsdave

FFWagency.com @FFWglobal

ffwagency.com