What is Structured Data Markup?

Structured data markup is standardized data that websites can implement to provide information about the website. It can provide search engines with context clues about what the site is about, and what kind of information the current page contains. In this article, we will focus on implementing structured data markup using JSON-LD for use by Google’s search engine.

What is JSON-LD?

As the name implies, JSON-LD is a piece of data formatted as JSON to be used as structured data. The format and schema that can be used are defined at schema.org. For websites, JSON-LD should be added as a script tag with the type application/ld+json. A full snippet will look something like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "@id": "https://www.example.com/",
  "url": "https://www.example.com/",
  "name": "Example Website",
  ... 
}
</script>

For Google, the search engine will look through all of the schema on the webpage and determine what kind of content is there. If it finds certain schemas, Google may display the page in a special format in their search results called a rich result. Some common rich results are:

  • Article: used for article pages such as this page.
  • FAQ: a schema used for Frequently Asked Questions (FAQ)
  • Review: shows the review rating for a product, business, etc.

You can view all of the different rich result Google supports here: https://developers.google.com/search/docs/appearance/structured-data/search-gallery

Adding JSON-LD to Your WordPress Site

The most common way to add JSON-LD structured data markup to your WordPress site is by using plugins. Most SEO plugins such as Yoast SEO will automatically add them for you so no work is necessary besides configuration.

In this article, we will explore how we might go about implementing ourselves instead of using a plugin. We will assume we have a basic understanding of HTML, PHP, and how WordPress’s theme or plugin works to add our own custom code.

Step 1: Determine where and how we want to add our schema

According to Google, Google will parse any JSON-LD that is added within the <head> or <body>. For simplicity, let’s create a new “template” we will use to add our JSON-LD markup. We will call it schema.php and put it in our theme’s root:

schema.php

<script type="application/ld+json">
</script>

next, we will add this to our <head> . In WordPress, we can do this easily using the wp_head action and get_template_part() WordPress function. We will add these to functions.php:

functions.php

...
add_action('wp_head', function() {
  get_template_part('schema');
});
...

with this completed, we are ready to write our JSON-LD.

Step 2. Add JSON-LD markup to the template

At this point, if you would like you can just add the static JSON within the script tag and be done. But since every page is different, you may want to dynamically add the schema definitions. Below is an example of a dynamic WebPage schema utilizing WordPress’s functions:

schema.php

<?php 


// Store common calls

// Site's main url
$site_url = site_url();


// Check if we are on the frontpage as wp_title() will return blank if we are
$is_front_page = is_front_page();


// Site name, set in Settings - General
$site_name = get_bloginfo('name');


// Page Title. Use $site_name for frontpage
$site_title = $is_front_page ? $site_name : wp_title('&raquo;', FALSE);


// Site description, set in Settings - General
$site_description = get_bloginfo('description');

// Layout of schema as PHP Array
$global_schema = [
  '@context' => 'https://schema.org',
  '@graph'   => [
    [
      '@type' => 'WebPage',
      '@id'   => $site_url,
      'url'   => $site_url,
      'name'  => $site_title,
    ],
    [
      '@type' => 'WebSite',
      '@id' => $site_url . '#website',
      'url' => $site_url,
      'name' => $site_name,
      'description' => $site_description,
      'inLanguage' => 'en-US',
    ],
  ]
];

?>

<!-- json_encode() or PHP array so that it is displayed as JSON -->
<script type="application/ld+json"><?php echo json_encode($global_schema); ?></script>

and that’s it! From here, you can add your own schema you may want to define, add additional schema depending on page type or content, etc. I would recommend going through the Structured Data documentation on Google to get the best results.

Once you are done implementing, I recommend making sure that Google can see it and that it is valid. They provide a Rich Results Test tool that will scan your webpage for structured data markup, and will return results on whether it is valid, any warnings or recommendations, etc.

Google is always adding new Rich Result features, so always check back to their documentation to look for new features and opportunities.

Portions of this page are reproduced from work created and shared by Google and used according to terms described in the Creative Commons 4.0 Attribution License.
Source