帶有 Next.js 的 og 圖片元標記不起作用

Question

<meta property="og:image" content="https://mywebsite.com/images/s1.jpg"

我使用 next/head 並添加了上面的元標記圖像，但是當我共享鏈接時圖像沒有出現。 我該如何解決？

Answer 1

對我來說它終於奏效了： Inside _app.js

import Head from "next/head"

然后在返回中：

<Head>
<meta property="og:image" content="https://myurl.com/ogImage.png" />
</Head>

然后我做了 static 導出並通過 FTP 從“out”文件夾上傳文件，因為我在非節點服務器上托管該項目。 為此，打開“package.json”並將“export”更改為“next build && next export”。 然后只需運行 npm 在控制台中運行導出，文件將導出到 html

Answer 2

您可以在<head>標記中使用此元標記

<meta property="og:image" content="https://mywebsite.com/images/s1.jpg"/>

<meta property="og:title" content="Your Title"/>

<meta property="og:description" content="A full description of the page."/>

<meta property="og:image:width" content="1200"/>

<meta property="og:image:height" content="630"/>

請正確關閉您從標簽中遺漏"/>"的元標簽。

Answer 3

正如下一篇文檔中所說：

注意：Next.js 只會提供構建時位於公共目錄中的資產。在運行時添加的文件將不可用。 我們建議使用 AWS S3 等第三方服務進行持久文件存儲。

因此，Next 將<meta>標簽視為動態內容，並且不進行任何構建時轉換，這會導致不使用圖像。

要解決此問題，您可以將圖像上傳到某個圖像托管（甚至是您自己的網站），獲取此鏈接並將其放入og:image ，或者您可以添加自定義 webpack 加載器來處理圖像導入，如下所示:

import imageUrl from './logo.png';
import websiteUrl from './constants';

// somewhere in the head component
<meta property="og:image" content={`${websiteUrl}${imageUrl}`} />

在這里， websiteUrl指向您的生產網站的主機名，例如https://example.com 。

最后一個選項是添加<img src="/logo.jpg" alt="" style={{ display: 'none'}} /> 。 這確保 Next 將在構建時處理您的圖像，並且您可以將<meta property="og:image" content={websiteUrl + '/logo.jpg'} />添加到頭部。 好消息是瀏覽器最初不會加載顯示設置為 none 的圖像。

帶有 Next.js 的 og 圖片元標記不起作用

問題描述

3 個解決方案

解決方案1
5 2022-03-04 07:33:02

解決方案2
0 2022-03-01 08:32:31

解決方案3
0 2022-12-26 03:05:33

帶有 Next.js 的 og 圖片元標記不起作用

問題描述

3 個解決方案

解決方案1 5 2022-03-04 07:33:02

解決方案2 0 2022-03-01 08:32:31

解決方案3 0 2022-12-26 03:05:33

解決方案1
5 2022-03-04 07:33:02

解決方案2
0 2022-03-01 08:32:31

解決方案3
0 2022-12-26 03:05:33