如何自定义社交媒体分享网站URL时显示的图片

我完全懂你说的情况——把URL贴到Google+、Facebook、Instagram这类社交平台时，别人的网站能自动弹出一张预览图，可你的网站却没这效果，肯定有点着急对吧？其实这事儿不难，主要是靠**开放图谱协议（Open Graph，简称OG）**这类标准标签实现的，下面我给你拆解原因、讲清楚解决步骤，还有容易踩的坑。

一、核心：给页面添加Open Graph标签 #

几乎所有主流社交平台都会读取页面<head>里的OG标签来生成预览内容，最关键的几个标签一定要加：

• og:title：分享时显示的标题，最好和页面标题一致
• og:description：简短的页面描述，会显示在预览图下方
• og:image：预览图片的完整URL，这就是你要的那张图
• og:url：页面的标准固定URL，避免同一页面有多个URL导致识别混乱
• og:type：页面类型，比如普通网站填website，文章填article

给你个现成的代码示例，把这段放到你HTML的<head>里就行：

<head>
  <!-- Open Graph 核心标签 -->
  <meta property="og:title" content="你的页面专属标题" />
  <meta property="og:description" content="这里写一段吸引用户的简短描述，控制在200字以内最好" />
  <meta property="og:image" content="https://你的网站域名/路径/到你的预览图.jpg" />
  <meta property="og:url" content="https://你的网站域名/对应页面的完整URL" />
  <meta property="og:type" content="website" />
</head>

⚠️ 注意几个细节：

• 图片尺寸建议用1200x630像素（比例1.91:1），这是大多数平台的最优比例，大小别超过5MB，支持JPG、PNG格式
• 图片URL必须是绝对路径（带https/http的完整地址），不能用/images/preview.jpg这种相对路径，不然爬虫找不到

二、加分项：针对Twitter优化的Twitter Cards标签 #

如果想让Twitter的预览效果更精准，可以额外加Twitter Cards标签，和OG标签完全兼容：

<meta name="twitter:card" content="summary_large_image" /> <!-- 大图样式，也可以选summary小图 -->
<meta name="twitter:title" content="你的页面标题" />
<meta name="twitter:description" content="页面描述" />
<meta name="twitter:image" content="https://你的网站域名/路径/到你的预览图.jpg" />

三、为什么你的网站没显示预览？排查常见问题 #

1. 标签没加对：检查<head>里的OG标签有没有拼写错误，比如把property写成name，或者标签内容是空的
2. 图片爬取不到：社交平台的爬虫可能拿不到你的图片——比如图片需要登录才能看、CDN缓存出问题、或者URL是相对路径
3. 平台缓存了旧数据：很多平台会缓存之前抓取的页面信息，哪怕你现在加了标签，还是显示旧的（或者不显示）。这时候可以用平台自带的调试工具刷新缓存，比如Facebook的分享调试工具、Twitter的卡片验证工具，输入你的URL重新抓取就行
4. 单页应用的坑：如果你的网站是React、Vue这类SPA，纯JS渲染的内容爬虫可能读不到OG标签，这时候需要做服务端渲染（SSR）或者预渲染，让爬虫能拿到静态的标签内容

四、验证是否生效 #

加完标签后，你可以用浏览器的开发者工具查看<head>里的标签是否正确，或者用上面提到的平台调试工具，输入你的URL，工具会直接告诉你哪些标签生效，哪里有问题。

内容的提问来源于stack exchange，提问作者The Bang Bandit