如何在 nextjs 13 的元数据中添加 ogimage？

Question

我想在 nextjs 13 的元数据中添加“ogimage”，以获得漂亮的社交分享。但官方文档中没有信息https://beta.nextjs.org/docs/api-reference/metadata

Answer 1

Next.js 文档不再处于测试阶段，设置社交图像非常简单。

\n

解决方案

\n

按着这些次序：

\n

\n

1. 创建图像文件：使用opengraph-image.(jpg|jpeg|png|gif)和twitter-image.(jpg|jpeg|png|gif)约定。例如，创建opengraph-image.png和twitter-image.png。

   \n
\n

2. 放置图像文件：将图像文件放置在 Next.js 应用程序的相应路由段中。例如，根映像应位于app/opengraph-image.png.

   \n
\n

3. 包含替代文本：opengraph-image.alt.txt创建名为并twitter-image.alt.txt带有所需替代文本的文本文件。将它们放置在与图像相同的路线段中。

   \n
\n

\n

就是这样，Next.js 将为您填充正确的值的元数据。

\n

文件结构示例

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 page.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 opengraph-image.png\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 twitter-image.png\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 opengraph-image.alt.txt\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 twitter-image.alt.txt\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n

\n

我创建了这篇文章并提供了更多详细信息，这里是官方文档。

\n