谷歌结构化数据工具不读取我的 React 站点内容

说： 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.

另一个潜在的解决方案，但不太合理，因为它在事后仍然加载

不要使用 JSON-LD，而是使用附加到元素的微数据，就像你去这里一样：

https://schema.org/JobPosting

然后单击示例 4，微数据选项卡

然后它可能会知道在扫描之前等待您的元素加载。

现在测试这些解决方案。我可能会在明天更新，因为我很快就要注销了。

更新：我找到了答案

我已经尝试了上述方法，看来数据是有效的，而且 Google确实看到了它，只是 Google 的结构化数据工具（以及一些结构化数据 chrome 扩展）看不到数据。这是因为这样的工具在数据加载之前扫描页面。其他工具，等待数据加载之前扫描，并且在这些工具上，它起作用。

例如：如果您检查您的网页并单击 HTML 元素，然后单击“编辑为 html”并复制您页面的整个 html，并将该 HTML 作为代码粘贴到 Google 结构化数据工具中，您现在应该看到它找到您的数据。希望他们将来能解决这个问题，但就目前而言，您至少可以尝试一下以确保您的数据有效。

另一件事是，如果您转到 Google Search Console 并请求将相关网址编入 Google 索引，请等待一天左右的时间以进行处理，然后再重新查看。您将看到 Google Search Console 确实找到了您的数据。所以谷歌正在查看您的数据，例如搜索控制台。只是谷歌损坏的结构化数据工具没有看到您的数据。希望它尽快修复。

作为记录，我如何能够在我的 React 应用程序上使用它是通过将我的数据放在 Component Did Mount 中。例如

`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);

Run Code Online (Sandbox Code Playgroud)

}`

您还可以将子项附加到 document.body 而不是 document.head。要么应该工作。你的选择。

您也可以使用来自 NPM 的 react-helmet 或 react-structured-data，其他人也这样做，但我认为没有必要，因为以上似乎工作正常。

您可以在 schema.org 上找到其他结构化数据类型

请记住，每次您有新网页或包含更新内容的网页并希望 Google 扫描时，请向 Google 提交新的站点地图或将您的站点提交到 Google 索引 API。

这篇文章很长，但我希望它涵盖了所有的基础，我希望它有所帮助。

归档时间：	6 年前
查看次数：	1788 次
最近记录：	5 年，11 月前