談Web標(biāo)準(zhǔn)與SEO關(guān)系（三）
第一篇鏈接：談web標(biāo)準(zhǔn)和seo關(guān)系（一）
第二篇鏈接：談WEB標(biāo)準(zhǔn)與SEO關(guān)系（二）
寫(xiě)了兩篇關(guān)于Web標(biāo)準(zhǔn)的文章了,這篇結(jié)合我工作中的一些實(shí)踐經(jīng)歷來(lái)與大家分享一些網(wǎng)站設(shè)計(jì)中常見(jiàn)誤區(qū),以及它對(duì)seo所產(chǎn)生的影響.這也是"說(shuō)透"系列中最后一篇,希望能對(duì)大家有所幫助.也希望能聽(tīng)到大家不同的意見(jiàn).
誤區(qū)一: DIV+CSS強(qiáng)迫癥
我工作中接觸到一些前端開(kāi)發(fā)人員,他們或多或少?gòu)木W(wǎng)上也了解了一些SEO的知識(shí),又或者在學(xué)習(xí)和從事SEO.對(duì)前端又缺乏了解的人.看到頁(yè)面中用到幾個(gè)"table"標(biāo)簽,立馬就是滿(mǎn)臉的不屑,然后一大堆理由說(shuō)得頭頭是道.弄得你感覺(jué)"table"就是萬(wàn)惡之源,你在頁(yè)面中用到了table你就顯得很不專(zhuān)業(yè).你的專(zhuān)業(yè)水準(zhǔn)在他心里馬上就降了一大半.他再不厭其煩的用了一大堆div和CSS把你的table給改寫(xiě).這就是Div+CSS強(qiáng)迫癥的表現(xiàn).
table不適合用來(lái)做整體布局(并不表示不允許),這點(diǎn)已經(jīng)得到大家的公認(rèn),有過(guò)前端經(jīng)驗(yàn)的朋友都知道布局涉及到層次嵌套.用table嵌套來(lái)呈現(xiàn)結(jié)構(gòu)會(huì)讓你以后的布局的調(diào)整變得很困難.比如移動(dòng)某個(gè)塊的位置,調(diào)整左右塊的距離等等,當(dāng)嵌套的層次越多,你的調(diào)整越困難.再次嵌套的層次越深.解析dom所花費(fèi)的時(shí)間越長(zhǎng),增加了客戶(hù)端和搜索引擎的負(fù)擔(dān),這點(diǎn)我在第二篇文章中講過(guò),但是如果是用來(lái)呈現(xiàn)列表式的數(shù)據(jù),比如數(shù)據(jù)報(bào)表,多列的新聞列表.個(gè)人簡(jiǎn)歷等.這個(gè)地方用"table"來(lái)布局是最合適不過(guò)的了.但是很多人受到了"Web標(biāo)準(zhǔn)"不正確理論的影響.他寧愿用非常多的div,li和span來(lái)操作.也不用table.給自己的工作造成了很多的困擾.其實(shí)"table"在所有html標(biāo)簽中.它的語(yǔ)義化是最強(qiáng)的.它有很多的"子標(biāo)簽"來(lái)規(guī)范這個(gè)表格.例如一個(gè)完整表格的定義:
- <table>
- <caption>新聞列表</caption>
- <thead>
- <tr>
- <th>新聞標(biāo)題</th>
- <th>新聞作者</th>
- <th>占擊次數(shù)</th>
- </tr>
- </thead>
- <tfoot>
- <tr>
- <td>文章總數(shù):2</td>
- <td>作者數(shù):1</td>
- <td>平均點(diǎn)擊次數(shù):40</td>
- </tr>
- </tfoot>
- <tbody>
- <tr>
- <td>web標(biāo)準(zhǔn)解釋</td>
- <td>w3c</td>
- <td>50</td>
- </tr>
- <tr>
- <td>web標(biāo)準(zhǔn)解釋一</td>
- <td>w3c</td>
- <td>30</td>
- </tr>
- </tbody>
- </table>
其中<thead>,<tbody>,</tfoot>分別表示了表格的頭部,內(nèi)容和底部,<caption>表示表格標(biāo)題,<th>表示列標(biāo)題,在html5中還可以用<summary>描述標(biāo)簽.
總結(jié):
1.table適合用來(lái)呈現(xiàn)列表數(shù)據(jù)
2.table適合用來(lái)不用多層嵌套的簡(jiǎn)單布局
3.tabel的語(yǔ)義化是非常強(qiáng)的.該用的時(shí)候得用.不要被誤導(dǎo)的"web標(biāo)準(zhǔn)"所困擾.
誤區(qū)二:不正確的嵌套和移位.
SEO大家都能理解標(biāo)題相關(guān)的內(nèi)容或鏈接如果在html中靠前,那么這個(gè)頁(yè)面所賦于的權(quán)重也是相對(duì)較高的,大家在不影響瀏覽者體驗(yàn)的情況可能會(huì)使用CSS來(lái)調(diào)整內(nèi)容實(shí)際的位置,俗稱(chēng)"移形換位",這種方式既不影響瀏覽者的體驗(yàn).又考慮到了搜引擎,在很多網(wǎng)站中這個(gè)技巧也被大量使用,但是在操作的過(guò)程中,卻有很多操作欠妥的地方.先來(lái)看幾個(gè)簡(jiǎn)單的例子:
比如顯示一篇文章,有標(biāo)題,內(nèi)容.作者等信息,很多人的寫(xiě)法是這樣的:
- <div class="title">
- <h1>新聞標(biāo)題</h1>
- </div>
- <div class="cotent">
- <p>新聞段落一</P>
- <p>新聞段落二</P>
- </div>
- <div>
- 新聞作者:張三
- </div>
這種寫(xiě)法真的不在少數(shù).包括很多較大的網(wǎng)站都在或多或少的存在這種寫(xiě)法.小網(wǎng)站就更常見(jiàn)了.它用"div"塊級(jí)元素把相應(yīng)的內(nèi)容分隔開(kāi).然后用CSS來(lái)定義不同塊的效果.這樣即增加了不必要的嵌套,也稀釋了內(nèi)容塊與內(nèi)容塊之間的相關(guān)性,對(duì)排名的影響很明顯也是有負(fù)面影響的.其實(shí)仔細(xì)想一想.我們可以把這段代碼寫(xiě)得更標(biāo)準(zhǔn).更優(yōu)雅一些.改進(jìn)后的代碼如下:
- <div class="container">
- <h1>新聞標(biāo)題</h1>
- <p>新聞段落一<p>
- <P>新聞段落二</p>
- <p class="des">作者:張三</p>
- </div>
- 在CSS中
- .container h1{屬性}
- .container p{公共屬性}
- .container .des{屬性}
再來(lái)說(shuō)"移形換位",這種方法在很多網(wǎng)站中也被普遍用到.具體操作方法gsa版主huxinyu寫(xiě)過(guò)這方面的文章.可以去Gsa版塊查看,我以上面的代碼為例:
- <body>
- <h1>新聞標(biāo)題</h1>
- ......(中間很多其它的內(nèi)容和標(biāo)簽)
- <div class="container">
- <p>新聞段落一<p>
- <P>新聞段落二</p>
- <p class="des">作者:張三</p>
- </body>
復(fù)制代碼 這個(gè)的目的很明顯,將<h1>標(biāo)簽提到<body>正文的最前面,以增加頁(yè)面相關(guān)關(guān)鍵詞的權(quán)重.然后利用CSS將<h1>標(biāo)簽的內(nèi)容移到新聞段落上面的位置.這樣瀏覽者是看不到<h1>標(biāo)簽移位了的.
搜索引擎以一種"看報(bào)紙"的方式來(lái)理解內(nèi)容,在這段代碼中,與<h1>標(biāo)簽關(guān)聯(lián)性最強(qiáng)的還是<div class="container">里面的正文內(nèi)容.當(dāng)它讀到了標(biāo)題,卻遲遲找不到標(biāo)題相關(guān)的內(nèi)容.試想:我在讀報(bào)紙.標(biāo)題在報(bào)紙?jiān)谧钌厦?標(biāo)題所對(duì)應(yīng)的內(nèi)容卻在報(bào)紙的最下面,你肯定會(huì)覺(jué)得這報(bào)紙排版的效果特別差.你不會(huì)給他一個(gè)好的評(píng)價(jià).同理,搜索引擎也不能很好的理解這種寫(xiě)法的用意.
如果我們一定要"移形換位",想提高頁(yè)面權(quán)重.那么就來(lái)得徹底一些.我可以將<div class="container">這個(gè)塊所有內(nèi)容移到body正文前面.然后利于CSS來(lái)調(diào)整這個(gè)container在頁(yè)面上的顯示位置.而不是僅僅移動(dòng)<h1>標(biāo)簽.這樣即不會(huì)破壞上下文的關(guān)系.又兼顧了瀏覽者的體驗(yàn).當(dāng)然我不是特別推崇在網(wǎng)站在大量使用這種方式,他會(huì)使前端開(kāi)發(fā)變得復(fù)雜,可維護(hù)性變差.
誤區(qū)三:不正確的js方法應(yīng)用
有沒(méi)有見(jiàn)過(guò)下面這幾種寫(xiě)法的代碼:
- (1)<a href="javascript:void(0)" onclick="dosomething()">投票</a>
- (2)<a href="javascrpt:dosomething()">好評(píng)</a>
- (3)<a herf="xx.html" onclick="dosomething();return false">第二頁(yè)</a>
含義就不多解釋了.第(1)和(2)種寫(xiě)法在網(wǎng)站中普遍存在.這三段代碼的共同點(diǎn)就是當(dāng)點(diǎn)擊<a>標(biāo)簽的錨文本時(shí),javascript的dosomething()方法會(huì)執(zhí)行,但是對(duì)于搜索引擎來(lái)說(shuō),他們的含義就大不一樣了.先來(lái)看一些知識(shí)點(diǎn):
href是<a>標(biāo)簽的標(biāo)準(zhǔn)屬性,它表示錨文本所指向的目標(biāo)頁(yè)面地址;onclick是<a>標(biāo)簽的事件.它表示單擊<a>標(biāo)簽內(nèi)的內(nèi)容時(shí)所執(zhí)行的程序代碼,從程序角度來(lái)說(shuō).程序的執(zhí)行都應(yīng)該都事件來(lái)驅(qū)動(dòng).而很多前端開(kāi)發(fā)人員都喜歡把一段js代碼放在href屬性中.當(dāng)搜索引擎抓行到<a>標(biāo)簽時(shí),它想順著herf所指向的頁(yè)面地址繼續(xù)去索引.卻發(fā)現(xiàn)這里是一段js代碼.順理成章.這個(gè)地方的鏈接也就成了死鏈接.影響了蜘蛛順利索引網(wǎng)站.
解決辦法:
1.如果我們僅僅是想讓瀏覽來(lái)執(zhí)行一段js代碼來(lái)實(shí)現(xiàn)某個(gè)功能.最好的方式是用其它標(biāo)簽來(lái)替代,而不是用a標(biāo)簽,
比如:<span>投票</span>,這樣就不會(huì)有這樣的錯(cuò)誤.
2.如果我想搜索引擎索引錨文本鏈接.但在用戶(hù)點(diǎn)擊這個(gè)錨文本時(shí),又要js代碼來(lái)實(shí)現(xiàn)其它功能,那么第(3)種代碼的寫(xiě)法無(wú)疑是最好的.
比如:在ajax分頁(yè)中.我們想實(shí)現(xiàn)無(wú)刷新?lián)Q頁(yè).那么<a herf="xx.html">第二頁(yè)</a>就不會(huì)有任何問(wèn)題. 搜索引擎看到的是href中所指向的地址.而用戶(hù)在點(diǎn)擊時(shí)執(zhí)行的是onclick事件.最后返回一個(gè)false,不會(huì)去執(zhí)行xx.html.
3.如果你的網(wǎng)站中已經(jīng)大量存在第(1)和第(2)這兩種寫(xiě)法.你至少得給你的<a>標(biāo)簽加上rel="nofollow".讓它不要去索引.但是還是希望在不需要鏈接的情況下,不要用<a>標(biāo)簽來(lái)響應(yīng)事件
希望我的分享有用.謝謝大家.
【編輯推薦】
