web語義化之SEO和ARIA

heweixiao發表於2018-03-29

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

SEO

什麼是SEO？

SEO（Search Engine Optimization，搜尋引擎優化），是一種利用搜尋引擎的搜尋規則來提高目的網站在有關搜尋引擎內的排名的方式。通俗來講就是根據搜素引擎的規則來優化你的網站，讓你的網站能夠在使用者的搜尋結果中排在前面，提高網站的訪問量。

SEO常用方式

採用DIV+CSS佈局

採用div-css佈局的網站對於搜尋引擎很是友好，因此其避免了Table巢狀層次過多而無法被搜尋引擎抓取的問題，而且簡潔、結構化的程式碼更加有利於突出重點和適合搜尋引擎抓取。

儘量不使用表格佈局，因為搜尋引擎對錶格佈局巢狀3層以上的內容懶的去抓取。

TDK優化

TDK，即 title, description, keywords。

一、title

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

推薦做法：

每個網頁應該有一個獨一無二的標題，切忌所有的頁面都使用同樣的預設標題
標題要主題明確，包含這個網頁中最重要的內容
簡明精練，不羅列與網頁內容不相關的資訊
如果你的文章標題不是很長，還可以加入點關鍵詞進去，如文章title_關鍵詞_網站名稱
使用者瀏覽通常是從左到右的，重要的內容應該放到title的靠前的位置
使用使用者所熟知的語言描述。如果你有中、英文兩種網站名稱，儘量使用使用者熟知的那一種做為標題描述

示例：

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

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

二、description

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

推薦做法：

網站首頁、頻道頁、產品引數頁等沒有大段文字可以用做摘要的網頁最適合使用description
準確的描述網頁，不要堆砌關鍵詞
為每個網頁建立不同的description，避免所有網頁都使用同樣的描述
長度合理，不過長不過短（最好在100-150個字元，對應中文就是50到75個漢字）。

示例：

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

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

三、keywords

keywords在搜尋排名的權重不高，但是合理的設定，可以提高關鍵字的密度及優化搜尋結果頁的體驗。通過加大關鍵詞的密度，從而提高關鍵詞在搜尋引擎的排名，是SEO優化的一個常用手段。

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

示例：

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

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

使用HTML結構化

一、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標籤，能夠讓頁面內容主次結構分明，利於搜尋引擎識別內容偏重

二、alt

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

一般在插入影像時，我們在alt中設定影像的描述內容，其中可以包含關鍵字但不要故意堆砌。特別需要注意的是，這些內容是不可以重複的，否則這樣很容易被搜尋引擎懲罰！

示例：

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

三、strong,em 標籤

這些標籤可以把文字變成另一個突出的樣式，如加粗，變成斜體。他們不但可以在視覺上引起讀者的注意，而且搜尋引擎也會把他們當成關鍵字標示。
strong被認為是“加強”，em被認為是“強調”，也就是這兩個標籤是有特殊含義的，這對於網站優化至關重要。多數時候，我們在優化網站時會對關鍵字進行突出，這時使用strong或em就比使用b或者i好很多。

四、nofollow

nofollow用在站內連結上，可以影響搜尋引擎排名。

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

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

新增方法：

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

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

第一種nofollow屬性標籤的新增方法是比較常見的一種，它的主要作用就是告訴搜尋引擎蜘蛛不要跟蹤這條連結，而第二種nofollow屬性標籤的新增方法主要作用是告訴搜尋引擎這是一個出站連結，不允許跟蹤。雖然出站連結在新增了nofollow屬性標籤之後，搜尋引擎蜘蛛在第一次發現這條連結的時候，還是會照樣爬取這條連結，但是，搜尋引擎會自動記錄這條連結的nofollow屬性值，從而不給這條連結匯出權重。

連結URL

一、統一URL

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

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

二、301跳轉

URL發生改變，一定要把舊的地址301指向新的，不然之前做的一些收錄權重什麼的全白搭了。

三、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>

注意事項：