web語義化之SEO和ARIA

在快速理解web語義化的時候，只知道web語義化有利於SEO和便於屏幕閱讀器閱讀，但並不知道它是如何有利於SEO和便於閱讀器閱讀的，帶着這個疑問，進行了一番探索總結。

SEO

什麼是SEO？

SEO（Search Engine Optimization，搜索引擎優化 ），是一種利用搜索引擎的搜索規則來提升目的網站在有關搜索引擎內的排名的方式。通俗來說就是根據搜素引擎的規則來優化你的網站，讓你的網站可以在用戶的搜索結果中排在前面，提升網站的訪問量。

SEO經常使用方式

採用DIV+CSS佈局

採用div-css佈局的網站對於搜索引擎非常友好，所以其避免了Table嵌套層次過多而沒法被搜索引擎抓取的問題，並且簡潔、結構化的代碼更加有利於突出重點和適合搜索引擎抓取。

儘可能不使用表格佈局，由於搜索引擎對錶格佈局嵌套3層以上的內容懶的去抓取。

TDK優化

TDK，即 title, description, keywords。

1、title

在SEO中，標題的優化佔着舉足輕重的地位，不管是從用戶體驗的角度出發，仍是從搜索引擎的排名效果出發，title都是頁面優化最最重要的因素。
title的分隔符通常有,，_，-和空格。其中_對百度比較友好，而-對谷歌比較友好，空格在英文站點可使用但中文少用。

推薦作法：

1. 每一個網頁應該有一個獨一無二的標題，切忌全部的頁面都使用一樣的默認標題
2. 標題要主題明確，包含這個網頁中最重要的內容
3. 簡明精練，不羅列與網頁內容不相關的信息
4. 若是你的文章標題不是很長，還能夠加入點關鍵詞進去，如文章title_關鍵詞_網站名稱
5. 用戶瀏覽一般是從左到右的，重要的內容應該放到title的靠前的位置
6. 使用用戶所熟知的語言描述。若是你有中、英文兩種網站名稱，儘可能使用用戶熟知的那一種作爲標題描述

示例：

<title>阿里巴巴1688.com - 全球領先的採購批發平臺,批發網</title>

<title>京東(JD.COM)-正品低價、品質保障、配送及時、輕鬆購物！</title>

2、description

description不是權值計算的參考因素，這個標籤存在與否不影響網頁權值，只會用作搜索結果摘要的一個選擇目標。用戶極有可能經過網站的摘要來決定是否瀏覽該網站。

推薦作法：

1. 網站首頁、頻道頁、產品參數頁等沒有大段文字能夠用作摘要的網頁最適合使用description
2. 準確的描述網頁，不要堆砌關鍵詞
3. 爲每一個網頁建立不一樣的description，避免全部網頁都使用一樣的描述
4. 長度合理，不過長不太短（最好在100-150個字符，對應中文就是50到75個漢字）。

示例：

<meta name="description" content="阿里巴巴（1688.com）批發網是全球企業間（B2B）電子商務的著名品牌，爲數千萬網商提供海量商機信息和便捷安全的在線交易市場，也是商人們以商會友、真實互動的社區平臺。目前1688.com已覆蓋原材料、工業品、服裝服飾、家居百貨、小商品等12個行業大類，提供從原料--生產--加工--現貨等一系列的供應產品和服務。"
  />

<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通信、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!" />

3、keywords

keywords在搜索排名的權重不高，可是合理的設置，能夠提升關鍵字的密度及優化搜索結果頁的體驗。經過加大關鍵詞的密度，從而提升關鍵詞在搜索引擎的排名，是SEO優化的一個經常使用手段。

SEO的核心思想是每一個頁面抓住幾個關鍵字（通常不超過5個）進行核心優化，因此設定與本頁內容相關的主關鍵詞一到三個就能夠了。關鍵字之間用英文狀態下的逗號分割，不要再濫用關鍵字，這會給搜索引擎很差的印象。

示例：

<meta name="keywords" content="阿里巴巴，批發網，1688，批發市場，批發，採購，微商，微店，貨源"/>

