如何自定义网站被发送链接时的预览卡片展示内容？

这类带账号信息、配图、简介的链接预览卡片，不需要向Discord、Twitter等平台提交特殊申请就能实现。它的本质是网站提前在页面HTML头部预埋了行业通用的元数据标签，所有主流即时通讯工具、社交平台的爬虫访问链接时，会自动读取这些标签的内容，生成对应的预览卡片，新手按照步骤操作10分钟即可完成配置。

必加的核心元标签 #

所有需要生效的标签，都要放在每个页面的<head>标签闭合之前。目前全网通用的标准分两类，覆盖99%以上平台的展示需求：

• Open Graph（OG）通用标签：是Meta牵头定的行业通用标准，Discord、Telegram、微信、Slack等几乎所有平台都会优先读取这套标签的内容
• og:title：卡片的主标题，直接填写对应页面的名称即可，比如首页填网站全称、文章页填具体文章标题
• og:description：卡片的简介内容，建议控制在80字以内，过长的内容会被平台自动截断
• og:image：卡片展示的预览图，必须填写图片的完整绝对访问路径，推荐尺寸为1200*630像素，避免被平台不规则裁切
• og:url：当前页面的正式固定访问地址，不要填写带临时参数的跳转链接
• Twitter/X兼容标签：专门适配Twitter平台的展示规则，加了之后能保证在X平台发链接时的展示效果和原生内容一致，不会出现显示错乱
• twitter:card：指定卡片类型，建议选summary_large_image，就是带大幅预览图的卡片样式，和你举例的Twitter账号链接预览效果一致
• twitter:title、twitter:description、twitter:image：内容和对应的OG标签保持一致即可，不需要单独重复编写，直接复用OG的内容就可以生效

新手常见踩坑点 #

这些问题是绝大多数刚接触站点搭建的人配置完预览不生效的核心原因

• 预览图必须是公开可匿名访问的资源，不能放在需要登录、有权限校验的路径下，不然平台爬虫拿不到图片资源，最终只会显示没有配图的纯文字卡片
• 配置完成后不会立刻全平台生效，各个平台会缓存之前抓取过的链接内容，一般最长24小时会自动更新；如果着急看效果，可以用对应平台的开发者工具手动触发链接重新抓取
• 不要在og:image里写相对路径的图片地址，比如写/assets/preview.jpg这种格式，平台爬虫无法解析相对路径的资源位置，必须写全带域名的完整地址
• 预览图文件大小不要超过8MB，过大的文件会导致爬虫抓取超时，最终自动放弃加载预览图

零代码实现方案 #

如果你没有HTML编写基础，完全不需要手动写代码：

• 使用WordPress、Wix、Squarespace这类可视化建站平台的话，站点后台的SEO插件、社交分享设置模块，都自带可视化的配置入口，直接对着填标题、简介、上传预览图，插件会自动帮你生成所有需要的元标签，插入到对应页面的头部位置
• 如果是自己手写的纯静态页面，只需要把上述标签的代码模板复制到页面的<head>区域，替换成自己站点的实际内容，上传到服务器就可以生效

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