如何在nextjs中动态设置 meta标记

r1wp621o 于 2023-06-22 发布在其他

关注(0)|答案(8)|浏览(483)

如何在下一个js中使用NextHead并设置打开图形标记。我正在从细节页面传递 prop ，但它没有出现在源代码中。

<NextHead>
    <title>{title}</title>
    <meta property="og:type" content="website"/>
    <meta name="description" content={description}/>
    <meta property="og:title" content={title}/>
    <meta name="description" content={description}/>
    <meta name="keywords" content={keyword}/>
    <meta property="og:url" content={url}/>
    <meta property="og:description" content={description}/>
    <meta property="og:image" content={image}/>
</NextHead>

next.js

来源：https://stackoverflow.com/questions/55822800/how-to-set-meta-tag-dynamically-in-nextjs

8条答案

按热度按时间

e5nqia271#

在根文件夹的config.js文件中，导出要包含在 meta标签中的数据。例如

export const MY_SEO = {
        title: 'MyTitle',
        description: 'My description',
        openGraph: {
            type: 'website',
            url: 'My URL'
            title: 'MyTitle',
            description: 'My description',
            image: '...jpg',
        }
    };

在components文件夹中的Meta.js文件中，您可以：

import Head from 'next/head';
    import { MY_SEO } from '../config';

    const Meta = () => (
        <Head>
          <title key="title">{MY_SEO.title}</title>

          <meta
            key="description"
            name="description"
            content={MY_SEO.description}
          />
          <meta
            key="og:type"
            name="og:type"
            content={MY_SEO.openGraph.type}
          />
          <meta
            key="og:title"
            name="og:title"
            content={MY_SEO.openGraph.title}
          />
          <meta
            key="og:description"
            name="og:description"
            content={MY_SEO.openGraph.description}
          />
          <meta
            key="og:url"
            name="og:url"
            content={MY_SEO.openGraph.url}
          />
          <meta
            key="og:image"
            name="og:image"
            content={MY_SEO.openGraph.image}
          />
        </Head>
    );

    export default Meta;

在pages/_app.js中，添加

import Meta from '../components/Meta';

添加到import语句中，只需添加<Meta />组件即可。

赞(0）回复(0）举报 2023-06-22

fae0ux8s2#

为什么需要为每个页面添加元数据标签？它应该设置在你的根页面。试试这个插件，https://github.com/garmeeh/next-seo

赞(0）回复(0）举报 2023-06-22

6tqwzwtp3#

使用next/head暴露的<Head>组件。

import Head from 'next/head';

const IndexPage = ({ data }) => (
  <div>
    <Head>
      <title>My page title</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      {data?.pageType && <meta name="page-type" content={data?.pageType} />}
      {data?.pageHype && <meta name="page-hype" content={data?.pageHype} />}
    </Head>
    <p>Hello world!</p>
  </div>
);

export default IndexPage;

但也有一些陷阱。their documentation：
head的内容在卸载组件时被清除，因此确保每个页面都完整地定义了head中需要的内容，而不对其他页面添加的内容进行假设。
最难的，这将有你松散你的头发是这一个：
title、meta或任何其它元件（例如，script）需要作为Head元素**的直接子元素包含，或者 Package 到最多一个级别的<React.Fragment>或数组中，否则在客户端导航中将无法正确拾取标签。
创建一个包含有条件渲染的 meta标记的组件已经太多了，因为这使得Next的返回太深了。确保meta标记直接位于<Head>之下，或者正如文档中所说， Package 到最多一个<React.Fragment>或条件中，如我的代码片段所示。

赞(0）回复(0）举报 2023-06-22

k0pti3hp4#

我写这篇文章作为大家的参考，如果你从9.5.2运行next.js版本，只需添加以下<Head />作为示例，在页面目录中创建一个文档，即_document.js，它将覆盖next.js提供的默认文档，如下所示
_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />  // do this
          <meta charSet="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
          
        
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
      
    );
  }
}

export default MyDocument;

赞(0）回复(0）举报 2023-06-22

zengzsys5#

只需要从属性更改为名称，它将工作。

<NextHead>
    <title>{title}</title>
    <meta name="og:type" content="website"/>
    <meta name="description" content={description}/>
    <meta name="og:title" content={title}/>
    <meta name="description" content={description}/>
    <meta name="keywords" content={keyword}/>
    <meta name="og:url" content={url}/>
    <meta name="og:description" content={description}/>
    <meta name="og:image" content={image}/>
</NextHead>

赞(0）回复(0）举报 2023-06-22

yjghlzjz6#

这就是我的发现在新版本的Next.js（没有getInitialProps）中，每当我在页面或组件中创建 meta标记时，当我检查页面时，它会显示在头部，但当我打开“页面源代码”时，它不会显示在头部。在调试问题时，我尝试通过pageProps将我的动态 meta标记传递到_app. js中，并且成功了！我不知道为什么会这样，也不知道是否有更好的解决方案。但我是这么做的

_app.js：*

function App({ Component, {metaTags, ...rest} }) {

  return (
    <>
      <Head>
        {metaTags &&
          Object.entries(metaTags).map((entry) => (
            <meta property={entry[0]} content={entry[1]} />
          ))}
      </Head>
      <Component {...rest} />
    </>
  )
}

下面是我的getServerSideProps对象的样子。它使用预取的事件数据来创建元标签，并在props中传递它：

export async function getServerSideProps({ params }) {
  const { id: slug } = params;
  const {
    data: { event },
  } = await getEventLandingDetailsApi(slug);
    const metaTags = {
        "og:title": `${event.title} - ${event.edition}, ${event.country} Ticket Price, Registration, Dates & Reviews`,
        "og:description": event.description.split(0, 150),
        "og:image": event.logo.url,
        "og:url": `https://someurl.com/events/${event.slug}`,
      };
  return {
    props: {
      event,
      metaTags
    }
  }
}

赞(0）回复(0）举报 2023-06-22

thtygnil7#

你可以从这里的例子中看到，next/head被导入，并将特定的 meta标签添加到特定的页面。

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

如果这不起作用，请从您的开发控制台提供错误消息。应该有一些错误导致这种方法不起作用。

赞(0）回复(0）举报 2023-06-22

nxowjjhe8#

其中一个问题是Next.js Head组件要求所有 meta标签都有一个name属性。我在任何地方都没有看到这方面的记录，我相信这就是为什么，例如

<meta property="og:url" content={url}/>

没有在DOM中结束。我花了相当长的时间才理解这个问题，所以我希望这对某人有帮助。

赞(0）回复(0）举报 2023-06-22

我来回答

如何在nextjs中动态设置 meta标记

8条答案

相关问题

热门标签

最新问答