In the page.tpl.php, there is some code that checks if the page is the front page of a site. If so, it wraps the site-title in an H1 tag. Later in the template, the page title is also wrapped in an H1 tag. Per the w3c spec, each page should only have 1 H1 tag. Also, for semantic and seo reasons, that H1 tag should never ever be the site title, it should always be the title of the page -- and different for each page. Otherwise, you will garner very bad search engine placement. The H1 tags being unique is crucial. Many Drupal themes make this mistake.

This is the offending code:

         <?php if ($site_name): ?>
            <?php
              // Use an H1 only on the homepage
              $tag = $is_front ? 'h1' : 'div';
            ?>
            <<?php print $tag; ?> id='site-name'><strong>
              <a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
                <?php print $site_name; ?>
              </a>
            </strong></<?php print $tag; ?>>
          <?php endif; ?>

Should be:

          <?php if ($site_name): ?>
            <div id='site-name'>
              <a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
                <?php print $site_name; ?>
              </a>
            </div>
          <?php endif; ?>

I also removed the strong tags since they can be accomplished with css and are unnecessary. This might seem trivial, but it's huge for SEO, semantics and accessibility. Many references on google search about this.

Thanks.

Comments

ao5357’s picture

ao5357 CreditAttribution: ao5357 commented

I'm new to Zen, but I think the whole point is that the home page is the only page that uses the site name as the h1, because the home page is the only page without a page title. This makes sense for both semantic and seo reasons. First, each page should have an h1 (whereas removing the homepage conditional as suggested does not provide one). As for SEO, using the site's name as the home page's h1 should actually improve search engine ranking.

I still take issue with the conditional, though...

If you use relative font sizing, then a div will behave differently than an h1 when css is applied (assuming you preserve the html-elements.css, [subtheme].css, layout.css structure)

I would suggest:
1. adding a class to the home page's h1 to allow down-sizing in the CSS

<?php
              // Use an H1 only on the homepage
              $tag = $is_front ? 'h1 class="isFront"' : 'div';
            ?>

Pro: Fiddle with the CSS once, and have uniform-size titles on all pages
Con: You gotta fiddle with relative font sizes, and that means math

2. Using a div across the board, but adding an h1 to the homepage styled with display:none;
Pro: includes an h1 on the homepage without messing with the title's CSS, displays all cool-like when styles are turned off
Con: Hidden element is hacky. Could be detrimental to SEO

kmonty’s picture

kmonty
Location San Francisco, CA
CreditAttribution: kmonty commented

I'm interested in where you got this data on Strong tags adversely affecting SEO.

I also don't see how having the sitename being an h1 on the front page being a problem, as the front page likely won't have an h1.title unless it is a static splash page of sorts. Maybe this was a specific use-case problem, but seems like it is not a bug. The majority of developers probably keep the front page as /node or run a panel that doesn't have an h1.title

ao5357’s picture

ao5357 CreditAttribution: ao5357 commented

While they might not have any affect on SEO, the strong tags are redundant.
Off-hand, I can't think of a circumstance where the 'a' tag would need different styling than the 'strong,' so I doubt it's a styling issue.
Why IS the strong there?

kmonty’s picture

kmonty
Location San Francisco, CA
CreditAttribution: kmonty commented

Strong is only redundant on the front page (the case of the h1) as the h1 already has emphasis. On all other pages, there is a div.

Front what I understand on the strong tag is that it is more than just a stylistic tag (such as the b (bold) tag). Strong is designed to both emphasize the text visually and contextually (for screen readers). I am not able to speak for the maintainers, but I suspect they used the Strong tag to convey emphasis to screen readers that this div is the site title.

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented

ding. ding. Kevin is a winner! The <div id="site-name"><strong> on sub-pages is meant to show semantic importance of the site name.

And the <h1 id="site-name"> on the homepage is used because, on the homepage, the most important thing is the site name. That's not true on other pages.

You will only get double <h1>s on the homepage if you change the the homepage from the default /node list of content to a specific path that has its own title.

So maybe the fix is to demote the 2nd <h1> on the homepage to a <h2>? What do you guys think?

@Brad: a h1 class="isFront" would be redundant because the body already has a front class when viewing the homepage; so you can use body.front h1#site-name to target the site name on the homepage differently than other <h1>s.

kmonty’s picture

kmonty
Location San Francisco, CA
CreditAttribution: kmonty commented

"So maybe the fix is to demote the 2nd <h1> on the homepage to a <h2>? What do you guys think?"

Seems like a good solution to me.

Should there also be a change to the css to mimic the h1.title as .front h2.title? But what about if someone keeps it as /node ? Do we make this h2#front instead?

I could envision this potentially confusing themers who don't use FireBug since would you expect if you made front direct to /node/### to have the same title style as if you went directly to /node/###

ao5357’s picture

ao5357 CreditAttribution: ao5357 commented

Okay, I fixed my own personal font-size inheritance problems (subtheme-specific), but I still think this causes a lot of grief.

Especially since layout.css is not supposed to contain font style information, yet specifies the font size for that element by default.

If it could be noted in html-elements.css that #site-name should be concurrently styled with the same relative font size there, then re-specified with a multiplier in the theme's css file, I think that would be a better solution.

chrisschaub’s picture

chrisschaub CreditAttribution: chrisschaub commented

And the <h1 id="site-name"> on the homepage is used because, on the homepage, the most important thing is the site name. That's not true on other pages.

