目標：我有一個包含很多頁面的 Next JS 網站。有些頁面將具有特定的 OG 共享影像，用于 Facebook 等的該頁面，但有些沒有特定影像，只會使用通用或全域設定的共享影像。
問題：在 _app.js 中設定全域共享影像效果很好，并且為每個頁面提供了共享影像。為特定頁面設定共享影像也可以，并在Head. 現在的問題是影像有兩個標簽，全域標簽和頁面特定標簽。顯然 Facebook 不知道哪個是最好的，只使用第一個（全球）。
可能的解決方案：
- 目前我已經洗掉了全域標簽，并將單獨設定每個頁面，這并不理想。很高興知道一個頁面總是有一個共享影像作為后備。
- 添加頁面特定影像標簽時，覆寫/洗掉全域設定的標簽。
- 將頁面特定的影像標簽放置在 中的全域標簽上方
Head。 - 如果找不到特定于頁面的標簽，則僅以某種方式添加全域標簽。
很想知道是否有人有同樣的問題以及你做了什么！
uj5u.com熱心網友回復：
為防止重復標簽，請按照檔案中的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>
)
}
在上述結構中，“聯系人”頁面將回退并顯示“我們公司網站”元標記，_app.js因為它沒有自己的具有相同鍵的元標記，但“關于”頁面將具有“關于我們”的元標記，因為它具有標題鍵元標記，它將優先于_app.js.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/492747.html
標籤：反应 Facebook 下一个.js 搜索引擎优化 头