alt標(biāo)簽是什么？alt標(biāo)簽?zāi)芊裼兄诟纳芐EO排名？

lt標(biāo)簽屬于圖片中的屬性標(biāo)簽，完整的圖片屬性應(yīng)該包含src，alt，title三種屬性。

雖然alt標(biāo)簽不是直接的排名因素，但是在圖片中加入alt標(biāo)簽利于搜索引擎解讀圖片的內(nèi)容，并在一定程度上提升關(guān)鍵詞排名的效果。

譬如可以在每一個(gè)網(wǎng)頁的文章中添加4到5張的圖片，并完善圖片的alt標(biāo)簽屬性，添加圖片可以加強(qiáng)信息閱讀效果以及提高吸引力。

在這篇文章中，我將解釋為什么要優(yōu)化圖片中的alt標(biāo)簽和title標(biāo)簽：

alt標(biāo)簽的寫法

alt標(biāo)簽在html語言中的寫法是這樣的：<img src=”圖片路徑” alt=”圖片描述”/>

這里我們要說的一點(diǎn)是，圖片描述最好是用簡短的語句，描述這張圖片的內(nèi)容，如果是鏈接，則描述鏈接的作用，并帶上關(guān)鍵詞。

不好的習(xí)慣是每張圖片都沒有alt標(biāo)簽。而不可取的是，對于每個(gè)標(biāo)簽都采用關(guān)鍵詞堆砌，這樣就有可能會導(dǎo)致被視為Spam垃圾網(wǎng)站。

注意：“alt標(biāo)簽”是一個(gè)通用術(shù)語，而不是寫法，實(shí)際上alt是IMG標(biāo)簽中的一個(gè)替代文本屬性，簡單點(diǎn)來說alt標(biāo)簽就是用來描述圖像內(nèi)容的意思。

HTML代碼

完整的圖片編碼應(yīng)該包含alt標(biāo)簽和title標(biāo)簽:

圖像的alt和title屬性通常被稱為alt標(biāo)簽或alt文本和標(biāo)題標(biāo)簽，即使它們不是技術(shù)上的標(biāo)簽。

alt文本描述圖像上的內(nèi)容和圖像在頁面上的功能，例如您網(wǎng)站有數(shù)張圖片，關(guān)于介紹屋苑的室內(nèi)設(shè)計(jì)，可以相關(guān)圖片標(biāo)簽指定的＃文本/＃標(biāo)題。用作告訴給搜索引擎這些圖片是什么，及介紹什么，并且與您原先的網(wǎng)站設(shè)計(jì)內(nèi)文是有關(guān)連及呼應(yīng)，這便是屬于其中的網(wǎng)站制作的SEO技巧之一。

