Open Graph: Cover

做網站從來都沒有好好設定過 Open Graph Meta Data 嗎?你這下糗大了! 現在已有相當多的網站能讀取 Open Graph Protocol ,它讓我們作品的摘要能以最完美的型式呈現於潛在讀者面前。那今天就讓我們來探討一下 Open Graph 與視覺化的應用。

現在有越來越多的網站讓人可以分享連結,因此為了提供讀者更好的體驗,除了網址以外他們也會顯示額外的資訊,例如標題、內容摘要等等。然而如果沒有統一的標準,大家截取標題、內容的方式都不同的話,我們的網頁貼到不同網路平台上的時候讀者也會看到各種不同的摘要;有的也許圖只顯示一半,有的內容摘要只取到日期與作者欄等等。

Open Graph Protocol 是 Facebook 在 2010 年提出,規格化定義的 HTML Meta 屬性提供網頁的標題、縮圖、描述等等資訊,Facebook 本身也藉由讀取 Open Graph Protocol 中的資訊將網址以內容摘要的型態顯示出來。雖然是 Facebook 定義的協定,這些年來也陸續有許多網路平台支援了,因此 Open Graph Protocol 也就變成對網頁很重要的東西。你希望你的網站摘要醜不拉機的,讓人看了一點都不想點嗎? Of course not!

Open Graph Protocol 以 HTML 的 META 標籤定義,一般都放置在 HTML 中的 <HEAD> 標籤之下。META 標籤的格式如下:

  <meta property="..." content="..."/>

從語意很容易就能理解,網頁的 meta 標籤可以替這個網頁設定屬性的值。Open Grap Protocol 定義了許多屬性,其中有幾個是必要的屬性,包含:

  • og:title - 此文件的標題,例如: 「資料視覺化 - 使用 d3.js」
  • og:type -此文件的類型,例如:「website」
  • og:image -此文件的縮圖或是代表性的圖片
  • og:url - 此文件的永久網址

來簡單比較一下吧!下圖是截取自臉書上產生的網址摘要,左邊網站有妥善規畫 Open Graph Meta ,右邊則沒有。左邊的照片經過恰當構圖,文字敘述跟標題都有重新編排過;右邊的縮圖沒有截取到重點,沒有內容摘要,也無法從標題得知內容在講什麼。

Open Graph - Comparison

如果需要確認網頁 Open Graph 的內容,你可以使用 Facebook Debugger ;將網址貼入 Debugger 後他便會把抓到的 Open Graph Metadata 與縮圖顯示出來,這裡就完全跟動態牆上會看到的一樣了喔!

更深入的 Open Graph Protocol 細節可以參考 http://ogp.me/ ,裡面有詳盡的解說 ( 雖然是英文的 ) 。

資料視覺化

大致了解差異後,讓我們回頭來看看資料視覺化的狀況。一般網站如果不填好 Open Graph Metadata 也許還不算太糟,網頁通常有足夠的內容,也會有標題 ( title ) 或是頭條 ( headline ) 標籤,自動截取摘要取得的結果往往也還算可以。

但視覺化作品就不同了,視覺化作品的網頁裡可能充滿了 SVG 向量標籤、塞滿了 Canvas ,若是資訊圖表那更是只有一張大圖,連個文字都沒有,這種情況下猜猜拿到的東西會長什麼樣?取不到重點的縮圖 ( 或更糟的,把按鈕或網站 Logo 當縮圖! ) 、缺乏摘要文字,標題不精準… 看都看不懂,CTR 自然就低了,網站流量等於收益,CTR 低就沒收入,光想到就急了,還不趕快回去改!

基本上,你需要準備的東西大致上就是標題、文字摘要、與一張適當的縮圖。縮圖的尺寸,由於各個媒體平台大小都不同,可以參考這張資訊圖表: 「Social Media Image Size Cheat Sheet

客製化摘要

有時候,我們的視覺化作品會製作個人化的結果並鼓勵讀者分享,例如:測驗得分、占卜測字等等,又或像是萌典可以針對任何詞產生毛筆字縮圖等等。這種情況下,縮圖與摘要必須要能反應出讀者所得到的結果,否則分享的效力就大大的打折了。想像一下做完測驗的使用者迫不及待的想跟朋友分享他的成績,可是分享時只看到我們網站的 Logo,他大概就會默默的把視窗關掉了吧。

視覺化作品縮圖牽涉到網頁截圖的問題,基本上有幾個做法可以考慮:

  1. 預先產生的固定縮圖
    在沒有後端程式的情況下,最簡單就是作者自己截取網頁畫面來製作成合適的縮圖。好處是容易實作且相當輕量化,缺點就是無法客製化。不過,如果作品的最終結果不多,可以考慮替所有結果都產生一份縮圖跟網頁,再利用 meta 標籤將所有網頁重導向同一份,這樣開啟網頁的使用者會看到同樣的作品,但 Facebook Crawler 會看到不同的縮圖,算是一個節省成本的權宜之計。Open Graph: Multiple Thumbnail
  2. 使用網頁截圖服務
    網路上有些服務可以幫你做網站截圖 (例如 https://www.url2png.com ) ,因此你可以利用他來協助取得各種不同的縮圖畫面。然而,縮圖的網址必須用後端程式置入網頁的 meta 標籤之中,而且通常都得付錢。
  3. 程式化手段自行截取執行畫面
    有些軟體套件可以讓你利用程式開啟網站並截取畫面,例如 PhantomJS ;下面是使用 PhantomJS 截取畫面的範例 ( 程式碼片段改編自這裡 ) :

      var page = require('webpage').create();
      page.open("http://blog.infographics.tw", function (status) {
        page.render('landing.png');
        phantom.exit();
      });

    取得的網站畫面便會儲存到 landing.png 。

  4. 直接在後端執行繪製視覺化內容
    舉例來說,若你使用 d3.js 做視覺化,你可以在後端搭配 jsdom 模組來直接產生 DOM tree 後截取 SVG 內容來使用。若使用 canvas 技術做視覺化,也可以使用 node-canvas 模組來做到。

上述各種技術我們沒辦法在此一個一個的描述細節,因為每一項都已經可以單獨寫成一篇專文來說明了,如果讀者們有任何想深入了解的部份的話可以在底下留言,我們再一一做介紹。

結語

現在資訊傳播的管道多元化,我們已經不能只看著自己的作品了,作品是如何被使用、轉貼、分享也變得相當重要。下次做好視覺化作品的時候,別忘了再多檢查一遍你的作品在常見的網路平台上會以什麼樣的形式呈現喔!


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *