15
May

如何正确使用h1标签以图片表示你的博客标题

WordPress / 软硬一本May 15th, 2008underone

当然，需要说明的是这是通用法则（我理解的），不仅限于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仍然是文字，看起来却是图片显示，对吧。我觉得这样的方式是合理的。

本文精巧网址: http://go.6.cn/99op

, , , , ,

Bookmark and Share 17fav 收藏本文

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

中国红十字会总会救灾专用账号和热线 太平歌词《骷髅叹》
Rss 2.0Trackback

楼被抢了34层了


  1. adminReply to this comment Says @ 08-05-15 9:25 pm (1)

  2. 不错，学习了！

    以烟为伍Reply to this comment Says @ 08-05-16 10:48 am (2)

  3. 正解！
    且全文只能存在一个H1

    漩涡眸Reply to this comment Says @ 08-05-16 12:28 pm (3)

  4. Good!

    LifespyReply to this comment Says @ 08-05-16 12:53 pm (4)

  5. Nice!

    虫儿飞Reply to this comment Says @ 08-05-16 4:00 pm (5)

  6. 原来是这样，好深奥的说。

    Black-XstarReply to this comment Says @ 08-05-16 5:05 pm (6)

  7. 对，用文字计较好，不过Image几个Alt也不错的！

    BeachReply to this comment Says @ 08-05-16 6:29 pm (7)

  8. se估计很生气，呵呵。

    bssnReply to this comment Says @ 08-05-16 8:32 pm (8)

  9. se?

    underoneReply to this comment Says @ 08-05-16 9:01 pm (9)

  10. 第二快代码中
    和有点小错

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

    edgerReply to this comment Says @ 08-05-17 12:00 am (10)

  11. 老大，我已经成功，www.88ali.com

    88aliReply to this comment Says @ 08-05-17 3:28 am (11)

  12. @edger
    是错了啊。。奇怪。。粘贴是对的，一生成就出空格。。。莫非coolcode出错了。。

    underoneReply to this comment Says @ 08-05-17 4:56 pm (12)

  13. 知道了。。。wp-admin的
    Writing Settings--Formatting
    WordPress should correct invalidly nested XHTML automatically
    要关掉。。

    underoneReply to this comment Says @ 08-05-17 5:05 pm (13)

  14. @underone 汗~

    edgerReply to this comment Says @ 08-05-17 7:48 pm (14)

  15. 我习惯使用1像素

    痴情的猪Reply to this comment Says @ 08-05-17 8:44 pm (15)

  16. 好像和这篇文章方式一样，呵呵。
    http://www.headsetoptions.org/2008/05/12/seo-friendly-images-to-replace-text-in-navigation-menus/

    bssnReply to this comment Says @ 08-05-18 3:20 am (16)

  17. 学习了

    justkReply to this comment Says @ 08-05-18 2:25 pm (17)

  18. @bssn
    就我这英文。。。。。

    underoneReply to this comment Says @ 08-05-19 9:05 am (18)

  19. 终于得知此法，困扰许久，太谢谢了

    二手科学家Reply to this comment Says @ 08-05-19 10:53 am (19)

  20. 一直不会用编辑wordpress 你有msn吗，可以直接指教一下吗？

    cheeselifeReply to this comment Says @ 08-05-19 11:37 am (20)

  21. 什么叫编辑。。。wordpress.....

    underoneReply to this comment Says @ 08-05-19 1:27 pm (21)

  22. 呵呵，关于text-indent，
    我还喜欢用在那种切换图片的按钮上，a:hover+bg-position触发~

    CmbReply to this comment Says @ 08-05-19 11:01 pm (22)

  23. 请问你以前那个两栏的风格还有吗？

    北海旅游网Reply to this comment Says @ 08-05-20 5:40 pm (23)

  24. V2V3不都是2栏的么？

    underoneReply to this comment Says @ 08-05-20 5:59 pm (24)

  25. 不错，谢谢了，意外发现，这样也有图片的alt提示和链接，不知道是哪定义的http://cofan.cn/blog

    阿可Reply to this comment Says @ 08-05-21 3:25 pm (25)

  26. 知道了，是超链接的title，呵呵

    阿可Reply to this comment Says @ 08-05-21 3:26 pm (26)

  27. 请问是直接填图片url，是不是还有什么符号？....我试了几次都没搞好

    不懂倔强Reply to this comment Says @ 08-05-22 1:55 am (27)

  28. 哦~搞定了..~so thx

    不懂倔强Reply to this comment Says @ 08-05-22 2:12 am (28)

  29. 我的MSN：oooooooo@263.net

    underoneReply to this comment Says @ 08-05-23 9:50 am (29)

  30. css隐藏文字，对搜索引擎不友好的说，会被认为是作弊，当然这样的用户体验不错了。善意提醒下

    funyfanReply to this comment Says @ 08-05-23 6:30 pm (30)

  31. 啊？是这样？
    搜索引擎如何知道文字偏出10px和9999px有什么区别？

    underoneReply to this comment Says @ 08-05-23 8:56 pm (31)

  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模板，也不知道模板有没有经过你的同意，希望不要介意：）

    resunReply to this comment Says @ 08-05-24 9:07 am (32)

  33. bob么，应该有朋友移植的，好像还不止一个……

    underoneReply to this comment Says @ 08-05-24 8:28 pm (33)

  34. 好文，留个记号！

    chinyReply to this comment Says @ 08-05-25 12:55 pm (34)

Trackbacks & Pingbacks

要说点啥就在这吧