Structured data

How To Improve Website With Structured Data?

How you can use structured data to make your website stand out more in Google search and how that can be done with JavaScript when a static implementation isn’t feasible. We will start by looking at –

  • What structure data is?
  • Why it is a good idea for your website.
  • Ways to implement it using JavaScript.
  • How to test and debug your implementation.

What is structured data and Why is it useful?

Structured data is a standardized set of additional markup that you can put on your pages to tell machines, like Googlebot, more about the content on your page. When you search for a product on Google you can see the information for a specific product being highlighted in both the image search as well as the search results, including additional information like ratings and price. Google calls such results rich results.

<script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M"
    }
    </script>

To implement structured data, you can use JSON-LD, Microdata, or RDF8, but Google recommends using JSON-LD. Here is an example of what a JSON-LD block on your page might look like. Besides products, there are many verticals that can benefit from structured data and become eligible for rich results. You should check the link at the end of the post for the full gallery of supported verticals.

Note that implementing structured data makes it page eligible for rich results, but does not mean that Google will always show them for every page that implements it.

Possible implementations

Vanilla Javascript

The easiest way is to include a script tag with the JSON-LD data in the page. This can, of course, be done in the back end or straight in the HTML of a page. But what are the options if you are using client-side rendered JavaScript? First of all, it is fine to implement it dynamically with client-side JavaScript. Google recommends to use server-side rendering to make your website as robust as possible, but there is no issue with implementing it with JavaScript per se.

Framework Helpers

When you are using frameworks such as React, Angular, or Vue.js, you’ll very likely have helpers or built-in functionality available to insert structured data into your pages.

Google Tag Manager

You may use a custom tag and custom variables to create structured data from the information that is on the page. To do that, create a custom HTML tag in your container and insert the relevant JSON-LD as well as the variables for the values of each field of the JSON-LD block. Then create the necessary custom JavaScript variables to extract information from the page, so it can be inserted into the custom HTML tag automatically.

Google advises not to copy and paste information from the page directly into Google Tag Manager. As that will likely cause a mismatch between page content and structure data generated by Google Tag Manager to arise in the future.

Testing

There are two main tools for testing the implementations. The first one is the rich results test. You can paste a URL into the tool and see what structured data is recognized. As well as if there are any issues with the structured data on the page. When using JavaScript to generate structured data, we recommend testing a URL instead of pasting code directly into the tool.

The other great tool for testing this is the Google Search Console. In the URL inspection tool, you can see the structure data that is detected and if it is valid. But you can also see which pages of your site were eligible for rich results. And which ones have arrows or warnings to look into.

If you want to learn more about Google search and structured data. Check out the documentation at developers.google.com/search on how to use JavaScript to generate structured data for your pages.

Verticals – https://developers.google.com/search/docs/guides/search-gallery
Google Tag Manager – https://tagmanager.google.com/