2013-09-05

Co.Labs

Should Your <h1> Tag Be Your Logo?

This is a topic that has provoked MANY online-geek arguments over time, with "true believers" on either side: Should you wrap your logo in an <h1> tag? From an academic point of view, both are correct. So which way is best? And why does it matter?



Should your heading 1 tag <h1> on the page be your logo, or the first headlines on the page? This is a topic that has provoked numerous arguments online, with "true believers" on both sides, and it gets at the heart of your web strategy: What will Google and other search crawlers prefer?

Those who believe the logo is the most important element on the page will wrap it in an H1 tag, while others keep those H1’s ready for important headings throughout content. Since both methods will pass code validation and are semantically correct, the question is: Why does it matter which one you choose?

The Heading Specification

If you’re not familiar with the various and sundry functions of header tags, start with what W3Schools says about them.

  • Use HTML headings for headings only. Don't use headings to make text BIG or bold.
  • Search engines use your headings to index the structure and content of your web pages.
  • Since users may skim your pages by its headings, it is important to use headings to show the document structure.
  • H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.


What Do Headings Actually Do?

Headings are a way to define document structure and to organize content. The first heading on your site should be the one that best describes the content of your page. Sometimes this is your logo--but most of the time it’s not.

The reasons you usually shouldn’t wrap your logo in an H1 tag are:

  1. Usability: The tags <h1> to <h4> should be used to organize information and orient users. The logo is not actually information or orientation; it’s metadata about the site, not relevant information about the content of the page.
  2. Accessibility: Think of the content on your page as an outline; having a "bogus" headline such as your logo means extra text that must be heard on every page by users with screen readers.
  3. Robots: Crawlers of all sorts scan your website for any number of reasons. By adding false H1’s it may confuse them on the structure and content of your page, misrepresenting your content or miscategorizing it in aggregators elsewhere.

What Google Says About Headings

Search engines are the crawlers that matter most. Their interpretation can be considered a "best practice.” According to Matt Cutts, who is the man when it comes to Google search, too many H1s or bunched up H1s dilute your search and cause the Google crawler to think you’re spamming it.

Also keep in mind with search engines that Google is aware of the context of your page. It already know that this page is on your company website. And unless your website is mind-numbingly cryptic, it probably already knows the name of your company, just based on the URL and some other “hints” it picked up along the way, such as inbound links. It has even probably figured out what department or division within your organization this page is part of. Unless you’ve done something unique with your page structure you can trust Google to have this basic information down pat.

Think Of Headings Like A Table Of Contents

This concept tends to come naturally to anyone who works with a lot of content. It’s just like a Table of Contents (ToC) in a book. You don’t want your book title in your table of contents, people already know which book they’re reading, or to apply that analogy to the web, which page they’ve navigated to.

How Amazon Handles Headings

Amazon cares about usability. It works hard to make things easy for users. It also cares about search engine results; Amazon products are frequently discovered through Google search. The company also wants their site to work well with screen readers. So, when it codes a page, it makes the “meat” of the page the heading: In the example below, the H1 is “All-New Kindle Paperwhite.”

Be like Amazon: Save your <h1> “big guns” for your actual page headings:

  • Product names
  • Services you offer
  • Regions you serve
Keep in mind, it's okay to have multiple H1s on a page, if there are multiple topics on a page. For instance, the home page of a website, or a company's main products page could very well have multiple <h1> tags. But don’t make everything a H1 though.

Caveat: When Your Company Name Really Matters

The best argument I’ve seen for making your logo H1 is to tell Google that your name is important, like this:

<h1 class="logo"><a href="/">Gravity Switch</a>⁢/h1>

If you’re having trouble with your company showing up when people search for your business name this is a very good idea. You’re telling Google on every page of your site that your company name is vital, so Google will notice. But if you’re already coming up at the top of the search engines when people search for your company name, you probably don’t need to do this.

[Image: Flickr user Ronald Sarayudej]






Add New Comment

4 Comments