每張圖片都應(yīng)該有一個(gè)alt文本（個(gè)人認(rèn)為，但是博主比較懶，有些沒加），但是部份圖片并不需要title屬性，因?yàn)榭赡軙`導(dǎo)搜索引擎，但是如果已經(jīng)設(shè)置了，并不會產(chǎn)生太大的問題，因?yàn)楦鱾€(gè)搜索引擎都圖片編碼的識別都有不同追求。

、目錄

HTML 基本概念
HTML 基本結(jié)構(gòu)
HTML 基本標(biāo)簽

二、HTML基本概念

2.1、什么是 HTML

超文本標(biāo)記語言（Hyper Text Markup Language）
描述網(wǎng)頁的語言
傳輸最簡單的文本內(nèi)容
可以表達(dá)文字內(nèi)容之外的語言——HTML1.0

2.2、HTML的發(fā)展

html1.0—-xhtml1.0( 過渡 )—-xhtml2.0( 放棄 )——html5

三、HTML基本結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

四、HTML基本標(biāo)簽

4.1、標(biāo)簽和屬性

雙標(biāo)簽：<標(biāo)簽名稱></標(biāo)簽名稱>
單標(biāo)簽：<標(biāo)簽名 />

4.2、標(biāo)簽的屬性

基本格式：<標(biāo)簽名屬性1=“值1” 屬性2=“值2”></標(biāo)簽名>

標(biāo)簽可以擁有多個(gè)屬性
屬性必須寫在開始標(biāo)簽中，位于標(biāo)簽名后面
屬性之間不區(qū)分順序
標(biāo)簽與屬性之間、屬性與屬性之間用空格隔開
每個(gè)屬性都有默認(rèn)值，省略屬性則表示使用默認(rèn)值

4.2、HTML全局屬性

class：規(guī)定元素的類名
id：規(guī)定元素唯一的id
lang：設(shè)置元素中內(nèi)容的語言代碼
style：規(guī)定元素的行內(nèi)樣式
title：規(guī)定元素的額外信息

五、HTML事件

5.1、HTML事件—窗口事件

使用HTML事件觸發(fā)瀏覽器中的行為，比如啟動某一段JavaScript
使用于body標(biāo)簽中

onblur：當(dāng)窗口失去焦點(diǎn)時(shí)運(yùn)行腳本
onfocus：當(dāng)窗口獲得焦點(diǎn)時(shí)運(yùn)行腳本
onload：當(dāng)加載文檔時(shí)運(yùn)行腳本

5.2、HTML事件—表單事件

form

onblur：當(dāng)窗口失去焦點(diǎn)時(shí)運(yùn)行腳本
onchange：當(dāng)元素改變時(shí)運(yùn)行腳本
onfocus：當(dāng)窗口獲得焦點(diǎn)時(shí)運(yùn)行腳本
onreset：當(dāng)表單重置時(shí)運(yùn)行腳本，HTML5不支持
onselect：當(dāng)選取元素時(shí)運(yùn)行腳本
onsubmit：當(dāng)提交表單時(shí)運(yùn)行腳本

5.3、HTML事件—鍵盤事件

鍵盤事件

onkeydown：當(dāng)按下鍵時(shí)運(yùn)行腳本
onkeypress：當(dāng)按下并松開鍵時(shí)運(yùn)行腳本
onkeyup：當(dāng)松開鍵時(shí)運(yùn)行腳本

5.4、HTML事件—鼠標(biāo)事件

鼠標(biāo)事件

onclick：當(dāng)單擊鼠標(biāo)時(shí)運(yùn)行腳本
ondblclick：當(dāng)雙擊鼠標(biāo)時(shí)運(yùn)行腳本
onmousedown：當(dāng)按下鼠標(biāo)時(shí)運(yùn)行腳本
onmousemove：當(dāng)鼠標(biāo)指針移動時(shí)運(yùn)行腳本
onmouseout：當(dāng)鼠標(biāo)指針移出元素時(shí)運(yùn)行腳本
onmouseover：當(dāng)鼠標(biāo)指針移至元素之上時(shí)運(yùn)行腳本
onmouseup：當(dāng)松開鼠標(biāo)按鈕時(shí)運(yùn)行腳本

5.5、HTML事件—多媒體事件

多媒體事件

onabort：當(dāng)發(fā)生中止事件時(shí)運(yùn)行腳本

六、標(biāo)簽

6.1、注釋標(biāo)簽

標(biāo)簽： < !-- 注釋內(nèi)容 -- >
作用：在源文檔中插入注釋。注釋不會在瀏覽器中顯示

6.2、文檔標(biāo)題標(biāo)簽

標(biāo)簽：
作用：

定義瀏覽器工具欄中的標(biāo)題
提供頁面被收藏時(shí)的標(biāo)題
顯示在搜索引擎中顯示的頁面標(biāo)題

6.3、標(biāo)題標(biāo)簽

標(biāo)簽：
—
作用：

用來定義HTML的標(biāo)題
用例定義最高等級的標(biāo)題
用例定義最低等級的標(biāo)題

屬性：全局屬性、事件屬性

6.4、段落標(biāo)簽

標(biāo)簽：
作用：定義段落
屬性：全局屬性，事件屬性

6.5、容器標(biāo)簽1

標(biāo)簽：
作用：對行內(nèi)元素進(jìn)行組合，提供了一種將文本或文檔的一部分獨(dú)立出來的方式
屬性：全局屬性、事件屬性

6.7、容器標(biāo)簽2

標(biāo)簽：
作用：

定義了HTML文檔中一個(gè)分隔區(qū)塊或一個(gè)區(qū)域部分
經(jīng)常與CSS一起使用，用于定義網(wǎng)頁布局

屬性：全局屬性、事件屬性

6.8、圖像標(biāo)簽

標(biāo)簽：
作用：定義HTML頁面中的圖像
屬性：

src：定義顯示圖像的URL(必選)
alt：定義圖像的替代文本(必選)
title：鼠標(biāo)懸停圖像時(shí)顯示的文本
width：圖像的寬度
height：圖像的高度
border：設(shè)置圖像邊框的寬度

6.9、超鏈接標(biāo)簽

標(biāo)簽：
定義超鏈接，從一個(gè)頁面鏈接到另一個(gè)頁面
屬性：全局屬性、事件屬性

href：規(guī)定鏈接的目標(biāo)URL

6.10、列表標(biāo)簽

標(biāo)簽：

<ul>
<li></li>
<li></li>
</ul>

作用：

定義無序列表
* <ul>與<li>一起使用，創(chuàng)建無序列表

屬性：全局屬性、事件屬性

6.11、列表標(biāo)簽 - 有序列表

標(biāo)簽：<ol><li>...</li><li>...</li></ol>
作用：

定義了一個(gè)有序列表，列表排序以數(shù)字來顯示
使用
標(biāo)簽來定義列表選項(xiàng)

屬性：全局屬性、事件屬性

5.12、表格標(biāo)簽

標(biāo)簽：

表格：<table></table>
行：<tr></tr>
單元格：<td></td>

作用：定義表格
屬性：全局屬性、事件屬性

border：定義表格是否有邊框

6.13、表單域

標(biāo)簽：<form></form>
創(chuàng)建用戶輸入的HTML表單
屬性：全局屬性、事件屬性

action：指定接收并處理表單信息的服務(wù)器URL地址
method：表單數(shù)據(jù)提交的方式
name：指定表單的名稱

6.14、表單標(biāo)簽

標(biāo)簽：
作用：定義了用戶可以在其中輸入的字段，輸入字段可以通過多種方式改變，取決于type的屬性
屬性、全局屬性、事件屬性

type：規(guī)定要顯示input標(biāo)簽的元素的類型

text：單行文本（不可換行）
password：密碼輸入框
radio：單選框（配合name可以實(shí)現(xiàn)單選效果）
checkbox：復(fù)選框
button：普通按鈕
submit：提交按鈕
reset：重置按鈕
image：圖像形式的提交按鈕
file：文件域，點(diǎn)擊之后打開文件選擇器

name：控件名稱，name相同則表示為同一組數(shù)據(jù)
value：指定input元素的值
size：顯示大小
checked：是否被選中
maxlength：控制輸入的最大字符長度

6.15、文本標(biāo)簽

標(biāo)簽：
定義一個(gè)多行的文本輸入控件
屬性：全局屬性、事件屬性

cols：規(guī)定文本區(qū)域內(nèi)可見的寬度
disabled：規(guī)定禁用文本區(qū)域
name：規(guī)定文本區(qū)域的名稱
readonly：規(guī)定文本區(qū)域?yàn)橹蛔x
rows：規(guī)定文本區(qū)域內(nèi)可見的行
placeholder：規(guī)定一個(gè)簡短的提示，描述文本區(qū)域內(nèi)期望的輸入值

6.16、下拉菜單

標(biāo)簽：…
作用：

用來創(chuàng)建下拉列表
中的標(biāo)簽定義了列表中的可用選項(xiàng)

屬性：全局屬性、事件屬性

isabled：當(dāng)屬性為true時(shí)，會禁用下拉列表
multiple：當(dāng)屬性為true時(shí)，可選擇多個(gè)選項(xiàng)
name：定義下拉列表的名稱
size：規(guī)定下拉列表中可見選項(xiàng)的數(shù)目

霍格沃茲的測試管理班是專門面向測試與質(zhì)量管理人員的一門課程，通過提升從業(yè)人員的團(tuán)隊(duì)管理、項(xiàng)目管理、績效管理、溝通管理等方面的能力，使測試管理人員可以更好的帶領(lǐng)團(tuán)隊(duì)、項(xiàng)目以及公司獲得更快的成長。提供 1v1 私教指導(dǎo)，BAT 級別的測試管理大咖量身打造職業(yè)規(guī)劃。

天SEO小也要跟大家聊聊圖片中alt屬性，不要小看這個(gè)圖片的alt屬性，谷歌對于這個(gè)屬性還是很器重的，對于提升網(wǎng)站排名也有一定作用，不然谷歌也不會花好幾篇文章去說明alt屬性，這篇文章SEO小也打算把谷歌官方的幾篇文章提取出來，來說說圖片alt屬性以及如何優(yōu)化。

什么是Alt屬性?

我們在做這件事之前，首先需要明白為什么做這件事，Alt屬性最重要的功能就是在圖片無法顯示，作為替代說明文字，比如在網(wǎng)絡(luò)不好的時(shí)候，圖片加載比較慢，首先瀏覽器就會使用alt屬性內(nèi)的文本作為占位標(biāo)記顯示在網(wǎng)頁上，讓讀者有個(gè)大體的概念，這個(gè)圖片表達(dá)的內(nèi)容含義是什么。

Alt屬性的作用

Alt屬性不同Title屬性和其他說明性屬性，這個(gè)屬性是圖片所特有的屬性，在其他Html標(biāo)簽上是用不到Alt屬性的，所以這個(gè)屬性有兩點(diǎn)很重要的作用：

增強(qiáng)網(wǎng)站的用戶體驗(yàn)
有利于圖片SEO優(yōu)化，提升網(wǎng)站排名

第一點(diǎn)前面SEO小也已經(jīng)說過了，就是在圖片無法加載的時(shí)候，作為圖片輔助說明性文字，第二點(diǎn)是最重要的一點(diǎn)，因?yàn)樽龊肁lt優(yōu)化，能夠提升網(wǎng)站排名，獲得更多流量，雖然各大搜索引擎在積極發(fā)展圖片識別技術(shù)，但是還是無法做到像人類一樣準(zhǔn)確理解圖片的意思，這時(shí)候我們就需要使用Alt屬性，幫助搜索引擎理解圖片，寫好Alt屬性文本內(nèi)容，就像寫好文章Title一樣，能夠帶來更多的關(guān)鍵詞排名，各大搜索引擎都有圖片搜索的功能，那些圖片就是搜索引擎建立索引，并給予排名的，可以看到那些圖片都是有相關(guān)信息描述的：

谷歌圖片排名描述

怎么寫好Alt屬性

下面SEO小也簡單舉個(gè)例子，來說明下什么樣的Alt文本內(nèi)容，才是符合SEO要求；首先來看看最簡單的Logo圖片標(biāo)簽：

<img class="logo" src="seozen-logo.jpg" alt="The SEOZEN logo">

這是SEO小也LOGO的圖片屬性，可以看到圖片文件名是有意義的名稱，不是隨機(jī)的字母或者數(shù)字，這是第一個(gè)要注意的地方，上傳圖片之前，要盡量重命名圖片，讓他語義話，之后Alt屬性內(nèi)部，是英文描述的圖片功能，表達(dá)的是這個(gè)圖片是SEO小也的LOGO，如果是國內(nèi)不做谷歌排名的朋友，這里用中文就好，SEO小也Alt標(biāo)簽一般使用的是英文描述，這是比較好的方式，一般的方式是把圖片語義化后的文件名，去掉后綴放到Alt屬性里面，這樣也是可以的，但是肯定沒有功能描述的好。

下面在優(yōu)化Alt屬性的時(shí)候，有幾點(diǎn)需要注意：

描述的越詳細(xì)越好。
盡量讓描述文本相關(guān)性高，言簡意賅，不要過長。
把文章關(guān)鍵詞使用到其中最好。
避免關(guān)鍵詞堆砌問題。
不要用多余的說明文字，比如說『這張圖片』。
不要忘記form表單中的圖片按鈕也要加上Alt屬性

關(guān)于圖片Alt屬性的知識暫時(shí)分享到，SEO小也感覺還有很多內(nèi)容要說，但是還沒有想好要怎么表達(dá)，有什么不懂或者有什么問題可以評論留言。

在線咨詢

上一篇：CSS 中幾種最常用的水平垂直居中的方法
下一篇：html中怎樣獲取當(dāng)前元素的高度？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商