分享网站链接时显示预览图和描述需使用哪些HTML标签？
2026-9-30
要实现网页被分享时展示自定义预览图、专属描述等卡片效果，你需要在页面的<head>标签内添加对应的元数据标签，目前主流平台基本都兼容Open Graph（开放图谱）协议的标签规则，部分平台还会兼容Twitter Cards协议标签：
- 核心必备的Open Graph标签
- 自定义分享卡片标题：
<meta property="og:title" content="你想要展示的分享标题"> - 自定义分享卡片描述：
<meta property="og:description" content="你想要展示的专属描述文本"> - 自定义分享卡片预览图：
<meta property="og:image" content="预览图的完整绝对访问地址"> - 自定义分享点击跳转地址：
<meta property="og:url" content="网页的正式访问链接">
- 自定义分享卡片标题：
- 可选补充标签，可让卡片展示效果更符合预期
- 展示站点名称：
<meta property="og:site_name" content="你的网站名称"> - 规定预览图尺寸，避免平台压缩变形：
<meta property="og:image:width" content="图片宽度像素值">、<meta property="og:image:height" content="图片高度像素值">
- 展示站点名称：
- 适配Twitter平台的补充标签
如果需要在Twitter平台分享时也正常展示自定义卡片，可额外添加Twitter专属标签，只需要把上述Open Graph标签的property属性改为name，属性值前缀从og:改为twitter:即可，另外需要先加一行定义卡片类型的标签：<meta name="twitter:card" content="summary_large_image">，可以根据需求选择大图片、小图片等不同卡片类型。
注意：预览图地址需要填写完整的绝对路径，不要使用相对路径，否则部分平台可能无法正常拉取图片。
内容的提问来源于stack exchange，提问作者Tanishq SIngh Anand
相关产品推荐
相关产品推荐
