在快速理解web語義化的時候炕泳，只知道web語義化有利于SEO和便于屏幕閱讀器閱讀纵诞，但并不知道它是如何有利于SEO和便于閱讀器閱讀的，帶著這個疑問培遵，進行了一番探索總結浙芙。
SEO
什么是SEO？
SEO（Search Engine Optimization籽腕，搜索引擎優(yōu)化 ）嗡呼，是一種利用搜索引擎的搜索規(guī)則來提高目的網(wǎng)站在有關搜索引擎內(nèi)的排名的方式。通俗來講就是根據(jù)搜素引擎的規(guī)則來優(yōu)化你的網(wǎng)站节仿，讓你的網(wǎng)站能夠在用戶的搜索結果中排在前面晤锥，提高網(wǎng)站的訪問量。
SEO常用方式
采用DIV+CSS布局
采用div-css布局的網(wǎng)站對于搜索引擎很是友好廊宪，因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題矾瘾，而且簡潔、結構化的代碼更加有利于突出重點和適合搜索引擎抓取箭启。
盡量不使用表格布局壕翩，因為搜索引擎對表格布局嵌套3層以上的內(nèi)容懶的去抓取。
TDK優(yōu)化
TDK傅寡，即 title, description, keywords放妈。
一北救、title
在SEO中，標題的優(yōu)化占著舉足輕重的地位芜抒，無論是從用戶體驗的角度出發(fā)珍策，還是從搜索引擎的排名效果出發(fā)，title都是頁面優(yōu)化最最重要的因素宅倒。
title的分隔符一般有,攘宙，_，-和空格拐迁。其中_對百度比較友好蹭劈，而-對谷歌比較友好，空格在英文站點可以使用但中文少用线召。
推薦做法：
- 每個網(wǎng)頁應該有一個獨一無二的標題铺韧，切忌所有的頁面都使用同樣的默認標題
- 標題要主題明確，包含這個網(wǎng)頁中最重要的內(nèi)容
- 簡明精練缓淹，不羅列與網(wǎng)頁內(nèi)容不相關的信息
- 如果你的文章標題不是很長哈打，還可以加入點關鍵詞進去，如文章title_關鍵詞_網(wǎng)站名稱
- 用戶瀏覽通常是從左到右的割卖，重要的內(nèi)容應該放到title的靠前的位置
- 使用用戶所熟知的語言描述前酿。如果你有中、英文兩種網(wǎng)站名稱鹏溯，盡量使用用戶熟知的那一種做為標題描述
示例：
<title>阿里巴巴1688.com - 全球領先的采購批發(fā)平臺,批發(fā)網(wǎng)</title>
<title>京東(JD.COM)-正品低價、品質(zhì)保障淹仑、配送及時丙挽、輕松購物！</title>
二匀借、description
description不是權值計算的參考因素颜阐，這個標簽存在與否不影響網(wǎng)頁權值，只會用做搜索結果摘要的一個選擇目標吓肋。用戶極有可能通過網(wǎng)站的摘要來決定是否瀏覽該網(wǎng)站凳怨。
推薦做法：
- 網(wǎng)站首頁、頻道頁是鬼、產(chǎn)品參數(shù)頁等沒有大段文字可以用做摘要的網(wǎng)頁最適合使用description
- 準確的描述網(wǎng)頁肤舞，不要堆砌關鍵詞
- 為每個網(wǎng)頁創(chuàng)建不同的description，避免所有網(wǎng)頁都使用同樣的描述
- 長度合理均蜜，不過長不過短（最好在100-150個字符李剖，對應中文就是50到75個漢字）。
示例：
<meta name="description" content="阿里巴巴（1688.com）批發(fā)網(wǎng)是全球企業(yè)間（B2B）電子商務的著名品牌囤耳，為數(shù)千萬網(wǎng)商提供海量商機信息和便捷安全的在線交易市場篙顺，也是商人們以商會友偶芍、真實互動的社區(qū)平臺。目前1688.com已覆蓋原材料德玫、工業(yè)品匪蟀、服裝服飾、家居百貨宰僧、小商品等12個行業(yè)大類材彪，提供從原料--生產(chǎn)--加工--現(xiàn)貨等一系列的供應產(chǎn)品和服務。"
/>
<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電撒桨、數(shù)碼通訊查刻、電腦、家居百貨凤类、服裝服飾穗泵、母嬰、圖書谜疤、食品等數(shù)萬個品牌優(yōu)質(zhì)商品.便捷佃延、誠信的服務，為您提供愉悅的網(wǎng)上購物體驗!" />
三夷磕、keywords
keywords在搜索排名的權重不高履肃，但是合理的設置，可以提高關鍵字的密度及優(yōu)化搜索結果頁的體驗坐桩。通過加大關鍵詞的密度尺棋，從而提高關鍵詞在搜索引擎的排名，是SEO優(yōu)化的一個常用手段绵跷。
SEO的核心思想是每個頁面抓住幾個關鍵字（一般不超過5個）進行核心優(yōu)化膘螟，所以設定與本頁內(nèi)容相關的主關鍵詞一到三個就可以了。關鍵字之間用英文狀態(tài)下的逗號分割碾局，不要再濫用關鍵字荆残，這會給搜索引擎不好的印象。
示例：
<meta name="keywords" content="阿里巴巴净当，批發(fā)網(wǎng)内斯，1688，批發(fā)市場像啼，批發(fā)俘闯，采購，微商埋合，微店备徐，貨源"/>
<meta name="Keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數(shù)碼,配件,手表,存儲卡,京東" />
使用HTML結構化
一、h標簽
h標簽在html代碼中是“標題”的意思甚颂，就如一篇文章蜜猾，標題是文章最為重要的一個對象秀菱，也是搜索引擎在排名時重點考慮的一個對象。html中的h標簽一共有六個蹭睡，分別是h1/h2/h3/h4/h5/h6衍菱，分別代表不同的級別，h1標題具備更多的權重,以此類推肩豁。
一般情況下脊串，每個頁面都應該有個唯一的h1標題，但html5中h1標題是可以多次出現(xiàn)的清钥，每個具有結構大綱的標簽都可以擁有自己獨立的h1標題琼锋，如header,footer,section,aside,article。
關于h標簽的使用祟昭，需要根據(jù)實際情況來使用缕坎，不可任意濫用。如一篇文章篡悟，不可能出現(xiàn)多個一級標題谜叹，所以h1在同一篇文章中只能出現(xiàn)一次，而h2等則可以出現(xiàn)多次搬葬。根據(jù)你需要表現(xiàn)的內(nèi)容的重要程度荷腊，分別使用不同的h標簽即可。特別注意急凰，h標簽中最好出現(xiàn)關鍵字女仰！但不可濫用。
在頁面中合理利用h1-h6標簽抡锈，能夠讓頁面內(nèi)容主次結構分明董栽，利于搜索引擎識別內(nèi)容偏重
二、alt
alt是圖像中的注釋企孩，對圖像的優(yōu)化至關重要。搜索引擎還不能有效額識別出圖片內(nèi)容袁稽，給img添加alt屬性就相當于告訴搜索引擎圖片是什么內(nèi)容勿璃，從而獲取更好的圖片排名。
一般在插入圖像時推汽，我們在alt中設置圖像的描述內(nèi)容补疑，其中可以包含關鍵字但不要故意堆砌。特別需要注意的是歹撒，這些內(nèi)容是不可以重復的莲组，否則這樣很容易被搜索引擎懲罰！
示例：
<img src="../logo.png" alt="XXXlogo" width="100px" height="100px" />
三暖夭、strong,em 標簽
這些標簽可以把文字變成另一個突出的樣式锹杈，如加粗撵孤，變成斜體。他們不但可以在視覺上引起讀者的注意竭望，而且搜索引擎也會把他們當成關鍵字標示邪码。
strong被認為是“加強”，em被認為是“強調(diào)”咬清，也就是這兩個標簽是有特殊含義的闭专，這對于網(wǎng)站優(yōu)化至關重要。多數(shù)時候旧烧，我們在優(yōu)化網(wǎng)站時會對關鍵字進行突出影钉，這時使用strong或em就比使用b或者i好很多。
四掘剪、nofollow
nofollow用在站內(nèi)鏈接上平委，可以影響搜索引擎排名。
它其實是HTML標簽中的一種屬性杖小，它的主要作用就是告訴搜索引擎蜘蛛肆汹，不要跟蹤加了nofollow屬性標簽的這條鏈接了，也就是告訴搜索引擎蜘蛛禁止爬取和傳遞權重予权。
比如說昂勉，在網(wǎng)站中一些評論留言中總會用人留下各式各樣的鏈接地址，時間久了便會形成很多的垃圾鏈接扫腺。這對主網(wǎng)站的影響是很大的岗照，會導致這些鏈接與鏈接之間互相傳遞權重，最終使主網(wǎng)站的權重分散了笆环。
添加方法：
<a href=”URL地址”rel=”nofollow”>
<a href=”URL地址” rel=”external nofollow”>
第一種nofollow屬性標簽的添加方法是比較常見的一種攒至，它的主要作用就是告訴搜索引擎蜘蛛不要跟蹤這條鏈接，而第二種nofollow屬性標簽的添加方法主要作用是告訴搜索引擎這是一個出站鏈接躁劣，不允許跟蹤迫吐。雖然出站鏈接在添加了nofollow屬性標簽之后，搜索引擎蜘蛛在第一次發(fā)現(xiàn)這條鏈接的時候账忘，還是會照樣爬取這條鏈接志膀，但是，搜索引擎會自動記錄這條鏈接的nofollow屬性值鳖擒，從而不給這條鏈接導出權重溉浙。
鏈接URL
一、統(tǒng)一URL
http://www.domainname.com
http://domainname.com
http://www.domainname.com/index.html
http://domainname.com/index.html
以上四個其實都是首頁蒋荚。雖然不會給訪客造成什么麻煩戳稽，但對于搜索引擎來說就是四條網(wǎng)址，并且內(nèi)容相同期升，很可能會被誤認為是作弊手段惊奇。而這四個頁面的權重會被分散掉互躬。
二、301跳轉
URL發(fā)生改變赊时，一定要把舊的地址301指向新的吨铸，不然之前做的一些收錄權重什么的全白搭了。
三祖秒、URL層級
鏈接目錄層級越淺诞吱，權重越大。在沒有其他反向鏈接的前提下竭缝，每個目錄的權重只是繼承它的上級權重的一部分房维，因此這個權重會低于它的上級目錄。也就是常說的離首頁的層級越遠抬纸，權重越小咙俩。
這個是有前提的，就是沒有其他外鏈影響湿故。所以網(wǎng)站在進行外鏈建設或者內(nèi)鏈布局調(diào)整之后阿趁，是會出現(xiàn)在一些低級目錄的權重高于上級目錄的情況。尤其是在一些針對具體目錄關鍵詞的排名能力上坛猪。
在京東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】京東站內(nèi)優(yōu)化分析）
ARIA
什么是ARIA
無障礙網(wǎng)絡倡議的無障礙豐富互聯(lián)網(wǎng)應用規(guī)范（WAI-ARIA洋机，簡稱 ARIA）坠宴。主要針對的是視覺缺陷，失聰绷旗，行動不便的殘疾人以及假裝殘疾的測試人員啄踊。尤其像盲人，眼睛看不到刁标，其瀏覽網(wǎng)頁則需要借助輔助設備，如屏幕閱讀器址晕，屏幕閱讀機可以大聲朗讀或者輸出盲文膀懈。
2015年5月21日，W3C HTML工作組（HTML Working Group）發(fā)布了在HTML中使用ARIA（Notes on Using ARIA in HTML）的標準工作草案谨垃。該文檔實際地指導了開發(fā)者如何向HTML文檔中添加由WAI-ARIA 1.1規(guī)范（Accessible Rich Internet Applications specification启搂， WAI-ARIA 1.1） 所規(guī)定的無障礙輔助信息硼控，從而使殘障人士更容易獲得Web內(nèi)容和訪問Web應用。
ARIA 使用規(guī)范
根據(jù)ARIA規(guī)范中描述的要求胳赌，Web開發(fā)人員可以使用role和aria-*來給HTML元素添加ARIA屬性牢撼。其中，role標識了一個元素的作用疑苫，aria-*描述了與之有關的事物特征及其狀態(tài)熏版。一些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，并且?guī)в?/code>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> //按鈕為禁用狀態(tài)
</div>
<div role="footer">
</div>
注意事項：
當使用的元素(HTML5)具有語義化且有對應默認
role屬性值時曲横，應該使用這些元素，不應該重新定義一個role屬性和aria-*狀態(tài)不瓶。 推薦使用<button></button>而不是<div role="button"></div>禾嫉。使用
role時不能違背標簽本身的語義。
如在button元素上使用role=title這是不允許的蚊丐，因為button元素具有與title語義相沖突的默認特征熙参。
這里只是簡單的介紹了ARIA的基本使用方法、注意事項以及與ARIA相關聯(lián)的常見HTML元素吠撮，想要更深入的了解請看下w3cplus上大漠老師的這篇文章灾而。
END
從web語義化到SEO和ARIA，非常感謝前輩們的用心總結翅娶，讓我們能夠站在巨人的肩膀上前行量承。
全文參考資料：
