Linking external JSON-LD schema (from Schema.org)

Question

I have a schema in JSON-LD as per Schema.org. When it was inline (within <script> tags), the Google structured data testing tool recognised the schema successfully.

If I link it externally, the structured data testing tool doesn't recognise it. For example:

<script src="json/main-schema.json" type="application/ld+json"></script>

Is this something I should be worried about?

---

How I had the working schema (example from Schema.org):

<script type="application/ld+json">
{ "@context" : "http://schema.org",
  "@type" : "Organization",
  "url" : "http://www.your-company-site.com",
  "contactPoint" : [
    { "@type" : "ContactPoint",
      "telephone" : "[phone]",
  "contactType" : "customer service"
    } ] }
</script>

External schema layed out in main-schema.json, linked with:

<script src="json/main-schema.json" type="application/ld+json"></script>

{ "@context" : "http://schema.org",
  "@type" : "Organization",
  "url" : "http://www.your-company-site.com",
  "contactPoint" : [
    { "@type" : "ContactPoint",
      "telephone" : "[phone]",
  "contactType" : "customer service"
    } ] }

Solution 1

The script element can be used for two things:

• dynamic/classic scripts
• data

And for data, the spec defines:

When used to include data blocks, the data must be embedded inline […]

So you may use the src attribute only for scripts, not for data.

→ As JSON-LD is data, you have to inline it.

While linking a JSON-LD file is possible with the link element, the Schema.org sponsoring search engines don’t seem to support it.

Solution 2

According to the documentation:

[…] Also, Google can read JSON-LD data when it is dynamically injected into the page's contents, such as by JavaScript code or embedded widgets in your content management system.

Which suggests that, while yo cannot link external json-ld data, you can still load it dynamically and inject it to the DOM. This might be good enough for your use case, as you can load static JavaScript on your page that will then inject the JSON-LD into the DOM.

Solution 3

This may, or may not help, but take a look at how Trevor Fox did it:

<script>

$.getJSON( "/your-schema-file.jsonld", function( data ) {
$( "<script/>", {
"type": "application/ld+json",
"html": JSON.stringify(data)
}).appendTo( "head" );
});

</script>

This may be your best option. He used jQuery version 3.1.1 for this solution.

Solution 4

unor’s answer sums it up, but I also want to add:

From the spec:

Setting the [type] attribute to any other value [other than a JavaScript MIME type] means that the script is a data block, which is not processed. None of the <script> attributes (except type itself) have any effect on data blocks. Authors must use a valid MIME type that is not a JavaScript MIME type to denote data blocks.

So, in other words, if you have a <script> with a type attribute set to anything other than text/javascript (or an equivalent JavaScript MIME type), then all attributes, including src, will have no effect.

View more solutions

Comments

[Simon Hayter]

Have you tried using an absolute URL rather than a relative one? While I don't know the answer to this, a quick work-around if you want the data being in a external file is simply to put the contents within a php file...then you just call the file in the footer using <?php include 'json.php';?>, just a suggestion mind.

[Simon Hayter]

@Unor said here stackoverflow.com/a/30880613/1892635 you need to use <link> not <script> since src="" is not valid. But Google only supports script... so looks like it has to be inline.

[marcellothearcane]

@SimonHayter - yeah, it normally is, I removed it for the example. Thanks for the other link - sorry I didn't see it!

[Karambir Singh Khalsa]

I highly recommend using Google Tag Manager to meet this requirement. After futzing around for more than an hour testing out the various scenarios described here and elsewhere, I resolved the issue in about 15 minutes using a pageview trigger and HTML markup tag. Easy-peasy.