在 Next.js 中避免重复的元描述和关键字 [英] Avoid Duplicate Meta Description and Keywords in Next.js
问题描述
我正在使用 Next.js 开发我的网站为了提升我网站的 SEO 性能，我试图避免重复的元标记.
I'm developing my website with Next.js To upgrade my website's SEO performance, I'm trying to avoid duplicated meta tags.
我的问题
在 Next 官方文档中，他们说我可以通过在 meta 标签中插入 key 属性来避免重叠的 meta 标签.但这不起作用.
In Next official docs, they say that I can avoid overlapped meta tag by insert key property in meta tag. But this does not work.
<meta name="description" content="~~" key="titleDescription"/>
<meta name="keywords" content="~~" key="titleKeywords"/>
这些是默认的 rootDocument 元标记，并且，
These are default rootDocument meta tags and,
<meta name="description" content={item.product_description} key="titleDescription"></meta>
<meta name="keywords" content={item.brand_name} key="titleKeywords"></meta>
这些是项目页面中动态生成的元标记.
These are dynamically generated meta tags in item pages.
在已部署的浏览器中，网站中仍然有两个描述和关键字元标记.我想避免重复的元标记.感谢您的帮助！
In deployed browser, there are still two description and keywords meta tags in website. I want to avoid duplicated meta tag. Thank you for your help!
推荐答案
在使用 Next.js Head 组件时有几点需要注意.
There are a few things to watch for when using Next.js Head components.
_documentHead组件是next/document- 即使使用
key标识符，_document中的标签也不会被替换(可以复制) _appHead组件是next/head_app中的标签可以在子组件中_app中的标签可以被key标识符覆盖- 页面中的标签不能在子组件中
- 页面中的标签可以覆盖具有相同
key标识符的标签.
- The
_documentHeadcomponent isnext/document - Tags in
_documentwill not be replaced (can be duplicated) even with akeyidentifier - The
_appHeadcomponent isnext/head - Tags in
_appcan be in child components - Tags in
_appare able to be overrode with thekeyidentifier - Tags in pages cannot be in child components
- Tags in pages can override tags with the same
keyidentifier.
在下一次完全安装之前您需要的脚本、样式和其他标签.您不能用 key 属性替换 document/head 组件中的标签.
Scripts, styles, and other tags that you need before next fully mounts. You cannot replace tags in the document/head component with the key attribute.
import Document, {Head, Html, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render = () => (
<Html lang="en-US" dir="ltr">
<Head>
<script src="/some-script.js" defer={false} />
<style>.inline-styles{}</style>
{/* META & TITLE TAGS PLACED HERE CANNOT BE OVERRODE */}
</Head>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
或自闭Head标签
class MyDocument extends Document {
render = () => (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
注意:导入来自下一个/文档
import Head from 'next/head';
const App = ({ Component, pageProps }) => (
<>
<Head>
<title key="title">App Tittle</title>
</Head>
<Component {...pageProps} />
</>
);
或从自定义组件加载
import Head from 'next/head';
const MyHeadTags = () => (
<Head>
<title key="title">App Tittle</title>
<meta key="description" name="description">Description</meta>
</Head>
);
const App = ({ Component, pageProps }) => (
<>
<MyHeadTags />
<Component {...pageProps} />
</>
);
注意:导入是从下一个/head
const SomePage = () => (
<>
<Head>
<title key="title">Some Page Tittle</title>
<meta key="description" name="description">Some Page Description</meta>
</Head>
<div>My Page</div>
</>
);
不允许
head 组件必须在页面中，不能是子组件.如果它是子组件，它不会覆盖具有标识的 key 属性的其他标签.
NOT ALLOWED
The head component must be in the page and cannot be a child component. If it's a child component it will not override other tags with the identified key property.
const MyHeadTags = () => (
<Head>
<title key="title">Some Page</title>
<meta key="description" name="description">Some Page Description</meta>
</Head>
);
const ChildComponent = () => (
<>
<MyHeadTags />
Info.
</>
);
const SomePage= () => (
<>
<ChildComponent />
<div>Will not work</div>
</>
);
更新:最后一个示例似乎在某些情况下适用于 Next 11+，但我遇到了一些重复标签的情况.我个人避免使用这种方法.
Update : The last example seems to work in some cases with Next 11+ but I have ran into a few cases where it duplicates tags. I personally avoid this method.
这篇关于在 Next.js 中避免重复的元描述和关键字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
