必學八個圖片SEO基本功(1)圖檔命名& alt文字的藝術
| 目錄 1. 圖片SEO的重要性 2. 8大圖片SEO心法 2-1. 使用合適的圖片檔名 2-2. 優化 alt 文字 2-3. 能不用圖片就不要用圖片 2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸 2-5. 圖片寬度別超過網頁的內容 2-6. 圖片 Exif 資訊 - 視狀況而刪除 2-7. 選擇適當格式的圖片檔 2-8. 創建圖片的 sitemap (進階) |
圖片SEO的重要性
今天我們看到的 Google 商標只有 305 Bytes，經過壓縮後可以縮小為 195 Bytes。不過在 2015 年之前，舊的 Google 的 Logo 卻有 6KB (6,380 bytes)、經過壓縮後大小仍為 2 KB (2,145 bytes)。曾經，Google 針對我們看到的新 Logo 發表了以下談話：「舊的標誌由於檔案太大，讓我們必須在頻寬較低的網路上 (就是網路連線速度會比較慢)，變成文字模式的標誌。而新的標誌檔案大小降低，讓我們可以不再作任何的修正，而使用一致的標誌，讓全世界可以更容易地存取我們的資源」。
這就是我們 「Google 大神」 給大家的圖片 SEO 課程。反觀國內部分網頁設計者，希望網頁看起來漂亮，而使用高解析度的圖片大檔。但是部分使用者因礙於網路連線速度慢等因素，而無法看這樣高解析度的圖片。而近年來行動設備的使用者已成主流用戶，有些用戶使用有限的資費方案，若圖片檔案過大也會吃掉過多頻寬。因此要好好優化圖片檔案，可減少連線較慢的使用者的時間、也減少有限資費方案的使用者的頻寬、但又不失圖片的顯示尺寸。
8 大圖片 SEO 心法
以下列舉八項基本的圖片 SEO 方法，包含圖片大小的優化。1.使用合適的圖片檔名
搜尋引擎只會認字，然而，圖檔並不是文字，因此它能被搜尋引擎拿來當成線索的資訊非常有限。但另一方面，圖片的檔名是文字，對搜尋引擎來說，它可以給予搜尋引擎關於圖片內容的資訊。而當你需要上傳許多圖片時，直接用相機預設的檔名 (如 IMG00050.jpg、IMG00051.jpg 等等) 對 SEO 是沒有幫助的。 你可以將圖片的檔名改成與圖片內容符合的簡短敘述。如一件印著 「Stratovarius」 樂團的 T 恤圖片，你就可以命名為：a-Stratovaiurs-shirt.jpg 就比 IMG00050.jpg 更利於 SEO。
也許你會反駁說：「Google 的人工智慧技術一直都在進步。現在 Google 藉由機器學習所便是的圖片已經多到能主動讀取圖片的訊息...你隨便輸入一張圖片給 Google Cloud Vision API（雲視覺API），裡面的 AI 就能讀取分析圖片的資料了。 如下圖所示，我給 Google 一張圖片，它就馬上讀出圖片裡面有 「貓」 的資訊。【參見：動手玩玩 GOOGLE 人工智慧影像辨識雲平台：Google Cloud Vision API】
沒錯，對於部分難以辨識的圖片，Google 的 AI 還是會誤判的喔！如下圖 ，Google 解讀成圖片中的物體是 「cheese (乳酪)」 ，但事實上，這是一塊奶油...因為它們實在長得太像了！
所以要讓搜尋引擎正確的解讀你網頁上的圖片的方式，就直接給它一個正確而精準的名字吧！但是！絕對不要使用 「關鍵字堆砌」 的方式來命名，因為這樣會被 Google 判定為黑帽作弊網站，並被打入冷宮。【參見：SEO-white-n-black-hat-difference.html" target="_blank">白帽SEO、黑帽SEO，到底差在哪?】」
針對上述貓的貓咪圖片，下面有對於好的與錯誤的命名的範例：
好的命名範例: cat.jpg
錯誤的命名範例 (使用關鍵字堆砌的方式): cat-mammal-kitten-pussy-kitty
當然，單靠圖片檔名取的好，不一定就等於能排在 Google 搜尋結果前三名。但是，可以藉著圖片檔名增加與該網頁相關的線索！更何況，幫圖片重新命名並不會花你太多時間 - 所以這樣做還是值得的啦！
2.優化 alt 文字
比圖片檔名更可以給予搜尋引擎關於圖片內容的線索的，就是圖片的 alt 文字。
而當網頁無法載入圖片時，使用者就會無法在網頁上看到圖片，但是會看到 alt 文字。因此對於無法看到圖片的使用者，也能透過 alt 文字理解圖片的資訊。
alt 文字在撰寫上，應以簡短的文字寫出圖片的重要特徵，再加入關鍵字。 當然，也不能以胡亂填充關鍵字的方式來撰寫之，以免被 Google 判定為 SEO 作弊而被打入冷宮。
alt 的命名相較於圖片檔名，可以用更精確、更長的文字來敘述。如上例的貓咪圖片，圖片名稱命名為 「cat(貓)」、而 alt 命名為 「calico cat with heart-shaped fur pattern (一隻毛色有愛心圖樣的三花貓)」 ，HTML5 原始碼則如下例所示：
<img src="cat.jpg" alt="calico cat with heart-shaped fur pattern">
如果你的圖片是關於你賣的產品，就可在 alt 文字中放入品名、型號等重要資訊。這樣的話，若有使用者以品名或型號來搜尋，你的圖片就比較有機會在圖片搜尋的結果中出現，而提高曝光率。如果照片是關於產品的細節、不同角度等，也都可以補充在 alt 文字中作補充說明。
如今天你經營車用電池的專賣網站。 這時你正要上架一顆充電器，品牌為 「Battery Tender」 、型號為 「022-0186G-DL-WH」。 這時你的圖片名稱可命名為 「Battery-tender.jpg」、而 alt 命名就可以加入型號等資訊，為 「Battery Tender (022-0186G-DL-WH)」。因為有時 Google 可以憑藉著型號等資訊而判定圖片為何物。另外，你還可以加入其他更精確的訊息：如產品用途、伏特數等敘述，像是 「Battery Tender (022-0186G-DL-WH) 12V 5 Amp Battery Charger」 。HTML5 原始碼如下例所示：
<img src="Battery Tender.jpg" alt="Battery Tender (022-0186G-DL-WH) 12V 5 Amp Battery Charger">
延伸閱讀：
必學八個圖片SEO基本功(2)圖片真的不可或缺嗎?
必學八個圖片SEO基本功(3)縮小圖檔用HTML就好了嗎?
必學八個圖片SEO基本功(4)圖片寬度的重要&Exif資訊
有朋友真好？我聽朋友去達內教育學語言,成功加入自駕車重鎮發展的行列
五分鐘搞好CSS跟HTML的關係,簡單到前端工程師做夢也會笑!
金屬樂團創造行銷神話, 網路行銷課程列為經典案例
NOWnews 今日新聞
