Helpful headings are good for your readers and for SEO
You probably know that headings on a website page are useful for organizing content, but I find that clients, especially those who are writing their own website content, aren’t aware that headings should be placed and styled intentionally.
The hierarchy of headings
Headings on each website page follow a top-down hierarchy, from general to most specific.
Heading 1 (H1) rules the room
There should be just one Heading 1 (H1) on a page, like a Maitre d’ of a hotel, who oversees everything that’s happening.
Place it as the first text on the page as a description of the content of the page.
Make it the largest heading on the page or make it a decorative or script font as a design element.
The heading often uses a color from your color palette.
A Heading 1 of just one word that matches the navigation menu label is perfectly fine (About, Services, Contact) and is easier to read if you’re using a decorative font.
You can also lengthen the main heading to include more search keywords: “About my journey to website design,” “Website design services for the innovative solopreneur,” “Contact Kerry if you’re ready to realize your vision.”
Whether you use a short or long heading, make sure it makes sense for the page the reader expects to see after clicking a link from the navigation menu, a button, or a text link.
Heading 2 (H2) sets the table
A Heading 2 is the descriptor for one or more paragraphs, an announcement, or a tagline that needs some extra flair. Use Heading 2 (H2) to call out the main content sections on the page. Heading 2 is a little smaller than Heading 1 so that it’s recognizable as a subheading for the page. I usually apply a color to the Heading 2 style, so it can serve as a design element on its own, using a bright and readable color from the website color palette.
Heading 3 (H3) holds the place card
If you need more organization within Heading 2 sections, use Heading 3 (H3) subsections. Heading 3 is a little smaller than Heading 2 and highlights details, usually just one or two paragraphs or a bulleted list. I often apply the same color as Heading 2 so all headings on a page are easy to see as related to each other.
Heading 4 (H4) plays a role if it must
Heading 4 (H4) is rarely used, but can be used to further organize content in a Heading 3 section.
Headings help readers scan and absorb information
Headings on website pages are larger and often in color to catch a reader’s eye. A heading that is inviting and also summarizes the information that follows serves readers who are looking for something specific. Readers can scan the headings on a page to look for the type of content that they’re interested in and go directly to that section.
Headings also organize and package up bits of related information so readers aren’t faced with a wall of paragraph text that looks dense and hard to get through. Even if readers do end up reading a full page of text, the headings give them a sense of where they are on a page, how the information is organized, and gives their eyes a visual break from small text.
Headings help people find you
It won’t surprise you that Google and other search engines use the words in a heading to match with search keywords and to make sense of the content.
What you may not know is that search engines evaluate headings for their styling status too: Heading 1, Heading 2, Heading 3, etc.) all rank differently.
Text in Heading 1 is weighted as more significant than text in Heading 2 and text in Heading 2 is considered more important than text in Heading 3.
And text in any heading weighs more heavily than paragraph text.
When you're writing a heading, consider how search engines will see it and create a heading that makes sense for the heading level you’ve assigned so it earns its place in the hierarchy of headings.
Keep your headings stylish and readable, using the correct hierarchy, and they’ll do their job helping your readers and your search results.
