The Goal:我有一个下一个JS网站与大量的页面。有些页面将有特定的OG共享图片为该页面的Facebook等，但有些不会有特定的图片，将只是使用通用或全局设置共享图片。
问题:在_app.js中设置全局共享图像效果很好，可以为每个页面提供共享图像。设置特定页面的共享图片也可以，在Head中增加一个OG image标签。现在的问题是图像有两个标签，全局标签和特定页面标签。显然Facebook不知道哪一个是最好的，只是使用第一个(全球)。
可能的解决方式:
- 目前我已经删除了全局标签，并将单独设置每个页面，这是不理想的。这将是很好的知道一个页面将始终有一个共享图像作为备用。
- 当添加页面特定的图像标签时，覆盖/删除全局设置的图像标签。
- 将
Head中特定页面的图像标签置于全局标签之上。 - 如果没有找到特定页面的标签，只添加全局标签。
很想知道是否有人有同样的问题和你是怎么做的!
为了防止重复的标签，给每个元标签一个key，在这里的文档中解释。当您这样做时，Next将在页面加载时对它们进行优先级排序，并且只包含该页中的键，或者如果该页上不存在该键，则它将返回到_app.js中的键。
考虑以下页面:
// pages/_app.js
import Head from 'next/head'
function MyApp({ Component, pageProps }) {
return (
<div>
<Head>
<meta property="og:title" content="Our Company Website" key="title" />
</Head>
<Component {...pageProps} />
</div>
)
}
// pages/about.js
import Head from 'next/head'
export default function AboutPage() {
return (
<div>
<Head>
<meta property="og:title" content="About Us" key="title" />
</Head>
<p>Learn about us</p>
</div>
)
}
// pages/contact.js
import Head from 'next/head'
export default function ContactPage() {
return (
<div>
<p>Send us an email</p>
</div>
)
}
在上述结构中，"contact"&;页面将回退并显示"本公司网站"。在_app.js中找到的元标签，因为它没有自己的具有相同键的元标签，只有"about"页面将有"关于我们"因为它具有titlekey meta标签，该标签将优先于_app.js中的标签。