把Web標(biāo)準(zhǔn)與SEO關(guān)系說透之三:實例篇

2017-02-27    分類： 網(wǎng)站建設(shè)

寫了兩篇關(guān)于Web標(biāo)準(zhǔn)的文章了,這篇結(jié)合我工作中的一些實踐經(jīng)歷來與大家分享一些網(wǎng)站設(shè)計中常見誤區(qū),以及它對seo所產(chǎn)生的影響.這也是"說透"系列中最后一篇,希望能對大家有所幫助.也希望能聽到大家不同的意見.
誤區(qū)一: DIV+CSS強迫癥
我工作中接觸到一些前端開發(fā)人員,他們或多或少從網(wǎng)上也了解了一些SEO的知識,又或者在學(xué)習(xí)和從事SEO.對前端又缺乏了解的人.看到頁面中用到幾個"table"標(biāo)簽,立馬就是滿臉的不屑,然后一大堆理由說得頭頭是道.弄得你感覺"table"就是萬惡之源,你在頁面中用到了table你就顯得很不專業(yè).你的專業(yè)水準(zhǔn)在他心里馬上就降了一大半.他再不厭其煩的用了一大堆div和CSS把你的table給改寫.這就是Div+CSS強迫癥的表現(xiàn).
table不適合用來做整體布局(并不表示不允許),這點已經(jīng)得到大家的公認,有過前端經(jīng)驗的朋友都知道布局涉及到層次嵌套.用table嵌套來呈現(xiàn)結(jié)構(gòu)會讓你以后的布局的調(diào)整變得很困難.比如移動某個塊的位置,調(diào)整左右塊的距離等等,當(dāng)嵌套的層次越多,你的調(diào)整越困難.再次嵌套的層次越深.解析dom所花費的時間越長,增加了客戶端和搜索引擎的負擔(dān),這點我在第二篇文章中講過,但是如果是用來呈現(xiàn)列表式的數(shù)據(jù),比如數(shù)據(jù)報表,多列的新聞列表.個人簡歷等.這個地方用"table"來布局是最合適不過的了.但是很多人受到了"Web標(biāo)準(zhǔn)"不正確理論的影響.他寧愿用非常多的div,li和span來操作.也不用table.給自己的工作造成了很多的困擾.其實"table"在所有html標(biāo)簽中.它的語義化是最強的.它有很多的"子標(biāo)簽"來規(guī)范這個表格.例如一個完整表格的定義:
1.


2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
新聞列表
新聞標(biāo)題新聞作者占擊次數(shù)
文章總數(shù):2作者數(shù):1平均點擊次數(shù):40
web標(biāo)準(zhǔn)解釋w3c50
web標(biāo)準(zhǔn)解釋一w3c30

30. 其中,,分別表示了表格的頭部,內(nèi)容和底部,表示表格標(biāo)題,表示列標(biāo)題,在html5中還可以用描述標(biāo)簽.
復(fù)制代碼
總結(jié):
1.table適合用來呈現(xiàn)列表數(shù)據(jù)
2.table適合用來不用多層嵌套的簡單布局
3.tabel的語義化是非常強的.該用的時候得用.不要被誤導(dǎo)的"web標(biāo)準(zhǔn)"所困擾.
誤區(qū)二:不正確的嵌套和移位.
SEO大家都能理解標(biāo)題相關(guān)的內(nèi)容或鏈接如果在html中靠前,那么這個頁面所賦于的權(quán)重也是相對較高的,大家在不影響瀏覽者體驗的情況可能會使用CSS來調(diào)整內(nèi)容實際的位置,俗稱"移形換位",這種方式既不影響瀏覽者的體驗.又考慮到了搜引擎,在很多網(wǎng)站中這個技巧也被大量使用,但是在操作的過程中,卻有很多操作欠妥的地方.先來看幾個簡單的例子:
比如顯示一篇文章,有標(biāo)題,內(nèi)容.作者等信息,很多人的寫法是這樣的:
1.

2.

新聞標(biāo)題


3.

4.

5.

新聞段落一


6.

新聞段落二


7.

8.

9. 新聞作者:張三
10.

復(fù)制代碼
這種寫法真的不在少數(shù).包括很多較大的網(wǎng)站都在或多或少的存在這種寫法.小網(wǎng)站就更常見了.它用"div"塊級元素把相應(yīng)的內(nèi)容分隔開.然后用CSS來定義不同塊的效果.這樣即增加了不必要的嵌套,也稀釋了內(nèi)容塊與內(nèi)容塊之間的相關(guān)性,對排名的影響很明顯也是有負面影響的.其實仔細想一想.我們可以把這段代碼寫得更標(biāo)準(zhǔn).更優(yōu)雅一些.改進后的代碼如下:
1.

2.

新聞標(biāo)題


3.

新聞段落一


4.

新聞段落二


5.

作者:張三


6.

7. 在CSS中
8. .container h1{屬性}
9. .container p{公共屬性}
10. .container .des{屬性}
復(fù)制代碼
再來說"移形換位",這種方法在很多網(wǎng)站中也被普遍用到.具體操作方法gsa版主huxinyu寫過這方面的文章.可以去Gsa版塊查看,我以上面的代碼為例:
1.
2.

新聞標(biāo)題


3.
4. ......(中間很多其它的內(nèi)容和標(biāo)簽)
5.

