Blog > 互联网产品设计 > 语义化H1标签

语义化H1标签

2007/11/13 Posted in 互联网产品设计 2,784 views

大家都知道搜索引擎比较喜欢H1。在SEO中H1也是很基础也很重要的一步。但有些时候为了界面风格的原因，很多标题性的文字做成了图片。大多数情况下，切割页面的时候就直接用上了图片。在代码上，H1也就对搜索引擎失去了作用。
<h1><img src=”http://5key.net/xxxx.jpg” mce_src=”http://5key.net/xxxx.jpg”></h1>

其实通过一点小的调整则可以将两者兼顾。先来看看效果：http://5key.net/demo/h1

再来看看这段。H1的代码对搜索引擎依然可读，我们只是利用text-indent:-9999px;将“邀请好友加入”的文字远远的扔到左边去了。

邀请好友加入

  1. 见识了，原来还可以这样用。代码是死的，就看你怎么用他了。

  2. h1的权重对SEO还是很重要的。
    建议都这么用，很好，很强大。
    btw：救救经典论坛~

  5. 在搜索引擎看来就是一段普通的html代码啊。难道它还去看你的CSS？

  6. 这个不错，呵呵！！
    另外想问一下，你的背景音乐杂搞的，用了一般的加载方法还是有什么特殊的手段？

  7. 背景音乐？我没搞列。你说的可能是右下那个绿豆蛙的瓶子里的。

  8. 嗯..标题党啊..

    以图换字：）　俺更习惯另一种写法.

    而且我的h1一般都有a.
    所以就

    #milkr h1{display:block;overflow:hidden:width:0;height:0}
    #milkr h1 a{background(….);}

  9. 哈哈。。你这招也不错。等我要a的时候也这样。
    而且我还真想不好用什么标题

  11. 用display:none可不可以呢?那样会对SEO造成影响吗?

  12. 用display:none 不是连h1本身的背景也没了么？

  15. h1里套上span，span定义为display:none;吗？

    这样还要多一段代码。不是吗？

  16. h1你这用的不是地方,一般用在文章详细页的标题,而且一页最好不要多用.
    text-indent:-9999px;这个还有另外一种办法.
    可以这样写.font-size:0;height:0;padding-top:(N)px;overflow:hidden;

  17. 这个方法可以，但是需要考虑到标题有链接时候怎么办？如果有链接，按下去就有虚框出现，而且一端无限长。。- -对于用户有点影响。

    所以应该考虑到有链接的时候怎么办。解决办法是有的：css定义outline: none;这个属性ie不支持，所以在链接那里还要用focus来解决。

    “在搜索引擎看来就是一段普通的html代码啊。难道它还去看你的CSS？”此言差矣。h1里包含文字相比图片更理想。因此才会使用css隐藏文字的。搜索引擎读的是xhtml，和CSS没关系！所以他不用去看你的CSS。