用魔法打敗魔法,圖片Image SEO怎麼操作?

Photo of author
Written By CMO

都已經2022年了還需要說圖片SEO嗎?當然需要,要知道20%的谷歌檢索量來自圖片搜索。因此如果你面向海外,那麼針對圖片進行SEO工作是必做的功課。在AI技術逐漸成熟的今天,這些功課更加重要。

Google Image Search優化
Google Image Search優化

本篇行銷長將帶讀者過一下圖片SEO的要點和做法。

Image SEO會使你的頁面排名提升嗎?

在說圖片SEO之前,我們必須認清圖片SEO的目的。谷歌的John Mueller非常明確地說了alt文本屬性僅僅是幫助我們圖片SEO的效果。也就是說,你做圖片SEO,那麼效果將體現在圖片搜索,而不是網頁搜索

不過,圖片SEO的確可以提升我們頁面的流量,也可以幫助我們間接影響排名。

谷歌搜索結果頁面上顯示的縮略圖
谷歌搜索結果頁面上顯示的縮略圖

比如上圖中,有一條結果是不含縮略圖的(原因是該頁面上沒有包含刺猬的圖片)。這將影響其點擊率並最終使其排名降低。

建立圖片站點地圖

如果您的圖片是以爬蟲友好的方式編碼的,並且它們所在的頁面也很容易被發現和爬取,那麼你真的不需要圖片站點地圖。我們知道大多數網站並非如此。許多圖像以搜索引擎無法看到的方式延遲加載。如果你要用最基礎的方式來解決圖片的可爬行性,那麼選擇製作一個圖片的站點地圖將是最優解。

圖片站點地圖有兩種製作方式,第一種為純圖片的sitemap做法,第二種為混合sitemap做法。

在介紹之前,請知悉一些舊的標籤已經不再使用。你可以將它們從你的現有站點地圖中去掉。時間節點在2022年8月6日。它們包括<image:caption>、<image:geo_location>、<image:title>、<image:license>。

純圖片的sitemap

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <image:image> <image:loc>https://hubspot.one/wp-content/uploads/2015/08/qrcode.png</image:loc> </image:image> <image:image> <image:loc>https://hubspot.one/maxket_logo.png</image:loc> </image:image> </urlset>

上面就是一個純圖片的sitemap。你只要將需要被索引的圖片放入其中即可。

混合圖片的sitemap

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>https://hubspot.one</loc> <image:image> <image:loc>https://hubspot.one/wp-content/uploads/2015/08/qrcode.png</image:loc> </image:image> <image:image> <image:loc>https://hubspot.one/maxket_logo.png</image:loc> </image:image> </url> </urlset>

上面就是一個混合圖片的sitemap的例子,它比第一個做法複雜。但是因為圖片和頁面對上了,有更多的相關性。比如爬蟲可以結合alt屬性來理解圖片的內容,不然就只能靠文件名了。另外因為同一張圖片有可能被用於多個頁面,這樣的sitemap會更fat一點。

選擇合適的格式並優化圖片文件大小

圖片大小是影響該圖片需要多久才能下載完的重要因素。谷歌在web.dev上給出了圖片優化的重點。其中選擇正確的圖片格式是至關重要的。我們知道各種圖片格式都各有各的特點,比如PNG和GIF支持透明,GIF支持動畫。還有SVG是矢量格式,怎麼放大都不會失真。

選對了圖片格式會讓圖片文件的大小更合理。現代的瀏覽器還支持WebP格式的圖片,它支持透明和動畫,綜合壓縮率也不錯。不過對一些本土搜索引擎,該格式的表現還有待提高。

確定好格式後可以對圖片進行壓縮,市面上有多種圖片壓縮工具。有的CMS也提供許多圖片壓縮的插件供選用。

優化圖片尺寸

圖片尺寸是指圖片的長和寬。許多進行圖片搜索的用戶都想要找分辨率更高的大尺寸圖片。從這個角度來說,我們必須要考慮到用戶的意圖。推薦在網站中推薦多個尺寸的圖片版本。我們可以使用HTML5中的<picture>標籤。

<picture>標籤可以為多個不同寬度的設備指定不同圖片
標籤可以為多個不同寬度的設備指定不同圖片

在上圖這個W3schools的例子中,默認的是橙色花,而當寬度大於465像素起開始用白色花,並當寬度大於650像素起開始用粉色花。

這樣做的另一個好處是,瀏覽器只會下載適合目前瀏覽器寬度的那張圖片。當在小屏幕瀏覽時這會節省許多流量。搜索引擎卻能夠看到所有版本的圖片並使用同一個alt屬性。

對圖片添加描述

終於講到大家最熟悉的圖片SEO的部分了。

alt屬性

行銷長在2014年的文章中詳細講解過alt屬性的使用方法和要點。 alt屬性不宜過長,要避免堆砌關鍵字,這樣只要我們能描述好圖片內容就算是好的alt屬性。

圖片文件名

圖片文件名可以讓分享的對象更好預期打開後看到的內容,對搜索引擎也是這樣。用谷歌的原話說:

為圖片創建良好的網址結構:Google 會藉助網址路徑以及文件名來理解您的圖片。我們建議您好好組織圖片內容,使網址結構合乎邏輯。

Google 圖片最佳做法

同時谷歌還建議——如果要本地化圖片,請務必同時翻譯文件名。這一點行銷長還是讓大家來決定,因為非英文的文字往往會帶來一些亂碼,不利於傳播。

頁面標題和描述

頁面標題和描述同樣可以讓你的圖片更相關。所以頁面的SEO可以幫助圖片的SEO,反正亦然。這裡我們也只需遵循常規的SEO原則即可。

防止直接展示源尺寸

有沒有發現當你在使用Google Image Search的時候有時候只能看到縮略圖,要想打開原始圖片就必須去源網頁?這裡的技巧是你可以針對部分圖片HTTP請求做過濾。

這些HTTP請求的referer字段如果來自於Google的域(包括google.co.jp等)你可以返回200狀態碼其中響應的body為空,也可以返回204狀態碼,效果一致。結果谷歌圖片搜索沒有收到返回的圖片就不會直接展示源圖片而僅僅展示緩存的縮略圖。

用戶想要獲取源圖片則必須到你的網站來,這麼一來你的流量就自然產生了!

魔法打敗魔法,檢測圖片是否相關

最後,我們說說搜索引擎是如何知道你的圖片說了什麼內容的。你記不記得谷歌時常讓你從一堆圖片裡找出某件東西,以此來測試你是不是機器人?這就是谷歌訓練其人工智能用來識別圖片。

谷歌可以做到識別圖片中的事物和文字,用來判斷圖片內容。因此,如果你希望提升圖片和目標檢索詞的相關性的話,最好問一下谷歌自己。畢竟用魔法打敗魔法才是最酷的。

谷歌最近上線了免費的AI圖片識別分析工具。你可以在下面的鏈接進行試用。

https://cloud.google.com/vision/docs/drag-and-drop

圖像識別API測試
圖像識別API測試

通過該工具,你可以對你發布的圖片進行檢測。其結果會告訴你哪些是關聯到圖片的實體。包括物體、Logo、文字等各種訊息都會在結果中找到。另外你還可以知道你的圖片是否會觸發安全搜索的機制。

總結一下

本篇我們回顧了一些老的方法和新的方法,SEO對圖片來說可以從相關性和一些技術SEO的手段來實現。不要忘了,要想圖片SEO產生效果,要把圖片放在正確的HTML標籤中,而不要用作css背景圖片。這就是我們前面提到的<img>和<picture>標籤。最後祝大家斬獲更多自然搜索流量。