前端页面的SEO（搜索引擎）优化小技巧

    今天就写点前端的东西吧。我们都知道，搜索引擎用一些网络爬虫，跟踪网页中的链接和内容，通过对抓取的文件的分析，写入数据库。用户输入关键字搜索时，就会通过与数据库的信息比较，来展示相应的网站。也就是说搜索殷勤决定了你的网站排名。这对网站的推广和宣传，起着至关重要的作用。从而，对搜索引擎的优化，也显得格外重要，比如URL重写等，那么今天，我所说的只是前端界面的一个小技巧。
        搜索引擎是识别文字，而不识别图片的。但是有很多地方，我们为了美观需求，又必须去用图片。所以，今天，我们就说一下两者都兼顾的方式。就拿网站的Logo来举例子吧。
        可以很明显的看出，Logo是一个完美的小图片，但在代码中，我们用文字来代替。如下：

这样的话，搜索引擎就可以搜到我们的文字了，但是我们不想要文字显示，想让图片显示出来呀。那就让logo图片做背景图片，做谁的背景图呢？DIV?我们试一下
 
 可以看出，logo图标由于Padding的缘故，与版心出现了偏差，所以，我们得改方案，把图标作为a标记的背景。但是我们有不想让文字显示出来，所以设置text-indent为-999em,也就是让文字不出现在我们的界面，当然这只是一种方式。我们看代码和效果
 
 这样的话，显示的是图片，文字依然存在，效果就达到了。我们看一下其他大型网站是怎么做的。比如搜狐官网
 可以看出，他是用行高来做的，也就是把行高调到很高,因为在行高里面，文字会自动居中，当行高很高的时候，由于文字居中，就会把文字给隐藏掉。我们把他的背景去掉看一下
 发现是个空白，这说明了他们的方式，和我们是一样的。我们可以在很多地方这样做，不仅仅是Logo这。希望可以帮助到你们

 

转载于:https://www.cnblogs.com/zhihuama/p/6841234.html