您在這裡

使用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 標籤。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。