網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？

前幾天意外收到 FB 通知，得知本站首頁被分享到 Facebook，原來是之前協助痞客邦搬家及架站的案主，在她的粉絲團推薦我的網站及服務。

網站被分享到 FB 自然是很高興，但連過去畫面一打開，我的心瞬間涼了一半──首頁縮圖的效果實在有夠掉漆！

為了顧及分享到 FB 的效果，我的文章封面圖會花一定的時間構思(使用「CC0 高畫質圖片搜尋引擎」)，不過倒沒想到有人會分享 WFU BLOG 首頁這件事。

所以這次真的有糗到，趕緊研究一下怎麼讓首頁被分享時，版面效果能夠看起來比較專業，那麼請見本篇的心得分享及各種案例整理。

一、走鐘的首頁封面圖

出醜的畫面用自己來舉例就好：

範例 1




上圖紅框就是本站首頁被分享後的縮圖效果：

• 沒想到網站 Logo 圖案被放大到這樣的程度，覺得失去美感
• 縮圖被放大並強制裁切為大約 1.9：1 的比例，頭跟尾都殘缺了
• 同時左右也不對稱，一整個就是不專業...

原本應該是一件好事，但這樣的圖案被分享出去，應該變成反效果了吧～~ 😂


範例 2

有了前車之鑒，趕緊檢查一下分站「CC0 免費圖庫搜尋引擎」的首頁分享效果：



結果又出包了，上圖紅框的縮圖，可看到最重要的網站標題名稱「CC0 免費圖庫搜尋引擎」被斬首了，真是有些難為情。

這則貼文往下看，發現還被分享了十幾次，覺得臉越來越掛不住...就由 WFU 的慘痛教訓，讓站長們引以為戒，趕快找時間整頓一下自己的首頁縮圖吧！

二、設計首頁用圖

1. 注意裁切比例

如果分享到 FB 顯示的縮圖不想被裁切，根據「分享文章到 Facebook 的 Meta 設定」→「Q5：怎麼顯示大尺寸縮圖？」：

• 請至少使用 484 x 252 以上的尺寸
• 長寬比例請自行裁切為 1.9:1 左右，免得被系統自動裁切

2. 高畫質圖片

首頁用圖是網站的門面，自然要使用高畫質圖片。



如果有好的攝影師，當然使用自己拍的照片最好，除了獨一無二之外，也能彰顯自己網站的品牌。




自己拍出代表網站特色的照片，也不是說多簡單的事，那麼可使用「CC0 高畫質圖片搜尋引擎」來找到高水準、高畫質的圖片。


3. 彰顯網站精神

如果有設計能力的話自然是最好了，幫首頁用圖加工一下，被分享的時候，更能增加讀者印象、以及擴散能力。



我認為這個首頁圖做得很用心，該有的元素、該傳達的訊息都放進這張圖了，代表站長有特別為首頁被分享到 FB 這件事，獨立設計這張用圖。




上圖是另一個範例，圖片有為首頁分享這件事，特別加工處理過。

三、強調網站圖示

除了使用 1.9:1 比例的高畫質圖片，首頁縮圖還有另一種版面呈現的選擇──正方形。

1. 正方形圖示



知名的 "免費資源網路社群" 版面不太一樣，上圖可看到使用比較小、1:1 比例的正方形圖片，那麼右半邊的空間就大了，可以顯示很長的網站標題、網站敘述。


2. 製作網站圖示



但是這樣的版面，不一定適合所有網站，只適合有專門設計 Logo 的網站，就像上圖的範例。

其實 WFU 滿建議特別設計一個符合網站精神的圖示，不單為了分享 FB 時使用，也可直接放在網站標頭的區塊。

如果是準備長期經營的部落格，符合網站精神的 Logo 是很好的記憶點，這個品牌比較容易被讀者記住，就像市面上的知名品牌，"咬了一口的蘋果" 圖像早已深植人心。


3. 圖示大小

需要注意的是，這個正方形圖示，不可以做得太大，否則就像「一、走鐘的首頁封面圖」→「範例 1」，會被 FB 拉撐為 1.9:1，並且截頭去尾。