<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,京東" />

使用HTML結構化

1、h標籤

h標籤在html代碼中是「標題」的意思，就如一篇文章，標題是文章最爲重要的一個對象，也是搜索引擎在排名時重點考慮的一個對象。html中的h標籤一共有六個，分別是h1/h2/h3/h4/h5/h6，分別表明不一樣的級別，h1標題具有更多的權重,以此類推。

通常狀況下，每一個頁面都應該有個惟一的h1標題，但html5中h1標題是能夠屢次出現的，每一個具備結構大綱的標籤均可以擁有本身獨立的h1標題，如header,footer,section,aside,article。

關於h標籤的使用，須要根據實際狀況來使用，不可任意濫用。如一篇文章，不可能出現多個一級標題，因此h1在同一篇文章中只能出現一次，而h2等則能夠出現屢次。根據你須要表現的內容的重要程度，分別使用不一樣的h標籤便可。特別注意，h標籤中最好出現關鍵字！但不可濫用。

在頁面中合理利用h1-h6標籤，可以讓頁面內容主次結構分明，利於搜索引擎識別內容偏重

2、alt

alt是圖像中的註釋，對圖像的優化相當重要。搜索引擎還不能有效額識別出圖片內容，給img添加alt屬性就至關於告訴搜索引擎圖片是什麼內容，從而獲取更好的圖片排名。

通常在插入圖像時，咱們在alt中設置圖像的描述內容，其中能夠包含關鍵字但不要故意堆砌。特別須要注意的是，這些內容是不能夠重複的，不然這樣很容易被搜索引擎懲罰！

示例：

<img src="../logo.png" alt="XXXlogo" width="100px" height="100px" />

3、strong,em 標籤

這些標籤能夠把文字變成另外一個突出的樣式，如加粗，變成斜體。他們不但能夠在視覺上引發讀者的注意，並且搜索引擎也會把他們當成關鍵字標示。
strong被認爲是「增強」，em被認爲是「強調」，也就是這兩個標籤是有特殊含義的，這對於網站優化相當重要。多數時候，咱們在優化網站時會對關鍵字進行突出，這時使用strong或em就比使用b或者i好不少。

4、nofollow

nofollow用在站內連接上，能夠影響搜索引擎排名。

它實際上是HTML標籤中的一種屬性，它的主要做用就是告訴搜索引擎蜘蛛，不要跟蹤加了nofollow屬性標籤的這條連接了，也就是告訴搜索引擎蜘蛛禁止爬取和傳遞權重。

好比說，在網站中一些評論留言中總會用人留下各式各樣的連接地址，時間久了便會造成不少的垃圾連接。這對主網站的影響是很大的，會致使這些連接與連接之間互相傳遞權重，最終使主網站的權重分散了。

添加方法：

<a href=」URL地址」rel=」nofollow」>

<a href=」URL地址」 rel=」external nofollow」>

第一種nofollow屬性標籤的添加方法是比較常見的一種，它的主要做用就是告訴搜索引擎蜘蛛不要跟蹤這條連接，而第二種nofollow屬性標籤的添加方法主要做用是告訴搜索引擎這是一個出站連接，不容許跟蹤。雖然出站連接在添加了nofollow屬性標籤以後，搜索引擎蜘蛛在第一次發現這條連接的時候，仍是會照樣爬取這條連接，可是，搜索引擎會自動記錄這條連接的nofollow屬性值，從而不給這條連接導出權重。

連接URL

1、統一URL

http://www.domainname.com
http://domainname.com
http://www.domainname.com/index.html
http://domainname.com/index.html

以上四個其實都是首頁。雖然不會給訪客形成什麼麻煩，但對於搜索引擎來講就是四條網址，而且內容相同，極可能會被誤認爲是做弊手段。而這四個頁面的權重會被分散掉。

2、301跳轉

URL發生改變，必定要把舊的地址301指向新的，否則以前作的一些收錄權重什麼的全白搭了。

3、URL層級

