Schema.org And Metadata in Drupal

27.02.2020

Schema.org metadata is one of the most important SEO optimisation issues. This is what the extensions of HTML documents that allow search engine robots to better understand the meaning of individual subpages of your website are being called. Handling the visitor's metadata in Drupal already since version 7. In this article, I will present different ways to implement them.

What do you need metadata for?

Modern search engines such as Google or Bing are no longer simple text indexing tools. They become more and more intelligent and read the page content with better and better results. They classify the content and show it in an interesting form. If you correctly tag the type of content and its basic parameters in the HTML code, it will open new SEO possibilities for you. As a professional Drupal agency that creates large websites, we attach great importance to SEO.

An example would be an event website. When you organise many events and put them on a website, Google reads the metadata contained in the list ("Event" content type, date, name, place, etc.) and presents them under the search result. In this way, you become more visible.

microdata-example-1

Metadata is also widely used in service and product reviews. Properly tagged ratings appear in the search engine in the form of stars, thanks to which they achieve a higher conversion rate:

microdata-example-2

Google currently supports a very limited set of metadata types. However, it can be expected that it will be expanded with new types of content in the future. It is a good idea then to add metadata just in case – to be one step ahead of the competition.

Metadata formats

Suppose you have the following HTML code on the page, welcoming a user named John. You would like to provide search engine robots with information about this user.

<p>Hi, I’m John.</p>

In order to do this, you will use the "Person" content-type defined by schema.org.

There are three main metadata formats, each with its own pros and cons. They are all supported by Google.

JSON-LD

This format is definitely the easiest to implement and it becomes more and more popular. It consists in adding a JSON object containing all metadata to the document (usually at the beginning) – in our example, it is the "Person" content type, which is – a person and their name, i.e. "John". This approach does not require tampering with the webpage's HTML code contained between the <p> tags, however, it is characterised by a substantial code redundancy. If you have metadata to provide, e.g. a longer description, you have to repeat it within the HTML code twice.

<script type="application/ld+json">
{
 "@context":"http://schema.org",
 "@type":"Person",
 "name":"John"
}
</script>

<p>Hi, I’m John.</p>

RDF

RDF offers a slightly different approach to content tagging. In order to avoid the redundancy characterising JSON-LD, you modify the already existing HTML code to indicate where the metadata occurs. In the example above, in accordance with the RDF specification, you find the HTML tag containing the "Person" content type and point where the person's name is located.

<p vocab="http://schema.org/" typeof="Person">
  Hi, I’m <span property="name">John</span>.
</p>

Microdata

Microdata is currently the most popular format, employing a principle similar to RDF. There is a good reason I put it at the end of this list, though. It is considered to be very limited. Despite its prevalence (it is estimated that about 75% of websites implementing metadata was using it in 2016), it is the least flexible of the specifications listed. This is why you will not find it in Drupal.

<p itemscope itemtype="http://schema.org/Person">
  Hi, I’m <span itemprop="name">John</span>.
</p>

Metadata in Drupal

Metadata implementation is possible in almost every tool used for website creation. All you need is access to templates containing the HTML tags of interest to you. In Drupal, the data is usually handled by two modules – one located in the RDF's core, and one created by the Schema.org Metatag community. I will briefly describe both of these solutions.

RDF module

The Drupal's built-in RDF module is used to map entity fields to the appropriate types of metadata. This mapping is carried out by using .yml files and is quite cumbersome – mainly due to the lack of official documentation and graphical interface. Let us assume that you have the "Event" content type, defining the name of the event (title), the location it will be held at (field_place), its date (field_date) and the ticket price (field_price). In order to tag the event page in accordance with the RDF standard, you create an rdf.mapping.node.event.yml configuration file and put it in the new foobar module in the config/install directory:

status: true
dependencies:
  config:
    - node.type.event
  module:
    - node
    - foobar
  enforced:
    module:
      - foobar
id: node.event
targetEntityType: node
bundle: event
types:
  - 'schema:Event'
fieldMappings:
  title:
    properties:
      - 'schema:name'
  field_date:
    properties:
      - 'schema:startDate'
  field_place:
    properties:
      - 'schema:location'
  field_price:
    properties:
      - 'schema:price'

Then you run the just created foobar module and look into the HTML code of the event website. There are already RDF tags within it.

<article role="article" about="/node/1" typeof="schema:Event">
  <div class="node__content clearfix">
    <div class="field__label">Place</div>
    <div property="schema:location" class="field__item">Wrocław</div>
    <div class="field__label">Date</div>
    <div class="field__item">
      <time datetime="2020-04-25T08:00:00Z" property="schema:startDate" class="datetime">Sat, 04/25/2020 - 08:00</time>
    </div>
    <div class="field__label">Price</div>
    <div property="schema:price" class="field__item">1000</div>
  </div>
</article>

Schema.org Metatag module

There is a much simpler and more straightforward method for implementing metadata, provided by the schema_metatag module, which is an extension of the popular Metatag project. It employs the JSON-LD format and allows adjusting the field mapping via a convenient admin panel. For our example concerning an event, it looks like this (after enabling the schema_event helper module):

microdata-module

Hints on the Google requirements are extremely useful here – they save a lot of time when you are optimising the website the final effect in the HTML code looks like this:

<script type="application/ld+json">{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "Event",
            "name": "DrupalCamp Poland",
            "startDate": "Sat, 04/25/2020 - 08:00",
            "location": {
                "@type": "Place",
                "name": "Wrocław"
            },
            "offers": {
                "@type": "Offer",
                "price": "1000"
            }
        }
    ]
}</script>

How to check the metadata correctness?

In order to ensure that your website is properly processed by search engine robots, you should check its code with Google's structured data testing tool. Errors in microdata implementation also appear in the Google Search Console.