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

A+
fb-share-homepage-thumbnail-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?前幾天意外收到 FB 通知,得知本站首頁被分享到 Facebook,原來是之前協助痞客邦搬家及架站的案主,在她的粉絲團推薦我的網站及服務。

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

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

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



一、走鐘的首頁封面圖


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

範例 1

fb-share-homepage-thumbnail-1-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?


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

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

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


範例 2

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

fb-share-homepage-thumbnail-2-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?

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

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



二、設計首頁用圖


1. 注意裁切比例

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

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


2. 高畫質圖片

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

fb-share-homepage-thumbnail-3-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?

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


fb-share-homepage-thumbnail-4-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?

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


3. 彰顯網站精神

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

fb-share-homepage-thumbnail-5-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?

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


fb-share-homepage-thumbnail-6-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?

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



三、強調網站圖示


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

1. 正方形圖示

fb-share-homepage-thumbnail-7-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?

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


2. 製作網站圖示

fb-share-homepage-thumbnail-8-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?

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

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

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


3. 圖示大小

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

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


4. 大大的 Logo 圖示

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

fb-share-homepage-thumbnail-9-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?

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

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

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



五、FB 留言的縮圖效果


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

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


fb-share-homepage-thumbnail-11-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?

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

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

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

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


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



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


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

fb-share-homepage-thumbnail-10-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?

上圖任意選擇一個痞客邦網站的首頁做測試,可看到分享到 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:elseb:if 之間,放你原本的設定內容。這些內容若跟共用的設定有重複,則可刪除。
  • 紅色字串請修改,也請填入自己為首頁設計過的圖片網址。

2. 效果

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

fb-share-homepage-thumbnail-12-網站首頁如果被分享到 FB,看到縮圖效果不佳要如何設計版面?


3. 清除 FB 快取

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


更多 Facebook 相關文章:

1 則留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP