SEO優(yōu)化中，針對圖片，搜索引擎的蜘蛛是沒有辦法完全讀取的。因此，我們經(jīng)常會使用ALT語言對圖片進行注解，來幫助蜘蛛讀取圖片信息，這對SEO優(yōu)化來說相當重要。

那么在網(wǎng)站編輯里，究竟如何來給圖片添加ALT標簽呢？

“中華手賺網(wǎng)”運營站長裴勇翔就給大家簡單介紹一下。

（1）以織夢系統(tǒng)為例，其他網(wǎng)站使用同類型編輯器也可以使用；

在網(wǎng)站后臺上傳圖片時候，會有一個替換文本，這個替換文本便是我們的ALT屬性。

由于有很多網(wǎng)站系統(tǒng)沒有替換文本選項，沒有關系，我們有另外的通用性方式。

（2）以Wordpress后臺為例，其他網(wǎng)站使用同類型編輯器也可以使用。

在編輯器頁面，點擊左上角進行html代碼切換，以網(wǎng)站源碼方式添加ALT屬性。

標簽示例：alt="xxx"

結語：ALT屬性也是頁面關鍵詞優(yōu)化的重要支撐力量，合理適度的標注圖片有利于網(wǎng)站的優(yōu)化。

創(chuàng)： 前端之巔 前端之巔 今天

作者｜Nino Ross Rodriguez

譯者｜無明

Web 開發(fā)人員和內容編輯人員經(jīng)常會忘記或忽略了 img 標簽的 alt 屬性，這是一個可以提升網(wǎng)站可訪問性和 SEO 性能的重要部分，這個屬性通常用來描述圖片：

<img src="/cute/sloth/image.jpg" alt="A brown baby sloth staring straight into the camera with a tongue sticking out." >

如果你經(jīng)常在網(wǎng)絡上發(fā)布內容，你就應該知道，為圖片提供描述性文本是一件很枯燥的事情。當然，如果只有幾張圖片倒沒什么問題，但如果我們說的是數(shù)百或數(shù)千張圖片呢？你該怎么辦？

讓我們來看看使用谷歌、IBM 和微軟等公司提供的計算機視覺和圖像識別服務自動為圖片生成描述性文本的一些可能性。

alt 屬性的文本有什么用？

alt 屬性是一小段 HTML 代碼，用于描述頁面上顯示的圖片，但在 Web 開發(fā)和編輯內容時經(jīng)常被忽略。它是如此的不起眼，以至于它似乎對普通用戶沒有任何影響，但它確實具有非常重要的用途：

• 屏幕閱讀器的 Web 可訪問性：假設我們有一個包含大量圖片的頁面，但沒有一張圖片包含了 alt 屬性文本。使用屏幕閱讀器進行沖浪的用戶只能聽到“image”這個詞，這對他們來說這不是很有用。他們只知道這是一張圖片，除此之外沒有其他任何信息。如果有了 alt 屬性文本，屏幕閱讀器就可以幫助視障人士“看到”圖片里有什么，以便更好地理解頁面的內容。有人說一張圖片勝過千言萬語，但如果沒有 alt 屬性文本，這些用戶就錯失了這些千言萬語。
• 如果無法加載圖片，就顯示文本：Web 似乎是絕對可靠的，就像紐約一樣，從來不需要睡覺，但錯誤的連接確實是存在的，如果發(fā)生這種情況，圖片往往無法被正確加載，并且出現(xiàn)“損壞”。alt 文本是一種安全措施，它會顯示在頁面上出現(xiàn)“損壞”圖像的位置，為用戶提供后備內容。
• SEO 性能：圖片的 alt 文本也有助于提升 SEO 性能。雖然它并不能讓網(wǎng)頁的搜索排名更靠前，但它也是提升 SEO 性能的一個考慮因素。

