Question

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

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

Answer 1

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

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

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

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

Answer 2

问题之一是Next.js Head组件要求所有元标记都具有name属性。我在任何地方都没有看到此文档，我相信这就是例如

的原因

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

原始问题中的

并没有出现在DOM中。我花了一些时间来理解这个陷阱，所以我希望这对某人有帮助。

Answer 3

这就是我发现的。在较新版本的 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
    }
  }
}

Answer 4

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

Answer 5

您可以从示例here中看到，next / head已导入，并将向特定页面添加特定的元标记。

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

如果这不起作用，请从您的开发控制台提供错误消息。应该存在一些错误，导致此方法无法正常工作。

Answer 6

只需将属性更改为名称，它就会起作用。

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

Answer 7

我正在写此书作为所有人的参考，如果您从next.js开始运行9.5.2版本，只需添加以下<Head />作为示例，即可在页面目录中创建文档，即{ {1}}将会覆盖next.js提供的默认文档，

_document.js

_document.js

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

7 个答案: