不好意思,今天标题党了一把,实际也没那么严重,咳咳。
话不多少,直入主题。
什么是 Open Graph Protocol?
Open Graph Protocol(开放图谱协议),简称 OG 协议或 OGP。它是 Facebook 在 2010 年 F8 开发者大会公布的一种网页元信息(Meta Information)标记协议,属于 Meta Tag (Meta 标签)的范畴,是一种为社交分享而生的 Meta 标签。
和阿狸一样从事数字营销推广的猫友一定不会陌生,它可是目前社交媒体优化(SMO)的标配了哦,只要你在 Facebook、Pinterest、Twitter 和 Google Plus 等社交平台混就不能不用到它。
为了让信息内容加速流动和准确呈现,Facebook 早年极力推动这个协议,到目前几乎主流的社交媒体网站都支持 OG 协议。包括 Twitter、Pinterest、LinkedIn 和 Google+ 都可以识别 OG 协议。虽然 Twitter 也有自家的 Twitter Cards 协议,但是 Twitter 只要发现网页上没有使用自家的协议,就会用 OG 协议代替。国内的百度、360 搜索、微博、微信、人人网等也支持该协议。
Facebook 牢牢把持着海外社交的大部分流量,大家都不得不向大佬低头了(开个玩笑)。
OG 协议有什么作用?
OG 协议是通过 OG Tags (OG 标签)实现的,它属于 Meta 标签的一种,可以用来标识网页类型和元素,让分享到社交网络的内容可以被有效的抓取,还可以控制我们想呈现的内容。
等等,你一直说 Meta 标签是什么?能说人话吗?
好的老板…
比如说,网页里 AAA 是标题,但是社交平台或搜索引擎它傻啊,分不清哪个是哪个,所以你得定义个 Meta 标签帮助它确认 AAA 是标题,BBB 是描述,CCC 是网址,DDD 是图片诸如此类。而 OG 标签是为社交分享而生的,当然现在影响范围不仅于此了,手机移动 App 也运用上了。
OG 标签长什么样?
下面就是一段 OG 标签的例子。只要看到以 og:
为前缀的 Meta 标签就可以判断该网页支持 OG 标签了。
<meta property=”og:title” content=”什么是 Open Graph 标签?不懂你还做什么社交营销优化?!”>
<meta property=”og:site_name” content=”瓦特研究所”>
<meta property=”og:type” content=”article”>
<meta property=”og:url” content=”https://www.watelab.com/what-is-open-graph-tags/”>
<meta property=”og:image” content=”https://www.watelab.com/uploads/cover-004.jpg”>
<meta property=”og:description” content=”Open Graph Protocol(开放图谱协议),简称 OG 协议或 OGP。”>
▲ 向左滑动代码框看更多内容,试试
og:
后面紧跟着的就是元素的类型了,有标题 title、网站名 site_name、网页类型 type、网址 url、图片 image、摘要 description 等等。
更多类型可以到以下网址查询。
Facebook Open Graph 开发者指南
https://developers.facebook.com/docs/sharing/opengraph/object-propertiesThe Open Graph Protocol 官网
http://ogp.me/
有 OG 标签的内容分享后的效果是什么样的?
直接给个对比图,清晰直观。
看到了吧?如果没有加 OG 标签(右图),你分享到社交平台的网站、文章、产品会有多苍白。社交信息那么多那么杂,你说容易引起用户注意吗?会带来多少点击呢?
OG 标签对搜索引擎优化(SEO)有影响吗?
因为 OG 标签是专用于社交媒体优化的,是独立的一套标签,Google 等搜索引擎会识别并忽略(当然了,丰富的 OG 标签对 SEO 是有加持的作用的)。
这样呢,我们就可以个性化的创建一套独立的适合社交分享的文案,如带 Emoji 的标题、鬼畜的图片,而不会影响到正常的 SEO 效果,是不是很棒?
怎么添加 OG 标签?
- 如果是用 WordPress 等建站程序
插件市场有很多支持生成 OG 标签的插件,选一个安装人数多的不会有错。WordPress 上推荐 Yoast SEO,不仅可以生成 OG 标签,还可以生成Twitter Cards 标签、Google+ 标签
- 如果是自行搭建的网站
请联系你们的网页开发人员,手动添加相关代码到后端,这里就不展开了。
怎么检查 OG 标签是否安装正确?
虽然 Facebook 提供了
Facebook Open Graph Debugger 在线检测工具
https://developers.facebook.com/tools/debug/
但我还是推荐下面这个 All In One 的在线检测工具。
KnowEm Social Media Optimization (SMO) Tool
http://smo.knowem.com/
它不仅可以查询标准的 Schema Meta 标签,还可以检测 Open Graph 标签、Twitter Cards 标签、Google Rich Snippets 标签和查看 LinkedIn 上的显示效果等等。
部署 OG 标签的过程还有许多要注意的地方,先按下不表,有需要再另行开篇。
阿狸觉得你该收藏这篇文章,以后如果再有建站小哥问你:“Open Graph 标签干嘛用的?”请将这篇文章甩给他,哈哈!
好久没写那么长的文章了,累死了,让我歇会儿。
原创文章,作者:阿狸,如若转载,请注明出处:https://www.watelab.com/what-is-open-graph-tags/