前端页面的SEO(搜索引擎)优化小技巧
今天就写点前端的东西吧。我们都知道,搜索引擎用一些网络爬虫,跟踪网页中的链接和内容,通过对抓取的文件的分析,写入数据库。用户输入关键字搜索时,就会通过与数据库的信息比较,来展示相应的网站。也就是说搜索殷勤决定了你的网站排名。这对网站的推广和宣传,起着至关重要的作用。从而,对搜索引擎的优化,也显得格外重要,比如URL重写等,那么今天,我所说的只是前端界面的一个小技巧。
搜索引擎是识别文字,而不识别图片的。但是有很多地方,我们为了美观需求,又必须去用图片。所以,今天,我们就说一下两者都兼顾的方式。就拿网站的Logo来举例子吧。![图片](http://a3.qpic.cn/psb?/V10PhJuF3MryKM/27dtid1vzM6549vTtniKdSSqCjilDBQu3OD75UDAzNM!/b/dMgAAAAAAAAA&bo=agL*AAAAAAADB7U!)
可以很明显的看出,Logo是一个完美的小图片,但在代码中,我们用文字来代替。如下:
![图片](http://a1.qpic.cn/psb?/V10PhJuF3MryKM/ovU0e5xofWQJecQkN*UoSJ*LfdwgnOcShaCLR*bdFJ8!/b/dMYAAAAAAAAA&bo=RQNHAQAAAAADByI!)
这样的话,搜索引擎就可以搜到我们的文字了,但是我们不想要文字显示,想让图片显示出来呀。那就让logo图片做背景图片,做谁的背景图呢?DIV?我们试一下
![图片](http://a3.qpic.cn/psb?/V10PhJuF3MryKM/2IPSmJtRDQKQH6Eo2*HBNN1LPmQ6WCiWTtVA8wCdukY!/b/dMgAAAAAAAAA&bo=LQKDAAAAAAADB44!)
可以看出,logo图标由于Padding的缘故,与版心出现了偏差,所以,我们得改方案,把图标作为a标记的背景。但是我们有不想让文字显示出来,所以设置text-indent为-999em,也就是让文字不出现在我们的界面,当然这只是一种方式。我们看代码和效果
这样的话,显示的是图片,文字依然存在,效果就达到了。我们看一下其他大型网站是怎么做的。比如搜狐官网
可以看出,他是用行高来做的,也就是把行高调到很高,因为在行高里面,文字会自动居中,当行高很高的时候,由于文字居中,就会把文字给隐藏掉。我们把他的背景去掉看一下
发现是个空白,这说明了他们的方式,和我们是一样的。我们可以在很多地方这样做,不仅仅是Logo这。希望可以帮助到你们
搜索引擎是识别文字,而不识别图片的。但是有很多地方,我们为了美观需求,又必须去用图片。所以,今天,我们就说一下两者都兼顾的方式。就拿网站的Logo来举例子吧。
可以很明显的看出,Logo是一个完美的小图片,但在代码中,我们用文字来代替。如下:
这样的话,搜索引擎就可以搜到我们的文字了,但是我们不想要文字显示,想让图片显示出来呀。那就让logo图片做背景图片,做谁的背景图呢?DIV?我们试一下