How to Optimize Your Drupal Site with Structured Content
5 likes2,699 views
The document outlines the importance of structured content in optimizing Drupal sites, detailing its benefits such as enhanced discoverability and adaptability. It covers structured data markup, various formats like schema.org, and Drupal implementation for managing structured content. Additionally, it discusses auto-tagging options, social sharing enhancements, and reasons why Drupal is ideal for structured content management.
How to Optimize Your Drupal Site with Structured Content
- 1. FFWagency.com @FFWglobal How to Optimize Your Drupal Site with Structured Content Tuesday, December 13, 2016
- 2. Dave Sawyer Senior Solutions Architect FFW [email protected] About me: @cmsdave cmsdave FFWagency.com @FFWglobal
- 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. 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. Web of pages à Web of objects
- 6. Make data meaningful. Image from: https://vimeo.com/36752317
- 8. Image from: http://money.cnn.com/2015/07/28/technology/digital-assistant-interview/ Make data understandable.
- 9. Connect data to other data.
- 10. What is “Structured Content”?
- 11. Structured Content Content that is separated into parts and enriched with meaning through taxonomy and machine readable metadata.
- 12. Structured Content Highly organized and predictable.
- 13. Structured Content Optimization Making content understandable to search engines and other systems through increased metadata and adherence to open data standards.
- 15. Structured Content is… • Understandable • Discoverable • Engaging • Adaptive FFWagency.com @FFWglobal • Reusable • Sharable • Translatable • Consistent
- 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. Discoverable Structured content is more discoverable to users and search engines alike.
- 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. Adaptive Structured content can more easily be adapted to different platforms, formats, and devices.
- 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. Shareable Content that enriched with metadata formats (such as OpenGraph) conveys more context and looks better in previews on social platforms.
- 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. Consistent Content that has consistent structure can allow publishers to ensure accuracy and integrity.
- 25. SEO and Rich Results FFWagency.com @FFWglobal
- 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. 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. Schema.org Encodings • Microdata • RDFa • JSON-LD FFWagency.com @FFWglobal
- 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. 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. 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. 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
- 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. 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
- 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. 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. 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
- 40. Drupal 8Drupal 7
- 41. 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
- 42. 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
- 43. 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
- 44. 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
- 46. 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
- 49. 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
- 52. Auto-Tagging
- 53. Auto-tagging with Drupal • Automatic tagging (or suggestion of tagging) based on analyizing content and metadata FFWagency.com @FFWglobal
- 54. 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
- 55. 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
- 56. Drupal 8Drupal 7
- 57. Drupal 7 Auto-Tagging • Many contrib modules for different approaches • Comparison wiki page: https://groups.drupal.org/node/38290/ FFWagency.com @FFWglobal
- 58. 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
- 59. 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
- 60. Drupal 8 Auto-Tagging • Not many contrib options yet. • D8 solution may require custom module(s) FFWagency.com @FFWglobal
- 61. 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
- 62. 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
- 63. Social Sharing
- 64. 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
- 65. 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
- 66. 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
- 67. 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
- 71. Facebook Sharing Debugger https://developers.facebook.com/tools/debug/ (Facebook login required)
- 75. 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
- 77. ffwagency.com