规范链接未显示在页面源 react-helmet reactjs no ssr答案

【问题标题】：canonical link doesn't show on page-source react-helmet reactjs no ssr规范链接未显示在页面源 react-helmet reactjs no ssr
【发布时间】：2020-07-15 17:59:39
【问题描述】：

我在查看页面源上的规范 URL 时遇到问题，这是网络应用页面中的代码


const Index = () => {
  const airportsQuery = useQuery(ALL_AIRPORTS_QUERY, {
    variables: {
      keyword: '',
    },
    skip: true,
    notifyOnNetworkStatusChange: false,
  });

  let timer = null;
  function fetchOptions(inputValue, callback) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      const response = airportsQuery.refetch({ keyword: inputValue });

      response.then(
        ({ data }) => callback(data?.allAirports || []),
        ({ message }) => {
          console.error('Server Error:', message);
        }
      );
    }, 100);
  }

  return (
    <Layout>
      <Layout.Header />
      <Layout.Container width="full">
        <Helmet>
          <meta charSet="utf-8" />
          <title>eeeeee</title>
          <link rel="canonical" href="https://www.biletiniz.com/" />
        </Helmet>
        <HomePage
          fetchOptions={fetchOptions}
          onSubmit={variables =>
            Router.push(`/flight-offers?${qs.stringify(variables)}`)
          }
        />
      </Layout.Container>
      <Layout.Footer />
    </Layout>
  );
};

export async function getStaticProps() {
  const { default: lngDict = {} } = await import(
    `@biletiniz/intl/locales/tr.json`
  );
  return {
    props: { lng: 'tr', lngDict },
  };
}

export default withApollo({
  ssr: false,
})(Index);

当我检查页面源时，我找不到链接或标题我该如何解决？而且我们没有 SSR，如何在客户端渲染头盔

【问题讨论】：

标签： reactjs canonical-link react-helmet

【解决方案1】：

React 渲染使用 DOM。 DOM 通过 JavaScript 更改，随 HTML 源代码发送。但是，JS 只能改变 DOM（用户可以看到的），不能改变源代码本身。因此，您应该检查 DOM（所有主要浏览器中的 F12 或右键单击并检查）而不是页面的源代码。 现代爬虫如 Google Crawler 检查 DOM，而不是源代码，否则像 React 这样的单页应用程序无法理解其内容，因为一切都是通过 JS 呈现的。所以你可以完全保留你的代码。或者在 React 的静态 HTML 文件中进行更改。

【讨论】：

感谢您的回复，但我将我的网站网址添加到 link 并返回未提供规范网址但我可以在检查 DOM 时看到它
我就是这么解释的。这个 SEO 检查器不会像 Google 那样执行您的 JS。对于流行的搜索引擎，这应该不是问题。
您也可以将此 SEO 检查器用于 JS 页面。只需选择更多选项并选择抓取模式：Chrome（启用 JavaScript）但您还应该考虑 JS 的服务器端渲染。