Site logos and the H1 tag

Posted 27 March 2009 by Russ in SEO, XHTML. Tags: semantics.

10+ years ago when I moved from print production to web development, tables were the norm and the WYSIWYG view of editors like Adobe Dreamweaver (or Macromedia as it was in those days) and Microsoft Frontpage were an easy way for a print guy like myself to easily grapple with HTML, I viewed heading elements as pre-styled elements of a page. So if some large text was needed, I’d slap in an H2 tag and bang! instant large text.

These days we’re much more aware of the semantics of our pages and should ensure we choose our hand-coded markup carefully before we even look at the CSS. But sometimes the semantic structure of a fantastically-designed web site is not always clear to the designer and/or developer. The designer might design a masthead that is visually the key element on a page or set of pages, but that doesn’t mean it should necessarily be the H1 in your page.

As lead developer at the Arcadia Group, I’ve been involved in a number of commercial site audits for natural search optimisation and accessibility. Each of these audits has made the same recommendation: markup of your page affects how your page is interpreted by all user agents and should be written to ensure that these agents can interpet your page content. These agents include search spiders and screen readers, and it’s these that are easily overlooked if we take a graphical design too literally.

Working semantically

The easiest way I’ve found to develop in a purely semantic way that balances the needs of design, SEO and accessibility is pretty straightforward: I work from the bottom up. By that I mean that I work through each "layer" of the site interface in turn, starting with the markup that defines the structure of every page. I’m primarily a front end developer so although I do plenty of work with PHP and work closely with Java developers, the layers I’m focussing on here are purely presentational.

Breaking up the presentation layer

Markup

The markup is the one required layer that all pages need as it’s this that the user agent interpets. A browser’s interpetation of this is a rendered page like the one you’re looking at now; a screen reader ‘reads’ aloud the content in the markup; and a search engine applies its search algorithm to the markup to produce a search ranking.

Style

If we’re good little developers and obey the rules of progressive enhancement there should be no styling in our markup layer. This should all be separated out to an external CSS file, or files. This set of files and any associated images form our style layer. This is largely ignored by search spiders* and by screen readers but is what enables us to achieve our desired page design.

* Google checks for any ‘black hat’ CSS techniques that are used to gain ground in search rankings, such as making keywords invisible from view by styling them in same colour as the background they sit on.

Behaviour

Behaviour is the final layer and enhances our pages further by adding the behavioural gloss. This commonly includes JavaScript behaviour such as Ajax, animation, form validation and the like, but also includes any Flash content and even RIA content produced using tools such as Adobe Flex and Microsoft Silverlight.

From both the point of view of progressive enhancement and accessibility, we should ensure our pages are usable for any person (or user agent) that doesn’t have the ability to render this behaviour layer. This means that the markup and style layers should include the content that allows everybody to use the page. The behaviour layer then overrides this by presenting the JavaScript, Flash or other plugin content to enhance the user experience.

There is a (valid?) argument that there are Flash and RIA interfaces that deliver an experience that’s not possible to produce in any other form with current browser technology, and that it’s therefore the only realistic option is to present the user with a "You need to enable JavaScript" or "Download Flash Player 10" message and insist they install what your content requires if they want to use your page.

Working with the markup layer

So working from the bottom up, I find the easiest way to work is to write the structure of the page first. For this example I’ll use the page you’re reading as an example:

From a design perspective the logo is large and takes up a lot of screen real estate and on some sites you find that the site logo is marked up as an H1 element of the page. However the page you’re reading now is specifically about site logos and the H1 tag, so from a semantic point of view, that should be the H1 element rather than the russback.com logo.

It’s tempting to think that we could have both the site logo and the page heading as H1 elements but from an SEO perspective, this isn’t a good thing. Google and other search engines read the content of the page but they also parse the markup in order to assess the imporance of each content block. So keywords and phrases found in paragraphs at the bottom of the page will be given less ‘weight’ or importance than those found in a heading tag towards the top of the page. Therefore the H1 tag is the description of this page and there should only be one if you want to optmise your site for search as far as possible.

This really shouldn’t be a problem for us as developers because CSS gives us the ability to style markup elements in pretty much any way we choose; there is nothing to say that an H2 element must look visually different to an H3 for example. So if we concentrate on the structural markup of the page before we even look at writing any CSS, we should find we get our semantics right from the word go, with SEO to boot.

So where does that leave the site logo?

In markup terms, a logo is either going to be an inline image, or text that is replaced with a background image using CSS. My view is that as an identity, it deserves to be an inline image so that if the site’s CSS is disabled, the branding of the site remains in place.

However if you’re dead set on using image replacement, the logo clearly can’t be used to replace an H1 text element, and as the heading structure of a document should flow from top down – ie H1 first, H2 second, and so on – if we’re to be using an H1 tag below the logo, we can’t use a heading tag of any sort for the logo.

So what else do we have in our semantic toolkit to mark up this element? Not a lot really: just a link or at most, a link within a div if we really need it.

But what about the home page? My logo is the title of my page here!

This is a fair point. When a visitor arrives at your front door, your logo is arguably your page’s title. You can still achieve this by adding some conditional code using PHP, JSP or whatever language your site’s application layer is built in, and then use CSS to ensure the design remains consistent throughout the site. A PHP example for Wordpress would look something like this:

<?php
  if (is_home()) {
    $logotag = "h1";
    }  else {
    $logotag = "div";
    }
  echo ("<" . $logotag . "><a href="/" title="Back to the home page"><img src="/wp-content/uploads/logo.gif" alt="Russ Back, professional web development" /></a></" . $logotag . ">");
?>

Some example sites

This isn’t a view that’s shared by everybody, and here are some high examples of different approaches taken from a variety of sites. As with many areas of web development, there’s many different ways to build a site and the decisions we make during the development process should always be driven by the business needs and the stakeholders’ requirements. However I hope the simple approach outlined here will serve you well in the majority of projects.

The BBC site uses an H1 element for its News logo on the News home page. When you drill down to a story page, the logo is a link with image replacement and the H1 is the headline of the story.

The Google site uses an H1 element for its logo on the home page and search results page. When you drill down to a content page, the logo is an inline image and the H1 is the headline of the page.

The Accessify site uses an inline image for its logo and the H1 is the headline of the page.

The A List Apart site uses more than one H1 element on each page: one for the logo and the other for the headline of the page.

The Big Mouth Media site uses an inline image for its logo and the H1 is the headline of the page.

The Apple site typically uses image replacement on a link for its logo and the H1 is the headline of the page.