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

由 James Qi, 2020年7月13日

以前在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标签。
  • 网页和电子邮件地址自动转换为链接。
  • 自动断行和分段。
验证码
此问题用于测试您是否是人类访问者并防止自动提交垃圾信息。

2002-2023 v11.7 a-j-e-0