優質外部連結結構的立體示意圖

圖片SEO怎麼做?從替代文字、檔名到圖片網址異動的實務重點

Posted by:

|

On:

|

不少網站很用心經營文字,圖片卻是隨手上傳:檔名停在相機給的流水號,替代文字不是空白就是整站同一句。圖片SEO要做的,是讓搜尋引擎看懂每張圖片在表達什麼、讓圖片在對的搜尋情境被看見,同時不拖慢頁面。這篇文章寫給自行管理網站的企業主、電商與內容網站的行銷人員,以及習慣在WordPress上稿的人;Google相關功能會持續更新,實際以Google官方說明為準。

圖片會在哪些搜尋情境被看到

第一種是圖片搜尋。使用者切換到圖片分頁時,想找的多半是「長什麼樣子」的答案:商品外觀、裝潢風格、料理擺盤。這類使用者會先掃過一排縮圖,再點進最符合需求的那一張,圖片是否清晰、主體是否明確,直接影響會不會被點選。

第二種是一般搜尋結果裡穿插的圖片,或網頁結果旁附帶的縮圖;商品、食譜、文章這類頁面,也可能因為結構化資料而以帶圖的形式呈現,此時圖片的作用是讓人注意到這筆結果。哪些查詢會出現圖片、以什麼形式呈現,由搜尋引擎依查詢意圖決定,網站端無法指定,版面也可能隨版本調整。

第三種是以圖搜尋:用手機拍下一盞燈或一張沙發,透過Google智慧鏡頭(Google Lens)這類功能找出相似商品。搜尋引擎靠辨識畫面,再比對網路上已知的圖片與頁面,所以商品圖拍得清楚、角度完整,又放在資訊齊全的頁面上,才比較有機會被配對到。

替代文字的本質:寫給看不到圖片的人

替代文字(alt屬性)原本是為看不到圖片的人而設:螢幕閱讀器會把它念給視障者聽,圖片載入失敗時,畫面上也會顯示這段文字。搜尋引擎同樣會參考替代文字來理解圖片,但只是附帶的受益者;把這個順序想清楚,替代文字就不容易寫歪。

好的替代文字描述畫面裡實際有什麼,並且呼應圖片在該頁的用途。同一張客廳照片,放在裝潢案例頁時可以寫出格局、材質與色調;放在家具商品頁時,重點就是那張沙發的款式與顏色。寫完之後,可以用這幾個問題自我檢查:

  • 只聽這段文字、不看圖,能不能大致想像出畫面?
  • 有沒有寫進畫面裡不存在的資訊,例如地區名稱,或「推薦」「最划算」這類詞?
  • 相鄰幾張圖是不是反覆出現同一個關鍵字?

純裝飾的分隔線、背景紋理或排版用小圖示,可以保留alt屬性但內容留空,讓螢幕閱讀器直接跳過。判斷方式很簡單:拿掉這張圖,頁面資訊有沒有少了什麼?有少,就把少掉的部分寫成替代文字。若圖示本身就是按鈕,例如只有放大鏡圖案的搜尋鈕,替代文字要寫出它的功能。

檔名、圖說與周圍文字,讓圖片和頁面主題對得上

檔名是搜尋引擎理解圖片的線索之一,也會直接成為圖片網址的一部分。與其沿用相機流水號,或「最終版-修改」這類內部工作用的名稱,不如用簡短的英文單字描述內容、以連字號分隔,例如「oak-dining-table-front-view」。檔名裡避免空白與特殊符號;中文檔名在部分系統中會被轉成一長串編碼,管理與除錯都比較麻煩。檔名同樣不必堆疊關鍵字。

圖說是緊貼在圖片下方、讀者真的會看的文字,許多人瀏覽文章時,視線常在小標、圖片與圖說之間跳躍。圖說適合補充畫面看不出來的資訊,例如施工前後的差異或圖表想表達的結論;替代文字描述畫面,圖說交代畫面以外的脈絡,兩者不必寫成一模一樣。

搜尋引擎也會參考圖片所在的頁面,看頁面標題、附近的小標與段落是否在談同一件事。一張說明防水施工步驟的圖,放在介紹該步驟的段落旁,意思就很清楚;若放在頁尾或無關的側欄,關聯就弱了許多。把圖片放在最能說明它的段落附近,並讓每個頁面有明確的主題,圖片才有清楚的上下文可以依附。

