我创建了一个组件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/，我看不到任何东西，就像没有元标签。
你知道吗?
既不是Facebook的爬虫，也不是元标签的爬虫。io可以执行JavaScript。客户端JavaScript插入的任何HTML标签都将无法使用。
Googlebot可以执行JavaScript，所以你的元数据可能为Google工作。需要注意的是，Googlebot必须呈现你的页面，所以抓取和索引可能会比其他方式多花几周的时间。
您可以通过预呈现您的站点来解决这些问题。实现后，爬虫将看到HTML与你的标签，而不必运行JavaScript。