javascript程式优化

13年前
这裡谈的优化并非针对javascript程式优化,而是以SEO的角度来优化javascript。 或许很多人对搜寻引擎会不会抓取javascript的内容有疑问? 就Roy所知,目前spider在爬行html时,会忽略<script>标籤,所以搜寻引擎无法抓取javascript裡的内容。

Javascript的七项SEO 技巧:

1.外部崁入javascript

在撰写一些比较复杂的网页特效,如下拉式选单等,会產生大量的javascript码,相同版型的每个页面也会有许多相同的程式码,使得html体 积变的很肥,对网页载入速度有不小的影响。虽然spider会忽略<script>,但也要略过好几行程式,相对会增加spider抓取资料 的困难。 应将javascript存成.js档,然后使用崁入的方式来使用。

如: <script type="text/javascript" src="a.js"></script>

如此一来,html就不会存在那麼多程式码,且有用到此程式的页面,都可以读取此js档,不用每页都写了。

2.javascript移至网页底部

大多数的<script>都放在<head>标籤之中,不管是外崁的还是写在html的也好,都会增加spider爬行的 难度,在SEO裡有个很重要的原则,就是重要的资讯应该呈现在网页越上方越好,可以的话尽量将javascript移至网页最下方。

如: </body> <script type="text/javascript"></script> </html>

3.少以javascript產生html

因為spider会跳过<script>裡的标籤,所以如果将资讯写在javascript裡,内容是无法被搜寻引擎收录的。

如: <script type="text/javascript"> document.write("<p>重要资讯</p>"); </script>

4.勿以javascript设定超连结

如:<img src="a.jpg" alt="" onClick="location.href=’b.html’;" />

像这张图片以onClick的写法,当使用者点击时,将网址导向b.html,但spider却无法进入这个连结,因為严格来说这是javascript 程式。 得改以超连结的方式,spider才能顺利爬行到连结页面。

如: <a href="b.html"><img src="a.jpg" alt=""/></a>

5.图片滑入效果不使用javascript

有用过Dreamweaver的都应该知道有一个滑鼠变换影像的功能,说穿了,是因DW帮我们產生好图片转换的javascript函数,再套用在 图片上,如此一来,会增加许多的javascript程式码和html标籤。如:



由DW滑鼠变换影像產生的原始码 其实用CSS的hover属性, 也可以產生同样的效果,完全用不到javascript就可以做出来,而且html可 是非常精简呢。如:



运用CSS的hover属性也可以做出同样的效果 有没有发现!原始码是不是精简非 常多,易学易懂,又可以帮网页减肥,一举两得!

6.非必要资讯以javascript呈现

利用spider不爬行script标籤的特性,可将跟网站主题非必要的资讯;

如:版权、公司资讯、大量对外连结…等,利用javascript呈现,尽量把会影响到关键字权重的因素降到最低。这跟第3点正好相反,重要资讯千万别放在javascript裡。

7.避免大量使用javascript

有些网页利用javascript做出许多华丽特效,如下拉选单、图片切换等,外行人还以為是Flash呢!但是大量使用javascript的后果就是非常吃资源,使得网页开的非常慢,使用者可是很反感的。如有做到以上谈的几点优化方式,spider还是得花力气去略过这些javascript,且原始档也增加不少,多少影响spider抓取的意愿,最好的解决方式还是少用javascript,留给spider拜访时一个乾净的页面。