[html]用开放图谱标签丰富页面分享的内容

[Cuuube]

用开放图谱标签丰富页面分享的内容

怎么做

直接在header标签中加这些meta标签：

<meta property="og:site_name" content="网站名">
<meta property="og:url" content="该页面url">
<meta property="og:title" content="分享时抓取到的标题">
<meta property="og:description" content="分享时抓取到的简介">
<meta property="og:image" content="分享时抓取到的题图">
<meta property="og:type" content="website">
<!--告诉网站该页面主要内容是网站。（默认是网站。还可以写video，article等）-->

效果之一

在slack中直接发url的效果：

特殊部分

因为开放图谱标签是facebook领头做的，所以facebook中会支持很好。 但要想在推特中用，则需要另一套标签了

<meta name="twitter:card" content="summary_large_image"><!--推特卡片类型-->
<meta name="twitter:site" content="@xxxxxx">需要推特用户名
<meta name="twitter:url" content="网址url">
<meta name="twitter:title" content="标题">
<meta name="twitter:description" content="网站介绍">
<meta name="twitter:image" content="题图url">

推特与og区别是，推特键为name，前缀为twitter:。而og的是键property，前缀为og:。

参考信息:

[1].自定义开放图谱动态 - 分享 [2].加入 Facebook 开发者的行列 [3].结构化数据测试工具 - google [4].分享调试器 - Facebook for Developers [5].Card Validator | Twitter Developers [6].Twitter Developer Documentation — Twitter Developers [7].可能是最全的关于twitter card的指导吧 顾小北的B2C博客 [8].Summary Card