700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 前端页面的SEO(搜索引擎)优化小技巧

前端页面的SEO(搜索引擎)优化小技巧

时间:2019-04-05 15:24:48

相关推荐

前端页面的SEO(搜索引擎)优化小技巧

今天就写点前端的东西吧。我们都知道,搜索引擎用一些网络爬虫,跟踪网页中的链接和内容,通过对抓取的文件的分析,写入数据库。用户输入关键字搜索时,就会通过与数据库的信息比较,来展示相应的网站。也就是说搜索殷勤决定了你的网站排名。这对网站的推广和宣传,起着至关重要的作用。从而,对搜索引擎的优化,也显得格外重要,比如URL重写等,那么今天,我所说的只是前端界面的一个小技巧。

搜索引擎是识别文字,而不识别图片的。但是有很多地方,我们为了美观需求,又必须去用图片。所以,今天,我们就说一下两者都兼顾的方式。就拿网站的Logo来举例子吧。

可以很明显的看出,Logo是一个完美的小图片,但在代码中,我们用文字来代替。如下:

这样的话,搜索引擎就可以搜到我们的文字了,但是我们不想要文字显示,想让图片显示出来呀。那就让logo图片做背景图片,做谁的背景图呢?DIV?我们试一下

可以看出,logo图标由于Padding的缘故,与版心出现了偏差,所以,我们得改方案,把图标作为a标记的背景。但是我们有不想让文字显示出来,所以设置text-indent为-999em,也就是让文字不出现在我们的界面,当然这只是一种方式。我们看代码和效果

这样的话,显示的是图片,文字依然存在,效果就达到了。我们看一下其他大型网站是怎么做的。比如搜狐官网

可以看出,他是用行高来做的,也就是把行高调到很高,因为在行高里面,文字会自动居中,当行高很高的时候,由于文字居中,就会把文字给隐藏掉。我们把他的背景去掉看一下

发现是个空白,这说明了他们的方式,和我们是一样的。我们可以在很多地方这样做,不仅仅是Logo这。希望可以帮助到你们

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。