learn -ShareLink-opengraph-0

ShareLink-OpenGraph

分享出去，然后给自己app进行引流，或者给自己的h5引流也行。

目标

• 熟悉og
• 来一个demo链接进行在飞书文档上卡片显示。

准备

了解什么是OpenGraph

本文中的OpenGraph 指‌Facebook 推出的网页元数据协议‌（用于控制社交分享预览），于 2010 年推出，通过 HTML <meta> 标签标准化网页在社交媒体（微信、Facebook、LinkedIn 等）分享的标题、图片、描述等富媒体信息时，在第三方页面也能够以结构化形式在社交媒体展示 。

所有社交平台在分享链接时都需生成“富媒体卡片”（标题、图、描述），OG 提供了统一的结构化元数据方案，避免各厂商重复造轮子 。

但因‌协议开放、解决通用痛点、降低集成成本‌，迅速成为跨平台社交分享的‌事实行业标准。

v3.0协议

# 文档地址： https://www.opengraph.io/docs/api/site
# v3.0
# API获取og信息

GET https://opengraph.io/api/3.0/site/{encoded_url}?app_id=YOUR_APP_ID

{
  "hybridGraph": {
    "title": "GitHub: Let's build from here",
    "description": "GitHub is where over 100 million developers shape the future of software.",
    "image": "https://github.githubassets.com/images/modules/site/social-cards/github-social.png",
    "url": "https://github.com/",
    "site_name": "GitHub",
    "type": "website",
    "favicon": "https://github.githubassets.com/favicons/favicon.svg"
  },
  "openGraph": {
    "title": "GitHub: Let's build from here",
    "description": "GitHub is where over 100 million developers...",
    "type": "website",
    "url": "https://github.com/",
    "site_name": "GitHub",
    "image": {
      "url": "https://github.githubassets.com/images/modules/site/social-cards/github-social.png"
    }
  },
  "htmlInferred": {
    "title": "GitHub: Let's build from here",
    "description": "GitHub is where over 100 million developers...",
    "favicon": "https://github.githubassets.com/favicons/favicon.svg"
  },
  "requestInfo": {
    "redirects": 0,
    "host": "github.com",
    "responseCode": 200
  }
}

Response Fields

Field	Description
hybridGraph	Merged data from OpenGraph, Twitter Cards, and HTML inference. Use this for best results.
openGraph	Raw OpenGraph tags found on the page
twitterCard	Twitter Card metadata if present
htmlInferred	Values inferred from HTML (title tag, meta description, etc.)
requestInfo	Information about the request (redirects, response code)

行动

1. website

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World - 网站</title>

    <!-- Open Graph 基本标签 -->
    <meta property="og:title" content="Hello World - 示例网站" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://example.com/website.html" />
    <meta property="og:image" content="https://via.placeholder.com/1200x630.png?text=Hello+World+Website" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Hello World 示例网站封面图" />
    <meta property="og:description" content="这是一个展示 Open Graph 的 Hello World 网站页面，包含了完整的 og 信息。" />
    <meta property="og:site_name" content="Hello World 示例" />
    <meta property="og:locale" content="zh_CN" />

    <!-- 可选 Twitter Card 增强 -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Hello World - 示例网站" />
    <meta name="twitter:description" content="这是一个展示 Open Graph 的 Hello World 网站页面。" />
    <meta name="twitter:image" content="https://via.placeholder.com/1200x630.png?text=Hello+World+Website" />
</head>
<body>
    <h1>Hello World - Website</h1>
    <p>这是一个使用 Open Graph 的示例网站页面。</p>
</body>
</html>

