使用图片做网站标题时如何做到seo优化

2009.11.15 / 23:15

前几天把博客的文字标题换成了图片logo,没有直接在Wordpress主题文件的header.php中直接用<img>插入图片logo,然后再为其加上超链接,这样不利于博客的seo;而是,在css样式表(style.css)中找到博客标题所应用的div样式(一般是#title或.title),为其添加a和a:hover行为,再将logo图片作为背景添加上去,最后再加上text-indent属性,代码如下:
使用图片做网站标题时如何做到seo优化

#title a {
??? margin:5px 10px;
??? background:url(images/logo.gif) no-repeat 0 0;??
??? width:108px;
??? height:50px;
??? display: block;
??? text-indent: -9999px;
??? outline: none;
}???????????

添加“text-indent”属性的目的就是要隐藏文字标题,让logo图片完美显示,不然的话文字会显示在图片上面,很影响美观。

虽然,网站标题对应的文字在浏览器上被隐藏了,但实际上对于搜索引擎来说它看到的仍然是标题所对应的文字,看不到图片logo,而我们自己在浏览器上看到的图片对搜索引擎来说等于空白,可以忽略不计,不相信的话可以在手机上使用UCWeb浏览器打开本站,头部显示的不是logo图片,而是“吓我一跳”四个文字。或者查看本博客的源文件,查找一下本博客的logo,并没有,只能找到“吓我一跳”这个标题。

写在最后,不管是对网站访问者来说,还是对搜索引擎来说,这样做都是“味道棒极了”,这种“他好我也好”的事情我们又何乐而不为呢!不管是Wordpress用户还是其他网站,这都是一个非常值得关注的问题。

你懂的 不多说
  1. 2009.11.16 / 09:17

    这个解决办法不错

  2. 2009.11.16 / 10:16

    懂div就好办

  3. 2009.11.16 / 10:50

    @SEO博客
    @先看看
    对 确实是挺好的

  4. 2009.11.16 / 11:53

    那给图片直接加上alt和title属性也是可以的啊,文字是不会显示的,只是图片的一个属性,搜索引擎也会查到这些文字的

  5. 2009.11.16 / 13:10

    @上海女seo朱云
    绝对不一样的,加alt和title会大打折扣,搜索引擎会认为alt和title是对图片的解释和说明,并没有看到标题文字;
    而上面介绍的方法对于搜索引擎来说完全透明,搜索引擎看不到图片,只能看到标题文字,不信你可以打开本博客主页的源文件,查不到本站的logo,只能查到“吓我一跳”的标题

  6. 2009.11.16 / 16:28

    我不赞同这种做法
    因为这样做等于隐藏了访客不可见的文字
    有可能遭到搜索引擎的惩罚

  7. 2009.11.16 / 19:23

    哈哈 名字打错了

  8. 2009.11.16 / 20:02

    学习了,哈哈

  9. 2009.11.16 / 23:04

    味道棒极了,吓死我了。

  10. 2009.11.17 / 10:23

    设为背景,恩 不错~

  11. 2009.11.19 / 10:10

    @男儿国博客
    text-indent是把 h1作为一个块来显示(display: block),指定长宽(和图片一样大小),然后指定h1的背景图片,也就是将我们需要的图片作为h1这个标签的背景。而h1标签中插入的,仍然是作为字符形式出现的博客标题,然后用text-indent: -9999px将文字甩到屏幕看不到的地方。
    使用display: none应该会有被惩罚的危险,还有这几天我一直没回答你的这问题,我去别的网址看过,很多有名的博客都是使用这样的方法,就连Google前一阵子也是用的这种方法。

  12. 2010.01.11 / 05:18

    都没必要。本身HEAD里已经指明了Title了,关Logo嘛事。

  13. 2010.01.11 / 08:59

    @左手烟
    head里的title跟这个不是一回事