只需一分钟即可修复，让您的 React 网站更加 Google 友好 🤝

只要我们生活在谷歌时代，SEO（搜索引擎优化）就依然重要。许多 React 应用都是以 SPA（单页应用）的形式编写的，对谷歌来说并不友好，因为谷歌需要付出额外的努力来渲染和抓取前端 JavaScript。

以下是我的业余项目getd.io最初上线时Google 收录的示例。你可以看到，网站描述只是从我网站的 JS 代码中抓取的一些随机单词：

顺便提一下，我得夸一下：getd.io是一个免费的在线 API 构建器，我用 Postman 的方式创建，没有使用原生应用。不妨试试，然后告诉我你的想法。你也可以在这篇文章中阅读更多内容。

理想情况下，我们可以使用 SSR（服务器端渲染）来帮助 Google 获取完全渲染的静态页面，但 SSR 比较棘手，而且没人有时间去做这件事😅

为了快速解决这个问题，我使用react-helmet为getd.io添加META标签。然后，我前往Google Search Console并请求重新索引。之后，搜索结果看起来好多了：

我的代码如下：

const seo = {
  title: "getd.io/",
  description:
    "A free, online API builder that works with CORS. A Postman alternative without the need for client app installation.",
  url: "https://getd.io/",
  image: "https://getd.io/image.png"
};

<Helmet
  title={seo.title}
  meta={[
    {
      name: "description",
      property: "og:description",
      content: seo.description
    },
    { property: "og:title", content: seo.title },
    { property: "og:url", content: seo.url },
    { property: "og:image", content: seo.image },
    { property: "og:image:type", content: "image/png" },
    { property: "twitter:image:src", content: seo.image },
    { property: "twitter:title", content: seo.title },
    { property: "twitter:description", content: seo.description }
  ]}
/>

您可以将<Helmet>组件放置在 React 树中的任何位置，它们将被正确移动到<head>：

鏂囩珷鏉簮锛�https://dev.to/getd/a-one-minute-fix-to-make-your-react-site-just-a-bit-more-google-friendly-3g4d