text-indent完美实现图片logo代替文字logo

一个网站,logo(标志)是肯定少不了的。最常用的就是图片logo或直接打几个字当作logo,当然,也有用flash的,但这部分人几乎少得可以忽略。

毫无疑问,图片logo远比文字好看,图片可以色彩缤纷变幻无穷,而文字变来变去都那样。但直接用文字logo的还是有很多,因为纯文字更利于搜索引擎识别,图片就不行了。

有没有两全其美的方法呢?有的人使用这种:

<a href="#"><img src="/logo.png" title="图片说明" alt="图片说明"/></a>

搜索引擎无法看到图片,但可以看到图片说明,这样也就相当于文字了————这也是SEO中强调要给图片加上alt的原因。

但其实这种方法并不完美,很多人都不喜欢加alt标记,而且这样对搜索引擎到底有没有妨害也难说清。下面介绍一种国际国内通用的方法.

html代码,非常简单:

<a href="#" class="logo">这是logo</a>

有人说你这不是要讲图片logo吗?咋速成文字了?别急,还有CSS代码呢:

.logo{background:url(images/logo.png) no-repeat;/*把你的logo图片设成背景图*/

height:60px;width:150px;/*设置宽高*/

text-indent:-9999px;/*设置文字缩进*/
}

CSS代码最关键的一步就是最后的text-indent,text-indent的意思是文字缩进,它的单位一般是正数,用来将段落前空格。但这里把它的单位设为了负值,-9999px,于是原本在A标签里面的文字就被缩到不知道哪儿去了。

这样一来,用户看到的就是图片logo(背景图),而搜索引擎看到的却是正宗的文字,一举两得了。效果可参考本站logo。

举一反三,这种方法可以用来制作图片导航栏和标题栏,但我不推荐哈,因为这两者需要做的图片太多了,麻烦,而且修改起来更麻烦。

另:特别不推荐使用flash当作logo,因为搜索引擎完全无法识别它.除非,你想到方法扬长避短.

11 评论

十年灯进行回复 取消回复

电子邮件地址不会被公开。