H1标签的text-indent负值浅析
大家都知道H1标签在网站中的权重是仅次于title 和 description的，但是通常情况下我们不想让网站的标题只是一行枯燥的文字。而H1的优雅进退将同时收获江山（符合SEO）与美人（漂亮的外观）。
今天，一叶与大家一起分享H1标签的text-indent负值的问题，有时候为了实现好看的效果，我们想让大标题通常是H1、H2等使用图片的样式，但是这样就只能在<img>中增加alt标签来加以说明了。可是alt标签的文字通常是在百度的图片搜索中出现。这就违背了我们的初衷，也不利于SEO的优化。
相信很多朋友都上过W3school吧，那个站点使用的顶级H1标签源码如下：
<div id="header_index"><h1><a href="index.html" tppabs="http://www.w3cschool.cn/index.html" title="W3CSchool 在线教程">W3CSchool 在线教程</a></h1></div>
可是大家看到的效果却是一副banner图片，而没有<a>标签中的文字。查看CSS样式表就很容易发现，原来H1标签被定义了text-indent:-1000px;这样，H1中的文字就看不到了，而背景图片却可以很好的显示出来。也就实现了搜索引擎和人看到的内容完全不一样的效果。同时更有利于SEO，同时，这样做的另外一个好处就是当用户使用手机浏览的时候就会显示里面的文字，而忽略text-indent负值的设置，也更有利于用户体验。
大家都知道，现在的搜索引擎SEO对 display:none 或者 color=bgcolor的方式隐藏文本的站点会进行惩罚，大家也可以通过W3C来验证自己的站点是否有文本颜色和背景色相同的区域（验证网址：http://validator.w3.org/），有时候我们使用背景图片作为背景，而没有设定背景颜色，这个时候我们看到的虽然是文本和背景不一样，但是验证的时候却会提示你背景色相同，这就导致你的站点很可能被搜索引擎惩罚，这无疑是一种失败的方式。
比如，你的导航栏字体颜色为白色，你给导航栏设置了背景图片，背景图片的颜色为棕色，同时页面的背景也是白色，这个时候，由于蜘蛛不认识背景图片啊，它总不能智能到图片的内容都能分析吧，然后就认为你的文本和背景是一个颜色，从而很可能对你的站点进行惩罚。
继续上面说的地方，H1设置了text-indent:-1000px之后，会不会被搜索引擎惩罚呢。仔细分析一下就知道，很多时候使用负值，是为了让文本显示的更靠前，所以这种方法很难识别是否是故意隐藏文本，因而，本人认为这种方法是可行的，并且W3school也一直在采用，包括它的顶级导航也用了同样的方式，从而让浏览者和蜘蛛看到完全不一样的效果。甚至百度的小桔灯栏目首页也采用了同样的方式。既实现了美工的要求，又不耽误SEO，可谓两全其美的一个好方法。
青岛网站建设 - http://www.elingxi.com 也借鉴了这种方式，将LOGO设置为H1，并使用text-indent负值的方法展示给阅读者漂亮的图片，而给蜘蛛一行简洁明了的文字。