嚴(yán)重影響SEO優(yōu)化的5個(gè)javascript技術(shù)

應(yīng)百度站長(zhǎng)平臺(tái)邀請(qǐng)，抽空把這篇文章做一些細(xì)節(jié)上的補(bǔ)充 ，歡迎大家關(guān)注并討論。由于現(xiàn)階段，觸屏技術(shù)以及移動(dòng)互聯(lián)網(wǎng)的發(fā)展，SEO也面臨著各種各樣的算法變革，技術(shù)變革或者更進(jìn)一步，營(yíng)銷(xiāo)方法上的變革，那么這些變革，對(duì)于一些技術(shù)上的細(xì)節(jié)事項(xiàng)，往往可能無(wú)法兼顧，接下來(lái)尚品中國(guó)網(wǎng)站建設(shè)公司帶大家一起看看，目前主流的一些技術(shù)上的誤區(qū)給網(wǎng)站SEO優(yōu)化帶來(lái)的不利影響。

1、你還沒(méi)有移動(dòng)站點(diǎn)（No Mobile website），或者說(shuō)你的移動(dòng)站點(diǎn)只是做了簡(jiǎn)單的轉(zhuǎn)碼和瀏覽器適配，那么你的移動(dòng)搜索結(jié)果將會(huì)非常糟糕。這在百度體現(xiàn)的猶為突出，聽(tīng)說(shuō)百度內(nèi)部有一個(gè)測(cè)試移動(dòng)站點(diǎn)得分的在線工具，如果你的網(wǎng)站是H5的移動(dòng)站點(diǎn)并且進(jìn)行適配，可能會(huì)得到比較高的分，但是據(jù)觀察得知，H5的移動(dòng)站點(diǎn)，依然沒(méi)有H4的移動(dòng)站點(diǎn)排名好，流量高，相信后續(xù)會(huì)有改觀（純屬我個(gè)人SEO項(xiàng)目經(jīng)驗(yàn)，有不同觀點(diǎn)歡迎探討）。



2、無(wú)限滾動(dòng)（Infinite -Endless Scroll），你的網(wǎng)站為了適應(yīng)手機(jī)或者平板瀏覽，用了一個(gè)看似很酷但是非常糟糕的技術(shù)——無(wú)限滾動(dòng)。這里要說(shuō)明下，搜索引擎既不會(huì)學(xué)人滾動(dòng)鼠標(biāo)，也不會(huì)無(wú)限制的去讀取你所謂的觸發(fā)代碼，說(shuō)白了，無(wú)限滾動(dòng)讓你的網(wǎng)站幾乎失去了99%的內(nèi)容。

這里解釋下，無(wú)限滾動(dòng)——它是一種網(wǎng)頁(yè)交互技術(shù)，特別是微博，社交等網(wǎng)站經(jīng)常使用的一種交互，而且特別適用于觸摸屏，鼓勵(lì)用戶(hù)一直往下拉，一直看，看到用戶(hù)不想看為止！這樣的話，就摒棄了原來(lái)分頁(yè)的瀏覽方式，讓用戶(hù)不用再點(diǎn)擊鼠標(biāo)，看上去很完美，其實(shí)這種技術(shù)SEO弊端有3個(gè)

1 ）這種交互，是針對(duì)人的行為，目前主流的搜索引擎并沒(méi)有官方說(shuō)明支持這樣的無(wú)限滾動(dòng)抓取技術(shù)。
2）不分頁(yè)的方式，導(dǎo)致頁(yè)面數(shù)量減少，可能會(huì)影響到你的收錄和排名。
3）這種交互，勢(shì)必會(huì)讓你的服務(wù)器壓力更大，加載更慢，而且搜索引擎也不能保證它在這個(gè)頁(yè)面上會(huì)停留足夠多，足夠長(zhǎng)的時(shí)間。



當(dāng)然，這種交互還是有很多優(yōu)點(diǎn)的，比如更多的瀏覽內(nèi)容，停留時(shí)長(zhǎng)以及專(zhuān)門(mén)為觸屏定制等。


3、延時(shí)加載（Lazy Loading），這個(gè)技術(shù)很多網(wǎng)站都會(huì)用（jQuery貌似是主流），技術(shù)美其名曰提高網(wǎng)站速度，提升用戶(hù)體驗(yàn)，其實(shí)，在網(wǎng)速如電，互聯(lián)網(wǎng)爆炸時(shí)代的現(xiàn)在，再抱怨服務(wù)器不夠用，網(wǎng)速慢真的是一件很令人羞恥的事情，延時(shí)加載導(dǎo)致搜索引擎無(wú)法像人一樣去移動(dòng)鼠標(biāo)，搜索引擎只會(huì)選擇看你第一頁(yè)的內(nèi)容，剩下的依然是一片空白，除非你的網(wǎng)站不要考慮SEO，否則還是老老實(shí)實(shí)的丟掉這個(gè)看起來(lái)很酷聽(tīng)起來(lái)也很牛掰的技術(shù)吧——其實(shí)它真的要淘汰了，4G都來(lái)了，還要擔(dān)心網(wǎng)速？

