Close
Do you want more articles like this delivered straight to your inbox?

Subscribe now to my e-mail newsletter and get my latest articles and project updates delivered directly to your inbox. Never miss an update.

How to combine structured data into one script tag

Published March 16, 2021; last updated on September 10, 2021
How to combine structured data into one script tag

Adding structured data to pages on this blog has really helped improve my rankings. But sometimes you want to combine two or more ‘blocks’ of schema markup in the same <script> tag. On this page, I’ll show you how to combine multiple structured data elements into one declaration.

What is the ‘classic’ way to add structured data to a page? A single declaration is added in a <script> tag with a type of ld+json. If you want to add multiple declarations, you’d just repeat the pattern with a new <script> tag for each item:

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      ...
    }
</script>

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      ...
    }
</script>

<!-- You'd need to repeat this pattern for each declaration.
Not very efficient... -->

How to combine multiple structured data into one script tag?

To do this, it turns out that we need to use a special JavaScript/JSON function, called @graph. The @graph function allows us to rewrite our whole code so that it neatly fits within one <script> tag. Let’s have a look. ✌️

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

{
  "@context": "http://schema.org",
  "@graph": [ 
   {
      "@type": "FAQPage",
       ...
   }, {
      "@type": "BreadcrumbList",
       ...
   }         //No comma after the last one!
]            //No comma here either!
}

</script>

<!-- Aaah... way better. -->

What @graph does, is that it enables us to provide each structured data block as an array. For each markup, add it inside the "@graph": [] declaration. Make sure for each markup to remove the @context declaration, as that one is already specified above.

Note: I would always recommend validating your structured data with the Rich Results Tester from Google. In this way, you’re certain that you’re not adding invalid markup to your website. I do not know whether you’re punished for invalid data on your webpage. If you do know whether or not this is the case, please let me know in the comments! 👇🙏

I always enjoy hearing from you, so if this has been useful or if you have a problem, let me know below!

Stay up to date with all things Laravel, Tailwind, WordPress & PHP

Subscribe now to my e-mail newsletter and get my latest articles and project updates delivered directly to your inbox. Never miss an update.

Image Ralph J. Smit
Ralph is a designer gone developer. He happily lives in the Netherlands. His passion for good design drove him towards development, because he felt that no-code tools were too limiting. On this blog, Ralph writes the articles he would've wanted to have during his continual developer journey. → Follow on Twitter

Comments

Leave a reply

Your email address will not be published. Required fields are marked *