vuejs3seoserver-side-renderinggoogle-rich-snippetsstructured-data

Structured data is not picked up in Google's rich result testing tool, but works in other tools


Dear SEO sages and fellow developers, I'm running into a weird problem when implementing structured data.

When validating the implementation using Google's rich testing tool, the script tag is empty (line 49). But, when using other tools (validator.schema.org, validator.w3.org, or using view-source:url), the JSON data is there and picked up correctly.

If it was just the rich testing tool, I would not be so concerned, but Google's Search Console is also not able to detect structured data on the pages.

To elaborate on the stack, we are building a Vue 3 application with server side rendering. The structured data is collected and rendered server side, for the crawlers to see. I would think that this would present the same output html to all bots, but it seems there's a discrepancy between the tools. I'm in the dark why Google's bot is not detecting the contents of the script tag.


Solution

  • While the HTML document has the correct schema embedded, when loaded in a browser the data disappears. Google has the capacity to run javascript and often emulates a full browser via Chromium when it's scraping. Other schema testers do not, they parse only the document. This is why some work, others don't.

    The culprit is probably a script that's overwriting it. I found this in your app.js:

     a301: function (e, t, a) {
        'use strict';
        var n = a('7a23'),
        s = {
          setup(e, {
            slots: t
          }) {
            return () =>Object(n['w']) ('script', {
              type: 'application/ld+json',
              innerHTML: t.default() [0].children
            })
          }
        };
        const o = s;
        t['a'] = o
      },
    

    Looks like it may be resetting the contents when it's run.