当前位置

使用Open Graph让社交媒体分享展示更丰富

James Qi 在 2020年7月13日 - 16:01 提交

以前在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提出,作为社交媒体分享链接的时候用,可以提供更丰富的图片和文字信息。

我们以前只重视搜索引擎优化(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图片增加固定尺寸的底色,以便分享显示的图片更美观、规范。

 

自由标签:

添加新评论

Plain text

  • 不允许使用HTML标签。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。