angularseosingle-page-applicationgooglebot

Structured data tag generation not viewable by Googlebot on Angular SPA app


When live testing a URL on Google Search Console, Googlebot can render a page but my structured data is missing. It is generated in JS via:

insertStructuredData(genDataFn: Function): void {
    this.removeStructuredDataElement();

    let script = this.getStructuredDataElement();
    if (!script) {
      script = document.createElement('script');
      script.type = 'application/ld+json';
      script.id = STRUCTURED_DATA_TAG_ID;
      document.head.appendChild(script);
    }

    safeScriptEl.setTextContent(script, scriptFromJson(genDataFn()));
  }

When I view the page myself it shows up just fine:

<script type="application/ld+json" id="structuredDataScriptTagId" nonce="abcdefg">...</script>

But when I view the HTML that Googlebot see on the Live test, this tag is missing from the page. Is this purely a latency issue or could there be anything else impacting this tag's visibility to Googlebot?


Solution

  • There are a few things that you can check:

    1. Make sure your json-ld object is valid and doesn't contain errors. You can use the Rich Results Test tool to validate your implementation.
    2. Review the lighthouse report on your website, and make sure that your page is loading on a reasonable time and the json-ld is being included as soon as possible in the DOM when the page loads.
    3. Google Doesn’t Read Unsupported Structured Data, so make sure the structured data object you are using is supported by Google, take a look to the Search Gallery here.

    That's basically al you can do, but even then, Google will decide whether to use or not the data defined on your structured-data objects; as they have stated on the official documentation The actual appearance in search results might be different