我正在使用带有页面结构的 next js 13。我已经使用 Head 配置了 _document 全局页面的元标记和标题，现在我想为名为“one”的页面设置特定的元标记和标题。我尝试在页面上使用 Head，但这仍然使用全局信息。
我这样配置_document.js
...
export default function MyDocument(props) {
const { emotionStyleTags } = props;
return (
<Html lang="en" className={roboto.className}>
<Head>
<meta
name="description"
content="General description."
key="desc"
/>
<meta property="og:title" content="Page.com - The Best Source for some stuff" />
<meta
property="og:description"
content="General description."
/>
<meta
property="og:image"
content="/images/page.webp"
/>
<meta property="og:url" content="https://page.com/" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
...
我想将特定的标题元描述和其他元标记添加到名为“/one”的页面。所以我在页面上使用了Head。这适用于标题页面，但是当我在谷歌上搜索“page.com one”时，它仍然显示该页面的一般标题和描述。当我分享链接“page.com/one”时，它仍然显示有关不和谐的一般信息。
function One() {
...
return (
<Head>
<title>Page one</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="description" content="Specific description for page one." key="desc"/>
<meta property="og:title" content="Specific page title" />
<meta
property="og:description"
content="Specific description for page one."
/>
<meta
property="og:image"
content="/images/page.webp"
/>
<meta property="og:url" content="https://page.com/one" />
</Head>
...
)
亲爱的晚上好
确保您在 /one 页面中使用 Next.js 中的组件。该组件应从 next/head 导入并正确使用来为页面设置特定的元标记和标题。 这就是导入该库的方法
从“next /head”导入头