发布于 

链接预览（卡片）

Open Graph

Open Graph 协议通过在网页 中加入特定的 标签（如 og:title、og:description、og:image、og:url 等）来实现链接的富媒体预览。
只要目标页面包含这些标签，社交平台（如 Facebook、LinkedIn、Slack 等）在用户粘贴链接时即可读取并显示对应的标题、描述和封面图。
例如，LinkedIn 要求页面必须包含 og:title、og:image、og:description、og:url 等标签；Facebook 和其他平台也遵循类似规范。

大部分社交平台（微信、Slack、飞书、Twitter、Facebook、LinkedIn 等）在用户粘贴链接时，都会自动抓取目标网页的元数据生成预览卡片。
这些预览主要依赖网页 部分的 Open Graph 元标签（og:title、og:description、og:image 等）以及 Twitter Card 标签，以获取标题、描述和封面图。
例如，og:image 指定了用于预览的缩略图 URL,明确指出“og:image：代表内容的图片的 URL”。因此，要实现链接预览功能，需要模拟平台抓取逻辑，从网页源代码中提取这些标签。

•    示例标签（常见）：
•    og:title：页面标题。
•    og:description：页面摘要。
•    og:image：代表性图片的 URL。
•    og:url：页面的规范链接。
•    其他可选标签：og:site_name、og:type、og:locale 等

1
2
3
4
5
<meta property="og:title" cont.：/="页面标题"/>
<meta property="og:description" content="页面描述"/>
<meta property="og:image" content="图片地址"/>
<meta property="og:type" content="article | video | profile" />
<meta property="og:url" content="页面 URL" />

在开发中，可以按照类似以下步骤实现链接预览卡片功能：
•使用 HTTP 客户端（如 curl、axios、requests 等）获取目标链接的 HTML 源码。
•解析页面 中的元标签，优先寻找 Open Graph 标签（og:title、og:description、og:image 等） 。若网页同时提供 Twitter Card 标签（如 twitter:card、twitter:title、twitter:image 等），也可一并解析。
•由于 HTML 中的特殊字符会被转义，需要将 og:image 中的 & 等实体替换回普通符号 。否则直接复制可能导致“Bad URL Hash”等错误  。
•解析出标题、描述、图像 URL 后，在前端或后端生成卡片组件并展示即可。

这样处理后，当用户粘贴链接时，就能显示出所需的标题、简介和封面图片。需要注意的是，一些平台（如微信）可能对图片域名有额外限制（比如仅支持https，或受防火墙影响），这时可考虑使用代理服务或先行下载图片。

Instagram 链接的特殊问题

对于 Instagram 链接，直接获取预览图片常遇到以下问题：
•HTML 转义与“Bad URL Hash”错误：Instagram 页面中的 og:image URL 通常含有 HTML 实体（如 &）。如果不将其替换为 &，复制出的 URL 会提示“Bad URL Hash”错误。因此，需要手动或程序化地将 & 转回 &，才能正确访问图片。
•CDN 哈希签名过期：Instagram 使用 CDN 分发图片，URL 中带有签名参数（如末尾的 oe=695FF8C0，表示过期时间戳）。这些参数会定期更新，一旦过期该链接就不可用。换言之，所谓的“Bad URL Hash”错误往往是由于 URL 中的签名过期或失效造成的。
•API 授权要求：Instagram 已停止对未授权的 oEmbed 接口提供访问。从2020年10月起，https://api.instagram.com/oembed/?url=… 这样的请求被废弃，必须使用带有访问令牌的 Graph API（或 Instagram Basic Display API）来获取帖子的媒体信息。简单来说，要程序化地获取 Instagram 帖子的原图或封面图，需申请 Instagram 开发者权限并调用官方 API；否则无法直接通过爬虫得到高质量图片。

综上，Instagram 的 og:image 经常由于上述原因而无法直接打开。如果项目需要稳定获取 Instagram 内容，建议使用 服务器端 调用 Instagram 的 Graph API 获取媒体 URL（需用户授权），或者在卡片中不显示封面图，仅显示标题/简介。对于其它平台，一般只要网页正确设置了元标签，就可以按常规方式抓取和展示预览信息。

oEmbed

oEmbed 是一种通过结构化接口获取媒体信息的开放标准。使用时，内容消费者（如社交应用）向内容提供者公开的 oEmbed 接口发送 HTTP GET 请求，并在查询参数中带上目标资源的 URL（及可选的 maxwidth、maxheight、format 等），提供者返回一段 JSON 或 XML 格式的响应，包含嵌入内容所需的元数据。
例如，请求 Flickr 图片的 oEmbed 接口：

1
GET http://www.flickr.com/services/oembed?format=json&url=http%3A//www.flickr.com/photos/bees/2341623661/

会得到类似以下的 JSON 响应（示例字段）

1
2
3
4
5
6
7
8
9
10
{
  "version": "1.0",
  "type": "photo",
  "title": "ZB8T0193",
  "url": "http://farm4.static.flickr.com/.../7c99f48bbf_m.jpg",
  "author_name": "Bees",
  "author_url": "http://www.flickr.com/photos/bees/",
  "provider_name": "Flickr",
  "provider_url": "http://www.flickr.com/"
}

请求结构 & 响应字段：一般形如 GET {oEmbed_endpoint}?url={encode(目标URL)}&format=json。响应中常见字段包括：version、type（视频、照片、链接等）、title、author_name、provider_name、provider_url、thumbnail_url、html（嵌入代码，如 < iframe >）等。不同资源类型会返回不同字段，比如视频可能有 html 字段供直接嵌入播放器。
•支持平台：许多媒体网站都提供 oEmbed 接口。常见的视频平台有 YouTube、Vimeo、TikTok、DailyMotion、Twitch 等；图片平台有 Imgur、Flickr、DeviantArt、Unsplash 等；富媒体平台有 Twitter（发布推文）、Pinterest、SlideShare、SoundCloud、CodePen 等。例如，TikTok 官方文档明确支持 oEmbed 查询，通过访问 https://www.tiktok.com/oembed?url={视频链接} 可获得该视频的嵌入代码和元数据；Twitter 也提供了oEmbed 接口（https://publish.twitter.com/oembed）用于获取嵌入推文的 HTML。HubSpot 文档列举了“使用 oEmbed 格式的平台包括 YouTube、Spotify 和 Vimeo”，并指向 oEmbed 官方提供商列表；而 Strapi 博客则列出了更丰富的 oEmbed 常用提供商。
•鉴权需求：大多数 oEmbed 接口无需专门鉴权即可调用。Twitter 的 oEmbed 即不需要认证 ；Vimeo、Flickr、YouTube 等也通常开放 oEmbed。需要注意的是，Facebook/Instagram 早期提供了 oEmbed，但从 2020 年起已弃用公开 oEmbed（必须改用 Graph API 并附带访问令牌。也就是说，某些社交平台的 oEmbed 可能要求先注册开发者账号并拿到 Token。

分享文章
快来参与讨论吧