如何正确使用h1标签以图片表示你的博客标题
当然，需要说明的是这是通用法则（我理解的），不仅限于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;
}
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仍然是文字，看起来却是图片显示，对吧。我觉得这样的方式是合理的。
Popularity: 35%
