Next.js-如何动态设置head标签

时间:2019-03-25 00:28:15

标签: reactjs next.js

此问题涉及git branch -m master <new-name> git branch -m dev master 库。

我正在使用每个文档的默认配置,并尝试覆盖电子商务网站上每种产品的next-seoog:imageog:titleog:url。当我检查devtools中的title元素时,将进行正确的标记注入。但是,在使用Twitter和Facebook共享调试器时,这些动态更改不会被取消。我以为这样的功能是该库的核心,我想知道我是否忽略了某些内容。

我在<head/>中实现了默认值,并插入每个产品会覆盖渲染树尽可能高的位置。

默认

_app.js

_app.js

export default {
  titleTemplate: `Anne's Handmade | %s`,
  title: 'Home',
  description: 'One of a kind, handmade jewelry @ affordable prices. ',
  canonical: 'https://anneshandmade.herokuapp.com/',
  facebook: {
    appId: '2300738536877547'
  },
  openGraph: {
    type: 'website',
    url: 'https://anneshandmade.herokuapp.com/',
    title: "Anne's Handmade | Home",
    description: 'One of a kind, handmade jewelry @ affordable prices. ',
    site_name: "Anne's Handmade",
    images: [
      {
        url: 'https://s3-us-west-1.amazonaws.com/shopping-site/assets/open-graph-2.jpeg',
        width: '800',
        height: '800',
        alt: "Anne's Handmade Logo"
      }
    ]
  },
  twitter: {
    handle: '@BenjaminBrooke3',
    site: '@BenjaminBrooke3',
    cardType: 'summary_large_image'
  }
}

每个产品的替代者

      <Container>
        <NextSeo config={SEO} />
        <ApolloProvider client={apollo}>
          <Page {...pageProps}>
            <Component {...pageProps} />
          </Page>
        </ApolloProvider>
      </Container>

使用查询参数时是否需要做一些特别的事情?

Facebook共享调试器

Facebook在重定向中显示了两个URL,但是当我查看刮板实际返回的内容时,它仍然是原始的默认图像,URL等。

0 个答案:

没有答案