如何根据 React APP 网站上的语言使元标记动态化？ [React 头盔 + i18next]

Question

我正在使用 React App（创建 React App）react-i18next 开发网站，React-Helmet。我在 https://freetools.seobility.net/ 上测试了我的网站，它告诉我我没有标题和描述的元标记，但是，我有。我可以在浏览器中看到这些标签，但 seoBot - 不能。其他搜索引擎机器人呢？

这是我的 index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

我的 JSON 文件的这一部分：

{
  "meta": {
    "title": "Frequently asked questions",
    "description": "Find answers to frequently asked questions",
  }
}

此代码：

const [translation] = useTranslation("assortment");

 return (
        <div className={styles.page}>
            <MetaTags
                title={translation('meta.title')}
                description={translation('meta.description')}
            />
)


//<MetaTags> file

return (
       <Helmet>
            <meta charSet="utf-8" />
            <title>{title}</title>
            <meta name="description" content={description}/>
            {noIndex && <meta name="robots" content="noindex" />}
        </Helmet>
    );

我是否应该担心 Googlebot 或其他搜索引擎漫游器不会完全加载我的页面并会看到我的元标记？我该怎么办？

Answer 1

您应该使用正确的抓取模式，以确保 Seobility SEO Checker 已启用 JavaScript 执行。

在这里您可以找到正确的设置：

如果您想确保 Google 和其他机器人在使用 JavaScript 呈现您的页面时没有问题，请考虑为机器人进行服务器端预呈现。

如何根据 React APP 网站上的语言使元标记动态化？ [React 头盔 + i18next]

How to make meta tags dynamic depending on the language on the site in React APP? [React Helmet + i18next]

seo

reactjs

react-i18next

react-helmet