最好是使用 400px 以下的尺寸，例如 300x300 px，就會自動形成以上幾個範例圖的版面，左邊是正方形圖示，右邊是網站標題及網站描述。


4. 大大的 Logo 圖示

把品牌圖示做成 1.9:1 的大圖好不好呢？我看到下面這個範例：



圖案很簡潔、有設計感，雖然這個圖示可以用小正方形放左邊就好，不過為何要做成 1.9:1，其實是有深一層的考量。

這樣的設計，是為了保留彈性，當被裁切成 1:1 的比例時，用正方形也能完整呈現網站 Logo。

而什麼時候會被 FB 裁切成正方形呢？請繼續往下看。

五、FB 留言的縮圖效果

網站首頁被分享到 FB 貼文，比例上其實還是比較少的，更多的情況是，在 FB 的留言討論串之中，有人想到我們的網站，順手貼了首頁網址。

在這個情況下，留言會產生的縮圖及摘要效果，是類似正方形縮圖的版面。那麼使用網站 logo 的首頁，就會比較吃香了。




上圖都是前面出現過的網站首頁，使用留言貼上首頁連結來測試：

A. 使用設計過的正方形圖示，效果很好。

B. 原本 1.9:1 的圖案被裁切了，導致網站名稱不完整。

C. 本站重新修改正方形圖示的比例，這樣子看起來好多了。


另外需要補充的是，B 的網站描述如果不想被切斷，需要參考「分享文章到 Facebook 的 Meta 設定」→「Q3：我的摘要敘述好像被切斷了？」，必須去除所有描述文字使用的空格。

五、並非所有部落格都能設定首頁效果

瞭解以上概念後，在說明如何設定 META 語法之前，必須先跟讀者說明，台灣的部落格平台無法單獨為首頁設定 META 語法，自然也無法設定要顯示什麼圖片。



上圖任意選擇一個痞客邦網站的首頁做測試，可看到分享到 FB 時，紅框處必須手動選擇一張圖片。

而且看起來是從首頁的文章抓圖片來顯示，代表網站隨著文章的更新，每次分享首頁時，出現的圖片都是不一樣的。

六、Blogger 設定語法

1. META 語法設定

能夠自訂網站首頁的分享效果，主要是 Blogger 平台跟自架站了，以下說明 Blogger 的語法設定。

會看本篇的讀者，相信已經看過「分享文章到 Facebook 的 Meta 設定」→「Q1：如何讓標題及縮圖正常顯示？」。

這裡提一下怎麼特別處理首頁分享到 FB 的設定，請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋範本中搜尋以下字串：

<b:include data='blog' name='all-head-content'/>

找到後，在下一行插入以下內容：

<!-- FB OG 設定-->
<meta expr:content='data:blog.title' property='og:site_name' />
<meta expr:content='data:blog.metaDescription' itemprop='description' property='og:description' />
<!-- FB OG 設定非文章頁面使用-->
<b:if cond='data:blog.pageType != "item"'>
<meta content='blog' property='og:type' />
<meta content='填入想要顯示的網站標題' property='og:title' />
<meta content='填入圖片網址' itemprop='image' property='og:image' />
<b:else/>
這裡是你原本的語法設定 作用在文章頁面
</b:if>
<!-- -->
解釋一下以上的 Meta 設定內容：

• FB OG 設定非文章頁面使用 這一行以上的內容，是所有頁面共用的設定。
• FB OG 設定非文章頁面使用 這一行到 b:else 之間的內容，可以讓非文章頁面生效，也包括首頁。
• b:else 到 b:if 之間，放你原本的設定內容。這些內容若跟共用的設定有重複，則可刪除。
• 紅色字串請修改，也請填入自己為首頁設計過的圖片網址。

2. 效果

那麼展示一下本站及分站修改後，首頁分享到 FB 的效果畫面，看起來順眼多了：




3. 清除 FB 快取

修改完範本以後，記得到「分享文章到 Facebook 的 Meta 設定」→「Q7：更改後 FB 還是顯示原來的資訊？」，使用官方的清快取工具，更新首頁網址的快取資訊，分享到 FB 顯示的資訊就沒問題了。

更多 Facebook 相關文章：