整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
SEO優(yōu)化中，針對圖片，搜索引擎的蜘蛛是沒有辦法完全讀取的。因此，我們經(jīng)常會使用ALT語言對圖片進行注解，來幫助蜘蛛讀取圖片信息，這對SEO優(yōu)化來說相當(dāng)重要。
那么在網(wǎng)站編輯里，究竟如何來給圖片添加ALT標(biāo)簽?zāi)兀?/p>
“中華手賺網(wǎng)”運營站長裴勇翔就給大家簡單介紹一下。
（1）以織夢系統(tǒng)為例，其他網(wǎng)站使用同類型編輯器也可以使用；
在網(wǎng)站后臺上傳圖片時候，會有一個替換文本，這個替換文本便是我們的ALT屬性。
由于有很多網(wǎng)站系統(tǒng)沒有替換文本選項，沒有關(guān)系，我們有另外的通用性方式。
（2）以Wordpress后臺為例，其他網(wǎng)站使用同類型編輯器也可以使用。
在編輯器頁面，點擊左上角進行html代碼切換，以網(wǎng)站源碼方式添加ALT屬性。
標(biāo)簽示例：alt="xxx"
結(jié)語：ALT屬性也是頁面關(guān)鍵詞優(yōu)化的重要支撐力量，合理適度的標(biāo)注圖片有利于網(wǎng)站的優(yōu)化。
創(chuàng)： 前端之巔 前端之巔 今天
作者｜Nino Ross Rodriguez
譯者｜無明
Web 開發(fā)人員和內(nèi)容編輯人員經(jīng)常會忘記或忽略了 img 標(biāo)簽的 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)絡(luò)上發(fā)布內(nèi)容，你就應(yīng)該知道，為圖片提供描述性文本是一件很枯燥的事情。當(dāng)然，如果只有幾張圖片倒沒什么問題，但如果我們說的是數(shù)百或數(shù)千張圖片呢？你該怎么辦？
讓我們來看看使用谷歌、IBM 和微軟等公司提供的計算機視覺和圖像識別服務(wù)自動為圖片生成描述性文本的一些可能性。
alt 屬性的文本有什么用？
alt 屬性是一小段 HTML 代碼，用于描述頁面上顯示的圖片，但在 Web 開發(fā)和編輯內(nèi)容時經(jīng)常被忽略。它是如此的不起眼，以至于它似乎對普通用戶沒有任何影響，但它確實具有非常重要的用途：
在了解了這些重要性之后，希望你能夠在開發(fā)和內(nèi)容編輯期間加入正確的 alt 文本。但是，試圖為大量積壓的圖像進行詳細描述可能是一項艱巨的任務(wù)，特別是如果你的時間很緊迫或者奔忙于多個項目之間。
如果有一種方法可以在上傳圖片時應(yīng)用 alt 文本該有多好！如果有辦法檢查頁面是否缺少 alt 屬性，并自動填充它們，那該有多好！
解決方案來了！
計算機視覺（或圖像識別）實際上已經(jīng)出現(xiàn)了相當(dāng)長一段時間。谷歌、IBM 和微軟等公司都提供了自己的公開 API，開發(fā)人員可以利用這些功能來識別圖像以及圖像中的內(nèi)容。
有些開發(fā)人員已經(jīng)在使用這些服務(wù)，并創(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)嘗試過一些人工智能服務(wù)，我敢說，Azure 計算機視覺生成的結(jié)果是最好的。谷歌和 IBM 提供的服務(wù)肯定也有他們的專長，它們?nèi)匀豢梢宰R別出圖像并得到正確的結(jié)果，但微軟的服務(wù)非常好，非常準(zhǔn)確，以至于我認為沒有必要再去考慮其他選項。
創(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
你可以直接復(fù)制和粘貼下面的代碼，只需要替換占位符就可以了。
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 服務(wù)的一些關(guān)鍵術(shù)語。
位置：這是在獲取訂閱密鑰之前選擇的服務(wù)的訂閱位置。如果由于某種原因忘記了位置，可以轉(zhuǎn)到“Overview”頁面，并在“Endpoint”下找到它。
訂閱密鑰：這是為插件解鎖服務(wù)的密鑰，可以在“Keys”頁面中獲得。其中有兩個，但使用哪一個并不重要。
圖片 URL：這是需要獲取 alt 文本的圖片的路徑。請注意，發(fā)送給 API 的圖片必須滿足特定的要求：
易如反掌
感謝這些大公司為開發(fā)人員開放他們的服務(wù)和 API，現(xiàn)在任何人都可以相對輕松地使用計算機視覺。作為一個簡單的演示，我將下面的圖片上傳給 Azure Computer Vision API。
這個服務(wù)返回以下這些詳細信息：
{
"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 文本。如何構(gòu)建這個功能取決于你：
請注意，這些服務(wù)并非 100％準(zhǔn)確。它們有時候會返回低置信度和與主題完全不一致的描述。但是，這些平臺也在不斷學(xué)習(xí)和改進。畢竟，羅馬不是一天建成的。
我們網(wǎng)站中有很多圖片，大到廣告圖、活動宣傳圖、產(chǎn)品主圖，小到文章配圖、圖標(biāo)等等，那么問題來了，搜索引擎只識別文本內(nèi)容，它怎么知道你網(wǎng)站的圖片分別代表什么？答案：alt標(biāo)簽信息。
比如網(wǎng)站LOGO，明眼人一看就知道它就是個LOGO，但是搜索引擎不知道啊，你給logo加上alt標(biāo)簽信息，比如LOGO或者公司名稱，這回搜索引擎就知道這么一個回事了。
圖片alt標(biāo)簽
圖片alt標(biāo)簽信息還有另外一個功能，就是當(dāng)你網(wǎng)站圖片加載錯誤的時候，alt標(biāo)簽信息就是圖片的替代品，顯示在圖片對應(yīng)的位置上，供用戶了解這張圖片代表的字面意思。
圖片alt標(biāo)簽
源代碼方法：
點擊查看HTML源代碼，在源代碼里面找到相應(yīng)的img alt="網(wǎng)站中的圖片alt標(biāo)簽信息有什么用？怎么給圖片添加alt標(biāo)簽信息？"標(biāo)簽，然后在img alt="網(wǎng)站中的圖片alt標(biāo)簽信息有什么用？怎么給圖片添加alt標(biāo)簽信息？"標(biāo)簽里加入alt信息。
圖片alt標(biāo)簽
模塊插件方法：
在圖片模塊設(shè)置里，只需要給圖片添加標(biāo)題，便可以自動生成對應(yīng)的alt標(biāo)簽信息。
圖片alt標(biāo)簽
網(wǎng)站中有很多的圖片，像圖標(biāo)類小素材圖片、廣告圖、文章配圖、活動宣傳圖等，那必須要都寫上alt標(biāo)簽嗎？
實際上是沒必要的。你給那些你認為有價值的圖片添加alt標(biāo)簽即可，沒必要全部添加，像圖標(biāo)累的素材圖片，我們怎么添加？添加了能獲得流量嗎？硬生生的寫了一個alt標(biāo)簽，甚至融入了關(guān)鍵詞，我擔(dān)心是不是會被認為是過度優(yōu)化呢？
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
