如何解决元标签在 facebook 和 instagram 中的查看方式与其他网站不同？
我正在为我的 Web 应用程序使用 next js，目前使用为元标记提供的 Head 库，这些标记在 whatsapp 和 twitter 中工作正常，但图像标记在 Instagram 和 Facebook 上无法正常工作。这是代码示例和预览图像。
<Head>
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={'By ' + createdBy} />
<meta property="og:title" content={title} />
<meta property="og:type" content="website" />
<meta property="og:url" content={'https://rats.com/' + profile + '/p/' + post} />
<meta property="og:description" content={'By ' + createdBy} />
<meta property="og:image" content={postimageurl} />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={'https://rats.com/' + profile + '/p/' + post} />
<meta name="twitter:title" content={title} />
<meta name="twitter:image" content={postimageurl} />
<meta property="twitter:description" content={'By ' + createdBy} />
</Head>这是 twitter 元测试结果：
但是当涉及到 facebook 时，图像无法正确加载：
这张图片与元数据完全没有关系，但它仍然到达，有人可以向我指出问题吗？？？？
解决方法
您的图片太小，其大小为 200x133 像素（它会自动调整大小，因为您的参数中有 w=200 用于 unsplash）并且 Facebook 需要一张两侧至少 200 像素的图片。
您可以将 Facebook 调试器用于此类事情，它会准确地告诉您问题所在：https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Ffiedra.com%2Fprvnngrj%2Fp%2Fthe-bowhead-whale-population-rebounds-as-the-arctic-water-warms-VuzEblndkT
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。