个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 12:09:07 24 4
gpt4 key购买 nike

我正在使用 开发我的网站Next.js 为了提升我网站的 SEO 性能，我试图避免重复的元标记。
我的问题
在 Next 官方文档中，他们说我可以通过在 meta 标签中插入 key 属性来避免重叠的 meta 标签。但这不起作用。

<meta name="description" content="~~" key="titleDescription"/>
<meta name="keywords" content="~~" key="titleKeywords"/>
这些是默认的 rootDocument 元标记，并且， 
<meta name="description" content={item.product_description} key="titleDescription"></meta>
<meta name="keywords" content={item.brand_name} key="titleKeywords"></meta>
这些是项目页面中动态生成的元标记。
在部署的浏览器中，网站中仍然有两个描述和关键字元标记。我想避免重复的元标记。谢谢您的帮助!

最佳答案

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

    或自动关闭 Head标签 
    class MyDocument extends Document {
      render = () => (
        <Html>
          <Head />
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      );
    }

    注意:导入来自下一个/ 文件

    _app.{js|jsx|ts|tsx} 
    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} />
      </>
    );
    注意:导入来自下一个/ 头

    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>
      </>
    );
    不允许
    头组件必须在页面上，不能是子组件。如果它是子组件，它有时不会覆盖具有相同 key 属性的其他标签。
    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>
      </>
    );
    更新 :最后一个示例似乎在某些情况下适用于 Next 11+，但我遇到了一些重复标签的实例。我避免使用最后一种方法。

    关于javascript - 在 Next.js 中避免重复的元描述和关键字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68204973/

    24 4 0
    文章推荐： heroku - EXTENSION_BASE_URL 在某些字体上导致 404
    文章推荐： c - C 中函数 typedef 的前向声明
    文章推荐： r - 有人可以解释在 data.table 中执行更新时，mult 是如何工作的吗(使用 .EACHI 和 mult)
    文章推荐： ruby-on-rails - bundle 安装错误 - ruby​​_dep-1.5.0 需要 ruby​​ 版本 >= 2.2.5 但我有 3.0.1p64 版本
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com