有没有办法更改网站社交共享链接的预览图像?

Is there a way to change preview image of website social share links?

我在 Google 存储上托管我的静态网站,并使用从 Godaddy 购买的域并将名称服务器更改为 CloudFlare 以确保 SSL 安全。当我尝试在社交媒体上分享我的网站时,显示的图像预览如下所示。我网站头部的元标签也显示在下面。我有 Googled,与 Godaddy 交谈,检查了 CloudFlare 上的文档,我的共享图像预览问题没有明确的解决方案。

HTMLHeader代码

<!--  Meta  -->
<!-- Primary Meta Tags -->
<title>Virtual HBCU</title>
<meta name="title" content="Virtual HBCU">
<meta name="description" content="Explore virtual HBCU tours and exhibits.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://virtualhbcu.com">
<meta property="og:title" content="Virtual HBCU">
<meta property="og:description" content="Explore virtual HBCU tours and exhibits.">
<meta property="og:image" content="https://virtual-hbcu.s3.eu-west-2.amazonaws.com/OG+VIRTUAL+HBCU.png">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://virtualhbcu.com">
<meta property="twitter:title" content="Virtual HBCU">
<meta property="twitter:description" content="Explore virtual HBCU tours and exhibits.">
<meta property="twitter:image" content="https://virtual-hbcu.s3.eu-west-2.amazonaws.com/OG+VIRTUAL+HBCU.png">

社交分享中显示的内容...

如何解决社交共享链接上的预览图像问题?

图片预览应该是这样的...

编辑: 永久重定向...

我已将域换成 example.com 以使这个答案更通用一些 - 在测试和实施时将其换回。

这里的问题是 www.example.com 指向您的实际网站,但是 example.com(没有 www.)将您重定向到另一个站点 - 在这种情况下,来自 URL 缩短。即使在社交媒体上,您输入的 link 以 www. 开头,但 <meta> og:urltwitter:url 属性会告诉社交网络忽略它,并且使用指定的非 www. 版本。

检查 Cloudflare 中 www 名称的 DNS 条目 - 某处配置错误,可能是 IP 中的拼写错误。也可能是您的托管服务提供商配置错误。

您还应该更新 <meta> 标签,以使用与页面实际显示位置一致的 URL。

您可以在 Cloudflare 中添加 Page Rule 以将您网站的非 www. 版本重定向到 www. 版本。 如果 URL 匹配 example.com/*,使用转发 URL 和 301 永久重定向到 https://www.example.com/,其中 </code> 是 <code>* 在你的规则。