在了解了這些重要性之后，希望你能夠在開發(fā)和內容編輯期間加入正確的 alt 文本。但是，試圖為大量積壓的圖像進行詳細描述可能是一項艱巨的任務，特別是如果你的時間很緊迫或者奔忙于多個項目之間。

如果有一種方法可以在上傳圖片時應用 alt 文本該有多好！如果有辦法檢查頁面是否缺少 alt 屬性，并自動填充它們，那該有多好！

解決方案來了！

計算機視覺（或圖像識別）實際上已經(jīng)出現(xiàn)了相當長一段時間。谷歌、IBM 和微軟等公司都提供了自己的公開 API，開發(fā)人員可以利用這些功能來識別圖像以及圖像中的內容。

有些開發(fā)人員已經(jīng)在使用這些服務，并創(chuàng)建了自己的插件來生成 alt 文本。以 Sarah Drasner 的生成器（https://codepen.io/sdras/details/jawPGa）為例，它演示了如何使用 Azure 的計算機視覺 API 為上傳的圖片或 URL 鏈接的圖片創(chuàng)建 alt 文本。

Jacob Peattie 開發(fā)了一個自動 alt 文本插件（https://wordpress.org/plugins/automatic-alternative-text/），這也是一個使用了 Azure 計算機視覺 API 的 WordPress 插件。它基本上是工作流的一個補充，允許用戶上傳圖片并自動生成 alt 文本。

人工智能的介入

我曾經(jīng)嘗試過一些人工智能服務，我敢說，Azure 計算機視覺生成的結果是最好的。谷歌和 IBM 提供的服務肯定也有他們的專長，它們仍然可以識別出圖像并得到正確的結果，但微軟的服務非常好，非常準確，以至于我認為沒有必要再去考慮其他選項。

創(chuàng)建圖像識別插件非常簡單。首先，訪問微軟 Azure Computer Vision（https://azure.microsoft.com/en-au/services/cognitive-services/computer-vision/）。你需要登錄或創(chuàng)建帳戶，這樣才能獲取插件所需的 API 密鑰。

進入儀表盤后，搜索并選擇“Computer Vision”，然后填寫必要的信息。

等待平臺啟動一個計算機視覺實例，在實例啟動后就可以使用 API 密鑰。

現(xiàn)在開始進入有趣的部分！出于演示的目的，我將使用普通的 JavaScript 代碼。對于其他語言，你可以查看文檔：

https://westus.dev.cognitive.microsoft.com/docs/services/56f91f2d778daf23d8ec6739/operations/56f91f2e778daf14a499e1fe

你可以直接復制和粘貼下面的代碼，只需要替換占位符就可以了。

var request=new XMLHttpRequest();

request.open('POST', 'https://[LOCATION]/vision/v1.0/describe?maxCandidates=1&language=en', true);

request.setRequestHeader('Content-Type', 'application/json');

request.setRequestHeader('Ocp-Apim-Subscription-Key', '[SUBSCRIPTION_KEY]');

request.send(JSON.stringify({ "url": "[IMAGE_URL]" }));

request.onload=function () {

var resp=request.responseText;

if (request.status >=200 && request.status < 400) {

// Success!

console.log('Success!');

} else {

// We reached our target server, but it returned an error

console.error('Error!');

}

console.log(JSON.parse(resp));

};

request.onerror=function (e) {

console.log(e);

};

好吧，讓我們來看看 AI 服務的一些關鍵術語。

位置：這是在獲取訂閱密鑰之前選擇的服務的訂閱位置。如果由于某種原因忘記了位置，可以轉到“Overview”頁面，并在“Endpoint”下找到它。

訂閱密鑰：這是為插件解鎖服務的密鑰，可以在“Keys”頁面中獲得。其中有兩個，但使用哪一個并不重要。

圖片 URL：這是需要獲取 alt 文本的圖片的路徑。請注意，發(fā)送給 API 的圖片必須滿足特定的要求：

