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