Headings are for SEO
Does your website use headings or h-tags for CSS design? It shouldn’t. Instead, reserve h-tags for outlining our document and SEO.
Today the Official Google Webmaster Central Blog published
this:
One way Google’s algorithms determine the context of content on a page is by looking at the page’s
headings. The way semantic markup is used throughout a site, including h1, h2, and h3
tags, helps us to understand the priorities of a site’s content. One should not fret, though, about every single H tag. Using common sense is the way to go.
Google linked to the W3C specification, part of which reads
A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table
of contents for a document automatically.
Use Headings to Give Your Pages Structure
Headings, also known as h-tags, are the h1, h2, h3, h4, h5 and h6 that you see inside the HTML of many pages. Their purpose is to give structure to a story,
much like an outline gives structure to a report or term paper. If it helps, think if this as your page’s skeleton.
H1 – The page headline. It should contain the main them of the page and most important keyword or keywords. There should be only one.
H2 – Section headlines to describe each section.
H3 – Subsection headlines that break-up sections in an orderly fashion.
Nearly all pages should include an h1. Most pages never go beyond the h3. Just use the outlines that makes sense on your pages and you will be fine.
Headings are Not for Design
Nowhere in the W3C specification does it suggest using headings as design hooks. Unfortunately, many designers persist in using h tags to define how text should
appear. Here is an example from a CSS file.
h1{
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
font-variant: small-caps;
color: maroon;
}
Every time the designer of this page wants extra-large maroon text with small caps he encloses those words in an h1 tag. The h2 has its own look too, as does
the h3 and h4 and so one. You often find these types of headings in menus and sidebars, outside of the page’s main content.
Using headings for design destroys a page’s outline. It withholds the easiest way for you to share with search engines what’s important on your page.
Designers have an alternative. They can use class and id tags in their HTML.
<p class="side-nav-header">This is the Page Headline</p>
Your designer can format the appearance of the class side-nav-header in the CSS file…
#side-nav-header{
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-variant: small-caps;
color: #008000;
}
…and use it anywhere on the page as often as necessary without messing up the pages h-tag outline.
- Good headings or h-tags create a story structure or outline.
- There should be one h1 tag only, the headline or theme of your page.
- Do not use h-tags to style or design the appearance of text.
- Do not use headings in navigation or sidebars.
- Tell your designers to never use h-tags in CSS files. Instruct them to use custom class and id tags instead.
Comments