有没有办法更改网站社交分享链接的预览图像？答案

【问题标题】：Is there a way to change preview image of website social share links?有没有办法更改网站社交分享链接的预览图像？
【发布时间】：2020-07-29 13:25:01
【问题描述】：

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

HTML 标头代码

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

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

如何解决在社交分享链接上预览图片的问题？

图像预览应如下所示...

编辑：永久重定向...

【问题讨论】：

标签： html web dns cloudflare

【解决方案1】：

我已将域交换为 example.com，以使这个答案更笼统 - 在测试和实施时将其切换回来。

这里的问题是www.example.com 指向您的实际网站，但example.com（没有www.）会将您重定向到另一个网站 - 在这种情况下，是来自 URL 缩短器的 404。即使在社交媒体上，您输入的链接以 www. 开头，<meta> og:url 和 twitter:url 属性也会告诉社交网络忽略这一点，并改用指定的非www. 版本。

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

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

您可以在 Cloudflare 中添加页面规则，以将您网站的非 www. 版本重定向到 www. 版本。如果 URL 与 example.com/* 匹配，请使用带有 301 永久重定向到 https://www.example.com/$1 的转发 URL，其中 $1 是 * 在您的规则中的第一次出现。

【讨论】：