摘要:在快速理解語義化的時候,只知道語義化有利于和便于屏幕閱讀器閱讀,但并不知道它是如何有利于和便于閱讀器閱讀的,帶著這個疑問,進行了一番探索總結(jié)。年月日,工作組發(fā)布了在中使用的標準工作草案。
在快速理解web語義化的時候,只知道web語義化有利于SEO和便于屏幕閱讀器閱讀,但并不知道它是如何有利于SEO和便于閱讀器閱讀的,帶著這個疑問,進行了一番探索總結(jié)。
SEO 什么是SEO?SEO(Search Engine Optimization,搜索引擎優(yōu)化 ),是一種利用搜索引擎的搜索規(guī)則來提高目的網(wǎng)站在有關(guān)搜索引擎內(nèi)的排名的方式。通俗來講就是根據(jù)搜素引擎的規(guī)則來優(yōu)化你的網(wǎng)站,讓你的網(wǎng)站能夠在用戶的搜索結(jié)果中排在前面,提高網(wǎng)站的訪問量。
SEO常用方式 采用DIV+CSS布局采用div-css布局的網(wǎng)站對于搜索引擎很是友好,因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題,而且簡潔、結(jié)構(gòu)化的代碼更加有利于突出重點和適合搜索引擎抓取。
盡量不使用表格布局,因為搜索引擎對表格布局嵌套3層以上的內(nèi)容懶的去抓取。
TDK優(yōu)化TDK,即 title, description, keywords。
一、title
在SEO中,標題的優(yōu)化占著舉足輕重的地位,無論是從用戶體驗的角度出發(fā),還是從搜索引擎的排名效果出發(fā),title都是頁面優(yōu)化最最重要的因素。
title的分隔符一般有,,_,-和空格。其中_對百度比較友好,而-對谷歌比較友好,空格在英文站點可以使用但中文少用。
推薦做法:
每個網(wǎng)頁應(yīng)該有一個獨一無二的標題,切忌所有的頁面都使用同樣的默認標題
標題要主題明確,包含這個網(wǎng)頁中最重要的內(nèi)容
簡明精練,不羅列與網(wǎng)頁內(nèi)容不相關(guān)的信息
如果你的文章標題不是很長,還可以加入點關(guān)鍵詞進去,如文章title_關(guān)鍵詞_網(wǎng)站名稱
用戶瀏覽通常是從左到右的,重要的內(nèi)容應(yīng)該放到title的靠前的位置
使用用戶所熟知的語言描述。如果你有中、英文兩種網(wǎng)站名稱,盡量使用用戶熟知的那一種做為標題描述
示例:
阿里巴巴1688.com - 全球領(lǐng)先的采購批發(fā)平臺,批發(fā)網(wǎng)
京東(JD.COM)-正品低價、品質(zhì)保障、配送及時、輕松購物!
二、description
description不是權(quán)值計算的參考因素,這個標簽存在與否不影響網(wǎng)頁權(quán)值,只會用做搜索結(jié)果摘要的一個選擇目標。用戶極有可能通過網(wǎng)站的摘要來決定是否瀏覽該網(wǎng)站。
推薦做法:
網(wǎng)站首頁、頻道頁、產(chǎn)品參數(shù)頁等沒有大段文字可以用做摘要的網(wǎng)頁最適合使用description
準確的描述網(wǎng)頁,不要堆砌關(guān)鍵詞
為每個網(wǎng)頁創(chuàng)建不同的description,避免所有網(wǎng)頁都使用同樣的描述
長度合理,不過長不過短(最好在100-150個字符,對應(yīng)中文就是50到75個漢字)。
示例:
三、keywords
keywords在搜索排名的權(quán)重不高,但是合理的設(shè)置,可以提高關(guān)鍵字的密度及優(yōu)化搜索結(jié)果頁的體驗。通過加大關(guān)鍵詞的密度,從而提高關(guān)鍵詞在搜索引擎的排名,是SEO優(yōu)化的一個常用手段。
SEO的核心思想是每個頁面抓住幾個關(guān)鍵字(一般不超過5個)進行核心優(yōu)化,所以設(shè)定與本頁內(nèi)容相關(guān)的主關(guān)鍵詞一到三個就可以了。關(guān)鍵字之間用英文狀態(tài)下的逗號分割,不要再濫用關(guān)鍵字,這會給搜索引擎不好的印象。
示例:
使用HTML結(jié)構(gòu)化
一、h標簽
h標簽在html代碼中是“標題”的意思,就如一篇文章,標題是文章最為重要的一個對象,也是搜索引擎在排名時重點考慮的一個對象。html中的h標簽一共有六個,分別是h1/h2/h3/h4/h5/h6,分別代表不同的級別,h1標題具備更多的權(quán)重,以此類推。
一般情況下,每個頁面都應(yīng)該有個唯一的h1標題,但html5中h1標題是可以多次出現(xiàn)的,每個具有結(jié)構(gòu)大綱的標簽都可以擁有自己獨立的h1標題,如header,footer,section,aside,article。
關(guān)于h標簽的使用,需要根據(jù)實際情況來使用,不可任意濫用。如一篇文章,不可能出現(xiàn)多個一級標題,所以h1在同一篇文章中只能出現(xiàn)一次,而h2等則可以出現(xiàn)多次。根據(jù)你需要表現(xiàn)的內(nèi)容的重要程度,分別使用不同的h標簽即可。特別注意,h標簽中最好出現(xiàn)關(guān)鍵字!但不可濫用。
在頁面中合理利用h1-h6標簽,能夠讓頁面內(nèi)容主次結(jié)構(gòu)分明,利于搜索引擎識別內(nèi)容偏重
二、alt
alt是圖像中的注釋,對圖像的優(yōu)化至關(guān)重要。搜索引擎還不能有效額識別出圖片內(nèi)容,給img添加alt屬性就相當于告訴搜索引擎圖片是什么內(nèi)容,從而獲取更好的圖片排名。
一般在插入圖像時,我們在alt中設(shè)置圖像的描述內(nèi)容,其中可以包含關(guān)鍵字但不要故意堆砌。特別需要注意的是,這些內(nèi)容是不可以重復的,否則這樣很容易被搜索引擎懲罰!
示例:
三、strong,em 標簽
這些標簽可以把文字變成另一個突出的樣式,如加粗,變成斜體。他們不但可以在視覺上引起讀者的注意,而且搜索引擎也會把他們當成關(guān)鍵字標示。
strong被認為是“加強”,em被認為是“強調(diào)”,也就是這兩個標簽是有特殊含義的,這對于網(wǎng)站優(yōu)化至關(guān)重要。多數(shù)時候,我們在優(yōu)化網(wǎng)站時會對關(guān)鍵字進行突出,這時使用strong或em就比使用b或者i好很多。
四、nofollow
nofollow用在站內(nèi)鏈接上,可以影響搜索引擎排名。
它其實是HTML標簽中的一種屬性,它的主要作用就是告訴搜索引擎蜘蛛,不要跟蹤加了nofollow屬性標簽的這條鏈接了,也就是告訴搜索引擎蜘蛛禁止爬取和傳遞權(quán)重。
比如說,在網(wǎng)站中一些評論留言中總會用人留下各式各樣的鏈接地址,時間久了便會形成很多的垃圾鏈接。這對主網(wǎng)站的影響是很大的,會導致這些鏈接與鏈接之間互相傳遞權(quán)重,最終使主網(wǎng)站的權(quán)重分散了。
添加方法:
第一種nofollow屬性標簽的添加方法是比較常見的一種,它的主要作用就是告訴搜索引擎蜘蛛不要跟蹤這條鏈接,而第二種nofollow屬性標簽的添加方法主要作用是告訴搜索引擎這是一個出站鏈接,不允許跟蹤。雖然出站鏈接在添加了nofollow屬性標簽之后,搜索引擎蜘蛛在第一次發(fā)現(xiàn)這條鏈接的時候,還是會照樣爬取這條鏈接,但是,搜索引擎會自動記錄這條鏈接的nofollow屬性值,從而不給這條鏈接導出權(quán)重。
鏈接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)容相同,很可能會被誤認為是作弊手段。而這四個頁面的權(quán)重會被分散掉。
二、301跳轉(zhuǎn)
URL發(fā)生改變,一定要把舊的地址301指向新的,不然之前做的一些收錄權(quán)重什么的全白搭了。
三、URL層級
鏈接目錄層級越淺,權(quán)重越大。在沒有其他反向鏈接的前提下,每個目錄的權(quán)重只是繼承它的上級權(quán)重的一部分,因此這個權(quán)重會低于它的上級目錄。也就是常說的離首頁的層級越遠,權(quán)重越小。
這個是有前提的,就是沒有其他外鏈影響。所以網(wǎng)站在進行外鏈建設(shè)或者內(nèi)鏈布局調(diào)整之后,是會出現(xiàn)在一些低級目錄的權(quán)重高于上級目錄的情況。尤其是在一些針對具體目錄關(guān)鍵詞的排名能力上。
在京東98%以上的頁面,URL層級都是在頂級域名之下,最多也是在一級目錄之下。這樣就確保了權(quán)重最好的繼承主域名,減少權(quán)重的分層流失。
如:
京東一級分類頁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)絡(luò)倡議的無障礙豐富互聯(lián)網(wǎng)應(yīng)用規(guī)范(WAI-ARIA,簡稱 ARIA)。主要針對的是視覺缺陷,失聰,行動不便的殘疾人以及假裝殘疾的測試人員。尤其像盲人,眼睛看不到,其瀏覽網(wǎng)頁則需要借助輔助設(shè)備,如屏幕閱讀器,屏幕閱讀機可以大聲朗讀或者輸出盲文。
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應(yīng)用。
ARIA 使用規(guī)范根據(jù)ARIA規(guī)范中描述的要求,Web開發(fā)人員可以使用role和aria-*來給HTML元素添加ARIA屬性。其中,role標識了一個元素的作用,aria-*描述了與之有關(guān)的事物特征及其狀態(tài)。一些HTML元素在ARIA中會有對應(yīng)的默認屬性,但并不是所有的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ī)в?/b>aria-level = 1-6` 來表示標題等級 |
input type="button" | role=button |
input type="checkbox" | role=checkbox |
img alt="some text" | role=img |
沒有自帶默認role屬性的元素可通過顯式的聲明role和aria-*來設(shè)置屬性值。
如:
//按鈕為禁用狀態(tài)
注意事項:
當使用的元素(HTML5)具有語義化且有對應(yīng)默認role屬性值時,應(yīng)該使用這些元素,不應(yīng)該重新定義一個role屬性和aria-*狀態(tài)。 推薦使用而不是 。
使用role時不能違背標簽本身的語義。
如在button元素上使用role=title這是不允許的,因為button元素具有與title語義相沖突的默認特征。
這里只是簡單的介紹了ARIA的基本使用方法、注意事項以及與ARIA相關(guān)聯(lián)的常見HTML元素,想要更深入的了解請看下w3cplus上大漠老師的這篇文章。
END從web語義化到SEO和ARIA,非常感謝前輩們的用心總結(jié),讓我們能夠站在巨人的肩膀上前行。
全文參考資料:
【京東SEO】京東站內(nèi)優(yōu)化分析
SEO優(yōu)化實戰(zhàn)
Web前端開發(fā)學習3:SEO代碼優(yōu)化
WAI-ARIA 無障礙Web規(guī)范
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/52098.html
摘要:在快速理解語義化的時候,只知道語義化有利于和便于屏幕閱讀器閱讀,但并不知道它是如何有利于和便于閱讀器閱讀的,帶著這個疑問,進行了一番探索總結(jié)。年月日,工作組發(fā)布了在中使用的標準工作草案。 在快速理解web語義化的時候,只知道web語義化有利于SEO和便于屏幕閱讀器閱讀,但并不知道它是如何有利于SEO和便于閱讀器閱讀的,帶著這個疑問,進行了一番探索總結(jié)。 SEO 什么是SEO? SEO(...
摘要:代碼示例語義化語義化語義化語義化語義化年月日小維語義化標簽包括還有等。而沒有語義化的元素如則推薦使用。語義化包含了標簽語義化和命名語義化。 什么是Web語義化 Web語義化是指使用恰當語義的html標簽、class類名等內(nèi)容,讓頁面具有良好的結(jié)構(gòu)與含義,從而讓人和機器都能快速理解網(wǎng)頁內(nèi)容。語義化的web頁面一方面可以讓機器在更少的人類干預情況下收集并研究網(wǎng)頁的信息,從而可以讀懂網(wǎng)頁的內(nèi)...
摘要:作者陳大魚頭鏈接背景最近高級前端工程師劉小夕在上開了個每個工作日布一個前端相關(guān)題的,懷著學習的心態(tài)我也參與其中,以下為我的回答,如果有不對的地方,非常歡迎各位指出。如果你采用正宗川菜做法,最后只需加入花生米,炒拌幾下就可以起鍋了。 作者:陳大魚頭 github: KRISACHAN 鏈接:github.com/YvetteLau/S… 背景:最近高級前端工程師 劉小夕 在 github 上...
閱讀 1852·2021-10-09 09:44
閱讀 2723·2021-09-22 15:38
閱讀 2529·2021-09-09 09:33
閱讀 734·2021-09-07 09:58
閱讀 1847·2021-09-02 15:41
閱讀 2568·2019-08-30 15:55
閱讀 1821·2019-08-30 15:55
閱讀 578·2019-08-30 15:44