Whether you’re writing a blog post or a webpage on your site, the content, including HTML headings, is your main means of communicating with your two critical audiences:
- Google and other search engines (web crawlers/bots)
- Your website visitors (existing AND prospective customers)
The search engine bots are listed first due to their significance. In today’s technology era, the primary referral source for almost all businesses is not word-of-mouth but online search. If search engines cannot understand your web content and its context, they won’t properly serve your site to their searchers. Your prospective clients are using sites like Google to determine your worth as a service provider or company. Help Google help you!
Consult the outline below for an example of structurally sound web copy…
My First H2 Starts Here: Let’s Talk HTML Headings
Each webpage begins with a Heading 1, or H1 for short. This is typically your page or post title. For example, on this page, the H1 is “How to Write a Blog Post or Webpage for SEO: Heading Template & Style Guide.” For every physical page on a website, there is only one H1 per page. Write that down!
Under the single H1 per page, think of the heading structure as a bulleted list or outline:
- Heading 2
- Heading 3
- Heading 3
- Heading 4
- Heading 5
- Heading 5
- Heading 4
- Heading 4
- Heading 3
- Heading 2
- Heading 2
- Heading 3
- Heading 4
- Heading 5
- Heading 6
- Heading 6
- Heading 6
- Heading 5
- Heading 5
- Heading 4
- Heading 4
- Heading 3
- Heading 3
- Heading 2
The HTML heading ladder runs from H1 to H6; however, Headings 4, 5, and 6 should be used sparingly — if at all. You’re likely either not going into enough depth with the many sections of web copy you’ve created. Or, you may have too much material to cover and should consider breaking the article up into a series.
Going Down the Ladder in Order, My H3 Nests Below
You do not have to make use of the entire HTML heading ladder — not in every post or in any post or page. You can choose to have no headings aside from the H1, although I don’t advise it. HTML headings help both readers and web crawlers understand text.
A full-width image with alt text, title, and caption, appears here — cushioned between two paragraphs.
You do have to play by the rules when using the ladder. We already covered limiting one H1 per page. You also must move down the ladder in order. In other words, you shouldn’t jump from an H2 to an H4, or make any other non-consecutive move, simply because you like the font size or style.
And Where There’s One H3, There’s Always a Second
For each HTML heading rung you choose to use, use a minimum of two headings! If you’re going to have an H2 in the post or page, there should be at least two of them. If you choose to nest down to an H3 in any of those H2 sections, there should be at least two H3s within said H2 section. The same goes for Headings 4, 5, and 6 when used. In short, you can use zero, two, or more Heading Xs in any given section. The only HTML heading rung that gets to stand alone is — you guessed it! — the H1.
H2 #2: Other Ways to Break Up Text
Make proper use of all the elements of online copy at your disposal. Break up text with photos, blockquotes, and lists. Don’t be afraid to nest down to H3s when your article topic is particularly in-depth. Credit those from whom you learned bits of your genius with links back to their research. Just follow these guidelines, and you’re golden!
There are no H3s in this section, but I do include an unordered list highlighting what we know so far:
- There’s only one H1 on any given webpage.
- One must move along the rungs of the HTML heading ladder in consecutive order.
- For every H2, there are either none or a minimum of two H3s that follow.
- The pattern continues for each heading rung.
- There should always be a text buffer between any combination of titles, headings, images, blockquotes, or lists.
Actually, that last bullet we haven’t covered yet. Structurally strong, SEO-sound web writing will include a buffer of text between any combination of headings, lists, or images.
“There is always a buffer of text between any combination of titles, headings, images, blockquotes, or lists.” — a wise web writer
A title, heading, unordered/bulleted list, ordered/numbered list, blockquote, or image should never butt up against another editorial asset in that group. There should always be at least a short paragraph of text to separate them. Don’t forget about the space in between a blog post title and the first heading (otherwise known as the introduction)!
H2, Round 3: Image Alt Text, Titles, and Captions
Images should always have alt text and titles. Captions are optional but can be used to add additional context to the article. When used, captions should follow all editorial rules (e.g., use a period if it’s a complete sentence; don’t if it’s not).
Image alt text should provide alternate information in case the reader cannot see the image, due to visual impairment, browser settings, or a technical issue. This text is almost always not a sentence, so there should be no period, but the first word should be capitalized and the remaining words should only be capitalized if they’re a proper noun.
Image titles should provide additional information to concisely sum up the visual. The title is also rarely a sentence, so no periods should be used; however, you should capitalize each of the main words, whether they’re proper nouns or not.
Image captions should provide information that’s pertinent to what’s happening in the photo, help tie the photo into the surrounding content, and engage the reader. Imagine readers only intend to skim your title, headings, and photo captions. Would that information alone be informative/interesting enough to meet your objectives for the article?
Image titles and captions inform the reader, but alt text, e.g., “A photo of a cat,” is the most descriptive.
Depending on the browser, alt text or titles may be used to create hover text that will appear when readers move their mouse over the image. All three image tags are used by Google for crawling purposes, so be purposeful with wording choice and keyword usage.
Saved the Best for Fourth: Links, Links, Links!
When applicable, link to related content within your post. These links can direct readers to another resource they may find useful on your website, or they may credit an external source for providing the information.
Any external links should be few and precise (e.g., don’t link to a store’s homepage just because you mentioned the company in an introductory anecdote, but do link to a news article talking about the parent company’s ground-breaking research into the diet industry if you’re including a stat they provided). This link should open in a new window.
Familiarize yourself with the differences between internal and external links, as well as nofollow and dofollow links, and know when to use each.
Internal links are links that point to an internal domain.
- An example would be a Quality AdvanTech blog post linking to another page on QualityAdvanTech.com.
- Use whenever possible and appropriate.
External links are links that point to an external domain.
- An example would be a Quality AdvanTech blog post linking to forbes.com.
- Use modestly, mostly to cite sources, not simply due to a mention.
- If the domain is competing with your brand in organic search results, include a nofollow tag.
For both internal and external links, you can choose to have the page open in a new window for the user by adding the target="_blank" attribute in the text editor.
The “nofollow” tag is an attribute that can be added to a link to tell Google not to pass PageRank to said domain; this can be considered a red flag to search engines as it’s often indicative of distrust for the domain being linked to or a sign of SPAM.
- Use with caution. Why are you linking to a site you don’t trust?
- When linking to a direct competitor, i.e., a website targeting the same keyword phrases for search engine optimization, use nofollow.
To make a link nofollow, add the following to the link tag in the backend text editor of your content management system: rel="nofollow". Here’s a plaintext example of an external HTML link, with a nofollow attribute, that will open in a new window for the reader:
<a href="http://www.examplesite.com/" target="_blank" rel="nofollow">Check out Example Site’s website</a>
The term “dofollow” refers to any link without the “nofollow” attribute. Any link without the nofollow attribute is considered a “dofollow link.” A domain linked to with a dofollow link receives a portion of the PageRank from the linking domain. It’s your way of telling search engines you trust the authority of the site to which you’re linking.
The anchor text is the text that appears within the HTML link tags (<a></a>).
Your anchor text should be a clear heads-up to the reader and to search engines what the content will be about, should they choose to click through and give it a read. The anchor text should not be spammy or overly keyword-y, and you should never include end punctuation within the link tags (Note the period after the closing tag!).
My Final, Concluding H2 Begins and Ends Here
My final piece of advice; Do take editorial law seriously. Misspellings, grammar mistakes, syntactic errors, and other typos are huge faux pas in the eyes of search engines. According to search engine expert Matt Cutts, spelling, stylistic integrity, and factual accuracy should matter to website owners. Search engines also hate to have their viewers misinformed, so fact check, fact check, fact check!
And that about sums it up — in a mere 1,600 words. Stick to the template above and don’t be afraid to let your personality shine through your writing, and you’re set for success. Happy typing!
