避免 Next.js 中重复的元描述和关键字

Question

避免 Next.js 中重复的元描述和关键字

Han*_*Han 15 html javascript meta-tags reactjs next.js

我正在使用Next.js开发我的网站为了升级我网站的 SEO 性能，我试图避免重复的元标记。

我的问题

在下一个官方文档中，他们说我可以通过在元标记中插入关键属性来避免重叠的元标记。但这是行不通的。

<meta name="description" content="~~" key="titleDescription"/>
<meta name="keywords" content="~~" key="titleKeywords"/>

Run Code Online (Sandbox Code Playgroud)

这些是默认的 rootDocument 元标记，并且，

<meta name="description" content={item.product_description} key="titleDescription"></meta>
<meta name="keywords" content={item.brand_name} key="titleKeywords"></meta>

Run Code Online (Sandbox Code Playgroud)

这些是项目页面中动态生成的元标记。

在已部署的浏览器中，网站中仍然有两个描述和关键字元标记。我想避免重复的元标记。感谢您的帮助！

Answer 1

Sea*_*n W 33

使用 Next.js 组件时需要注意一些事项Head。

该_document Head组件是next/document
即使有标识符，中的标签_document也不会被替换（可以重复）key
该_app Head组件是next/head
中的标签_app可以位于子组件中
中的标签_app可以用key标识符覆盖
页面中的标签不能位于子组件中
页面中的标签可以覆盖具有相同key标识符的标签。

例子

_document.{js|jsx|ts|tsx}

您需要立即访问的脚本、样式和其他标签 - Next 此时可能尚未完全安装。您不能document/head用key属性替换组件中的标签。

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>
  );
}

Run Code Online (Sandbox Code Playgroud)

OR 自闭合Head标签

class MyDocument extends Document {
  render = () => (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Run Code Online (Sandbox Code Playgroud)

注意：导入是从下一个/文档

_app.{js|jsx|ts|tsx}

import Head from 'next/head';

const App = ({ Component, pageProps }) => (
  <>
    <Head>
      <title key="title">App Tittle</title>
    </Head>
    <Component {...pageProps} />
  </>
);

Run Code Online (Sandbox Code Playgroud)

或者从自定义组件加载

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} />
  </>
);

Run Code Online (Sandbox Code Playgroud)

注意：导入是从next/ head

some_page.{js|jsx|ts|tsx}

const SomePage = () => (
  <>
    <Head>
      <title key="title">Some Page Tittle</title>
      <meta key="description" name="description">Some Page Description</meta>
    </Head>
    <div>My Page</div>
  </>
);

Run Code Online (Sandbox Code Playgroud)

不允许

head 组件必须位于页面上，并且不能是子组件。如果它是子组件，它有时不会覆盖具有相同键属性的其他标签。

some_page.{js|jsx|ts|tsx}

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>
  </>
);

Run Code Online (Sandbox Code Playgroud)

更新：最后一个示例似乎在某些情况下适用于 Next 11+，但我遇到了一些重复标签的情况。我避免使用最后一种方法。

很高兴知道这一点。我只是摸不着头脑，因为我按照官方文档进行了操作，但它没有按预期工作。你的回答为我解答了这些问题。在我看来，这表明该功能的文档过于简单（或实现过于复杂）。 (2认同)

Answer 2

83C*_*C10 3

更新

<Head />以下是 Next.js 文档关于文件中元素的说明_document.js：

这里使用的组件与 next/head 中的组件不同。此处使用的组件只能用于所有页面通用的任何代码。对于所有其他情况，例如 <title>标签，我们建议在页面或组件中使用 next/head。

来源： https: //nextjs.org/docs/advanced-features/custom-document

<meta />因此，Next.js 建议仅在单个页面级别定义所有动态标签。

原始答案（一开始似乎有效，但事实证明，只是随机的）。

当您在 JSX 中混合使用两种关闭空 HTML 标签的方法时，似乎会出现此问题。请注意，文件meta中的标签_document.js是自动关闭的：<meta />而动态标签不是：<meta></meta>。

确保您与它保持一致（即根据最佳实践，您应该将所有空标签转换为自关闭变体），并且应该没问题。

归档时间：	4 年，3 月前
查看次数：	10243 次
最近记录：	3 年，7 月前