使用Open Graph讓社交媒體分享展示更豐富

By 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 標籤。
  • 網頁和電子郵件地址自動轉換為連結。
  • 自動斷行和分段。
CAPTCHA
此问题用于测试您是否是人类访问者并防止自动提交垃圾信息。

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