如何在 nextjs 中动态设置元标记答案

【问题标题】：how to set meta tag dynamically in nextjs如何在 nextjs 中动态设置元标记
【发布时间】：2019-09-13 07:44:48
【问题描述】：

如何在 next js 中使用 NextHead 并设置 open graph 标签。我正在从详细信息页面传递道具，但它没有出现在源代码中。

<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 meta-tags

【解决方案1】：

这就是我发现的。在较新版本的 Next.js（没有 getInitialProps）中，每当我在页面或组件中创建元标记时，它会在我检查页面时显示在头部，但当我打开时它不会显示在头部“页面来源”。在调试问题时，我尝试通过 pageProps 将我的动态元标记传递给 _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 对象的样子。它使用预取的事件数据来创建 metaTags 并在 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
    }
  }
}

【讨论】：

【解决方案2】：

我写这篇文章是为了给大家参考，如果你从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;

【讨论】：

【解决方案3】：

只需从属性更改为名称即可。

<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>

【讨论】：

【解决方案4】：

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

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

最初的问题并没有出现在 DOM 中。我花了很长时间才理解这个问题，所以我希望这对某人有所帮助。

【讨论】：

【解决方案5】：

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

    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 /> 组件。

【讨论】：

【解决方案6】：

从例子here可以看出，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

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

【讨论】：

我在这里遇到了完全相同的问题stackoverflow.com/q/61073587/12856847 ..你能帮我查看页面源中的动态内容不可见吗..因为你在下一个js中有足够的经验希望你能指导我。 .

【解决方案7】：

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

【讨论】：

这实际上无法解决动态 OpenGraph 元数据...至少对我来说不是。页面中的一切似乎都可以清楚地工作（就像过去仅使用内置组件一样），但 Facebook 和 Twitter 必须在本地或呈现之前读取预渲染。