OG 协议是什么
OG协议是Open Graph Protocol的简称,也被称为“开放内容协议”。它是一组元标签(Meta Property=og标签),
用于给网页标记信息,如标题、类型、页面地址、缩略图等。添加OG协议后,网页内容可以被其他支持该协议的服务或社交网站引用,
从而规范内容的传播,使网页在社交媒体上得到更准确的分享和更广泛的推广
核心功能:标准化网页元数据,使社交媒体以丰富的“图形”对象表示共享内容。
应用场景:主要用于社交分享,提升网页在社交媒体上的展示效果。
起源:由Facebook在2010年F8开发者大会上公布。
OG 协议常用值
og:locale //网站语言
og:type //类型 (常用值:website;article;book;movie)
og:title //标题
og:description //页面的简单描述
og:url //当前内容链接
og:video //视频
og:audio //音频
og:photo //图片
og:product //产品
og:image //缩略图
og:link //链接
og:site_name //页面所在网站名
og:audiosrc //音频地址
rr:appid //如果您的网站是CONNECT到renren.com的,请提供该ID
og:videosrc //视频资源链接,例如可是播放视频的flash地址
og:width //视频、图片的宽度
og:height //视频、图片的高度
og:artist //音乐家
og:contentid //内容主体的ID,用来标识当前页面主要内容所处的HTML标签的ID
og:price //产品价格
og:nick //店铺名
og:postfee //运费
要注意两点
第一点:
一个网页可以重复同样的 meta 标签,一般使用 og:type 标签将其分割,也就是 og:type 标签是每一段内容的起始处,下面是具体例子:
<meta property=”og:type” content=”video”/>
<meta property=”og:title” content=”网站SEO优化视频教程第一部 – 玩个机吧”/>
<meta property=”og:image” content=”https://baidu.com/2019103123321793.jpg”/>
省略…..
<meta property=”og:type” content=”video”/>
<meta property=”og:title” content=”聊聊我的网站搭建方法第三部 – 玩个机吧”/>
<meta property=”og:image” content=”https://baidu.com/3000103123321663.jpg”/>
省略…..
第二点:
我们知道 og:type 可以用来标注网页的类型,在 WordPress 方面,一般首页、列表页会使用 website 文章页一般用 article 下面是具体例子:
网站首页、列表页:
<meta property=”og:type” content=”website” />
网站文章页:
<meta property=”og:type” content=”article” />
WordPress 添加 OG 协议标签方法
通过纯代码或插件都可以为你的 WordPress 添加 OG 协议标签,常见的插件一般是 Yoast SEO 或者 The SEO Framework(The SEO Framework 的性能比较好,带有缓存功能)
如何使用纯代码添加呢?下面提供一份代码,将其添加到 WordPress 主题的 header.php 文件的 head 标签内。
//WordPress SEO优化:添加OG协议标签(仅文章页)
if (is_singular()) {
<meta property=”og:locale” content=”zh_CN” />
<meta property=”og:type” content=”acticle”>
<meta property=”og:title” content=”<?php wp_get_document_title();?>”>
<meta property=”og:site_name” content=”<?php bloginfo(‘name’);?>”>
<meta property=”og:description” content=”<?php the_excerpt();?>”>
<meta property=”og:url” content=”<?php the_permalink();?>”/>
<meta property=”og:image” content=”<?php wpjam_post_thumbnail();?>”>
}