Home ›
Use h1 for front page site name and strong for interior pages' site name displayUse h1 for front page site name and strong for interior pages' site name display
Submitted by Benjamin Melançon on November 15, 2008 - 6:49am
For semantic correctness (your site's code saying what it means) and search engine optimization, your site's title should be in level one header (h1) tags on the front page and something else, such as strong tags, on all other (interior) pages.
Zen theme has its own way of doing it. The below is a little more direct, and puts the logic in template.php rather than page.tpl.php which is recommended per Drupal best practices. The variable printed into angle brackets already in the page template may be a little tweaky; however, it allows the title's tag switch to be done elegantly with just one variable.
(Note this example also replaces variables for site name with hard coding. That isn't relevant to the technique here one way or the other, just be away that only custom themes should do such hardcoding. Also, if your theme implements a separate page-front.tpl.php you really don't need any of this— just code the h1 there.)
Resolution
In template.php:
<?php
/**
* Override or insert variables into the page templates.
*
* @param $vars
* An array of variables to pass to the theme template.
* @param $hook
* The name of the template being rendered ("page" in this case.)
*/
function seacoastoutright_preprocess_page(&$vars, $hook) {
$vars['ttag'] = ($vars['is_front']) ? 'h1' : 'strong'; // set the title tag
}
?>
In page.tpl.php:
<div id="site-name">
<<?php print $ttag; ?>>
<a href="<?php print $base_path; ?>" title="<?php print t('Seacoast Outright Home'); ?>" rel="home">
Seacoast Outright
</a>
</<?php print $ttag; ?>>
</div>
Searched words:
Search Engine Optimization theming tweaks
site title text should be a level one header on home page
choose H 1 for sitename on main page strong on inside sub-pages
Comments
Huh?
Where on earth did you get this idea?!
HTML has no concept of a 'site', it is just a document mark up language. H1 is the heading of that page, and should be on each page. Using bold like you are simply hides the text form the document structure.
Have you tried using a screen reader on a site without proper heading tags?
Really, [Citation needed]
Dear visitor
My mistake for supposing that people visiting from Drupal Planet would be familiar with the way Drupal works ;-)
Seriously, there are two assumptions I made that I should have made explicit:
?q=nodeor Panels or Views listing or blocks of recent content such that there is noh1on the front page (which is very typical).In short, one typically does not want every page on a site to have the same h1 heading – as you understand, this would indicate to any human or crawler reading the site that every document is the same – but to let the current post have its header define the page, yet still have the site title present and emphasized with
strongtags– except on the front page, where the site name should be the header.Agaric thanks you for reading!
I know
I am well aware of how drupal works, thank you. :)
The idea that your site's name shouldn't be a heading and should be bold has nothing to do with this. If a user arrives to the site on a views page, how will they find out what the sites name is? From the URL maybe, but that isn't always helpful.
During my time as an accessibility consultant for a major government web site in the UK I did some real world tests on real users of screen readers and found that heading tags are vital to web site navigation. If you can find otherwise then, please, do point me to the research.
Your claim that there is some SEO gain here: can you point me to a page on any of the top 3 or 4 search engines that agrees with you?
Personally I like to have more than one H1 tag in my Druapl themes: one for the navigation, other blocks etc and another for content, so the document will be:
[Site name]
--[Menu name]
--[Block name]
--[etc]
[Content Title ([view|node|panel] name)
--[content sub-headings]
However, this is a matter of choice and could be argued either way. As far as I can tell, there isn't a penalty for this, whatever way you do it.
Visitor, if you come back
Visitor, if you come back and read this (or anyone else), do you have any pointers to more extensive information, or supporting research, on this subject? Are there forums where it's discussed? Are there standard markup conventions, or do you have to actually get screen-reading software and try it on your pages?
It used to be that people would tell you that "dicount" accessibility was fairly easy: Optimize for the spiders, and you'd get a lot of the way there. It seems that's no longer true (if it ever really was).
As far as "semantic correctness": The "semantically correct" way to do it seems to me to be to have one H1 on every page that tells you what that page is about. I don't see a value in having main headings on "lower" pages be anything other than H1 unless the whole site is a book that will somehow be parsed as such -- and that's exceedingly uncommon. Most sites are collections of unitary pages. The web really shines as an interconnection of unitary pages, and setting up an imaginary semantic superstructure that has levels extending across pages has always struck me as a mistaken effort.
The perceived semantic structures that humans see when browsing sites are a separate matter: They can be achieved (and should be) by means that are visible to humans, like design cues (color, breadcrumb trails, relative sizes of headings, etc). For the machines, we have sitemaps. This is a visual approach, of course, which is why it would be useful if Visitor would return to comment ;-).
strong?
I have to agree with the previous comment - this is madness!
<strong> is supposed to be for tagging emphasised body text - a stronger version of <em>
If you want to style it differently, you could use this technique to add a different class to the H1 tag - but D6 does this for you by default anyway - by adding a front or not-front class to the <body> tag
having read the above I see what you are getting at
haha - I thought it was odd that you had temporarily taken leave of your senses - you are normally spot on! Having read the above I understand what you are getting at!
There isn't a semantic HTML tag for <sitename> - but using <strong> like this feels a little strange.
How would you style it? What if I wanted to highlight a point in a comment on that page? would it come out the same as the site title?
Surely you would at least need a class="sitename" in there
I would probably have gone with span here because there is no semantic tag which fits the bill!
SEO is about content, not the technicalities of code
It should be pointed out that SEO is 98% about the content and inward links and not about the code. If you want your page to come up in searches about "Elephants" than write good content about elephants and get a lot of good quality elephant-related sites to link to your sites. Period. Tweaks like this might improve your SEO by 0.1%. Your effort would be better spent on improving the quality of your content rather than obscure tweaks like this.
I have a question on this too
Fortunately, everyone here is an expert!
The assumption of this post is that you don't want an identical h1 on every page, it semantically doesn't make sense, and making an h1 with the same text as, for instance, the page title shown in the browser would be redundant (and so semantically confusing for screen readers etc.) with the post title's h1.
However, what do you use there? I think Zen's choice to use
strongtags is as good as any. h2 or h3 certainly wouldn't make sense. It's simply important text on the page. Perhaps the Dublin Core metadata element often used for site name, DC.publisher, could be added as RDFa and used here.To be really, really clear the point of this post was more the theme trick, believed to help make one's home page a bit more semantic by ensuring a logical h1 with the site name, than a comprehensive manual on how-to. Dalin is right: content is most important, simply running Drupal helps a lot, adding pathauto helps even more, and there are a ton of other things more important than when an h1 tag surrounds the site name or not.
Incidentally, adding a class name does nothing for semantics and presumably nothing for SEO, and the goal here wasn't styling (many sites will hide the text version of their title to use a graphic instead) but the semantics. Thank you all for reading, and for some of us for caring so much!
hmm interesting - can a document have more than 1 H1?
This is an interesting topic. I'm sorry if the tone of the comments has been "oh my god what were you thinking!" I didn't realise this came from the Zen theme - it has got a bit bloaty recently, which is why I'm starting to fall out of love with it!
It is an interesting question though - can a document have more than one top level heading? If not, then I guess there should only be one H1 tag, and it should always be the same, or similar to the contents of the <title>
The usability testing results of screen readers and headings above were pretty interesting - I've never had access to that kind of testing budget, but the results are pretty
Still not convinced by the use of <strong> though - it only makes sense in the context of body text - I'd have gone with a non-semantic tag like span.
But anyway - we're wasting time here - our clients don't care about this noise! Whilst we're spending time here, our next client is hiring a cowboy with Microsoft Frontpage and a good sales patter!
Also Benjamin, I'm having problems with you captcha.
The assumption of this post
I'm sorry to keep going on about this, but do you have any research that backs up your point? Or are you just making this up?
There is nothing in the HTML specs that say more than one H1 isn't valid! And like I said before, HTML has no concept of a site, only pages that link to each other. If you come in to a sub page of the site, like most people do, then you'll not get the heading.
I have never had so much
I have never had so much trouble communicating in my life. (And that is saying a lot!) I personally have nothing against having more than one header 1 on an HTML page, although, like getting down to the header 6 level, it probably indicates the page is a bit too long.
Visitor wrote:
Yes! That is exactly the point of this post (rapidly becoming the most commented-on post in Agaric's history).
I think most of the problem is, naturally, in my heading, which comes across on Drupal Planet as a commandment "Thou shalt" use h1 for front page site name rather than, as is Agaric's shorthand for many posts here, how to do something (the Agaric way) if you are so inclined. For instance, Dan's post titled "Remove iGoogle sidebar" is not meant to be interpreted as an order, either.
For the record, this post supposed two things and tried to demonstrate a third:
To get back to the point (and one of Agaric's reasons for being) of providing technically useful information, you can then use CSS to style both identically. If in both cases it is wrapped in a div with an ID of site-title, something like the below should get you started:
#site-title h1, #site-title strong {font-size: 27px;
font-weight: bold;
}
Now if people want to participate in a really important debate, Dan and I will probably be breaking up the collective over whether to use single or double spaces after periods in complete sentences.
First off, I'm very new to
First off, I'm very new to web-development, so take whatever I say here as part of my effort to learn more.
I was puzzled about the use of strong in the Zen theme (it makes my sub-theme's site name jump a bit when moving from the front page - annoying!), so I googled drupal zen strong site name
The first hit explains why they used strong in the first place (as a text replacement hook).
The second (sub?) hit suggests Zen use h2 for the site name on body.not-front as a SEO tool.
And guess who the third hit was! Clearly you do know a great deal about SEO, great job.
Post new comment