When building a website, the code you write can be just as important as the imagery, colors, and design you use.
From a visual standpoint, a website should have a look and feel that is consistent with the brand, has a flow that makes it easy to read, and communicates clearly overall.
These considerations make sense for the people viewing your site, but how do you translate brand, structure, and value to a non-human? (I’m talking, of course, about search engines and not your neighbor’s cat, Mr. Pickles.)
Heading Tags Help the Search Engines Read Your Site Accurately
I’ll outline a few major guidelines when coding your web pages with heading tags that will make sure search engines get the most accurate “read” of your site.
Headings make it clear to the reader what to expect as they continue to read. Visually, we communicate the hierarchy with type size, font weight, and in some cases, font color. In HTML, we use the appropriate heading tags <h1> to <h6>.
A few rules of thumb:
• <h1> carries the most “weight” of all the tags and <h6> is the “lightest.” When structuring a document, the <h1> is going to be your main heading that describes what the general topic of the page is. In most cases, you’ll only have one <h1> on a page. As your content drills down, so should your tags. Depending on your content hierarchy, you may have multiples of any other <h2> through <h6> tags.
• Use heading tags for headings. Think of Headings as similar to chapter titles, paragraph and section headers. When you see one, you can assume that the content immediately following it is going to pertain to it, almost being categorized in that way. This is how the search engines get an idea of what your page content is about, and how it ranks the importance of each topic. If you misuse a heading tag for things like Call to Action links or if you use a tag out of order (e.g. A topic heading uses <h4> and a sub-topic heading under it uses <h3>) you risk ambiguity in interpretation by the search engines.
• CSS makes it all pretty. Some people make use of certain heading tags because of their default sizes and weight set by internet browsers. For example, without any extra formatting or styling, a browser will render an <h1> tag with a larger font size than an <h2>. If your site design calls for a smaller font size for a major heading, don’t use an <h5> when, in fact, the logic of your content calls for an <h2>. The presentation of that tag can be set with a simple line of CSS. Doing so will keep design separate from code structure and will make both types of site visitors happy. Human and non-human alike.
Use Code for Context
There are, of course, lots of ways to infer meaning with the code you use “behind the scenes”. Proper headings are just a starting point, but without them it’s harder for everything else to fall into place.
Search engines scan, read, and analyze content. While bright colors and shiny buttons may attract some people, they do nothing to help search engines know what the main points of your content are. Starting with a few guidelines like these will help you on your way to ensuring the success of your website.