2.Video

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World - 视频</title>

    <!-- Open Graph 基本标签 -->
    <meta property="og:title" content="Hello World - 示例视频" />
    <meta property="og:type" content="video.other" />  <!-- 也可用 video.movie / video.tv_show -->
    <meta property="og:url" content="https://example.com/video.html" />
    <meta property="og:image" content="https://via.placeholder.com/1200x630.png?text=Hello+World+Video" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Hello World 示例视频封面" />
    <meta property="og:description" content="这是一个展示 Open Graph 的 Hello World 视频页面。" />
    <meta property="og:site_name" content="Hello World 示例" />
    <meta property="og:locale" content="zh_CN" />

    <!-- 视频专用标签 -->
    <meta property="og:video" content="https://example.com/sample-video.mp4" />
    <meta property="og:video:type" content="video/mp4" />
    <meta property="og:video:width" content="1280" />
    <meta property="og:video:height" content="720" />
    <meta property="og:video:secure_url" content="https://example.com/sample-video.mp4" /> <!-- HTTPS 版本 -->

    <!-- 可选：视频时长（秒） -->
    <meta property="video:duration" content="120" />

    <!-- 可选 Twitter Card -->
    <meta name="twitter:card" content="player" />
    <meta name="twitter:title" content="Hello World - 示例视频" />
    <meta name="twitter:description" content="这是一个示例视频页面。" />
    <meta name="twitter:image" content="https://via.placeholder.com/1200x630.png?text=Hello+World+Video" />
    <!-- 若支持 Twitter 直接播放，可添加下方标签 -->
    <meta name="twitter:player" content="https://example.com/player.html?video=1" />
    <meta name="twitter:player:width" content="1280" />
    <meta name="twitter:player:height" content="720" />
</head>
<body>
    <h1>Hello World - Video</h1>
    <p>这是一个使用 Open Graph 的示例视频页面。</p>
</body>
</html>

3.Music

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World - 音乐</title>

    <!-- Open Graph 基本标签 -->
    <meta property="og:title" content="Hello World - 示例音乐" />
    <meta property="og:type" content="music.song" />  <!-- 也可用 music.album / music.playlist -->
    <meta property="og:url" content="https://example.com/music.html" />
    <meta property="og:image" content="https://via.placeholder.com/1200x630.png?text=Hello+World+Music" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Hello World 示例音乐封面" />
    <meta property="og:description" content="这是一首示例音乐，展示 Open Graph 完整信息。" />
    <meta property="og:site_name" content="Hello World 示例" />
    <meta property="og:locale" content="zh_CN" />

    <!-- 音乐专用标签 -->
    <meta property="og:music:album" content="示例专辑名称" />
    <meta property="og:music:album:disc" content="1" />
    <meta property="og:music:album:track" content="3" />
    <meta property="og:music:artist" content="示例艺术家" />
    <meta property="og:music:release_date" content="2024-01-01" />
    <meta property="og:music:duration" content="245" /> <!-- 单位：秒 -->
    <!-- 若有多个艺术家，可重复添加 -->
    <meta property="og:music:artist" content="合作艺术家" />

    <!-- 可选：播放链接（音频文件） -->
    <meta property="og:audio" content="https://example.com/sample-song.mp3" />
    <meta property="og:audio:type" content="audio/mpeg" />

    <!-- 可选 Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Hello World - 示例音乐" />
    <meta name="twitter:description" content="这是一首示例音乐。" />
    <meta name="twitter:image" content="https://via.placeholder.com/1200x630.png?text=Hello+World+Music" />
</head>
<body>
    <h1>Hello World - Music</h1>
    <p>这是一个使用 Open Graph 的示例音乐页面。</p>
</body>
</html>

支持快速启动

有些app1内就可以快速打开其他app2。这个需要在分享地址支持这样的链接：里面是官方协议json

# ios应用支持
# https://b-dev.chatraha.top/.well-known/apple-app-site-association

# 安卓应用支持
# https://b-dev.chatraha.top/.well-known/assetlinks.json

总结

1. 如果自身业务要快速识别卡片显示，则可以直接用opengraph.io。
2. 如果自己要进行快速分享出去，必要元素og:title,og:description,og:image