Upload
acquia
View
541
Download
6
Embed Size (px)
Citation preview
FFWagency.com @FFWglobal
How to Optimize Your Drupal Site with Structured Content
Tuesday, December 13, 2016
> 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:[email protected]">[email protected]</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
ffwagency.com