最近，我做了一个新的产品项目介绍页面，并与推广同事讨论了SEO优化，其中最多的是关于页面中的rel =“canonical”和og:url标签属性。今天我们在这里与大家分享一些知识。
什么是meta标签og？
Openog是一种新的HTTP头部标记 Graph Protocol：开放内容协议)。
Facebook在2010年F8会议上公布了Open Graph，将这种不同的Graph连接起来，形成Open Graph。
通讯协定
Open Graph通信协议(Protocol)制定一套Metatags的规格本身就是用来标记你的页面，告诉我们你的网页代表了什么样的现实世界对象。另一个合作伙伴网站，即Amazon的Internet， Movie Database(IMDb)，将使用此Open Graph Protocol为每部电影标注页面。按下IMDB上的“赞”按钮，将电影自动添加到Facebook用户profile中的“最爱的电影”中。
Facebook和Yahooo、OAuththter合作 2.0认证标准。Graph API翻新了Facebook的平台程序代码，使Facebook中的每个物体都有一个独特的ID。通过Open Graph连接其他社交网站构建的网络，将创建一个更聪明、更社交、更个性化、更有意识的网络。
使用背景
Open Graph最让人津津乐道的是“喜欢”(Like)该按钮安装在合作伙伴网站上，可立即用于表示认可。“活动”(Activity streams)外挂 ，在第三方网站上列出Facebook用户朋友从事的各种活动。“推荐”(Recommendations)插件为用户提供了建议，“不仅仅是十大最多人用电子邮件转发的文章，这才是真正的超级推荐”。“社交”(Social bar)将“喜欢”按钮和Faceboook聊天提供集成为一体的社交体验 、与朋友名单信息相结合，功能与谷歌相结合 Friend connect或Meebo chat工具条相似。
Graphfaceboook新版Graph API意味着Facebook上的任何页面都有独立的ID，用户可以成为某个页面的粉丝。这个功能将把Facebook的每一页连接成一个整体。
og属性说明：
og:title 标题
og:type 类型
常用值:article book movie
og:image 略缩图地址
og:url 页面地址
og:description 简单描述页面
og:site_name 页面所在的网站名称
og:videosrc 视频或Flash地址
og:audiosrc 音频地址
现在我们来梳理一下实现开放协议的流程:
当用户使用jiathis或百度共享等共享插件工具时，将网页共享到facebook、在twitter或微博上，sns网站的内容是根据我们的og属性呈现的，以确保信息共享更准确、更符合作者的想法。
更通俗的理解:如果你把我的网页分享给其他网站（sns），然后我会告诉你分享什么是内容标题，什么是缩略图，什么是内容介绍。不要给我胡整，你得按照我说的去做。
所以og属性对seo的意义：
我们都知道搜索引擎机器人爬取我们的页面，即html代码，特别关注meta信息，所以我们添加了og 不需要搜索引擎就可以找到和评估meta标签的权重，也就是说，您可以同时使用原始的meta信息优化方法来使用og:在title的属性值中，加强meta信息优化内容；对提高权重和排名还是很有好处的。
实现手段：
如果您对og属性没有特殊要求，即基本上包含页面标题、介绍等，则只需将title和description的信息与og属性信息一致即可。
如果您想完全定制og属性，如增加视频链接、长度和宽度等，则需要单独添加字段进行调用（涉及程序二次开发，此处更不用说）。
注意事项：
-
如果你发现使用seo检测工具检测到metaa Property=og报错了，别管，没事。这种操作对seo有好处，工具从未见过世界。
-
在调整模板代码时，我写了它<meta property=”og:description”同样要写<META name=”Description两种属性不同，应单独使用。
实例分享
接下来，让我们发一个具体的例子：
<meta name="description" content=“Web前端之家，专注于Web前端，关注用户体验，提供HTML5、CSS3、JavaScript、JQuery、开发前端技术的交流平台，如移动开发、页面性能优化等。 />
<meta property="og:site_name" content=“Web前端之家” />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://www.jiangweishan.com/zb_users/theme/Nobird_CMS_3/style/images/nlogo.png" />
<meta property="og:image:width" content="960" />
<meta property="og:image:height" content="540" />
<meta property="og:title" content=“Web前端之家” />
<meta property="og:url" content="{{@site.url}}{{url}}" />
<meta property="og:description" content=“Web前端之家，关注Web前端，关注用户体验，提供HTML5、CSS3、JavaScript、JQuery、开发前端技术的交流平台，如移动开发、页面性能优化等。 />
说明：一般来说，我们可以设置上述通用设置。如果您想区分推特、脸书等，您可以添加一些设置，如添加推特。代码如下：
<meta name="twitter:card" content="summary" /> <meta name="twitter:image" content="https://www.jiangweishan.com/zb_users/theme/Nobird_CMS_3/style/images/nlogo.png" />
大家可以参考一下，关于og的信息就这些，下面就来了解一下canonical吧！
canonical定义
canonical标签是一种告诉搜索引擎你想在搜索结果中显示哪个版本的URL的方法。使用canonical标签可以防止多个URL上出现相同(或非常相似)或“重复”内容的问题。
这种重复的内容可能以多种形式出现，包括：
-
可在URL中添加或不添加“ www前缀网页
-
可通过“ HTTP”和“ HTTPS协议访问网页
-
有多个版本的网页使用不同的URL（如印刷版本或排序类别等）
canonical标签代码样例：可以通过多个URL访问同一页面，例如：
https://www.jiangweishan.com
https://jiangweishan.com
https://www.jiangweishan.com/index.html
https://jiangweishan.com/index.html
访问四个不同URL地址的页面都是主页。此时，可以使用canonical标签来规范主页网站。假设统一规范为https://example.com，此时，需要在其他三个页面的head标签中添加以下代码：
<link rel="canonical" href="https://jiangweishan.com">
canonical标签相当于页面中的301重定向。不同之处在于用户不转向或停留在原始网站上；但对于搜索引擎来说，它将被视为301重定向处理，并将页面权重集中在标签中指定的标准化网站上。
使用canonicall
1. 确定首选域
就像上面的例子一样，我们经常遇到这个问题，尤其是一个带www，一个没有www的网站。通常最简单的方法是通过301重定向来确定我们的首选域；如果使用canical标签来规范能力或技术限制下的首选域网站也是一个很好的方法。
建议:首选域可以通过301重定向确定，最好使用重定向；必要时，使用canonical实现。
2. 动态URL和伪静态URL
有时我们会遇到这样的情况，同一页面有多个访问入口，虽然页面已经伪静态处理，但很容易导致一个页面对应多个入口，一个是自己的动态URL，另一个是伪静态处理静态URL，然后可以通过网络标签来规范网页。
3. URL含有参数
许多网站，特别是大型网站，将为网页设置一些跟踪参数，通过不同的路径访问，同一页面将出现多个版本的URL，然后也可以通过canical标签来规范网站。
4. 商场B2C网站
许多购物中心网站的许多产品都是相似的，甚至是不同的颜色，但内容是完全相同的，这将导致高度重复的页面。在这种情况下，我们也可以使用canonical标签来规范网页。
canonical标签的作用
1. 使用canonical标签使网站标准化；
2. 避免重复页面内容，使搜索引擎收录更加准确；
3. 页面权重的集中传输。
canonical标签的常见问题
1. 所有搜索引擎都会认可canonical标签吗？
不，这个标签只是一个建议，而不是一个指令。虽然搜索引擎蜘蛛会在很大程度上参考这个标签，但它可能不会100%遵守，尤其是百度。搜索引擎仍然会参考其他情况来判断。这可以防止站长在标签中写错标准化的网站。
2. 在canonical标签中是写绝对地址还是相对地址？
可以，但通常建议使用绝对地址。
3. 两页内容不同，可以使用canonical标签吗？
指定标准化网站上的内容应与使用该标签的其他非标准化网站完全相同或高度相似，否则可能无效。使用301重定向没有这个限制。如果您错误地使用canonical标签，一旦搜索引擎发现网站上的canonical标签有问题，很可能整个网站上的所有标签都不会被信任。
4. 301重定向和canonical标签有什么区别？
内容:使用canonical标签完全相同或高度相似； 而且301重定向对内容没有要求。
域名：canonical标签和301重定向都支持跨域名使用。
访问URL：原URL可以访问canonical标签；301重定向跳转到指定的URL
旧页面:旧页面会保留使用canonical标签；使用301重定向旧页面不会保留；
权重传递：canonical标签和301重定向传递权重
在纠结是选择canonical标签还是301重定向时，不妨先问问自己：
-
旧页面还需要吗？如有必要，使用canonicalal；若无需，则使用301重定向。
-
尽量使用301重定向，301重定向可以通过301实现。
总结
在通常的SEO优化中，无论你是中文、英语还是其他语言，都有必要添加canonical；对于标签，中文通常很少添加，更多地应用于外国网站，因为推特、Facebook和其他软件在中国无法打开，所以添加毫无意义。
最后，如果你有任何想法，可以留言或者加Q群讨论。
