什麼是Alt標籤以及如何使用它

什麼是Alt標籤以及如何使用它

圖片有助於使您的網站具有吸引力和視覺吸引力。但是,如果您不使用ALT標籤(也稱為“替代文字”或“替代標籤”)優化影象,您將錯失改善使用者體驗和網站可訪問性的重要機會。

要正確使用它們,首先了解什麼是alt標籤很重要。在這篇教程中,我們將討論什麼是alt標籤以及使用它們的原因。我們還將解釋如何在WordPress中為影象新增alt標籤,並介紹一些最佳實踐。

什麼是Alt標籤?

Alt標籤被新增到HTML中的影象,以描述它們在網頁上的內容和上下文。當媒體檔案無法正確載入或顯示時,alt標籤也會出現在影象容器中:

Alt標籤顯示

Alt標籤可幫助使用螢幕閱讀器的人(例如有視覺障礙的人)瞭解您網站上的內容。更重要的是,搜尋引擎蜘蛛在對您的網站進行爬行、索引和排名時使用它們來解釋您的影象。

在影象標籤中新增的質量alt標籤是一個簡短的描述,不僅解釋了影象呈現的內容,還解釋了它在頁面上的用途。在HTML程式碼中使用時,完整的影象標記如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>
<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>
<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

圖片alt標籤有時會與圖片標題或說明混淆。但是,影象標題是一種不同型別的屬性。當一個人將滑鼠懸停在影象上時,它們顯示為彈出文字。另一方面,標題與影象一起出現,通常在其下方,並提供有關它的附加資訊或詳細資訊。在正常情況下,訪問者永遠不會看到您圖片的 alt 標籤。

為什麼在影象上使用Alt標籤?

Alt標籤有多種用途。雖然您不需要使用它們,但這樣做有一些主要好處。由於搜尋引擎爬蟲和螢幕閱讀工具都使用它們,因此它們是網路可訪問性和搜尋引擎優化 (SEO)的重要組成部分。

提高了Web可訪問性

Alt 標籤有助於確保訪問者可以訪問和享受您網站的內容,即使使用輔助技術或純文字瀏覽器也是如此。當有視力障礙的人訪問您的網站時,他們的螢幕閱讀器會閱讀頁面上的文字。當它到達一個影象時,它將使用alt標籤來描述該影象是什麼。

如果缺少 alt 標籤,螢幕閱讀器可能會改為讀取影象檔名。這不僅在正確解釋影象方面通常無效,而且還可能令人困惑和具有破壞性,特別是如果檔名未經過SEO優化。

在某些情況下,例如當您在WordPress中將影象的alt標籤欄位留空時,螢幕閱讀器將完全跳過該影象。假設您在網頁上包含的影象有用途,這種缺失意味著訪問者在消費您的內容時無法獲得您想要的全部價值或體驗。

提高您的搜尋引擎排名

圖片alt標籤可以讓您更輕鬆地對您嘗試定位的關鍵字進行排名。搜尋引擎機器人很智慧,但它們無法像人類一樣解釋和理解影象的視覺方面。

Alt屬性為翻譯影象提供了一種基於文字的替代方法,更具體地說是用於合併相關關鍵字。包含目標關鍵字的文字描述可以增加您在圖片搜尋中獲得高排名的機會。

為了強調影象(以及替代標籤)在SEO中的重要作用,請考慮“特大號床上用品”的搜尋引擎結果頁面 (SERP):

ALT標籤SEO作用

第一頁不僅僅產生基於文字的結果;還有很多影象結果。如果優化並正確使用,alt標籤可以幫助提升您的SEO並生成超連結、可點選的影象,以顯示在此類搜尋中。這對電子商務網站和登陸頁面特別有益。

如何在WordPress中新增影象Alt標籤

一旦您瞭解在您的網站上使用影象alt屬性的好處,就該學習如何實際做到這一點了。幸運的是,WordPress使這項任務變得非常簡單明瞭。

要在WordPress中新增影象 alt 標籤,請登入到您的管理儀表板並導航到您想要新增影象的頁面或文章。在WordPress編輯器中,單擊加號圖示並選擇影象區塊:

圖片區塊新增

接下來,上傳您的圖片或從您的媒體庫中選擇一張。將影象插入區塊後,影象設定面板將在右側的側欄中開啟。您可以在Alt文字框中輸入您的描述:

WordPress圖片ALT新增

完成後,儲存更改。您也可以對現有影象執行此操作。例如,如果您想更新已釋出在您網站上的文章上的圖片,只需單擊該圖片並在側欄中輸入新的alt標籤即可。

如何在HTML中新增影象Alt標籤

當您使用WordPress或其他包含用於新增和編輯alt標籤的模組的CMS時,它會自動為您新增HTML程式碼。但是,如果您想自己新增程式碼,則可以輕鬆完成。

要在WordPress中新增alt標籤HTML,請單擊相關的影象區塊。在區塊工具欄中,選擇帶有三個垂直點的按鈕,然後選擇作為HTML編輯:

HTML新增ALT標籤

HTML程式碼將顯示影象標記。您會注意到alt屬性為空。將您的文字放在引號內:

ALT標籤HTML程式碼

完成後,單擊“預覽”按鈕返回視覺化編輯器,然後儲存更改。您可以使用相同的語法和格式來編輯任何檔案的HTML影象標籤。

如果您是一個懶站長,你也可以使用Smart SEO Tool外掛,進入圖片優化設定,開啟智慧圖片ALT標籤填入。如下圖所示:

智慧圖片ALT標籤

編寫影象替代標籤的技巧和最佳實踐

在建立alt標籤時,需要牢記幾個關鍵點。遵守這些最佳實踐將有助於使您的alt標籤更有效:

  • 具體的和描述性的。alt標籤的目的是描述影象,因此您希望儘可能具體。如果您不確定您的描述是否充分,請考慮如果您只看到該行文字,您會想象出什麼樣的影象。
  • 保持簡短。雖然您想要詳細說明,但您也不需要讓alt標籤很長(甚至是一個完整的句子)。最大目標是100到125個字元。
  • 不要多餘。為了充分利用您的alt標籤,您不想包含任何不必要的詞。這包括在描述之前新增“圖片”或“圖片”。這些元素是不必要的,因為它們已經被暗示了。
  • 自然地結合相關關鍵詞。考慮您的目標關鍵字,並在可能的情況下將它們有機地合併到頁面上下文中。當您使用與文字對應的高度相關影象時,這會更容易。
  • 避免關鍵字堆砌。雖然在alt標籤中使用關鍵字可以改善SEO,但請注意不要過度使用。關鍵字填充實際上會損害您的SEO併產生糟糕的使用者體驗。
  • 不要使用影象代替文字。alt標籤的主要目的是為無法處理和解釋頁面上的視覺元素的機器提供文字上下文。因此,在影象中使用文字是沒有意義的,尤其是標題和頁面標題。

在為您的影象建立alt標籤時,請始終記住目標是向那些可能無法看到它的人描述影象。雖然考慮SEO和關鍵字絕對是一個聰明的主意,但考慮到真實使用者編寫替代標籤可以幫助產生更積極的結果。

小結

影象可以幫助改善網頁的外觀,並使它們更有趣、內容更豐富、更吸引人。然而,為了最大化它們的價值,最好用alt標籤補充它們。這些簡短而描述性的解釋為使用者和搜尋引擎提供了上下文。圖片alt標籤有助於增強使用者體驗,提高可訪問性,並使相關關鍵字的排名更容易。

評論留言