Next.js 的 og 图像元标记不起作用

问题描述 投票：0回答：4
<meta property="og:image" content="https://mywebsite.com/images/s1.jpg"

我使用了 next/head 并添加了上面的元标记图像，但是当我共享链接时，图像没有出现。 我该如何修复它？

html next.js meta-tags
4个回答
7
投票

对我来说它终于起作用了： _app.js 内部

import Head from "next/head"

然后在返回中：

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

然后我进行了静态导出并通过 FTP 从“out”文件夹上传文件，因为我将项目托管在非节点服务器上。为此，请打开“package.json”并将“导出”更改为“下一个构建&&下一个导出”。然后只需在控制台中运行 npm run export，文件就会导出为 html

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'} />
添加到头部。好处是 浏览器最初不会加载显示设置为无的图像。

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"/>

请正确关闭标签中您错过的元标签。

0
投票

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image

Next 已经考虑到了这一点，并允许采用一种很好的动态方式来做到这一点。希望这有帮助

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.