咨询Skype与Discord分享链接所需的Meta标签

你遇到的问题很常见——Skype和Discord这类聊天平台主要依赖Open Graph（OG）标签来生成链接预览，普通的<meta name="description">这类标签只是作为回退选项，没法触发图片展示。下面我会告诉你具体需要配置哪些标签，以及注意事项：

核心标签配置（同时支持Skype和Discord） #

这两个平台都优先识别Open Graph标签，同时补充Twitter Cards标签可以让Discord的预览效果更稳定。把以下代码添加到你的HTML <head> 部分：

<title>Weird Website</title>
<!-- Open Graph 核心标签（Skype和Discord都会读取） -->
<meta property="og:title" content="Weird Website" />
<meta property="og:description" content="Ehm.. weird website" />
<meta property="og:url" content="http://www.weirdwebsite.idk/" />
<meta property="og:type" content="website" />
<!-- 分享图片：必须是公开可访问的URL，尺寸建议1200x630 -->
<meta property="og:image" content="http://www.weirdwebsite.idk/your-share-image.jpg" />
<!-- 指定图片尺寸，帮助平台正确渲染 -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Twitter Cards 标签（Discord 兼容，优化大图展示） -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Weird Website" />
<meta name="twitter:description" content="Ehm.. weird website" />
<meta name="twitter:image" content="http://www.weirdwebsite.idk/your-share-image.jpg" />

<!-- 基础回退标签 -->
<meta name="description" content="Ehm.. weird website"/>
<link rel="icon" href="favicon.ico" type="image/x-icon" />

关键注意事项 #

• 图片要求

  • 尺寸：推荐1200×630像素（1.91:1的比例），这是大多数平台的最优比例，避免图片被裁剪
  • 格式：用JPG或PNG，大小控制在5MB以内
  • 可访问性：确保图片URL是公开可访问的，不能有登录验证、防盗链限制，否则平台无法抓取

• 缓存问题
  Skype和Discord都会缓存链接预览，刚修改标签后可能看不到更新：

  • Discord：可以发送链接到私人频道，右键点击链接选择「重新加载预览」；或者用平台的开发者工具强制刷新缓存
  • Skype：可能需要等待1-2小时，或者尝试用网页版Skype测试，清除浏览器缓存后重试

• 标签验证
  可以用在线的Open Graph验证工具检查你的标签是否正确配置，确保平台能正常抓取到所有信息。

为什么之前的配置无效？ #

你之前只添加了普通的<meta name="description">和<meta name="url">，但这些不是平台用来生成预览的核心标签。Skype和Discord需要明确的og:image标签来知道要展示哪张图片，og:title和og:description来提取标题和描述，缺少这些自然无法生成完整的预览。

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