使用Next.js的og图像元标记无法正常工作

Question

使用Next.js的og图像元标记无法正常工作

10

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

我使用了next/head，并添加了上述meta标签图像，但在分享链接时，图像未显示。如何修复？

- dina galal

2

你分享那个链接在哪里了？那个平台/系统支持开放图谱协议吗？规范说明有4个必需标签（请参见https://ogp.me/）。你有其他的标签吗？所有标签，元标签都需要用`>`或`/>`来关闭。最后：那个URL上的图片可用吗？ - lupz

1

错别字，你漏了 /> 来关闭 meta 属性。 - serraosays

3个回答

3

正如在Next文档中所述：

注意：只有在构建时位于public目录中的资产才会被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的图像。

- VanishMax

0

您可以在<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"/>

请正确关闭您的meta标签，您的标签中缺少"/>"。

- Anoop Singh

1

它不起作用，还有其他解决方案吗？ - dina galal

2

@dinagalal 你可以测试你的页面 https://developers.facebook.com/tools/debug/。使用元标签就像这个例子 https://www.opengraph.xyz/url/http%3A%2F%2Fgarimadisposal.in%2F/。 - Anoop Singh

@dinagalal 请分享<head></head>标签的源代码截图。 - Anoop Singh

请注意来自 https://ogp.me/ 的 OG 元标记。 - Anoop Singh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fabian · Accepted Answer

对我来说，最终解决方法是：

在 _app.js 内部进行修改

import Head from "next/head"

然后在 return 语句中：

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

然后我进行了静态导出，并通过FTP上传了来自“out”文件夹的文件，因为我将项目托管在非Node服务器上。要做到这一点，请打开“package.json”并将“export”更改为“next build && next export”。然后只需在控制台中运行npm run export，文件将被导出为html文件。