原創圖片與素材授權:商品圖、案例圖怎麼處理

圖庫素材方便又好看,但同一張握手照出現在無數網站上,既提供不了額外資訊,也讓人記不住品牌。素材圖比較適合放在營造氛圍的位置;商品、服務流程、完成作品這些真正承載資訊的地方,應該盡量使用自己拍攝或製作的圖片,避免整站看起來都是同一批素材。

使用任何不是自己拍的圖片,都要先確認授權範圍:能否商業使用、能否用在網站與廣告、是否需要標示來源、可不可以修改,並保留授權紀錄。網路上隨手存下來的圖片,即使看不到版權標示,也不代表可以自由使用;著作權相關問題以現行法規與實務為準,個案請諮詢專業人士。

商品圖建議準備多個角度、細節特寫與實際使用的情境照,背景與光線盡量一致,讓商品列表看起來整齊,以圖搜尋時也比較容易被辨識。案例圖則要先取得業主或客戶同意,避免拍到門牌、證件等可識別個人的資訊;浮水印不要遮住主體;同一個案例只挑真正有代表性的畫面,不必把角度相近的照片全部上傳。

格式、尺寸與載入方式如何影響頁面速度

圖片常是頁面中最佔體積的資源,直接影響載入速度與瀏覽體驗,而Google以Core Web Vitals等指標描述網頁體驗,細節以官方說明為準。格式可以依內容判斷:照片類適合失真壓縮的格式;需要透明背景或線條銳利的標誌,適合支援透明度的格式或向量格式;新一代的圖片格式通常能以更小的檔案維持相近畫質,但要先確認支援情況。

尺寸的原則是「顯示多大,就提供多大」,小版位卻載入攝影原檔,只會讓瀏覽器下載大量用不到的畫素。響應式圖片替同一張圖準備幾種不同寬度的版本,由瀏覽器依螢幕與版面挑選合適的一個;壓縮則是在畫質可接受的範圍內盡量縮小檔案。

延遲載入讓畫面下方的圖片等使用者捲動接近時才下載,但頁面一打開就看得到的文章首圖或商品主圖不該延遲,否則主要內容反而更慢出現。替圖片標明寬度與高度、讓瀏覽器事先保留版位,可以避免畫面跳動;也要確認圖片網址不是等使用者點擊後才插入頁面,否則搜尋引擎可能看不到這些圖片。

讓搜尋引擎持續找得到圖片:網站地圖、結構化資料與網址異動

搜尋引擎主要透過頁面中的圖片標籤發現圖片。若圖片由程式動態載入、放在其他網域的CDN上,或數量龐大,可以在網站地圖中加入圖片資訊,協助發現可能漏掉的圖片,但這只是輔助管道,不代表一定會收錄。結構化資料則可以依Schema.org的詞彙,替商品、文章等類型標記代表性的圖片,例如商品主圖或文章主視覺;圖片屬性的要求以Google官方說明為準,標記的應該是頁面上實際看得到的那張圖。

圖片在搜尋引擎中是以網址作為身分。更換主機、調整網址結構、搬到新網域,或導入CDN讓圖片改由另一個網域提供,只要圖片網址變了,搜尋引擎就得重新認識這些圖片,原本累積的曝光可能因此中斷。很多搬站計畫只處理網頁轉址,卻忘了圖片,規劃時可以對照以下項目:

  • 先匯出舊站的圖片網址清單,搬遷後逐一比對,能維持原路徑就盡量維持。
  • 網址非變不可時,替重要的圖片網址設定永久轉址。
  • 確認新網域或CDN沒有被robots.txt封鎖,防盜連設定也沒有擋到搜尋引擎的檢索器。
  • 同步更新網站地圖、結構化資料與文章內文中寫死的圖片網址。

搬遷完成後,在Google Search Console留意檢索與收錄狀況,並於成效報表觀察圖片搜尋的表現變化,介面名稱可能隨版本調整。圖片網址一旦確定,就盡量長期維持穩定。

WordPress媒體庫的日常作法

