h1标签一般用于主页的站点名称,文章或者归档页的标题。一般建议一个页面上仅出现一个h1标签,用来标记当前页面的主要内容。部分wordpress官方主题直接给站点名称定义了h1标签,当跳转入文章页的时候,因为文章标题也使用了h1标签,于是页面上会同时存在两个h1标签。当对页面进行seo检查的时候,容易触发同一页面h1标签过多的警示。
根据页面变更标签
主页上将站点名称作为主标题没有什么问题,文章页的时候文章标题作为唯一的h1标记更为合理一些,于是就产生了这样一个需求,当跳转入文章页的时候,我们希望站点的h1标签能够让出自己的位置。事实上,在wordpress的官方主题twentyten中,就实现了这个效果:
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</<?php echo $heading_tag; ?>>
这段代码设置了一个变量“$heading_tag”,当页面为默认主页或者自定义的主页时,将上述变量的值设置为“h1”,其他情况则设置为“div”,然后用“$heading_tag”的值来组合成html标签。这样当从主页跳转到文章页面时,站点的标题标签会自动从“h1”变更为“div”。很灵活的解决了同页面h1标签过多的问题。
该方式也同样适用typecho
以下代码是上述效果在typecho中的实现:
<?php $headingtag = $this->is('index') ? 'h1' : 'div'; ?>
<<?php echo $headingtag; ?> id="site-banner">
<a id="site-title" href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title() ?></a>
</<?php echo $headingtag; ?>>