带有 Next.js 的 og 图片元标记不起作用
[英]og image meta tag with Next.js is not working
问题描述
<meta property="og:image" content="https://mywebsite.com/images/s1.jpg"
I used next/head and I added the above meta tag image but when I shared the link the image didn't appear.
我使用 next/head 并添加了上面的元标记图像，但是当我共享链接时图像没有出现。 how can I fix it?我该如何解决？
3 个解决方案
解决方案1
5 2022-03-04 07:33:02
For me it finally worked: Inside _app.js对我来说它终于奏效了： Inside _app.js
import Head from "next/head"
then within the return:然后在返回中：
<Head>
<meta property="og:image" content="https://myurl.com/ogImage.png" />
</Head>
then i did a static export and uploaded the files from the "out" folder via FTP, because i host the project on a non node server.然后我做了 static 导出并通过 FTP 从“out”文件夹上传文件，因为我在非节点服务器上托管该项目。 to do this, open "package.json" and change "export" to "next build && next export".为此，打开“package.json”并将“export”更改为“next build && next export”。 then just run npm run export in the console and the files will be exported to html然后只需运行 npm 在控制台中运行导出，文件将导出到 html
解决方案2
0 2022-03-01 08:32:31
You can use this meta tag in the <head> tag您可以在<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"/>
Please close properly meta tag you missed "/>" from your tag.请正确关闭您从标签中遗漏"/>"的元标签。
解决方案3
0 2022-12-26 03:05:33
As it is said in the Next documentation :正如下一篇文档中所说：
Note: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available.
Thus, Next considers <meta> tags as a dynamic content, and doesn't do any build-time transformations, which leads to images not being used.因此，Next 将<meta>标签视为动态内容，并且不进行任何构建时转换，这会导致不使用图像。
To fix that, you could either upload your image to some image hosting (or even to your own website), get this link and put it into og:image , or you could add a custom webpack loader to handle the image imports, like this :要解决此问题，您可以将图像上传到某个图像托管（甚至是您自己的网站），获取此链接并将其放入og:image ，或者您可以添加自定义 webpack 加载器来处理图像导入，如下所示:
import imageUrl from './logo.png';
import websiteUrl from './constants';
// somewhere in the head component
<meta property="og:image" content={`${websiteUrl}${imageUrl}`} />
Here, websiteUrl points to the hostname of your production website, eg https://example.com .在这里， websiteUrl指向您的生产网站的主机名，例如https://example.com 。
The last, and a crunchy option, is to add <img src="/logo.jpg" alt="" style={{ display: 'none'}} /> .最后一个选项是添加<img src="/logo.jpg" alt="" style={{ display: 'none'}} /> 。 This ensures that Next will process your image at build time, and you could add <meta property="og:image" content={websiteUrl + '/logo.jpg'} /> into the head.这确保 Next 将在构建时处理您的图像，并且您可以将<meta property="og:image" content={websiteUrl + '/logo.jpg'} />添加到头部。 Good thing is that browsers don't initially load images with display set to none .好消息是浏览器最初不会加载显示设置为 none 的图像。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.