Search code examples
htmljsonjson-ldaccelerated-mobile-page

AMP JSON-LD dynamic content

I would like to keep the content of my JSON-LD script dynamic. However, AMP does not allow me to use Javascript and the script should be in the head.
Keeping the body's content dynamic is not a problem, because of amp-list.

<head>
    <script type="application/ld+json">
    { 
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "www.google.com"
    },
    "headline": "???"
    }
    </script>
</head>
<body>
    <amp-list layout="fixed-height" height="100vh" width="auto" src="www.google.com/json" class="m1">
          <template type="amp-mustache" id="amp-template-id">
                <p>{{title}}</p>
          </template>
    </amp-list>
</body>

The article's title can be accessed within the amp-list tag by using {{}}. I need this value in the json-ld in the head as the value for headline. Any suggestions on how to do this?

Solution

  • You could use Microdata instead of JSON-LD to markup your documents. This way the metadata would be inlined with your content and can be generated via amp-list:

    <amp-list layout="fixed-height" height="100vh" width="auto" src="www.google.com/json" class="m1">
  <template type="amp-mustache" id="amp-template-id">
    <h1 itemprop="headline">{{title}}</h1>
    <h2 itemprop="author" itemscope itemtype="https://schema.org/Person">
      <span itemprop="name">{{author}}</span>
    </h2>
    ...
  </template>
</amp-list>

    Here is a full Microdata sample.