以前在Google Analytics中查看我们网站流量来源的时候，时常会看到来自Facebook, Twitter, Youtube等过来的社交媒体流量，这些链接基本上都是用户主动分享的时候留下的，我们自己没有怎么关注。
前段时间同事研究同类网站，发现html源代码中有类似这样的meta数据：
<meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
我们查了一下，这是Open Graph协议，由Facebook提出，作为社交媒体分享链接的时候用，可以提供更丰富的图片和文字信息。
- 英文介绍网站：The Open Graph protocol
- Wikipedia：Open Graph Protocol
- 百度百科：Open Graph
- 知乎：什么是 Open Graph 标签？
我们以前只重视搜索引擎优化（SEO），对社交媒体优化（SMO）还不了解，看了这些介绍后也不复杂，于是就尝试着在我们新版的EmojiAll网站中加入了OG标签，同时还增加了专门针对Twitter的twitter cards标签，示例页面：
EmojiAll：😂 笑哭了
源代码中meta标签如下：
<meta property="og:type" content="article" /> <meta property="og:title" content="😂意思:笑哭了Emoji表情符号复制" /> <meta property="og:url" content="https://www.emojiall.com/zh-hans/emoji/%F0%9F%98%82" /> <meta property="og:description" content="😂 这是笑哭表情符号、LOL脸或CWL脸。黄色圆脸上有弯弯的眉毛，一双笑眯眯的眼睛👀，因为笑得太厉害了而流下一滴眼泪，有时又像是苦笑。嘴巴👄咧得大大的，露出上面一排牙齿🦷，有的平台图像中还露出了一点舌头。 这是最流行的表达乐趣、强烈喜悦还有尴尬的方式之一。它与🤣相似，但是🤣更加搞怪一些。 ⚠️：这个表情被评为2014至2018年期间十大最受欢迎的表情符号之一，被命名为“2015年牛津词典”年度最佳emoji。 Emoji表情符号😂的意思是笑哭了，它与眼泪, 笑, 脸有关，可以在表情符号类别'😂 笑脸和情感' - '😄 笑脸'中找到。" /> <meta property="og:locale" content="zh-hans" /> <meta property="og:site_name" content="Emoji 表情词典 📓" /> <meta property="og:image" content="https://www.emojiall.com/social-media/120/apple/1f602.png" />
Facebook中分享的显示效果如下：
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@Emoji 表情词典 📓"> <meta name="twitter:title" content="😂意思:笑哭了Emoji表情符号复制"> <meta name="twitter:description" content="😂 这是笑哭表情符号、LOL脸或CWL脸。黄色圆脸上有弯弯的眉毛，一双笑眯眯的眼睛👀，因为笑得太厉害了而流下一滴眼泪，有时又像是苦笑。嘴巴👄咧得大大的，露出上面一排牙齿🦷，有的平台图像中还露出了一点舌头。 这是最流行的表达乐趣、强烈喜悦还有尴尬的方式之一。它与🤣相似，但是🤣更加搞怪一些。 ⚠️：这个表情被评为2014至2018年期间十大最受欢迎的表情符号之一，被命名为“2015年牛津词典”年度最佳emoji。 Emoji表情符号😂的意思是笑哭了，它与眼泪, 笑, 脸有关，可以在表情符号类别'😂 笑脸和情感' - '😄 笑脸'中找到。"> <meta name="twitter:image" content="https://www.emojiall.com/social-media/120/apple/1f602.png">
Twitter中分享的显示效果如下：
为此我们还专门用PHP程序实现了为Emoji图片增加固定尺寸的底色，以便分享显示的图片更美观、规范。
评论