如何在Facebook/Google等平台粘贴链接时添加横幅图片

要实现粘贴链接时显示横幅图片，核心是给你的网页添加Open Graph（OG）元标签——这是各大平台（包括Facebook、Google、Twitter等）通用的标准，用来抓取链接对应的预览内容。

关键元标签说明 #

你需要在网页的<head>区域添加以下标签：

• og:title：定义链接预览显示的标题，建议简洁明了
• og:description：设置预览的描述文本，补充标题信息
• og:image：指定横幅图片的公开URL，这就是平台会展示的那张图。注意：
  • 图片尺寸推荐1200x630像素（符合大部分平台的最佳比例）
  • 格式用JPG或PNG，文件大小尽量控制在8MB以内
  • 图片必须是公开可访问的，不能有防盗链、登录限制
• og:url：设置链接的标准固定URL，避免平台抓取到错误的页面版本
• og:type：标记内容类型，比如website（网站）或article（文章）

额外优化（可选） #

如果要适配Twitter的大图预览，可以添加Twitter Cards标签，和OG标签兼容：

• twitter:card：设置为summary_large_image即可启用大图横幅
• twitter:image：指定图片URL（可以和og:image一致）

示例代码 #

<head>
  <!-- Open Graph 核心标签 -->
  <meta property="og:title" content="我的个人博客首页">
  <meta property="og:description" content="分享前端开发技巧与日常技术思考">
  <meta property="og:image" content="https://example.com/blog-banner.jpg">
  <meta property="og:url" content="https://example.com">
  <meta property="og:type" content="website">
  
  <!-- Twitter 大图卡片适配 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="https://example.com/blog-banner.jpg">
</head>

注意事项 #

1. 标签添加后，平台可能会缓存旧的预览信息，你需要用对应平台的链接调试工具刷新缓存，预览效果是否生效
2. Google搜索的链接预览除了OG标签，也支持Schema.org结构化数据，但OG标签已经能满足基础的横幅图片需求

内容的提问来源于stack exchange，提问作者Tomek Prabucki