Amphtml: Dynamically attaching JSON-LD ?

[nebuso]

Hi!

After implementing amp-list+ templates, amp-analytics + external config, ... ,
inline JSON-LD is about 30% of the entire page code.
Semantics is not needed to properly display the page (mostly).

Google supports dynamically attaching JSON-LD via JavaScript.

I would like to attach a JSON-LD from an external file to a web page, as it is for example in amp-analytics.

<amp-semantic src = "/semantic-markup.json" />

For example. Simplest website with minimal semantic markup
https://github.com/ampproject/amphtml/blob/master/examples/metadata-examples/article-json-ld.amp.html

with JSON-LD: ~ 6.6KB
without : ~ 4.7KB
diff: ~ 1.9KB (28%)
_~ 28% of bandwidth / cache / CDN space_

According to Google documentation, they only support JSON-LD in script tags or inserted via Javascript not via link
<link rel="alternate" href="/semantic-markup.json" type="application/ld+json">

Is any chance to add <amp-semantic src = "/semantic-markup.json" /> or other way to put JSON-LD outside the html code?

Thanx!

[jridgewell]

/to @rudygalfi and @ericlindley-g.

[honeybadgerdontcare]

FYI, I implemented some optimizations for documents served from AMP Cache (cdn.ampproject.org) and one of those is the removal of <script src="application/ld+json">...</script> from documents. If this is problematic for properly displaying pages please let me know.

To see an example of this, the one mentioned (article-json-ld.amp.html) has that script tag removed when served from the AMP Cache.

[nebuso]

:-) ok, you modifed copy on CDN.

When AMP is served from main server still have +30℅ more code :-)

[Gregable]

Yes. It wasn't directly addressing your concern, but it does help in the common case of the document being served from the AMP Cache.

[ericlindley-g]

@nebuso This strikes me as a reasonable way to reduce the payload, and seems like it would be compatible with the way consumers of JSON-LD currently ingest this data (though I'd want to confirm).

/cc @dvoytenko for thoughts

[jaygray0919]

We're not in favor of this for reasons described in https://github.com/ampproject/amphtml/issues/4071#issuecomment-264347786. We are asking for amp-search of strings in JSON-LD registered on many amp-pages. In practice the amp-search would support a user on our site/domain who looks for content on site-amp-pages. We would like to present search results for all relevant pages from which the user can select. If a user found one of our pages via AMP Cache, they would find a matching string only on the single page. For these reasons we hope that <script src="application/ld+json">...</script> is not removed from AMP cache.

[ireinhart]

Any news at this topic?
We have the same issue, that the ld+json part of our page has some relevant kb.
Is there an amp extension to load the ld-json part dynamic?

[jridgewell]

I believe @choumx is doing work on this.

[choumx]

As of #16782, you can now render <script type="application/ld+json"> in an <amp-list> by using amp-mustache-0.2.js. Does that resolve your use case?

[ireinhart]

Thanks for the hint :-)
I think we test it, sounds good - but need some time for that.

[jaygray0919]

@choumx WRT amp-mustache-0.2, a JSON-LD structure is different than the base structure specified by amp-list (i.e. {"items": []}). As you know JSON-LD uses @type to specify the meaning of a key. JSON-LD also declares a vocabulary and may specify a graph (@graph).

How do we specify items= when the amp-list is JSON-LD?
In the vernacular, how to walk a JSON-LD tree and use amp-mustache to select a value for a specific key?

[jaygray0919]

IMHO @nebuso this technique will not inject JSON-LD into the DOM: <link rel="alternate" href="/semantic-markup.json" type="application/ld+json">

That statement will link to a specific JSON-LD file, but it will not enable that file to be parsed by either Google Structure Data Testing Tool or read by any other crawler/harvester (e.g Bing).

The JSON-LD must be inline for an AMP or non-AMP document using the statement <script src="application/ld+json">...</script>.

[nebuso]

@jaygray0919
"According to Google documentation, they only support JSON-LD in script tags
or
inserted via Javascript
NOT via link..."

You can insert json-ld via tag manager or JavaScript... it's only ~5 sec timeout on crawler
so it is place to optimization for AMP HTML code.

[jaygray0919]

@nebuso I agree "NOT via link" for Google (and Bing) processing. However, if you use link in <head> it MAY be parsed by tools such as the W3C RDFa validator.

Would you direct me to documentation that explains how to inject JSON-LD into the DOM such that it will be parsed/processed/understood by a harvester (from Google, Bing, etc)?
That implies that, when site is crawled, the crawler knows to connect and read the external JSON-LD file in addition to the HTML page that injects the JSON-LD into the DOM at runtime.

[nebuso]

@choumx
_" <script type="application/ld+json"> in an <amp-list> by using amp-mustache "_
if I understood correctly

1. i need to create html template for mustache in <head>
2. fill template with downloaded data
   it should slim down :-)
   I would be grateful for any hint how to keep jsonld out of AMP code.

---

@jaygray0919
How spiders indexing JavaScript
https://www.elephate.com/blog/javascript-seo-experiment/

How to insert JSON-LD with GTM in regular HTML
https://moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags
or
https://www.youtube.com/watch?v=i8P-B5aa5E0

How to insert with JavaScript / jQuery / …

1. download json file
2. create "script" element "type" application/json-ld
3. fill with data from 1)
   4) attach to <head>

Working example:
http://trevorfox.com/schema-test.html

It would be nice if it was possible to place json-ld outside of AMP html :-)
because it does not encourage the create extensive semantics.
Simplest example from first post ~30% overhead (json ld is not needed when rendering a page and mostly json-ld is not for humans).
We change gzip -> brotli because we save ~7% ;-)

[jaygray0919]

@nebuso OK, i better understand what you are doing. From my perspective, the GSDTT is executing the Javascript and injecting the JSON-LD. However, a web crawler will not do that IMHO. The crawler will read the non-injected DOM on your server and will not "see" the JSON-LD. There might be a way to test. Use the Google search console to identify the @type on the page. Then use Google Search for that specific page to see if specific JSON-LD values are presented in Google Search. I plan to conduct a similar test on my data.

[choumx]

Closing since this is now possible per https://github.com/ampproject/amphtml/issues/6229#issuecomment-408954289.