如何使用Open Graph 标签标记页面的 HTML？
要将html网页变成社交图形对象进行分享，需要使用open graph将基本元数据添加到页面的<head><meta> 标签里。
每个页面的四个必需属性是：
og:title- 对象的标题，因为它应该出现在图表中，例如，“The Rock”。
og:type- 对象的类型，例如“video.movie”。根据您指定的类型，可能还需要其他属性。
og:image- 一个图像 URL，它应该在图表中代表您的对象。
og:url- 对象的规范 URL，将用作图表中的永久 ID，例如“https://www.imdb.com/title/tt0117500/”。
<meta property="og:url" content="https://www.***.com"/>
<meta property="og:site_name" content="***"/>
<meta property="og:title" content="***"/>
<meta property="og:description" content="***"/>
<meta property="og:type" content="***"/>
<meta property="og:image" content="***_.jpg"/>
<meta property="og:image:height" content="1000"/>
<meta property="og:image:width" content="1000"/>
<meta property="og:image:alt" content="content" />
<meta property="og:locale" content="en_US"/>
Open Graph标签包含路径，网站名词，标题，描述，类型，图片，图片宽高，图片alt属性，图片语言（后面几项非必须）
示例：https://www.nytimes.com/2023/02/13/well/mind/jay-shetty-book-8-rules-love.html
代码如下：
备注：
1. Facebook 开放图谱图像大小应约为 1200 x 630 像素（1.91/1 比率），且不得超过 5 MB；
2. og:image:alt- 对图片内容的描述（不是标题）。如果页面指定了 og:image，它应该指定og:image:alt.
3 .建议在Facebook 广告创意中使用 1:1 图片，以获得更好的图片链接广告效果。
<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="ex:1000" />
<meta property="og:image:height" content=" ex:800" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
Image标签包含图片路径，图片安全路径，图片类型，图片宽高，图片alt属性
示例：
备注：
1. og:image:type：图片的 MIME 类型。之一image/jpeg，image/gif或image/png
<meta property="og:video" content="https://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />
Video标签包含视频路径，视频安全网址，视频类型，视频宽高
示例：https://www.instagram.com/p/BtJnyR3lb6o/
代码如下：
备注：
1.og:video:type：视频的 MIME 类型。要么application/x-shockwave-flash要么video/mp4。
2.og:image：在 Feed 中指定用于高质量预览的图像
<meta property="og:audio" content="https://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />
Audio标签包括声音文件路径，安全声音文件路径，声音类型
备注：og:audio标签只有前 3 个属性可用，因为大小对声音没有意义
一般情况下，fb标签内容完善的话，twitter card部分内容可以不撰写的，返回fb标签内容即可。
如果想twitter card展示内容和fb不一样的话，那可以单独撰写完善的twitter card标签内容。
示例：https://www.screamingfrog.co.uk/seo-spider/
在twitter上的分享效果：
可以看到，代码里twitter card本身的标签里不含twitter:title, twitter:description和twitter:url，调用的是fb开放图谱协议og:title和og:description标签（上图绿框内容）。
所以，Twitter, Linkedin和Pinterest会识别 Open Graph 标签；Twitter 有自己的 Twitter 卡片元标签，但如果 Twitter 机器人找不到任何内容，它会改用 OGP 标签。
1.og:locale语言：
og:locale - 标记这些标签的语言环境。格式为language_TERRITORY。默认为 en_US。
如果网站管理者想添加一种替代语言，可以这样做：
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
2.og:image可以放置多个图片
例如：
<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.com/rock2.jpg" />
<meta property="og:image" content="https://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />
表示此页面上有 3 张图片，第一张图片为300x300，中间一张未指定尺寸，最后一张为1000px 高。
3.可选元数据
以下属性对于任何对象都是可选的，通常建议使用：
og:audio - 此对象附带的音频文件的 URL。
og:description - 一到两句话描述您的对象。
og:determiner - 句子中出现在该对象标题之前的单词。(a, an, the, "", auto)的枚举。如果auto选择，您的数据的消费者应该在“a”或“an”之间进行选择。默认为“”（空白）。
og:locale - 标记这些标签的语言环境。格式language_TERRITORY。默认为en_US。
og:locale:alternate -此页面可用的一系列其他语言环境。
og:site_name- 如果您的对象是较大网站的一部分，则应为整个网站显示的名称。例如，“IMDb”。
og:video - 补充此对象的视频文件的 URL。
4. 使用工具测试标签是否在页面上添加成功
测试网址：
https://developers.facebook.com/tools/debug/
总结
og：图像元标记是更广泛的集合的一部分，它会影响 Facebook、LinkedIn、Pinterest 和 Twitter 上社交媒体帖子的表现。
使用 OGP 标签可以帮助您跟踪您的内容在社交媒体上的表现，带有 OG 图片的帖子通常会受到最多的关注，可以通过解决对转化率和点击率低等常见问题。
本篇文章来源于微信公众号: 喃姐SEO日志
