建站
咨詢
售后
建站咨詢
新聞中心
圖片有助于使您的網(wǎng)站具有吸引力和視覺吸引力。但是，如果您不使用ALT標(biāo)簽（也稱為“替代文本”或“替代標(biāo)簽”）優(yōu)化圖像，您將錯(cuò)失改善用戶體驗(yàn)和網(wǎng)站可訪問性的重要機(jī)會(huì)。
要正確使用它們，首先了解什么是alt標(biāo)簽很重要。在這篇教程中，我們將討論什么是alt標(biāo)簽以及使用它們的原因。我們還將解釋如何在WordPress中為圖像添加alt標(biāo)簽，并介紹一些最佳實(shí)踐。
什么是Alt標(biāo)簽？
Alt標(biāo)簽被添加到HTML中的圖像，以描述它們?cè)诰W(wǎng)頁(yè)上的內(nèi)容和上下文。當(dāng)媒體文件無(wú)法正確加載或顯示時(shí)，alt標(biāo)簽也會(huì)出現(xiàn)在圖像容器中：
Alt標(biāo)簽可幫助使用屏幕閱讀器的人（例如有視覺障礙的人）了解您網(wǎng)站上的內(nèi)容。更重要的是，搜索引擎蜘蛛在對(duì)您的網(wǎng)站進(jìn)行爬行、索引和排名時(shí)使用它們來(lái)解釋您的圖像。
在圖像標(biāo)簽中添加的質(zhì)量alt標(biāo)簽是一個(gè)簡(jiǎn)短的描述，不僅解釋了圖像呈現(xiàn)的內(nèi)容，還解釋了它在頁(yè)面上的用途。在HTML代碼中使用時(shí)，完整的圖像標(biāo)記如下所示：
圖片alt標(biāo)簽有時(shí)會(huì)與圖片標(biāo)題或說(shuō)明混淆。但是，圖像標(biāo)題是一種不同類型的屬性。當(dāng)一個(gè)人將鼠標(biāo)懸停在圖像上時(shí)，它們顯示為彈出文本。另一方面，標(biāo)題與圖像一起出現(xiàn)，通常在其下方，并提供有關(guān)它的附加信息或詳細(xì)信息。在正常情況下，訪問者永遠(yuǎn)不會(huì)看到您圖片的 alt 標(biāo)簽。
為什么在圖像上使用Alt標(biāo)簽？
Alt標(biāo)簽有多種用途。雖然您不需要使用它們，但這樣做有一些主要好處。由于搜索引擎爬蟲和屏幕閱讀工具都使用它們，因此它們是網(wǎng)絡(luò)可訪問性和搜索引擎優(yōu)化 (SEO)的重要組成部分。
提高了Web可訪問性
Alt 標(biāo)簽有助于確保訪問者可以訪問和享受您網(wǎng)站的內(nèi)容，即使使用輔助技術(shù)或純文本瀏覽器也是如此。當(dāng)有視力障礙的人訪問您的網(wǎng)站時(shí)，他們的屏幕閱讀器會(huì)閱讀頁(yè)面上的文字。當(dāng)它到達(dá)一個(gè)圖像時(shí)，它將使用alt標(biāo)簽來(lái)描述該圖像是什么。
如果缺少 alt 標(biāo)簽，屏幕閱讀器可能會(huì)改為讀取圖像文件名。這不僅在正確解釋圖像方面通常無(wú)效，而且還可能令人困惑和具有破壞性，特別是如果文件名未經(jīng)過(guò)SEO優(yōu)化。
在某些情況下，例如當(dāng)您在WordPress中將圖像的alt標(biāo)簽字段留空時(shí)，屏幕閱讀器將完全跳過(guò)該圖像。假設(shè)您在網(wǎng)頁(yè)上包含的圖像有用途，這種缺失意味著訪問者在消費(fèi)您的內(nèi)容時(shí)無(wú)法獲得您想要的全部?jī)r(jià)值或體驗(yàn)。
提高您的搜索引擎排名
圖片alt標(biāo)簽可以讓您更輕松地對(duì)您嘗試定位的關(guān)鍵字進(jìn)行排名。搜索引擎機(jī)器人很智能，但它們無(wú)法像人類一樣解釋和理解圖像的視覺方面。
Alt屬性為翻譯圖像提供了一種基于文本的替代方法，更具體地說(shuō)是用于合并相關(guān)關(guān)鍵字。包含目標(biāo)關(guān)鍵字的文字描述可以增加您在圖片搜索中獲得高排名的機(jī)會(huì)。
為了強(qiáng)調(diào)圖像（以及替代標(biāo)簽）在SEO中的重要作用，請(qǐng)考慮“特大號(hào)床上用品”的搜索引擎結(jié)果頁(yè)面 (SERP)：
第一頁(yè)不僅僅產(chǎn)生基于文本的結(jié)果；還有很多圖像結(jié)果。如果優(yōu)化并正確使用，alt標(biāo)簽可以幫助提升您的SEO并生成超鏈接、可點(diǎn)擊的圖像，以顯示在此類搜索中。這對(duì)電子商務(wù)網(wǎng)站和登陸頁(yè)面特別有益。
如何在WordPress中添加圖像Alt標(biāo)簽
一旦您了解在您的網(wǎng)站上使用圖像alt屬性的好處，就該學(xué)習(xí)如何實(shí)際做到這一點(diǎn)了。幸運(yùn)的是，WordPress使這項(xiàng)任務(wù)變得非常簡(jiǎn)單明了。
要在WordPress中添加圖像 alt 標(biāo)簽，請(qǐng)登錄到您的管理儀表板并導(dǎo)航到您想要添加圖像的頁(yè)面或文章。在WordPress編輯器中，單擊加號(hào)圖標(biāo)并選擇圖像區(qū)塊：
接下來(lái)，上傳您的圖片或從您的媒體庫(kù)中選擇一張。將圖像插入?yún)^(qū)塊后，圖像設(shè)置面板將在右側(cè)的側(cè)欄中打開。您可以在Alt文本框中輸入您的描述：
完成后，保存更改。您也可以對(duì)現(xiàn)有圖像執(zhí)行此操作。例如，如果您想更新已發(fā)布在您網(wǎng)站上的文章上的圖片，只需單擊該圖片并在側(cè)欄中輸入新的alt標(biāo)簽即可。
如何在HTML中添加圖像Alt標(biāo)簽
當(dāng)您使用WordPress或其他包含用于添加和編輯alt標(biāo)簽的模塊的CMS時(shí)，它會(huì)自動(dòng)為您添加HTML代碼。但是，如果您想自己添加代碼，則可以輕松完成。
要在WordPress中添加alt標(biāo)簽HTML，請(qǐng)單擊相關(guān)的圖像區(qū)塊。在區(qū)塊工具欄中，選擇帶有三個(gè)垂直點(diǎn)的按鈕，然后選擇作為HTML編輯：
HTML代碼將顯示圖像標(biāo)記。您會(huì)注意到alt屬性為空。將您的文本放在引號(hào)內(nèi)：
完成后，單擊“預(yù)覽”按鈕返回可視化編輯器，然后保存更改。您可以使用相同的語(yǔ)法和格式來(lái)編輯任何文件的HTML圖像標(biāo)簽。
如果您是一個(gè)懶站長(zhǎng)，你也可以使用Smart SEO Tool插件，進(jìn)入圖片優(yōu)化設(shè)置，開啟智能圖片ALT標(biāo)簽填入。如下圖所示：
編寫圖像替代標(biāo)簽的技巧和最佳實(shí)踐
在創(chuàng)建alt標(biāo)簽時(shí)，需要牢記幾個(gè)關(guān)鍵點(diǎn)。遵守這些最佳實(shí)踐將有助于使您的alt標(biāo)簽更有效：
- 具體的和描述性的。alt標(biāo)簽的目的是描述圖像，因此您希望盡可能具體。如果您不確定您的描述是否充分，請(qǐng)考慮如果您只看到該行文本，您會(huì)想象出什么樣的圖像。
- 保持簡(jiǎn)短。雖然您想要詳細(xì)說(shuō)明，但您也不需要讓alt標(biāo)簽很長(zhǎng)（甚至是一個(gè)完整的句子）。最大目標(biāo)是100到125個(gè)字符。
- 不要多余。為了充分利用您的alt標(biāo)簽，您不想包含任何不必要的詞。這包括在描述之前添加“圖片”或“圖片”。這些元素是不必要的，因?yàn)樗鼈円呀?jīng)被暗示了。
- 自然地結(jié)合相關(guān)關(guān)鍵詞?？紤]您的目標(biāo)關(guān)鍵字，并在可能的情況下將它們有機(jī)地合并到頁(yè)面上下文中。當(dāng)您使用與文本對(duì)應(yīng)的高度相關(guān)圖像時(shí)，這會(huì)更容易。
- 避免關(guān)鍵字堆砌。雖然在alt標(biāo)簽中使用關(guān)鍵字可以改善SEO，但請(qǐng)注意不要過(guò)度使用。關(guān)鍵字填充實(shí)際上會(huì)損害您的SEO并產(chǎn)生糟糕的用戶體驗(yàn)。
- 不要使用圖像代替文本。alt標(biāo)簽的主要目的是為無(wú)法處理和解釋頁(yè)面上的視覺元素的機(jī)器提供文本上下文。因此，在圖像中使用文本是沒有意義的，尤其是標(biāo)題和頁(yè)面標(biāo)題。
在為您的圖像創(chuàng)建alt標(biāo)簽時(shí)，請(qǐng)始終記住目標(biāo)是向那些可能無(wú)法看到它的人描述圖像。雖然考慮SEO和關(guān)鍵字絕對(duì)是一個(gè)聰明的主意，但考慮到真實(shí)用戶編寫替代標(biāo)簽可以幫助產(chǎn)生更積極的結(jié)果。
小結(jié)
圖像可以幫助改善網(wǎng)頁(yè)的外觀，并使它們更有趣、內(nèi)容更豐富、更吸引人。然而，為了最大化它們的價(jià)值，最好用alt標(biāo)簽補(bǔ)充它們。這些簡(jiǎn)短而描述性的解釋為用戶和搜索引擎提供了上下文。圖片alt標(biāo)簽有助于增強(qiáng)用戶體驗(yàn)，提高可訪問性，并使相關(guān)關(guān)鍵字的排名更容易。
本文名稱：什么是Alt標(biāo)簽以及如何使用它
文章地址：http://m.fisionsoft.com.cn/article/cciohjp.html
