Open Graph协议：打造通用的社交名片-Hitoofm

前言

这是链接在QQ、微博等主流社交平台分享时，能显示为带标题、描述和图片的“卡片”的基础。

核心OG标签

只需在HTML文档的<head>内，添加如下几个<meta property="og:xxx">标签，就能基本满足要求。

– og:title: 卡片标题（如：网页的完整标题）。
– og:description: 卡片描述（如：网页的摘要或特色内容）。
– og:image: 卡片配图URL（建议使用绝对路径，尺寸1200 x 630像素最佳）。
– og:url: 页面的权威链接，可以是当前页面地址。
– og:type: 内容类型，普通网页填`website`即可。

注意事项

1. 图片是关键：一张清晰、美观、能体现页面主题的图片，对吸引点击至关重要。建议使用1200 x 630像素的图片，兼容性最好。
2. 绝对路径：og:image的URL必须使用以https://开头的绝对路径。
3. 服务端渲染：OG标签必须由服务器在返回HTML时直接输出，客户端JavaScript动态生成的标签可能不会被社交平台的爬虫识别。

QQ平台配置

QQ支持标准OG协议，但为了获得最佳的兼容性，建议同时使用itemprop属性进行加强。

<meta itemprop="name" content="网页标题">
<meta itemprop="description" content="网页描述">
<meta itemprop="image" content="图片URL">

微信平台配置

微信的情况稍特殊，它由基础OG标签和高级JS-SDK配置两部分组成。

基础篇：OG标签提供默认信息

即使不接入高级功能，添加OG标签也能为微信分享提供一个“默认”的卡片信息。

高级篇：微信 JS-SDK（100%精确控制）

> 若想实现自定义分享文案、图片，精确控制分享内容，必须接入微信JS-SDK。

接入核心步骤：

1. 绑定域名：在“微信公众平台”的“公众号设置”中，配置JS接口安全域名。

2. 引入JS文件：在页面引入微信JS-SDK文件。

3. 通过config接口注入权限验证配置：后端获取签名（appId, timestamp, nonceStr, signature），前端通过wx.config注入。

4. 在ready事件中设置分享接口：在wx.ready回调中，调用接口设置分享内容。

分享给朋友：使用updateAppMessageShareData接口。
分享到朋友圈：使用updateTimelineShareData接口。
图片要求：图片必须使用HTTPS链接，尺寸建议不小于300×300像素。

5. 处理缓存与差异：

图片缓存：微信会缓存图片，更新图片时，可通过在原URL后添加时间戳参数来强制刷新。
平台差异：iOS和安卓的分享行为存在差异，需在真机上分别测试。

常见问题与调试

修改后不生效，社交平台会缓存分享信息。可通过以下工具强制刷新：
通用调试：使用 [metatags.io](https://metatags.io) 或 [micro.link](https://microlink.io) 查看标签解析结果。
Facebook Debugger：刷新Facebook缓存（对微信等平台也有一定效果）。
单页应用(SPA)路由：务必配置服务器端的fallback，确保爬虫能访问到正确的HTML文件。

综合示例：一个“三保险”的头部配置

将上述内容整合，一个更完善的<head>结构如下：

<head>
<!-- 基础设置 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>

<!-- 1. Open Graph 通用协议 (适用于 QQ、微博等) -->
<meta property="og:title" content="卡片标题">
<meta property="og:description" content="卡片描述，一句话说清楚页面内容。">
<meta property="og:image" content="https://你的域名/图片.jpg">
<meta property="og:url" content="https://你的域名/当前页面.html">
<meta property="og:type" content="website">

<!-- 2. QQ 平台增强 (itemprop 属性) -->
<meta itemprop="name" content="卡片标题">
<meta itemprop="description" content="卡片描述，与上面保持一致。">
<meta itemprop="image" content="https://你的域名/图片.jpg">

<!-- 3. 微信默认抓取 (依赖上面OG标签) -->
<!-- 此处无需额外代码，微信会自动读取og:title等标签 -->

<!-- 4. (可选) 微信 JS-SDK 高级配置 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
// 此部分需要后端提供签名数据
wx.config({ /* ... 配置 ... */ });
wx.ready(function() {
wx.updateAppMessageShareData({ /* ... 分享给朋友配置 ... */ });
wx.updateTimelineShareData({ /* ... 分享朋友圈配置 ... */ });
});
</script>
</head>

THE END

html学习开发学习
# 教程 # html5 # 网页 # head # Open Graph

Open Graph协议：打造通用的社交名片

前言