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