WordPress會以上傳時的檔名作為檔案網址,上傳後在媒體庫修改「標題」並不會改變網址,所以改檔名必須在上傳之前完成。壓縮與調整尺寸也建議先在電腦上處理好,不要把攝影原檔直接丟進媒體庫,等圖片被文章引用後再替換就麻煩了。

媒體庫的圖片欄位通常有替代文字、標題、說明、描述幾項,名稱可能隨版本與語系調整;真正會輸出成替代文字的是「替代文字」欄位,說明則常顯示為圖說。要留意的是,圖片插入文章時,替代文字通常當下就複製進內文,事後在媒體庫修改不一定會同步,需要回到文章裡確認。精選圖片同樣要填寫替代文字,它常出現在文章列表與分享縮圖中。

上傳圖片時,WordPress會依系統與佈景主題的設定自動產生數種縮圖尺寸,供不同版位與響應式圖片使用;更換佈景主題後若尺寸不符,圖片可能被拉伸或載入過大的版本,這時就要重新產生縮圖。另外,依版本與設定不同,WordPress可能替每張圖片建立幾乎沒有內容的附件頁面,建議確認這類頁面是否需要讓搜尋引擎收錄。

圖片SEO常見的幾個錯誤

整站使用同一句替代文字是最常見的狀況,例如每張圖都寫公司名稱加服務項目,對看不到圖片的人毫無幫助,搜尋引擎也分不出各張圖片的差異。把重要文字做成圖片也很常見:營業時間、價目表、服務流程做成一張漂亮的大圖,搜尋引擎與螢幕閱讀器卻讀不到,在手機上還小到看不清楚,這類資訊應該用網頁文字呈現。

CSS背景圖則是容易忽略的盲點:它不會被當成頁面內容中的圖片收錄,也無法設定替代文字。純粹營造氛圍的背景沒有關係,但商品主圖、代表作品或帶有關鍵資訊的圖,就應該改用一般的圖片標籤放進內容裡。

最後是圖片過大拖慢手機。在辦公室用高速網路預覽一切順暢,不代表使用者在通勤途中用行動網路瀏覽也一樣,首頁輪播塞滿高解析度大圖就是典型的例子。建議定期用手機實際打開重要頁面,並搭配Google Search Console中與網頁體驗相關的報表觀察。

常見問題

替代文字和圖片的title屬性有什麼不同?替代文字是圖片無法顯示或使用輔助科技瀏覽時的替代內容;title屬性通常只在滑鼠停留時以提示框出現,手機上幾乎看不到,螢幕閱讀器也不一定會念出來。處理圖片SEO時,應該以替代文字為優先。

每張圖片的替代文字都要放關鍵字嗎?不需要。替代文字與檔名應該描述圖片內容,內容剛好和主題相關時,相關詞彙自然會出現;為了放關鍵字而寫出跟畫面不符的描述,對使用者沒有幫助,也可能被視為堆砌關鍵字。

網站裡已經有大量舊圖片,需要全部重新改檔名嗎?不建議為了改檔名而大規模更換舊圖片的網址,因為改檔名就等於換網址,處理不好反而失去原本的收錄。比較務實的做法是:舊圖片優先補齊替代文字與圖說、把過大的圖片重新壓縮,命名規則從新上傳的圖片開始落實。

圖片搜尋帶來的流量值得經營嗎?要看產業性質。商品、居家裝潢、料理、旅遊這類重視外觀的領域,使用者常從圖片開始比較,再點進網站了解細節;以觀念說明為主的內容,從圖片進站的機會就相對少。可以在Google Search Console的成效報表中把搜尋類型切換為圖片,看看哪些頁面的圖片有被看見與點擊,再決定投入程度,實際功能以Google官方說明為準。

如果不確定網站上的圖片有沒有被搜尋引擎正確讀取、替代文字寫得是否恰當,或是準備搬家、導入CDN之前想先盤點圖片網址,創昇SEO提供免費網站健檢,可以從檔名、替代文字、載入方式到圖片收錄狀況一併檢查,整理出最值得先動手的頁面。

至於商品圖該怎麼拍、案例照片怎麼挑選與標註,或是WordPress媒體庫要怎麼整理才順手,創昇SEO也提供全台免費到府解說,直接打開你的後台與實際頁面,一起討論一套團隊長期做得下去的圖片上稿流程。

Posted by

in

加 LINE 免費諮詢