連接目錄層級越淺，權重越大。在沒有其餘反向連接的前提下，每一個目錄的權重只是繼承它的上級權重的一部分，所以這個權重會低於它的上級目錄。也就是常說的離首頁的層級越遠，權重越小。

這個是有前提的，就是沒有其餘外鏈影響。因此網站在進行外鏈建設或者內鏈佈局調整以後，是會出如今一些低級目錄的權重高於上級目錄的狀況。尤爲是在一些針對具體目錄關鍵詞的排名能力上。

在京東98%以上的頁面，URL層級都是在頂級域名之下，最多也是在一級目錄之下。這樣就確保了權重最好的繼承主域名，減小權重的分層流失。
如：

京東一級分類頁URL：
http://channel.jd.com/electronic.html
http://channel.jd.com/home.html

二級分類URL：
http://list.jd.com/670-677-678-0-0-0-0-0-0-0-1-1-1-1-1-72-4137-0.html

從上面的URL來看，連接的層級都不超過兩層，儘量的減小連接的層級。同時也是儘量的簡短（摘自【京東SEO】京東站內優化分析）

ARIA

什麼是ARIA

無障礙網絡倡議的無障礙豐富互聯網應用規範（WAI-ARIA，簡稱 ARIA）。主要針對的是視覺缺陷，失聰，行動不便的殘疾人以及僞裝殘疾的測試人員。尤爲像盲人，眼睛看不到，其瀏覽網頁則須要藉助輔助設備，如屏幕閱讀器，屏幕閱讀機能夠大聲朗讀或者輸出盲文。

2015年5月21日，W3C HTML工做組（HTML Working Group）發佈了在HTML中使用ARIA（Notes on Using ARIA in HTML）的標準工做草案。該文檔實際地指導了開發者如何向HTML文檔中添加由WAI-ARIA 1.1規範（Accessible Rich Internet Applications specification， WAI-ARIA 1.1） 所規定的無障礙輔助信息，從而使殘障人士更容易得到Web內容和訪問Web應用。

ARIA 使用規範

根據ARIA規範中描述的要求，Web開發人員可使用role和aria-*來給HTML元素添加ARIA屬性。其中，role標識了一個元素的做用，aria-*描述了與之有關的事物特徵及其狀態。一些HTML元素在ARIA中會有對應的默認屬性，但並非全部的HTML元素都會有，下面列出幾個帶有默認role屬性的元素：

元素	role屬性
a	帶有href屬性的爲：role=link，不帶有的不具備role=link
article	role=article
aside	role=complementary
body	role=document
button	role=button
dialog	role=dialog
dl	role=list
h1-h6	role=heading，而且帶有aria-level = 1-6` 來表示標題等級
input type="button"	role=button
input type="checkbox"	role=checkbox
img alt="some text"	role=img

沒有自帶默認role屬性的元素可經過顯式的聲明role和aria-*來設置屬性值。
如：

<div role="header">
    <div role="navigation">
    </div>
</div>
<div role="main">
    <div role="button" tabindex="0" disabled aria-disabled="true"></div> //按鈕爲禁用狀態
</div>
<div role="footer">

</div>

注意事項：

1. 當使用的元素(HTML5)具備語義化且有對應默認role屬性值時，應該使用這些元素，不該該從新定義一個role屬性和aria-*狀態。 推薦使用<button></button>而不是 <div role="button"></div>。
2. 使用role時不能違背標籤自己的語義。

如在button元素上使用role=title這是不容許的，由於button元素具備與title語義相沖突的默認特徵。

這裏只是簡單的介紹了ARIA的基本使用方法、注意事項以及與ARIA相關聯的常見HTML元素，想要更深刻的瞭解請看下w3cplus上大漠老師的這篇文章。

END

從web語義化到SEO和ARIA，很是感謝前輩們的用心總結，讓咱們可以站在巨人的肩膀上前行。

全文參考資料：

【京東SEO】京東站內優化分析

SEO優化實戰

Web前端開發學習3：SEO代碼優化

WAI-ARIA 無障礙Web規範