关于网页 Open Graph protocol 开放图谱标准 #81
Comments
webjohnjiang
changed the title
|
在开发调试的时候有个问题需要注意一下：如果调试工具没有抓取到 og 标签的内容，可以留意一下你的页面是否可以在外网访问。 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
引子
假如你用过 twitter，你应该会在 timeline 中看到过这样的卡片:
当然了，肯定也会看到朋友发过的这样的 twitter：
如果你在国内的微博上发表一个链接，那么你的发表的这篇微博可能会变成这样：
在社交类的 APP 内(例如 imo)，也会在 im 消息中与好友分享 url，此时我们也可以看到 url 会变成如此这般：
在QQ和微信内，是光秃秃的链接(微信不会自动解析url，需要依赖开发者调用jsapi来分享)；在企业微信内，url是会被解析成如上图imo内的卡片效果。
可以看到，url 发布到不同的地方，有的会变成很美观的卡片，有的则是一个光秃秃的 url 。今天，我们来聊一聊他们是如何产生这种变化的，以及我们在 twitter、Facebook、im 软件中发布的 url 链接，是如何变成上面图片所展示的这种卡片效果的。
为什么会出现Open Graph 标签标准
open Graph，简称og。他的功能是让你在社交媒体所发布的一条 url，能自动将其展示为上文那样的 "卡片"。 og标签，他可以利用现有的技术，让一条 url ，能在 Facebook 这样的社交平台上展示为像原生的 Facebook 功能一样的卡片。这里的重点是 "它利用了现有的技术"，所以og标准是简单的、简洁的、可以兼容现有网页的。所以我们接入和使用起来也非常简单。
为什么会出现这个玩意呢？ 下面讲一下原因：
比如 imo 的官网，也会写上 "official website" 这种并不关键的信息。
这样的网页，如果贴到 Facebook 这样的社交媒体中，假如 Facebook 去抓取其中的 title 来显示，那也是会变得极其凌乱的。
第二个原因，发布在社交媒体上的 url ，人们也可能需要统计在 Facebook 上的点击量，点赞量。假如你发布了2个网页："http://www.baidu.com/index.html?a=1" 和 "http://www.baidu.com/index.html?a=2"，他们分别代表桌面和移动版，那么 Facebook 在统计桌面和移动端网页总点赞量时，Facebook需要一种方式把这两张网页都认为是一张网页。因此需要额外增加一个标识字段。
体验问题。人们都希望在社交媒体上去展示一个更美观的效果，而不是一个难看的 url。一个美观的卡片，更容易让用户一眼看到主要的核心摘要，也更吸引眼球、更吸引客户点击，从而更容易吸引用户进入到你的产品站点，促进成交。
搜索体验和引流。如下图，如果你在Facebook里面进行搜索，那么哪怕没有核心内容的搜索结果，Facebook也会把用户发过的链接页用卡片形式显示出来。图中每个图片、标题，都来自于og标签，这也有助于smo优化。
5.聊天体验。可以发现在一些国外聊天软件(当然现在也包括国内的企业微信)，他们会对聊天窗口消息的url进行解析，从而让你可以一眼看到url的相关摘要，大大提升交互体验。
不过话说回来，这种通过网页源头来修改 meta ，然后社交平台配合解析的方式，貌似并没有在中国发展起来。我想可能是因为我国互联网那些年发展迅猛，开发者充满热情，同时巨头具有标准控制权，从而强行设计一种创新的方案-----"通过开放api的方式发起社交分享"。 即站长同志们可以接入"腾讯微博分享API"、"新浪微博分享API"或者其他聚合API的方式，实现OAUTH自动发布微博。
不得不说，中国当年在"社交分享"这个点的创新上很前卫，这种开放API的模式也很适合中国，也同时提供了更好的体验。当然也很适合中国的土壤和国情----国内用户通常不太需要直接拷贝粘贴一个url，大部分情况下用户都是在各个巨头平台上活动，如新浪新闻、网易新闻等(而各个平台基本上都可以接入开放API实现内容和新闻的分享)。
SMO 社交媒体优化
我在大学时，大概 2010年就接触了 SMO 优化这个概念，当时我还在运营一个校园社区和校园网站。随着微博、QQ空间的崛起，我们校园网站也开始转而从 "百度搜索优化" 改为 "通过社交媒体" 进行聚合用户。彼时，经过一些时日，我们的QQ空间和微博粉丝数达到了2万人左右，是校园内最大的一家社区。
那什么是 SMO 呢。我们知道，最早的站长或者站点，一般是要依靠搜索引擎来导流的，所以诞生了搜索引擎优化（SEO）。那SEO 也一度成为各大网站争相使用的流量获取方法。但随着10年左右社交媒体的兴盛，人们的用户时长更多消耗在社交媒体上，因此诞生了社交媒体优化。所谓社交媒体优化说白了其实就是如何运营好社交媒体号，或者如何从社交媒体上为我们的传统站点吸引流量和客户。
SMO和SEO有着相似的目标——产生网络流量并提高公司网站的知名度和成交。但搜索引擎优化是通过提高网站或网页对网络搜索引擎用户的可见性来提高网站流量质量和数量的过程，而SMO也类似，但其阵地是在用户的 timeline 时间线中吸引用户眼球和点击，SMO 在当时逐渐成为加强品牌、进行潜在客户开发的手段，这些社交媒体包括Facebook、Twitter、Instagram、Snapchat、YouTube和Pinterest等等。国内的话在当年则是微博、QQ空间、人人网。
og 和 SMO 的关系
其实正是由于当年社交媒体的兴起，以及所有用户对 "发表url链接的体验" 的要求。逐渐一些大的厂商，则开始建立这样一套标准，从而可以让用户发表的 url 在媒体平台的 timeline 中展示更加美观。 当然，前文说到 SMO，其实 og 和 smo 没太有必然的联系，只能说如果你正在做一款产品，你希望通过社交媒体为你的产品引流或者吸引用户进入你的产品，那么你最好学习并使用 og 标签，从而更好的符合社交媒体平台的"体验要求"，从而更好的做好 SMO 引流。也就是说，要想做 SMO，让你的站点url使用og标准是必要的。
显然，og 标准是非常有价值的，他不仅适用于 Facebook，也同样适用于支持 Open Graph 协议的应用程序，例如 Messenger、whatsApp 以及 bigo 的 imo。 如果你是做国外的产品，那么学习和使用 og，那是必须要走的一步！国内就另说了---国内的微博并不会解析og标签，国内的微信qq等应用是靠jsapi类似实现分享卡片。当前我测试企业微信倒是支持了自动解析页面中原生标签或og标签。
如何使用 og 标签
og标签的使用很简单，我们只需要在我们现有的 html 网页的 "head" 标签中，插入几个特殊的 meta 标签。用他来告诉 Facebook 等平台我们网页的 “标题”、"描述"、"要展示的图片" 等信息即可。
Facebook的官网 上已经给我吗列出来了og标签。总共有17种og 标签，加上一些额外的对象类型还有更多。不过还好，我们只需知道最常用的几个就可以了。
下面介绍下几个常用的标签及其含义:
这个就是要展示的标题，这个建议所有页面都要有。而且填写时要关注准确性、价值和点击性，保持简短，防止溢出。目前还没有官方的指导意见，但手机版的40个字符和台式机版的60个字符大概是最合适的。注意咱们使用原始标题，不要包含品牌(例如，你的网站名称)。 我就举个具体的例子吧，比如：你可以写“方太油烟机F120型号的功能简介”，而不是写”方太油烟机官网”。
这个玩意应该是告诉Facebook说，我这个页面的统一url是什么。也就是用来解决上文中Facebook内部统计的问题。这里建议使用canonicalURL，它可以帮助整合所有连接的数据，例如在所有发布的重复url中合并likes。所谓canonicalURL其实就是多个不同页面url的真正的主版本url，比如带了参数的url，可能会被Facebook识别为多个页面，那么其实他的真正url应该是不带任何参数的那个。 (这个canonicalURL概念有点复杂，可以查看这里)
如果你的网页是文章，那使用article，其他页面则使用website。不过我后文对Facebook测试后，发现两种type没什么差别。因此就直接用 website 得了。不过呢，这一个标签，在我看来不用管它了，一般好像也用不到。
这是描述，用来补充标题，我们要写的他尽可能吸引人，值得点击。感觉可以跟原生title差不多。保持简短而甜蜜。Facebook推荐2-4句话，但往往会被截短。
图片是og标签里最重要的一部分，因为他决定了社交媒体上的很大画面。最好在“可共享”页面使用自定义图像(例如，主页，文章等)
在其余页面中使用您的徽标或任何其他品牌形象。使用比例建议为1.91:1的图像，建议最小尺寸为1200x630，以便在所有设备上获得最佳清晰度。
如果是Facebook的开发者，则可以这样添加一个数据分析的开发者id，应该是方便后台查看数据。 然而我没有开发者id，不了解具体使用，这里暂且不表。
twitter 的补充标签
上文讲了 og 标签使用，其实 twitter 还有个补充标签。如果仅仅使用 og标签的话，twitter也会识别og标签，但却无法实现 Facebook 中那种 "大图效果"。因此，基本上，我们还是有必要把 twitter 的几个标签贴上，以配合 og 标签一起使用。
twitter 标签是这样的：
实测这个 twitter:site 没有明显作用。而配合使用 "og:image" 才可以实现 Facebook 下大图效果。
直接贴一套最常用的方案
废话不多说，直接贴一套方案给大家后续做网页参考。大家可以在需要时直接把下面这一坨全拷贝到网页 head 标签中：
其中几个核心字段，会在最终卡片上的如下图示位置展示：
如何调试og标签
有一些常用的工具，可以用来调试你的网页在几个主要社交媒体上的展现效果：
他们的功能其实都是去解析网页中的og标签。
要注意的是，Facebook和twitter会缓存og标签的解析结果。如果改变了网页内容，需要重新让Facebook抓取的话，则需要修改链接或者加点参数。如果用Facebook的调试工具，则点"scrape Again"来重新抓取。也可以在这里清缓存：https://developers.facebook.com/tools/debug/sharing/batch/
如果在线上Facebook环境，你可以通过给url加点参数的方式来取消缓存。
关于 robots.txt 指令的遵守
在 SEO 时代，搜索引擎是需要通过道德约束来遵守 robots 协议的。那 SMO 时代也该如此。不过最终只发现只有Twitterbot会遵循robots.txt指令。即使你不允许爬行，Facebook和LinkedIn爬行器也可以抓取并显示内容。
几个测试页面
大家可以通过以下几个测试页面，分别测试不同标签组合下的效果：
参考文献
What are Facebook Open Graph (OG) Tags and how to use them on your Website
Open Graph Meta Tags: Everything You Need to Know
Facebook开发者开放图谱标记指南：网站管理员分享指南
什么是openGraph标签
open graph 协议官网
twitterCard指导
twitter图文分享教程
Twitter card说明官
twitter测试工具
The text was updated successfully, but these errors were encountered: