【網站 SEO】優化圖片設定,讓網頁 SEO 神進步 (網站、部落格都適用)

Image SEO 圖片搜尋優化


為了爭取比較好的網路流量,大家都想破頭爭取比較前面的 Google 的搜尋排名,不斷優化了文章內容、內部連結、網站速度等,更恨不得把所有的關鍵字都塞進文章裡。但做好這些簡單的『圖片設定』,會讓你的內容更受到搜尋引擎喜愛。


有關圖片 SEO 的迷思

對於內容描述,優質的圖說能讓整篇文章節奏閱讀活絡起來,讀者閱讀專業、嚴肅的文章也比較輕鬆,只是大家對於圖片不免也有些疑問。

圖片對 SEO 真的有效嗎?

當然有效,圖片也是 Google 使用者很重要的搜尋目標。從 Google 官方統計 指出,2018 年的行動裝置「圖片搜尋量」比 2016 年成長超過 60%,代表圖片需求一定會影響搜尋排名,而且 SEO 關鍵還會在手機、平板。

▲ 2018 年行動裝置的圖片搜尋成長超過 60%

Google 不是有圖片辨識技術嗎?

目前 圖片辨識 還是有誤差,有時候也不一定是我們想傳遞的訊息,所以透過文字設定才能定義最精準的圖片內容。(有興趣也可以參考 圖像文字和 SEO 一文)

圖片上加入文字會有效果嗎?

同上,搜尋引擎爬蟲是閱讀「文字」(程式碼) 的生物,有任何圖片有關鍵字置入的考量,還是要透過圖片設定最好。


優化圖片 SEO 的設定

每張圖片的優化設定並不困難,但對 SEO 卻能達到淺移默化的作用,也因為圖片製作比較費時、費工,沒有得到有效的關注非常可惜。

我們以下方這張圖片為例,針對圖片 SEO 來做一些優化設定, 雖然本文是以 Google Blogger 為主的建議,但所有設定都可以對應在任何網站、部落格。

【Blogger】優化圖片設定,讓網頁 SEO 神進步 - 圖片命名、替代文字、標題文字、說明文字
▲ 以這張圖片,來講解圖片 SEO 需要做的設定


1 - 圖片命名 (Image Name)

命名概念跟曾經分享過的 設定文章、網頁網址名稱 相同,我們可以將圖片的檔名「有意義化」,加入與圖片有關聯的關鍵字。圖片盡量不單用流水號、時間來做表示,因為這樣無形損失了一些關鍵字。

但考量整體圖片管理,這張圖片我依舊加入了流水號,於是取名為「02-圖片搜尋優化.jpg」方便管理。但如果有考慮更廣泛的曝光,請以英文形式命名為「02-image-seo.jpg」,單字與單字之間請使用 - 來間隔。

【Blogger】優化圖片設定,讓網頁 SEO 神進步 (網站、部落格都適用) - 圖片命名
▲ 圖片使用英文命名,可以收到更好的 SEO 效果

Blogger 裡有一個事後無痛修改檔名的方式,在文章編輯時切換至「HTML 模式」,找到圖片的對應語法位置,將最後面亂碼呈現的檔名 (下圖反白處) 更換,這邊置換為 image-seo。

可能是 Google 相簿管理結構很特別,可以讓我們這樣無痛修改,不過一張一張修改也是很辛苦,建議一開始就先設定比較有效率。

這邊是 修改前長網址修改後 SEO 優化網址,雖然網址有變化,但是讀取都沒有問題。

【Blogger】優化圖片設定,讓網頁 SEO 神進步 (網站、部落格都適用) - Blogger 事後更換檔名不影響讀取
▲ Blogger 有個神奇的檔名置換方式,但比較費時費工

2 - 替代文字 (Alt Text)

在 HTML 語法中,圖片有個屬性叫作 alt,是英文 alternative (替代) 的簡寫。當圖片遺失連結、無法作用時,它可以提供基本的圖片資訊,後來也被螢幕閱讀軟體所使用,方便視障者也能讀到網頁內容。

因為替代文字提供了許多相關資訊,所以也被搜尋引擎作為判別圖片之用,提供最符合使用者期待的圖片。因此幫圖片加入替代文字,無形就是把搜尋關鍵加註在圖片中,SEO 自然會向上升級。

在 Blogger 文章編輯時,只要「選取圖片」就能設定替代文字 (屬性)、標題文字 (屬性)、說明文字。整段內容以不超過 150 個字元為主,但建議適度運用就好,不要讓文字變得過度累贅。以上方圖例,筆者是使用 文章標題 + 關鍵說明,來串連重點關鍵字。

例:【Blogger】優化圖片設定,讓網頁 SEO 神進步 - 圖片命名、替代文字、標題文字、說明文字

【Blogger】優化圖片設定,讓網頁 SEO 神進步 (網站、部落格都適用) - 設定替代文字、標題文字、說明文字
▲ 選取圖片,就能設定替代文字、標題文字、說明文字

【Blogger】優化圖片設定,讓網頁 SEO 神進步 (網站、部落格都適用) - 設定標題文字、說明文字
▲ 標題文字與說明文字能共用內容,筆者習慣填入文章標題 + 關鍵說明

3 - 標題文字 (Title Text)

標題文字也是 HTML 語法中的圖片屬性,作用於滑鼠靠近圖片時,彈跳出圖片說明的小視窗。一般來說,圖片 SEO 可以選擇設定替代文字即可,但還是建議將相同的內容也填入標題文字。

【Blogger】優化圖片設定,讓網頁 SEO 神進步 (網站、部落格都適用) - 標題文字有提醒之用
▲ 標題文字仍具提醒之用,可填入與替代文字相同內容

4 - 說明文字 (Caption)

歸納人類在快速閱讀時,視覺很容易停駐在幾個地方:標題、加粗加大字體、反白字體、項目列表、圖表、說明文字、主題句、表格。即使不看完整篇文章,它們也可以幫忙讀者抓取到文章重點。

而依據 SEO 專家分享,圖片下方的『說明文字』的關注度是本文的 3 倍之多,長久以來報紙、雜誌都是這樣聚焦重點。對於讀者很重要,搜尋引擎也可以利用抓取說明文字的標籤,將它列為對圖片的描述。

【Blogger】優化圖片設定,讓網頁 SEO 神進步 (網站、部落格都適用) - 說明文字是本文閱讀量的 3 倍
▲ 『說明文字』的關注度是本文的 3 倍之多,對於聚焦重點非常重要


讓圖片更有影響力的細節

做好了上一段的基礎設定,接下來的操作細節也建議大家參考,能幫你的圖片 SEO 更加分:

1 - 文字設定遵循使用者體驗

「使用者體驗」一直是 Google 重要的前進方向,帶給用戶符合期待的結果,就能獲得搜尋引擎的親睞。對於圖片 SEO 需要很多文字設定來輔助,請盡量遵循以下這些關鍵:

發揮文字原有的功能:

替代文字、標題文字要控制在 150 個字元之內,才不會偏離它們的功能

讓使用者能閱讀重點:

說明文字要納入文章段落的重點,才能讓圖片更有聚焦功用

維持合理的閱讀性:

文字內容應以「文句暢通」呈現,避免搪塞關鍵字造成無法閱讀

合理置入關鍵字:

添加過多不合理的關鍵字,只會讓人想回到上一頁而已

【Blogger】優化圖片設定,讓網頁 SEO 神進步 (網站、部落格都適用) - 使用者體驗是 SEO 的邏輯之一

▲ 要成為 Google 的夥伴,就要掌握「使用者體驗」的 SEO 邏輯


2 - 控制圖片檔案大小

太大的圖片 (原圖) 很容易造成頁面載入過慢,使用者體驗會對網站 SEO 大扣分,圖片可能要適當控制一下大小,避免過大、過多的圖片拖垮你網站的速度。

目前新的網路圖片格式 WebP,結合了 JPEG 和 PNG 格式的優點,超小檔案卻擁有超高畫質。你可以嘗試用 Squoosh 來壓縮看看,成效非常驚人,只是這個格式在檢視和應用比較麻煩,這是比較美中不足的地方。

3 - 網站支援圖片自適應

只要你的 Blogger 版型設計有支援響應式網頁設計 (RWD, Responsive Web Design),就沒有這個圖片煩惱。如果還沒有的話,可能要盡快找到適合的版型來套用喔!

4 - 原創圖片更加分

頁面中的「原創圖片」絕對是大加分的項目,如果沒有這類的圖片,使用有版權的 素材圖片、創用 CC (Creative Common) 圖片也是不錯的選擇,至少在使用上是沒有爭議的。

【Blogger】優化圖片設定,讓網頁 SEO 神進步 (網站、部落格都適用) - 原創圖片對 SEO 加分,也避免版權爭議
▲ 原創圖片對於 SEO 是大加分,也避免圖片的版權爭議


總結

有時候不要把 SEO 想得太複雜,幫圖片做些小設定其實不難,幾乎是沒有什麼技術難度,但簡單的事情就很越容易被小看。許多主流網站、內容網站都不執行這項設定,但這反而給了部落格、一般網站更多曝光的機會。

【Blogger】優化圖片設定,讓網頁 SEO 神進步 (網站、部落格都適用) - 圖片設定讓網站曝光機會更多
▲ 不要小看這些圖片設定,它們讓你的網站更具價值



延伸閱讀:

【網站 SEO】注意這些 Google 現象,網站 SEO 成果已經開始發酵!
【網站 SEO】內容行銷就靠 Google Trends,精準切入時下核心話題
【網站 SEO】善用 Google Search Console 加速網站曝光效率
【網站 SEO】如何設定新版 Google Analytics 4 property?
【網站 SEO】部落客都要懂,提高 Blogger 能見度的基礎設定
【網站 SEO】Google Blogger 內部轉址超實用,自訂重新導向網址
【網站 SEO】讓網路 SEO 結果不一樣,就靠設定文章、網頁網址名稱
【行銷手札】免費圖庫網站推薦,社群、內容行銷秒強大

-------------------------------

更多內容,歡迎關注『布蘭特大叔』

部落格:https://bit.ly/UB-WebSite
FB 專頁:https://bit.ly/UB-FB
YouTube 頻道:https://bit.ly/UB-YouTube

張貼留言

1 留言

歡迎留言,大叔會盡快回覆您喔!
只是有時候垃圾留言較多,偶爾會開啟審核過濾。
只要確認有送出,大叔都會看得到留言。

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)