The H1 is the most important thing on any page (next to the title header tag) and should not be used for anything but the page title. It represents the main purpose and topic of the page. It's a content tag. This might not be the site name on the home page since that is in the <title> tag usually. Many sites, especially for seo reasons, use a slogan in their homepage H1 or a title that sums up the content on the homepage or maybe some words about a current promotion.

My issue is that by adding the id="site-name" you are assuming that the homepage H1 will be the site name. This is not necessarily true. Also, many modules like views and panels set the H1 to any custom string -- which may or may not be related to the site name. Just trying to be semantically correct.

Since there should be only one H1 on any given page, it does not need an id or class tag since it's always the page title. You only need ids and classes where you will have multiple or varying tags from page to page. H1 is semantically, all on its own, the title of any given page according to spec.

ao5357’s picture

ao5357 CreditAttribution: ao5357 commented

And what to do about the multiple inheritance of relative font sizes?

From what I can tell, #site-name 's font-size is declared in layout.css . Wouldn't it be better to declare it in html-elements.css? Sure, it's not an html element per se (it certainly isn't a layout declaration), but giving h1 and #site-name the same base size in html-elements.css makes sense. #site-name can then take a multiplier in the theme or subtheme css file.

@schaub : The homepage conditional works with a base installation of drupal. My first inclination for panels or views is to make a dependent module for titles, which would allow overrides from the theme.

#site-name, for people with a non-customized page.tpl.php, provides a styling hook. Looking at the theme from a general perspective, the #site-name container (whether it is an h1 or a div), actually contains the site name, and should remain stylistically static from homepage to other pages.

If you're doing something outside the purview of the majority of users, is this really a bug report? It seems to me that you're customizing a theme for a specific use case. Release it as a Zen subtheme for others to use!

apathetic_resistance’s picture

apathetic_resistance CreditAttribution: apathetic_resistance commented

Hi, I just wanted to raise a point regarding the only one H1 per page thing. I agree that there should only be one H1, but taking a quick look around the web, it seems that most sites use the H1 for the site name, and they do so on every page of their site. Pages with titles generally use H2s for that.

For instance, that's exactly what the Web Standards Project does, as well as Zeldman and Mezzoblue. A List Apart actually uses two H1s, one for the site name and one for the page title.

So, while I don't want to say that Zen is doing anything wrong, I think it's important to consider what Zen is doing to be an interpretation of the standard. And many other reputable designers are interpreting it differently.

PS: could anyone point me to some good sites that use H1s the Zen way? I would appreciate it seeing it in action. Thanks!

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented
Title: Double H1 tag in page.tpl.php » Help prevent double H1 tags on homepage that is not /node
Version: 5.x-1.1 » 6.x-1.x-dev
Status: Active » Fixed

ao5357 in #7: you make a good point about the #site-name font sizing in the layout.css. So in Zen 6.x, I have moved those into zen.css. They shouldn't have been in layout.css. http://drupal.org/cvs?commit=139897

Double H1s are bad because they reduce the importance of the each keyword this is in the H1s. And because search engines think you are trying to keyword spam them with lots of H1 tags. I would suspect that just 2 H1s with a couple words each is only slightly penalized versus having lots of H1 tags or lots of words in H1 tags.

But I can't remove the code that makes the site-name an H1 tag because then the default drupal homepage (/node) will have ZERO h1 tags. And I think that is worse for SEO than having two h1 tags.

However, I can make it easier to remove that code for sites that replace the default /node homepage with a specific node or something else that winds up creating double h1s.

So I'm going to change the original code (shown above) to this:

<?php if ($is_front): ?>
  <h1 id="site-name">
    <a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
    <?php print $site_name; ?>
    </a>
  </h1>
<?php else: ?>
  <div id="site-name"><strong>
    <a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
    <?php print $site_name; ?>
    </a>
  </strong></div>
<?php endif; ?>

That way if you re-configure the homepage so it already has a H1 tag, you can just override the page.tpl.php in your sub-theme and remove the 8 lines of code that conditionally show #site-name as an h1.

Fixed in HEAD and DRUPAL-5--1.

chrisschaub’s picture

chrisschaub CreditAttribution: chrisschaub commented

The problem is that setting the front page H1 to be the sitename is a duplication -- and ignores the H1 tag that might be set via something like panels, views, module etc. The sitename will appear in the head title tag. It does not, and should not, be automatically duplicated in the H1. This has nothing to do with a special use case -- this is a concern for anyone trying to get good search engine placement for their site. The homepage is the most important page for inbound votes, and a very short H1 title is a mistake and will hurt your site. I'm just opting for more flexibility.

How about just honoring the page title unless it's not set? If it's not set, then use the site_title? Doesn't that work for every situation?

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented
Status: Fixed » Active

How about just honoring the page title unless it's not set? If it's not set, then use the site_title? Doesn't that work for every situation?

Actually, checking if the page title is set might be a good idea for the homepage h1 toggle. I'll investigate.

chrisschaub’s picture

chrisschaub CreditAttribution: chrisschaub commented

Thanks for looking into it. Maybe something like this in page.tpl.php ...

<?php if ($title): ?>
  <h1 id="page-title">
    <?php print $title; ?>
  </h1>
<?php else: ?>
  <div id="site-name">
    <?php print $site_name; ?>
  </div>
<?php endif; ?>

Not sure if $title needs to be checked for empty -- I can't test from here, I'm on the road. But this way, if you have a view or panel as your homepage, you can set the title as the view title. This way you can have a more interesting title. And if it's not set, it will use the site title.

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented
Status: Active » Fixed

Testing for if ($title): seems like the best solution. Thanks, Christopher!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.