Next/head 中的 NextJs 元标记对 Facebook 和 metatags.io 不可用答案

【问题标题】：NextJs meta tag in next/head not available to Facebook and metatags.ioNext/head 中的 NextJs 元标记对 Facebook 和 metatags.io 不可用
【发布时间】：2021-12-05 21:21:41
【问题描述】：

我创建了一个组件 SeoHeader 来处理 NextJs 项目中元标记的创建

import React from 'react';
import Head from 'next/head';
import { useRouter } from 'next/dist/client/router';

const SeoHeader = ({ title, description, image }) => {
  const router = useRouter();
  return (
    <Head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta charSet="utf-8" />

      <meta name="description" content={description} key="description" />

      <meta property="og:type" content="website" />
      <meta property="og:title" content={title} key="og:title" />
      <meta property="og:description" content={description} key="og:description" />
      <meta property="og:image" content={image} key="og:image" />
      <meta property="og:url" content={`https://www.energici.fr${router?.asPath}`} key="og:url" />
      <meta name="twitter:card" content={description} key="twitter:card" />

      <meta property="og:site_name" content="Energici, l'info bien être" key="og:site_name" />

      <meta
        property="twitter:url"
        content={`https://www.energici.fr${router?.asPath}`}
        key="twitter:url"
      />
      <meta
        name="twitter:image:alt"
        content="Energici la plateforme du bien être"
        key="twitter:image:alt"
      />
      <meta property="twitter:domain" content="energici.fr" />

      <title>{title}</title>
    </Head>
  );
};

export default SeoHeader;

如果我在 _app.js 上导入这个组件，一切都会顺利。我可以在 html dom 中看到元标记，如果我共享链接预览卡就可以了。但如果我分享另一页，例如这个：https://www.energici.fr/decouvrons-la-kinesiologie 我可以在 html dom 中看到正确的元标记，但是如果我在 facebook 中分享链接，或者我在这里测试它https://metatags.io/ 我什么都看不到，就像没有元标记一样。

有什么想法吗？

【问题讨论】：

请注意，<meta> 标签不使用也不需要结束斜线，并且在任何 HTML 规范中都没有。

标签： next.js seo

【解决方案1】：

Facebook 的爬虫和 metatags.io 的爬虫都不能执行 JavaScript。客户端 JavaScript 插入的任何 HTML 标记都将不可用。

Googlebot 可以执行 JavaScript，因此您的元数据可能适用于 Google。需要注意的是，Googlebot 必须呈现您的网页，因此抓取和编制索引可能需要数周时间。

您可以通过prerendering your site 解决这些问题。实施后，爬虫将看到带有您的标签的 HTML，而不必运行 JavaScript。

【讨论】：

感谢您的回答。这就是我所做的，因为我在页面上的组件是预重的（getStaticProps）
如果您在浏览器的页面上查看源代码，您可以看到所有元标记？
是的，我可以看到所有的元标记
如果您在 Facebook 上使用虚拟 URL 参数共享您的 URL，这有帮助吗？有时，Facebook 服务器不会获取您页面的最新版本，而只是依赖他们不久前获取的内容，这是一个兑现问题。
不，它不会改变任何东西