• 文件類型必須是 JPEG、PNG、GIF、BMP；
• 文件大小必須小于 4MB；
• 尺寸應該大于 50×50 像素。

易如反掌

感謝這些大公司為開發(fā)人員開放他們的服務和 API，現(xiàn)在任何人都可以相對輕松地使用計算機視覺。作為一個簡單的演示，我將下面的圖片上傳給 Azure Computer Vision API。

這個服務返回以下這些詳細信息：

{

"description": {

"tags": [

"person",

"holding",

"cellphone",

"phone",

"hand",

"screen",

"looking",

"camera",

"small",

"held",

"someone",

"man",

"using",

"orange",

"display",

"blue"

],

"captions": [

{

"text": "a hand holding a cellphone",

"confidence": 0.9583763512737793

}

]

},

"requestId": "31084ce4-94fe-4776-bb31-448d9b83c730",

"metadata": {

"width": 920,

"height": 613,

"format": "Jpeg"

}

}

你可以從中選擇可能用于圖片的 alt 文本。如何構建這個功能取決于你：

• 你可以創(chuàng)建一個 CMS 插件，并將其添加到內容工作流中，當上載圖片并將其保存到 CMS 中時，會生成圖像的 alt 文本。
• 你可以開發(fā)一個 JavaScript 插件，如果加載的圖片缺少 alt 文，可以即時添加 alt 文本。
• 你可以創(chuàng)建一個瀏覽器擴展程序，當它發(fā)現(xiàn)網(wǎng)頁中的圖片缺少 alt 文本時，會自動為它們添加 alt 文本。
• 你可以編寫代碼來搜索現(xiàn)有數(shù)據(jù)庫或內容存儲庫，找出缺失的 alt 文本，并更新它們，或創(chuàng)建拉取請求做出相應的更改。

請注意，這些服務并非 100％準確。它們有時候會返回低置信度和與主題完全不一致的描述。但是，這些平臺也在不斷學習和改進。畢竟，羅馬不是一天建成的。

片alt標簽信息有什么作用？

我們網(wǎng)站中有很多圖片，大到廣告圖、活動宣傳圖、產(chǎn)品主圖，小到文章配圖、圖標等等，那么問題來了，搜索引擎只識別文本內容，它怎么知道你網(wǎng)站的圖片分別代表什么？答案：alt標簽信息。

比如網(wǎng)站LOGO，明眼人一看就知道它就是個LOGO，但是搜索引擎不知道啊，你給logo加上alt標簽信息，比如LOGO或者公司名稱，這回搜索引擎就知道這么一個回事了。

圖片alt標簽信息有利于搜索引擎收錄，有利于SEO

圖片alt標簽信息還有另外一個功能，就是當你網(wǎng)站圖片加載錯誤的時候，alt標簽信息就是圖片的替代品，顯示在圖片對應的位置上，供用戶了解這張圖片代表的字面意思。

如何給圖片加上alt標簽？

源代碼方法：

點擊查看HTML源代碼，在源代碼里面找到相應的img alt="網(wǎng)站中的圖片alt標簽信息有什么用？怎么給圖片添加alt標簽信息？"標簽，然后在img alt="網(wǎng)站中的圖片alt標簽信息有什么用？怎么給圖片添加alt標簽信息？"標簽里加入alt信息。

模塊插件方法：

在圖片模塊設置里，只需要給圖片添加標題，便可以自動生成對應的alt標簽信息。

不加alt標簽可以嗎？

網(wǎng)站中有很多的圖片，像圖標類小素材圖片、廣告圖、文章配圖、活動宣傳圖等，那必須要都寫上alt標簽嗎？

實際上是沒必要的。你給那些你認為有價值的圖片添加alt標簽即可，沒必要全部添加，像圖標累的素材圖片，我們怎么添加？添加了能獲得流量嗎？硬生生的寫了一個alt標簽，甚至融入了關鍵詞，我擔心是不是會被認為是過度優(yōu)化呢？