Objective
There is no denying the importance of Structured Data in today’s world. From improved SEO, content rich search engine results to reducing crawler's indexing errors and future proofing, Structured Data is becoming more and more relevant everyday. This document will guide through a simple Implementation of Structured Data in JSON-LD format (developer's preferred choice and Google's recommended format).
Out of the Box Functionality
A typical Drupal installation comes with some basic structured data implementation, However It's in RDFa format which is pretty much outdated by now. Default data structure mapping is made possible by RDF module which is now available as a core module since version 8.x and onwards. To take advantage of core functionality simply enable the module from the Extend menu in Admin toolbar.
This module helps implement schema mapping for obvious content. For example, a schema type of "Article" is set on a Content type named “Article”. This is also true for “Events” and a few other content types. RDF module also helps map a few fields to their corresponding schema properties. Again this is true for obvious ones, for example, field Image usually maps to Image property, name, title, body and a few other generic fields are supported and mapped accurately.
A few drawbacks for implementing built-in schema mapping are that there could be a few errors in mapping on autopilot, especially for uncommon Content and Entities. Another shortcoming of RDF module is that it implements schema mapping in RDFa syntax, which is not the latest or most efficient mapping syntax, Therefore we will implement JSON-LD schema syntax for this example.
Documentation on Drupal’s RDF module
To edit/remove default implementation, use builtin hook_preprocess_HOOK() functions, for example: function rdf_preprocess_node(&$variables) to override default Schema implementation.
Implementing Basic JSON-LD Schema Mapping
Mapping Data
To implement Schema mapping using JSON-LD syntax, first step is to pick a Schema “type” for our content types in Drupal. A few considerations should be taken during this step as explained in Structured Data overview. For this we should visit Schema.org and after some consideration on requirement and fields, we will implement Blog type ON our Article Content-type. Next we mapped the required properties for Schema type with fields available on our content-type in a similar fashion.
Marking Up Data
One great thing about JSON-LD is that it can be implemented anywhere on a web page as long and it is contained within its designated tags <script type="application/ld+json"></script>. RDFa, Microdata and other outdated syntax require each property to be declared on its mapped HTML element which can span implementation across many templates.
This flexibility makes implementation much simpler. To collect field values to map with corresponding Schema properties, we can use Drupal's Hook_preprocess_node function as it would be an "entity level" division occurring once per Content-type instance. Next, simply declare a PHP associative array and start building such that array's “Keys” represent the Schema.org "Properties" and the "Value" is assigned the data or field value we mapped in the first step to the particular property.
See Example Below:
The only trick here is to match the structure of our PHP array with that of JSON Data as shown in examples without the script tags. Once the array is populated JSON Encode it and add it to the "Variables," so it's available to our Twig template.
Output Schema Mapping
Next we need to pick a region of the page to output our schema mappings. Again having chosen JSON-LD format proves use at this stage as well. * JSON-LD data is wrapped in script tags, so its not displayed on the page. * JSON-LD could be outputted anywhere on the page.
So pick any template to output the Schema Mappings JSON data, inside <script type='application/ld+json'> tags. Our JSON encoded PHP array variable could be outputted in TWIG, however it's important to use the "Raw" filter so useful data is not escaped by default TWIG behavior.
<script type="application/ld+json">
{{ schema_mapping_json|raw }}
</script>
And there we have it. We can test our Schema implementation buy Copy Pasting the Page's source code into Google's testing tool.
Build a Custom Drupal Site
Are you considering a partner in helping develop a custom Drupal website for your business? Contact us! We’re experts in delivering custom Drupal development for small businesses and large enterprises - and we’re eager to speak with you.
