如何使用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/”。

1
页面常用og标签:

<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 图片,以获得更好的图片链接广告效果。

2
单个图片的og:image标签

<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

3
单个视频的og:video标签

<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 中指定用于高质量预览的图像

4
单个音频og:audio标签

<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 个属性可用,因为大小对声音没有意义

5
Open graph和twitter card结合使用

一般情况下,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日志

THE END
分享
二维码
海报
如何使用Open Graph 标签标记页面的 HTML?
要将html网页变成社交图形对象进行分享,需要使用open graph将基本元数据添加到页面的<head><meta> 标签里。 每个页面的四个必需属性是: og:tit……
<<上一篇
下一篇>>