The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

網站上線前的檢核項目：分享資訊到各社群媒體的 Meta Tags 整理

📅 2023/11/16 15:06 📁 Web

要製作一個好網站，除了要有好的內容外，也要有好的分享功能，讓使用者可以輕鬆地分享網站的內容到各社群媒體上，而這些社群媒體除了擁抱開放標準的 Open Graph protocol 外，其各自也有自己的 Meta Tags 定義，這篇文章我就來介紹一下有哪些是 Web 開發人員需要知道的。

A creative digital illustration showcasing the concept of social media websites and their connection through HTML and meta tags.

Open Graph

完整的說明都可以從 Open Graph protocol 官網上找到，這裡我就不贅述每個 Meta Tag 的細節說明。

  • Basic Metadata

    <meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

    這裡有點必須特別注意，也就是 og:image 的圖片連結必須要直接回應 HTTP 200，若會先回應 HTTP 302 再轉向到真正的圖片，就會導致 Twitter Card 無法正確顯示文章縮圖！

  • Optional Metadata

    <meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />

  • 完整的圖片 Metadata

    <meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

  • 完整的視訊 Metadata

    <meta property="og:video" content="https://example.com/movie.mp4" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

  • 完整的音訊 Metadata

    <meta property="og:audio" content="https://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

Meaning of HTML prefix attribute (Open Graph Protocol)? - Stack Overflow

Facebook Meta Tags

由於 Open Graph protocol 本身一開始就是由 Facebook 發展出來的，因此要分享文章到 Facebook 網站，只要確實定義 Open Graph 的 Meta Tags 即可。

不過，其實 Facebook 支援三種 Microdata Tags，分別是：

  1. OpenGraph
  2. Schema.org
  3. JSON-LD for Schema.org

你可以多加利用 Facebook 開發人員網站提供的 Facebook OpenGraph Debugger 來測試網站的發文預覽效果。

Twitter Cards

在 Twitter 上面，支援大多數基本的 Open Graph 的 Meta Tags，但還是有幾個是 Twitter 自己定義的，相關說明可以從 Getting started with Cards | Docs | Twitter Developer Platform 找到。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@Will_Huang" />
<meta name="twitter:creator" content="@Will_Huang" />

注意: 你已經不需要定義 twitter:image 縮圖連結，因為跟 Open Graph 的 og:image 是重疊的，你只需要定義 og:image 這個 Meta Tag 即可。

由於 Twitter 官方的 Twitter Card Validator 已經關閉，官方建議你直接拿 Twitter 正式網站來測試 Twitter Card 顯示效果。但我還是有找到一個其他人製作的版本：Twitter Card Validator

如果在實作上遇到問題，可參見 Troubleshooting Cards 官方文件。

LinkedIn Meta Tags

根據 LinkedIn 官方的 Make your website shareable on LinkedIn 文件提到，他們也是使用 Open Graph Protocol (OGP) 來定義分享資訊的 Meta Tags，以下這幾個 Meta Tags 是要求一定要有的：

<meta property='og:title' content='Title of the article'/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg'/>
<meta property='og:description' content='Description that will show in the preview'/>
<meta property='og:url' content='//www.example.com/URL of the article'/>

由 og:image 定義的圖片有一些格式限制：

  • 檔案大小不得超過 5 MB
  • 最低圖片解析度為 1200 (w) x 627 (h) pixels
  • 建議的圖片比例為 1.91:1
  • 支援的圖片格式為 JPG、PNG 或 GIF (若為 Animated GIF 則不能超過 300 楨)

如果分享的圖片小於 401 pixels 的話，文章就會用「縮圖」的方式呈現，而非預設的大圖呈現。

WhatsApp Meta Tags

跟大多數社群網站一樣，要在 WhatsApp 分享連結時有預覽資訊，只要加入 Open Graph Protocol (OGP) 的 Meta Tags 即可，以下這幾個 Meta Tags 是要求一定要有的：

<meta property='og:title' content='Title of the article'/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg'/>
<meta property='og:description' content='Description that will show in the preview'/>
<meta property='og:url' content='//www.example.com/URL of the article'/>

參見 Whatsapp share link with image in websites

Pinterest Rich Pins

在 Pinterest 開發人員平台上有個 Rich Pins 與 Create rich Pins 文件，裡面有提到 Pinterest 支援 3 種 Rich Pins，你要依據不同的網站內容類型給予不同的 Meta Tags 設定，但基本上也一樣都支援 Open Graph Protocol 與 Schema.org。

這 3 種分別是：

  1. Article pings
  2. Product pins
  3. Recipe pins

以 Article pins 為例，設定的範例如下：

<meta property="og:type" content="article" />
<meta property="og:title" content="Exploring Kyoto's Sagano Bamboo Forest - CNN.com" />
<meta property="og:description" content="A constant inclusion on lists of "forests to see before you die," here's how to see the real thing." />
<meta property="og:url" content="http://www.cnn.com/2014/08/11/travel/sagano-bamboo-forest/" />
<meta property="og:site_name" content="CNN.com" />
<meta property="article:published_time" content="2014-08-12T00:01:56+00:00" />
<meta property="article:author" content="CNN Karla Cripps" />

你從 What are Pinterest Rich Pins? 這篇文章可以看到許多預覽貼文的範例。

留言評論