当然,需要说明的是这是通用法则(我理解的),不仅限于WordPress的主题。

G7v1之后(现在看起来其实这个主题很粗糙),我不再使用图片形式表现blog的标题,也就是我们通常使用的“<h1>我的博客</h1>”,因为那是错的,来看一下错误的写法(所谓错误是概念的错误,不是逻辑错误):

<a title="我的博客" href="http://www.myblog.com"> <img src="http://www.myblog.com/image/logo.gif" alt="" /></a>

这是很通常的写法,就是在需要插入图片的地方用<img>标签插入图片,然后用<a>标签加上链接。这个方法对搜索引擎十分不友好,如果<h1>作为博客标题也就是全站唯一的名称标签的话,搜索引擎抓取的是张图,而不是文字,对吧。
于是之后,我发布的theme都没有使用图片形式作为博客标题,但是依然有人会问我想和我自己使用的theme一样使用图片作为标题,该怎么做。这里用G7v5举例说明合理的方式:

<h1><a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>

这个h1在div #menu中,看起来就是很简单的插入了博客标题,再加上链接,再来看css是怎么写的:

#menu h1 a {
 height: 30px;
 width: 165px;
 float: left;
 text-indent: -9999px;
 background-image: url(images/logo.gif);
 background-repeat: no-repeat;
 display: block;
}

很好理解吧?把h1作为一个块来显示(display: block;),指定长宽(和图片一样大小),然后指定h1的背景图片,也就是将我们需要的图片作为h1这个标签的背景。而h1标签中插入的,仍然是作为字符形式出现的博客标题,然后用text-indent: -9999px;将文字甩到屏幕看不到的地方,9999px应该是足够了,谁的屏幕也没那么大吧:)

于是乎,搜索引擎抓到的h1仍然是文字,看起来却是图片显示,对吧。我觉得这样的方式是合理的。

, , , , ,

朋友,这里有我提供的盘古网络 优惠码:S15CHUAN12 (2008年8月13日前有效)

Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网 17fav 收藏本文

打这儿路过的还看过:

引用地址:http://www.underone.com/2008/05/15/use-label-h1-correct/

楼被抢了33层了


  1. admin Says @ 08-05-15 9:25 pm
  2. 不错,学习了!

    以烟为伍 Says @ 08-05-16 10:48 am
  3. 正解!
    且全文只能存在一个H1

    漩涡眸 Says @ 08-05-16 12:28 pm
  4. Good!

    Lifespy Says @ 08-05-16 12:53 pm
  5. Nice!

    虫儿飞 Says @ 08-05-16 4:00 pm
  6. 原来是这样,好深奥的说。

    Black-Xstar Says @ 08-05-16 5:05 pm
  7. 对,用文字计较好,不过Image几个Alt也不错的!

    Beach Says @ 08-05-16 6:29 pm
  8. se估计很生气,呵呵。

    bssn Says @ 08-05-16 8:32 pm
  9. se?

    underone Says @ 08-05-16 9:01 pm
  10. 第二快代码中
    和有点小错

    '<'与'?'之间不应有个空格。

    edger Says @ 08-05-17 12:00 am
  11. 老大,我已经成功,www.88ali.com

    88ali Says @ 08-05-17 3:28 am
  12. @edger
    是错了啊。。奇怪。。粘贴是对的,一生成就出空格。。。莫非coolcode出错了。。

    underone Says @ 08-05-17 4:56 pm
  13. 知道了。。。wp-admin的
    Writing Settings--Formatting
    WordPress should correct invalidly nested XHTML automatically
    要关掉。。

    underone Says @ 08-05-17 5:05 pm
  14. @underone 汗~

    edger Says @ 08-05-17 7:48 pm
  15. 我习惯使用1像素

    痴情的猪 Says @ 08-05-17 8:44 pm
  16. bssn Says @ 08-05-18 3:20 am
  17. 学习了

    justk Says @ 08-05-18 2:25 pm
  18. @bssn
    就我这英文。。。。。

    underone Says @ 08-05-19 9:05 am
  19. 终于得知此法,困扰许久,太谢谢了

    二手科学家 Says @ 08-05-19 10:53 am
  20. 一直不会用编辑wordpress 你有msn吗,可以直接指教一下吗?

    cheeselife Says @ 08-05-19 11:37 am
  21. 什么叫编辑。。。wordpress.....

    underone Says @ 08-05-19 1:27 pm
  22. 呵呵,关于text-indent,
    我还喜欢用在那种切换图片的按钮上,a:hover+bg-position触发~

    Cmb Says @ 08-05-19 11:01 pm
  23. 请问你以前那个两栏的风格还有吗?

    北海旅游网 Says @ 08-05-20 5:40 pm
  24. V2V3不都是2栏的么?

    underone Says @ 08-05-20 5:59 pm
  25. 不错,谢谢了,意外发现,这样也有图片的alt提示和链接,不知道是哪定义的http://cofan.cn/blog

    阿可 Says @ 08-05-21 3:25 pm
  26. 知道了,是超链接的title,呵呵

    阿可 Says @ 08-05-21 3:26 pm
  27. 请问是直接填图片url,是不是还有什么符号?....我试了几次都没搞好

    不懂倔强 Says @ 08-05-22 1:55 am
  28. 哦~搞定了..~so thx

    不懂倔强 Says @ 08-05-22 2:12 am
  29. 我的MSN:oooooooo@263.net

    underone Says @ 08-05-23 9:50 am
  30. css隐藏文字,对搜索引擎不友好的说,会被认为是作弊,当然这样的用户体验不错了。善意提醒下

    funyfan Says @ 08-05-23 6:30 pm
  31. 啊?是这样?
    搜索引擎如何知道文字偏出10px和9999px有什么区别?

    underone Says @ 08-05-23 8:56 pm
  32. 搜索引擎有时候也会搜索CSS文件的。
    我觉得可以有两种方式,一个是给图片加alt说明属性;第二个文字图片并存,如下:
    html:
    underone

    css:

    h1{width:90px;height:27px;overflow:hidden;position:relative;}
    h1 img{position:absolute;top:0;left:0;border:none;background:#fff;}

    这样没有隐藏文字,只是用图片把文字给覆盖了,应该就没事了吧。不过没有试验,对搜索引擎友不友好也不知道。

    另:
    我很喜欢你的这个博客模板风格,但我用的是bo-blog,所以直接在论坛里下了别人做的G7模板,也不知道模板有没有经过你的同意,希望不要介意:)

    resun Says @ 08-05-24 9:07 am
  33. bob么,应该有朋友移植的,好像还不止一个……

    underone Says @ 08-05-24 8:28 pm
  34. 好文,留个记号!

    chiny Says @ 08-05-25 12:55 pm

要说点啥就在这吧