6.

新聞段落一


7.

新聞段落二


8.

作者:張三


9.
復(fù)制代碼
這個的目的很明顯,將

標(biāo)簽提到正文的最前面,以增加頁面相關(guān)關(guān)鍵詞的權(quán)重.然后利用CSS將

標(biāo)簽的內(nèi)容移到新聞段落上面的位置.這樣瀏覽者是看不到

標(biāo)簽移位了的.
搜索引擎以一種"看報紙"的方式來理解內(nèi)容,在這段代碼中,與

標(biāo)簽關(guān)聯(lián)性最強的還是
里面的正文內(nèi)容.當(dāng)它讀到了標(biāo)題,卻遲遲找不到標(biāo)題相關(guān)的內(nèi)容.試想:我在讀報紙.標(biāo)題在報紙在最上面.標(biāo)題所對應(yīng)的內(nèi)容卻在報紙的最下面,你肯定會覺得這報紙排版的效果特別差.你不會給他一個好的評價.同理,搜索引擎也不能很好的理解這種寫法的用意.
如果我們一定要"移形換位",想提高頁面權(quán)重.那么就來得徹底一些.我可以將
這個塊所有內(nèi)容移到body正文前面.然后利于CSS來調(diào)整這個container在頁面上的顯示位置.而不是僅僅移動

標(biāo)簽.這樣即不會破壞上下文的關(guān)系.又兼顧了瀏覽者的體驗.當(dāng)然我不是特別推崇在網(wǎng)站在大量使用這種方式,他會使前端開發(fā)變得復(fù)雜,可維護性變差.
誤區(qū)三:不正確的js方法應(yīng)用
有沒有見過下面這幾種寫法的代碼:
1. (1)投票
2. (2)好評
3. (3)第二頁
復(fù)制代碼
含義就不多解釋了.第(1)和(2)種寫法在網(wǎng)站中普遍存在.這三段代碼的共同點就是當(dāng)點擊標(biāo)簽的錨文本時,javascript的dosomething()方法會執(zhí)行,但是對于搜索引擎來說,他們的含義就大不一樣了.先來看一些知識點:
href是標(biāo)簽的標(biāo)準(zhǔn)屬性,它表示錨文本所指向的目標(biāo)頁面地址;onclick是標(biāo)簽的事件.它表示單擊標(biāo)簽內(nèi)的內(nèi)容時所執(zhí)行的程序代碼,從程序角度來說.程序的執(zhí)行都應(yīng)該都事件來驅(qū)動.而很多前端開發(fā)人員都喜歡把一段js代碼放在href屬性中.當(dāng)搜索引擎抓行到標(biāo)簽時,它想順著herf所指向的頁面地址繼續(xù)去索引.卻發(fā)現(xiàn)這里是一段js代碼.順理成章.這個地方的鏈接也就成了死鏈接.影響了蜘蛛順利索引網(wǎng)站.
解決辦法:
1.如果我們僅僅是想讓瀏覽來執(zhí)行一段js代碼來實現(xiàn)某個功能.最好的方式是用其它標(biāo)簽來替代,而不是用a標(biāo)簽,
比如:投票,這樣就不會有這樣的錯誤.
2.如果我想搜索引擎索引錨文本鏈接.但在用戶點擊這個錨文本時,又要js代碼來實現(xiàn)其它功能,那么第(3)種代碼的寫法無疑是最好的.
比如:在ajax分頁中.我們想實現(xiàn)無刷新?lián)Q頁.那么第二頁就不會有任何問題. 搜索引擎看到的是href中所指向的地址.而用戶在點擊時執(zhí)行的是onclick事件.最后返回一個false,不會去執(zhí)行xx.html.
3.如果你的網(wǎng)站中已經(jīng)大量存在第(1)和第(2)這兩種寫法.你至少得給你的標(biāo)簽加上rel="nofollow".讓它不要去索引.但是還是希望在不需要鏈接的情況下,不要用標(biāo)簽來響應(yīng)事件

希望我的分享有用.謝謝大家.
把Web標(biāo)準(zhǔn)化進行得更徹底一點
說起Web標(biāo)準(zhǔn)化，大家馬上就想到DIV+CSS網(wǎng)頁布局。用DIV+CSS做網(wǎng)頁布局的優(yōu)點至少包含以下這些：對開發(fā)人員可以減少開發(fā)和維護成本，對網(wǎng)站可以減少服務(wù)器帶寬消耗，對用戶可以提高加載速度，對搜索引擎可以有利于內(nèi)容索引。
DIV+CSS是Web標(biāo)準(zhǔn)化的一種體現(xiàn)。但是不要認為只要把網(wǎng)站做成DIV+CSS的表現(xiàn)形式就可以了。關(guān)于Web標(biāo)準(zhǔn)化在SEO上的應(yīng)用，還可以走得更遠的。
一個網(wǎng)頁應(yīng)用了DIV+CSS排版，就有了以下的一個網(wǎng)頁模型。

本文題目：把Web標(biāo)準(zhǔn)與SEO關(guān)系說透之三:實例篇
本文來源：http://www.muchs.cn/news/74529.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、全網(wǎng)營銷推廣、服務(wù)器托管、網(wǎng)站制作、品牌網(wǎng)站建設(shè)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)