圖片SEO的處理方法��補充最後一天上課沒有錄影到部分

期末考，除了考關鍵字的SEO外，也會考圖片的SEO，上次上課的最後10分鐘因為沒有錄影到，有些同學提早離開去工作，現在做點補充說明

為什麼要做圖片SEO呢？��提升搜尋引擎的可理解性�提高搜尋排名與流量�改善使用者體驗（特別是無法載入圖片時）�支援無障礙設計,方便使用螢幕閱讀器的視障用戶獲取完整

為什麼要在做圖片的SEO呢？有4個理由：

第1，提升搜尋引擎的可理解性，alt 和 title 的文字說明能幫助它們理解圖片內容。

第2，提高搜尋排名與流量，優化的圖片能在圖片搜尋中排名更高，

第3，改善使用者體驗（特別是無法載入圖片時），

第4，支援無障礙設計，alt 提供圖片描述，方便使用螢幕閱讀器的視障用戶獲取完整資訊。

把a1.png優化符合SEO

• 優化圖片以符合SEO的語法：
• <img src="a1-環保礦泉水-雪山.png" �alt="來自雪山的環保礦泉水" �title="來自雪山的環保礦泉水" />

​

• 總共設定3個參數
• SRC：設定圖檔名稱
• ALT：設定當圖片遺失的取代顯示文字
• TITLE：設定當滑鼠懸停時顯示的圖片訊息

​

• 做圖片SEO時，要設定img指令的3個參數，分別是，
• 第1，SRC設定圖檔名稱，
• 第2，ALT設定圖片遺失的取代顯示文字，
• 第3，TITLE設定滑鼠懸停時，顯示的圖片訊息

把a1.png優化符合SEO

• src �🡪 優化檔名(英文更好)
• 🡪能夠更符合中文SEO的要求
• 🡪有助於搜尋引擎理解圖片的內容

​

​

• src參數能夠設定圖片檔名，用英文會更好，它有助於搜尋引擎理解圖片的內容

​

把a1.png優化符合SEO

• alt（ Alternative替代文字）
• 功能：圖片的替代文字（ Text）
• 當圖片無法顯示(網路問題，或圖片不見)
• 或在視障者用螢幕閱讀器時
• alt 屬性所提供的文字將會顯示或讀出
• 有助於無障礙設計的輔助，增強使用者體驗

​

• alt參數的英文是 Alternative，意義上替代文字，alt的功能是：圖片的替代文字（ Text），這是當圖片無法顯示，可能是因為網路問題，或圖片不見了，或在視障者用螢幕閱讀器時，alt 屬性所提供的文字將會顯示或讀出者有助於無障礙設計的輔助，增強使用者體驗

把a1.png優化符合SEO

• title
• 功能：當使用者將滑鼠懸停在圖片上時，會顯示「來自雪山的環保礦泉水」，
• 這有助於提升使用者體驗。

​

• title參數的功能是：當使用者將滑鼠懸停在圖片上時，會顯示「來自雪山的環保礦泉水」訊息，這有助於提升使用者體驗。