什麼是 alt 屬性和 title 屬性？
這是一個完整的 HTML 圖像標籤：
<img src=“image.jpg” alt=“image description” title=“image tooltip”>
alt 屬性和標題屬性是用於提供圖像的文字描述和附加信息的重要屬性。以下是對這兩個屬性的更詳細解釋：
- alt 屬性（Alternative Text）：alt 屬性是為圖像提供替代文字描述的屬性。當圖像無法顯示時（例如，當瀏覽器無法載入圖像或用戶使用瀏覽器時），alt 屬性可以顯示為代替內容。它也是搜索引擎理解和索引圖像內容的重要依據。因此，為每個圖像添加具有描述性和相關關鍵詞的 alt 文本是提高可訪問性和搜索引擎優化的重要步驟。
- 標題屬性（Title Attribute）：標題屬性提供了對圖像的附加信息，通常以工具提示的形式顯示。當用戶將滑鼠懸停在圖像上時，標題屬性可以提供更詳細的描述、說明或相關內容。然而，需要注意的是，標題屬性對於搜索引擎的重要性相對較低，並且對於搜索引擎優化的影響有限。
為了優化您的圖像，建議您：
- 為每個圖像添加具有描述性和相關關鍵詞的 alt 屬性。
- 使用標題屬性（如果適用）為圖像提供附加信息。
- 確保 alt 屬性和標題屬性與圖像內容相符，並提供有價值的信息給使用瀏覽器的用戶和搜索引擎。
- 避免使用過度關鍵詞填充或無意義的 alt 屬性，這可能對可訪問性和搜索引擎優化產生負面影響。
替代文本
alt 屬性提供的替代文本是供瀏覽器使用的，以幫助視覺障礙的用戶理解圖像的內容。除了瀏覽器之外，搜索引擎也使用這些信息來了解圖像的內容和目的，從而影響搜索引擎優化。
對於每個圖像，確保提供具有描述性和相關的替代文本是非常重要的。替代文本應該在描述圖像的同時提供有價值的信息，讓使用瀏覽器的用戶和搜索引擎能夠理解圖像的內容。這有助於提高網站的可訪問性，使視覺障礙的用戶能夠獲得完整的用戶體驗，同時也有助於搜索引擎理解和索引您的圖像。
您提到的一點很重要，不是每個圖像都需要替代文本。對於僅具有裝飾性目的的圖像，可以將其視為純粹的裝飾元素，而無需提供替代文本。但對於傳達信息或具有重要內容的圖像，請確保提供適當的替代文本以提供有價值的信息。
綜上所述，使用 alt 屬性提供有價值的替代文本是一個重要的做法，既有助於可訪問性，也有助於搜索引擎優化。確保替代文本符合圖像內容，並提供相關和描述性的信息，以確保最佳的用戶體驗和搜索引擎理解。
標題文字
title當您將鼠標懸停在元素上時，該屬性將顯示為工具提示。標題屬性不是 必需 的。更重要的是，大多數時候添加它甚至沒有意義。title它們僅適用於使用鼠標（或其他指點設備）的人，並且輔助功能需要該屬性的唯一一種情況是 on<iframe>和<frame>標籤。
如果屬性傳達的信息title是相關的，請考慮以純文本形式在其他地方提供。如果不相關，請考慮title完全刪除該屬性。
但如果圖像沒有目的怎麼辦？
如果你的設計中的圖像 純粹是 出於設計原因，那麼你就錯了。這些圖像應該位於 CSS 中，而不是 HTML 中。如果您確實無法對這些圖像執行任何操作，請給它們一個空alt屬性，如下所示：
<img src="image.png" alt="">
空alt屬性可確保瀏覽器跳過圖像。
替代文本和 SEO
谷歌 關於圖像的文章 有一個標題“使用描述性替代文本”。這並非巧合。Google 對替代文本給予了相對較高的重視。他們用它來確定圖像上的內容以及它與周圍文本的關係。