时间戳

首页 > 解决方案 > Next/head 中的 NextJs 元标记对 Facebook 和 metatags.io 不可用

next.js - Next/head 中的 NextJs 元标记对 Facebook 和 metatags.io 不可用

问题描述

我创建了一个组件 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/我什么都看不到，就像没有元标记一样。

任何想法 ？

标签： next.jsseo

解决方案

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

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

您可以通过预呈现您的站点来解决这些问题。实施后，爬虫将看到带有您的标签的 HTML，而不必运行 JavaScript。

推荐阅读