Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to Optimize Your Drupal Site with Structured Content

1,221 views

Published on

<p>With the advent of real-time marketing technologies and design methodologies like atomic design, web pages are no longer just “pages” – they are collections of modular, dynamic data that can be rearranged according to the context of the user.</p>

<p>To provide optimized user experiences, marketers and publishers need to enrich websites with additional structure (taxonomy and metadata). By adding metadata, content becomes machine-understandable, which leads to better interoperability, SEO, and accessibility.</p>

<p>Structured content is also one of the foundations of real-time personalization; By tagging and describing content with metadata, personalization engines like Acquia Lift can provide more relevant content to individual users.</p>

<p>In this webinar, we will discuss:</p>
<ul>
<li>How to further enrich your Drupal website with structure</li>
<li>Taxonomy best practices for dynamic content and how to configure auto-tagging in your Drupal site</li>
<li>How to leverage Microdata and the schema.org vocabulary to improve SEO through rich results</li>
<li>How to improve the social shareability of your content through the use of Twitter Cards and OpenGraph tags</li>
<li>Why Drupal 8 is the best CMS platform for managing structured content</li>
</ul>

Published in: Technology

How to Optimize Your Drupal Site with Structured Content

  1. 1. FFWagency.com @FFWglobal How to Optimize Your Drupal Site with Structured Content Tuesday, December 13, 2016
  2. 2. Dave Sawyer Senior Solutions Architect FFW dave.sawyer@ffwagency.com About me: @cmsdave cmsdave FFWagency.com @FFWglobal
  3. 3. > 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
  4. 4. Agenda.Today 1. What is “Structured Content“? 2. Benefits 3. Structured Data Markup and Schema.org 4. Drupal Implementation (D7 and D8) 6. Recommended Tools 7. Workflow and Auto-Tagging 7. Social Sharing 8. Why Drupal is the Best CMS for Structured Content FFWagency.com @FFWglobal
  5. 5. Web of pages à Web of objects
  6. 6. Make data meaningful. Image from: https://vimeo.com/36752317
  7. 7. Make data discoverable.
  8. 8. Image from: http://money.cnn.com/2015/07/28/technology/digital-assistant-interview/ Make data understandable.
  9. 9. Connect data to other data.
  10. 10. What is “Structured Content”?
  11. 11. Structured Content Content that is separated into parts and enriched with meaning through taxonomy and machine readable metadata.
  12. 12. Structured Content Highly organized and predictable.
  13. 13. Structured Content Optimization Making content understandable to search engines and other systems through increased metadata and adherence to open data standards.
  14. 14. Benefits of Structured Content
  15. 15. Structured Content is… • Understandable • Discoverable • Engaging • Adaptive FFWagency.com @FFWglobal • Reusable • Sharable • Translatable • Consistent
  16. 16. Understandable (Machine-readable) Structured content is understandable to search engines and other systems so that information can be presented to users in context.
  17. 17. Discoverable Structured content is more discoverable to users and search engines alike.
  18. 18. Engaging Once Google or other systems “understand” the data on your site, your data can be presented more attractively and in new ways.
  19. 19. Adaptive Structured content can more easily be adapted to different platforms, formats, and devices.
  20. 20. Reusable Structured 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.
  21. 21. Shareable Content that enriched with metadata formats (such as OpenGraph) conveys more context and looks better in previews on social platforms.
  22. 22. 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.
  23. 23. Consistent Content that has consistent structure can allow publishers to ensure accuracy and integrity.
  24. 24. Structured Data Markup
  25. 25. SEO and Rich Results FFWagency.com @FFWglobal
  26. 26. 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
  27. 27. 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
  28. 28. Schema.org Encodings • Microdata • RDFa • JSON-LD FFWagency.com @FFWglobal
  29. 29. Microdata • Approach: exposing additional data directly within HTML markup • Uses HTML attributes itemscope and itemprop • https://www.w3.org/TR/microdata/ FFWagency.com @FFWglobal
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. Drupal Implementation
  36. 36. Structured Content with Drupal 1. 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
  37. 37. 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 Clark https://www.youtube.com/watch?v=xcPf4PeF57Y FFWagency.com @FFWglobal
  38. 38. High Level Approach 1. 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 jobTitle property on the Person schema) FFWagency.com @FFWglobal
  39. 39. Drupal 8Drupal 7
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. Recommended Tools
  45. 45. 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
  46. 46. 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
  47. 47. Auto-Tagging
  48. 48. Auto-tagging with Drupal • Automatic tagging (or suggestion of tagging) based on analyizing content and metadata FFWagency.com @FFWglobal
  49. 49. 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
  50. 50. Auto-tagging: Example Use Cases 1. Combined criteria • Different team members tagging content with different vocabularies • Auto-tagging applies when criteria is met across vocabularies or field values 2. Imported Content Tags are automatically applied when content is imported or ingested via feeds. 3. Workflow or Event-based Example: When editor places a reference to content, a rule fires and tags the content as “featured” 4. Time-based FFWagency.com @FFWglobal
  51. 51. Drupal 8Drupal 7
  52. 52. Drupal 7 Auto-Tagging • Many contrib modules for different approaches • Comparison wiki page: https://groups.drupal.org/node/38290/ FFWagency.com @FFWglobal
  53. 53. 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
  54. 54. 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
  55. 55. Drupal 8 Auto-Tagging • Not many contrib options yet. • D8 solution may require custom module(s) FFWagency.com @FFWglobal
  56. 56. 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
  57. 57. 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
  58. 58. Social Sharing
  59. 59. Social Sharing • Improve the social “shareability” of your content through the use of Twitter Cards and OpenGraph tags • Make your Drupal content look great when shared on social media • Create a documented guidelines for your content contributors and editors FFWagency.com @FFWglobal
  60. 60. 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
  61. 61. 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
  62. 62. 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
  63. 63. Twitter Card Validator https://cards-dev.twitter.com/validator
  64. 64. Facebook Sharing Debugger https://developers.facebook.com/tools/debug/ (Facebook login required)
  65. 65. Why Drupal is the best CMS for Structured Content 1. Separation Structure and Presentation 2. Excellent tools for managing fielded entites 3. Powerful taxonomy and tagging 4. Native RDF and contrib options for Schema.org 5. Full-featured metatag controls FFWagency.com @FFWglobal
  66. 66. Dave Sawyer dave.sawyer@ffwagency.com @cmsdave FFWagency.com @FFWglobal
  67. 67. ffwagency.com

×