Confused by heading tags? Putting h1s in an h3-shaped hole? Well, it’s time to dig out your old school blazer, and sit quietly as ClickThrough’s senior online copywriter Oliver Pyper explains the basics of these essential HTML elements.
No, the title’s not a formatting mistake. We’re going to get properly technical and talk about heading tags, so we’ve indicated where we’d use heading tags throughout this blog post.
Heading tags are HTML elements that look like this <h1> or this </h1>. The first says ‘consider the following text to be a heading’ and the second lets the search engine know when the heading ends. The numbers typically range from heading one, h1, to heading six, h6.
h1s are seen by search engines as containing more significant information than h2s, whilst h2s are seen as being more significant than h3s, and so on.
These tags are one of the most important things to consider when optimising a webpage, because they help search engines understand the ‘information hierarchy’ of a page’s content. A page title, for example, is likely to occupy top position in the information hierarchy, and will probably also contain a crucial keyword or two.
So, as a developer, you’d ensure that the importance of the title is recognised by search engines by enclosing it in <h1> and </h1> tags.
<h2>Heading tags are important for users, too</h2>
The information hierarchy isn’t just for search engine spiders. By separating information with headings, and using tags to position these headings within the information hierarchy, you can help website visitors make sense of the information presented too.
Heading tags are usually tied to the website’s CSS (cascading style sheet). This file contains all of the information about a website’s decorative elements, so can (and often does) define the font, font size and other characteristics of the headings used.
So, in normal practice, a <h2> tag will be smaller and less ‘important-looking’ than a <h1> tag. By defining the above heading as a <h2>, we can let users know it’s a subheading – and also let search engines know that the information (and keywords) is less important than the information in a <h1> tag.
<h2>BUT heading tags shouldn’t be used for styling elements<h2>
Although heading style is often defined in the CSS file, it’s inadvisable to use heading tags simply to change font size – you’re likely to end up highlighting irrelevant information.
The reason that search engines attach more importance to <h1>s than <h2>s, and to headings than normal paragraph text, is because they reflect the importance of the information to users.
You should always use this to guide your use of heading tags. Don’t make ‘Download our App’ or ‘Contact us’ headings on a page about dog toys because you want them to appear in a nice, big font. It isn’t relevant to the information on the page, and you’re unlikely to be targeting these phrases as keywords.
Instead, save these tags for important topics that are relevant to the content in question. This helps search engines make sense of the subject matter on the page, which in turn has SEO benefits.
For this reason, you should also avoid using heading tags for banner and footer elements that appear on multiple pages of a website, as this will make it more difficult for search engines to understand the content of the page.
<h2>You can’t trick search engines with heading tags</h2>
So, if search engines attach the most value to keywords contained in <h1> tags, why not use these for all the elements on a page?
Well, search engines are far too sophisticated for this kind of subterfuge. They’ll soon pick up on the ruse, and it’s likely that your rankings will suffer.
To avoid confusing people and search engines, it’s best to use tags naturally. For many pieces of online content, this will mean using them in order, from <h1> to <h2>, <h3>, and so on.
<h3>But not always</h3>
The information in this paragraph is relevant to the information under the previous heading. It’s not hugely relevant to the article as a whole. For this reason, we’ve marked the heading as <h3>, but continued with a <h2> tag for the next piece of text.
<h2>Heading tag best practice</h2>
So, to summarise, it’s best to stick to heading tag best practice for maximum SEO benefits, and to ensure your users can make sense of your content (and thus are more likely to convert).
<h3>Here’s a quick heading tag 101:</h3>
- Heading tags help users make sense of information on a page.
- They also help search engines identify the most important topics and keywords on a page, and make sense of the general subject matter.
- DO use heading tags to establish a natural ‘information hierarchy’ on the page.
- DO use keywords in heading tags, wherever possible.
- DON’T try to cheat search engines by using heading tags incorrectly.
- DON’T use heading tags simply to change font size.
- DON’T use heading tags for vague headings such as ‘More Information’.
- DON’T use heading tags for elements that appear on multiple pages, like heading and footer text.