資訊專欄INFORMATION COLUMN
摘要：在快速理解語義化的時候，只知道語義化有利于和便于屏幕閱讀器閱讀，但并不知道它是如何有利于和便于閱讀器閱讀的，帶著這個疑問，進行了一番探索總結。年月日，工作組發布了在中使用的標準工作草案。
在快速理解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的靠前的位置
使用用戶所熟知的語言描述。如果你有中、英文兩種網站名稱，盡量使用用戶熟知的那一種做為標題描述
示例：
阿里巴巴1688.com - 全球領先的采購批發平臺,批發網
京東(JD.COM)-正品低價、品質保障、配送及時、輕松購物！
二、description
description不是權值計算的參考因素，這個標簽存在與否不影響網頁權值，只會用做搜索結果摘要的一個選擇目標。用戶極有可能通過網站的摘要來決定是否瀏覽該網站。
推薦做法：
網站首頁、頻道頁、產品參數頁等沒有大段文字可以用做摘要的網頁最適合使用description
準確的描述網頁，不要堆砌關鍵詞
為每個網頁創建不同的description，避免所有網頁都使用同樣的描述
長度合理，不過長不過短（最好在100-150個字符，對應中文就是50到75個漢字）。
示例：
三、keywords
keywords在搜索排名的權重不高，但是合理的設置，可以提高關鍵字的密度及優化搜索結果頁的體驗。通過加大關鍵詞的密度，從而提高關鍵詞在搜索引擎的排名，是SEO優化的一個常用手段。
SEO的核心思想是每個頁面抓住幾個關鍵字（一般不超過5個）進行核心優化，所以設定與本頁內容相關的主關鍵詞一到三個就可以了。關鍵字之間用英文狀態下的逗號分割，不要再濫用關鍵字，這會給搜索引擎不好的印象。
示例：
使用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中設置圖像的描述內容，其中可以包含關鍵字但不要故意堆砌。特別需要注意的是，這些內容是不可以重復的，否則這樣很容易被搜索引擎懲罰！
示例：
三、strong,em 標簽
這些標簽可以把文字變成另一個突出的樣式，如加粗，變成斜體。他們不但可以在視覺上引起讀者的注意，而且搜索引擎也會把他們當成關鍵字標示。
strong被認為是“加強”，em被認為是“強調”，也就是這兩個標簽是有特殊含義的，這對于網站優化至關重要。多數時候，我們在優化網站時會對關鍵字進行突出，這時使用strong或em就比使用b或者i好很多。
四、nofollow
nofollow用在站內鏈接上，可以影響搜索引擎排名。
它其實是HTML標簽中的一種屬性，它的主要作用就是告訴搜索引擎蜘蛛，不要跟蹤加了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-*來設置屬性值。
如：
//按鈕為禁用狀態
注意事項：
當使用的元素(HTML5)具有語義化且有對應默認role屬性值時，應該使用這些元素，不應該重新定義一個role屬性和aria-*狀態。 推薦使用而不是 。
使用role時不能違背標簽本身的語義。
如在button元素上使用role=title這是不允許的，因為button元素具有與title語義相沖突的默認特征。
這里只是簡單的介紹了ARIA的基本使用方法、注意事項以及與ARIA相關聯的常見HTML元素，想要更深入的了解請看下w3cplus上大漠老師的這篇文章。
END從web語義化到SEO和ARIA，非常感謝前輩們的用心總結，讓我們能夠站在巨人的肩膀上前行。
全文參考資料：
【京東SEO】京東站內優化分析
SEO優化實戰
Web前端開發學習3：SEO代碼優化
WAI-ARIA 無障礙Web規范
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52098.html
摘要：在快速理解語義化的時候，只知道語義化有利于和便于屏幕閱讀器閱讀，但并不知道它是如何有利于和便于閱讀器閱讀的，帶著這個疑問，進行了一番探索總結。年月日，工作組發布了在中使用的標準工作草案。 在快速理解web語義化的時候，只知道web語義化有利于SEO和便于屏幕閱讀器閱讀，但并不知道它是如何有利于SEO和便于閱讀器閱讀的，帶著這個疑問，進行了一番探索總結。 SEO 什么是SEO？ SEO（...
摘要：代碼示例語義化語義化語義化語義化語義化年月日小維語義化標簽包括還有等。而沒有語義化的元素如則推薦使用。語義化包含了標簽語義化和命名語義化。 什么是Web語義化 Web語義化是指使用恰當語義的html標簽、class類名等內容，讓頁面具有良好的結構與含義，從而讓人和機器都能快速理解網頁內容。語義化的web頁面一方面可以讓機器在更少的人類干預情況下收集并研究網頁的信息，從而可以讀懂網頁的內...
摘要：作者陳大魚頭鏈接背景最近高級前端工程師劉小夕在上開了個每個工作日布一個前端相關題的，懷著學習的心態我也參與其中，以下為我的回答，如果有不對的地方，非常歡迎各位指出。如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。 作者：陳大魚頭 github： KRISACHAN 鏈接：github.com/YvetteLau/S… 背景：最近高級前端工程師 劉小夕 在 github 上...
閱讀 1814·2021-10-09 09:44
閱讀 2690·2021-09-22 15:38
閱讀 2451·2021-09-09 09:33
閱讀 686·2021-09-07 09:58
閱讀 1786·2021-09-02 15:41
閱讀 2485·2019-08-30 15:55
閱讀 1796·2019-08-30 15:55
閱讀 533·2019-08-30 15:44
