Google Structured Data Tool don't read my React Site content

Question

I use this tool to test my structured data: https://search.google.com/structured-data/testing-tool

This is my page: https://www.offersprive.eu/it/prod/Black%20Latte/56

If I try to check it, the response is empty

...But if I copy-and-paste my html content, the tool read it correctly

What can I do to read the link content? Is that a problem with React content loading?

Thanks.

Answer 1

I'm having this same issue.

Basically I have a static website (job board) built with React and want the job to show in the Google Job Network.

To do this the web page needs to contain structured data for Google to crawl.

I've tried some npm packages like react-structured-data which does get the data to appear in the header, but the data gets injected AFTER Google runs the scan, so the data does not yet exist for Google and therefore is returning zero results.

I have the same issue when I try using react-helmet.

I have the same issue when I try to append a script with the data to either the header or body upon ComponentDidMount or ComponentWillMount.

It's weird that it shows in the header when I do inspect elements but doesn't show in the header when I view page source.

Maybe one solution is server-side rendering, but there must be another way.

Possible answer

according to this answer, the Google might actually see the data, its just the testing tool doesn't see the data, which is quite a pain in the butt.

https://webmasters.stackexchange.com/questions/91064/structured-data-tool-doesnt-see-javascript-rendered-content

Also, this page:

https://developers.google.com/search/docs/guides/intro-structured-data#structured-data-format

says: 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.

Another potential solution, but less plausible because it still loads after the fact

Instead of using JSON-LD, use microdata attached to your elements, like if you go here:

https://schema.org/JobPosting

and click example 4, microdata tab

Then perhaps it will know to wait for your elements to load before scanning.

Testing these solutions now. I will update probably tomorrow as I am logging off soon.

UPDATE: I FOUND THE ANSWER

I have tried the above and it appears that the data is valid and Google does see it, it's just Google's Structured Data tool (and also some structured data chrome extensions) don't not see the data. This is because such tools scan the page before the data is loaded in. Other tools, wait until the data is loaded before scanning, and on those tools, it works.

For example: If you inspect your web page and click on the HTML element, and click "edit as html" and copy the entire html of you page, and paste that HTML as code into Google Structured Data tool, you should see that it now finds your data. Hopefully they fix that in the future but for now, you can at least try that to make sure your data is valid.

Another thing is, if you go to the Google Search Console and request the URL in question to be indexed by Google, then wait a day or so for it to process, then check back in on it. You will see that the Google Search Console DID find your data. So Google IS seeing your data, e.g. search console. It's just the broken Structured Data Tool from Google that is not seeing your data. Hopefully it is fixed soon.

For the record, how I was able to get this to work on my React app is by putting my data inside of Component Did Mount. E.g.

`componentDidMount() {

const googleJobNetworkScript = document.createElement("script");
googleJobNetworkScript.type = "application/ld+json";
googleJobNetworkScript.innerHTML = JSON.stringify({
  "@context": "http://schema.org",
  "@type": "JobPosting",
  "baseSalary": "100000",
  "jobBenefits": "Medical, Life, Dental",
  "datePosted": "2011-10-31",
  "description": "Description: ABC Company Inc. seeks a full-time mid-level software engineer to develop in-house tools.",
  "educationRequirements": "Bachelor's Degree in Computer Science, Information Systems or related fields of study.",
  "employmentType": "Full-time",
  "experienceRequirements": "Minumum 3 years experience as a software engineer",
  "incentiveCompensation": "Performance-based annual bonus plan, project-completion bonuses",
  "industry": "Computer Software",
  "jobLocation": {
    "@type": "Place",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Kirkland",
      "addressRegion": "WA"
    }
  },
  "occupationalCategory": "15-1132.00 Software Developers, Application",
  "qualifications": "Ability to work in a team environment with members of varying skill levels. Highly motivated. Learns quickly.",
  "responsibilities": "Design and write specifications for tools for in-house customers Build tools according to specifications",
  "salaryCurrency": "USD",
  "skills": "Web application development using Java/J2EE Web application development using Python or familiarity with dynamic programming languages",
  "specialCommitments": "VeteranCommit",
  "title": "Software Engineer",
  "workHours": "40 hours per week"
});

document.head.appendChild(googleJobNetworkScript);

}`

You can also append the child to document.body instead of document.head. Either should work. Your choice.

You could also use react-helmet, or react-structured-data from NPM, which some other people do, but I didn't see the need, since the above seems to work fine.

You can find the other structured data types at schema.org

Remember to either submit a new site map to Google or submit your site to the Google indexing API each time you have a new webpage or webpage with updated content that you would like Google to scan.

This post is long but I hope it covered all the bases and I hope it helps.