比如：
<img src="loader.gif" data-src="img1.jpg" />

這段代碼，并不能有效抓取延時(shí)加載的內(nèi)容和圖片，所以不建議采用這種方式，當(dāng)然，也有技術(shù)表示，可以采用<noscript>標(biāo)簽來(lái)展現(xiàn)內(nèi)容而不要用javascript. 目前還沒(méi)經(jīng)過(guò)測(cè)試，所以是否有用還有待驗(yàn)證。

當(dāng)然，也有童鞋會(huì)想到，用sitemap提交圖片內(nèi)容，是否能保證圖片被收錄呢 ？這里可以肯定給你一個(gè)NO的答案，案例如下：



經(jīng)過(guò)測(cè)試發(fā)現(xiàn)，2年后這些提交的圖片一個(gè)都沒(méi)有被收錄（國(guó)外友人的友情測(cè)試）

當(dāng)然，也有來(lái)自谷歌的說(shuō)明稱(chēng)，可以解決這個(gè)問(wèn)題，跟解決AJAX是一樣的原理，大家可以看看谷歌開(kāi)發(fā)者幫助，https://developers.google.com/webmasters/ajax-crawling/

　　還有沒(méi)有更好的辦法？當(dāng)然是有的，比如
　　<a href='http://www.idea-r.it/...?blogimage=<image-number>'
　　onclick='...show(<image-number>);return false;'>
　　這段代碼意味著，如果是搜索引擎看到的話，會(huì)直接讀取 href里面的URL，如果是用戶(hù)，則會(huì)看到圖片內(nèi)容，一舉兩得。

4、視差（Parallax），也可以稱(chēng)為利用圖片的前景和背景的差別來(lái)造成一種很酷炫的景象，這種技術(shù)，我只想說(shuō)一句話：你們活在自己YY的世界里，在幻想用戶(hù)也跟你一起YY，而用戶(hù)只想要解決他的需求而已，不是來(lái)跟你一起YY的。以上這個(gè)技術(shù)，大多使用在一些品牌網(wǎng)站，先看幾個(gè)圖來(lái)看看到底長(zhǎng)什么樣子：



沒(méi)錯(cuò)，就是偏向酷酷的感覺(jué)，把很多個(gè)頁(yè)面，都?xì)w納為一個(gè)頁(yè)面，我們都知道SEO的世界里，更多的頁(yè)面，意味著更多的關(guān)鍵詞和排名，以及更多的流量，這基本上是正相關(guān)關(guān)系。用圖來(lái)說(shuō)話，更形象一些：



這就是很形象的跟大家解釋了視差所帶來(lái)的直接影響。當(dāng)然，很多人可能會(huì)說(shuō)用不同的H標(biāo)簽來(lái)區(qū)分不同的頁(yè)面，但是我想說(shuō)這絕對(duì)不是一個(gè)非常好的解決方案，可以說(shuō)你的SEO肯定做不過(guò)其他人。

5、漢堡式菜單（Hamburger Menus），我們經(jīng)?？吹绞謾C(jī)上或者平板上有這種漢堡式菜單，手指點(diǎn)上去，就看到了導(dǎo)航欄里的鏈接，然后你再點(diǎn)開(kāi)就能看到內(nèi)容了，但是如果這種技術(shù)被用到了PC上，將是一種災(zāi)難，如果你有重要內(nèi)容但是不在第一時(shí)間展示給用戶(hù)看，而是需要用戶(hù)點(diǎn)下鼠標(biāo)才能看到，那么諾大的PC屏幕你打算用來(lái)做什么 ？ 以下就是我們常在移動(dòng)端見(jiàn)到的菜單了，看看大家有沒(méi)有很熟悉？





在移動(dòng)端雖然好，并不代表這個(gè)漢堡式菜單要照搬到PC端來(lái)，用戶(hù)在PC上更喜歡直接精準(zhǔn)的找到他想要的導(dǎo)航和內(nèi)容，而不是給他看漢堡菜單。

以上就是總結(jié)的5個(gè)技術(shù)上對(duì)SEO影響較大的技術(shù)誤區(qū)，其實(shí)在搜索引擎技術(shù)還沒(méi)有完全能夠?qū)崿F(xiàn)更加智能的情況下，冒險(xiǎn)采用以上這些技術(shù)是挺有風(fēng)險(xiǎn)的，如果您的網(wǎng)站特別需要SEO流量，那么不建議采用以上這些技術(shù)，希望大家能夠運(yùn)用好技術(shù)，做好SEO，也希望百度能夠在技術(shù)上多做創(chuàng)新，多多支持SEO的發(fā)展。