Are you making this mistake on your DIY website?
Table of Contents Show
As a designer myself, it sorta hurts my heart to tell you that style IS NOT the most important thing to consider when choosing which heading to use on any given page or section of your website.
I know, –right?!
That probably comes as a surprise, which is why I’m talking about it because if you DIY-ed your website, you’re probably doing EXACTLY that.
This simple mistake could be detrimental to the life of your website. 😬
📌 NOTE:
I should add here that this mistake alone won’t ‘kill’ your website ranking, but it definitely won’t be a contributing factor to increasing it. When I say detrimental to the life, I mean the entire life & rank of your website and that’s a hard battle to fight especially for brand new DIY websites with (probably) no sales or SEO strategy in place, –so you don’t want to add any other factors that could be fighting against you. Right?
Headings are not just font or stylistic choices and need to be used strategically for a few reasons, but you don't know what you don't know.
Honestly, you’d have no reason to know this if you’re not an SEO expert, a web designer, or a web developer because for any of those industries, this is ‘our’ gig –our specialty– and it’s something we forget that you don’t know.
Because there’s not much education on this, these are some of THE TOP problems I see on DIY websites:
😳 headings are used in the wrong order,
😫 there are too many headings in general or too many of specific types of headings & too few of the others,
😰 headings are being used for entire paragraphs or even just for aesthetic purposes,
🫣 or perhaps worst of all –– using an image to display important headings or paragraphs!
I know, I know, I know. It’s tempting to choose a font from the text formatting bar based on what size or font style you want, but that’s not what those styles are there for. You need to choose more wisely on a website than you do in a document.
Why?
Let’s find out how you can fix this common DIY mistake!
Best practices:
How & when to use Headings on your website
“We need to know the rules, in order to know how & when it’s okay to break them”
Before we jump in I’ll share a bit of know-how from my design professor back in college. She always used to say that ‘we need to know the rules, in order to know how & when it's okay to break them’ –and I think that applies here too! 😉
First things first, let’s distinguish the difference between these similar website terms: header vs heading.
A header on a website usually refers to the navigational space at the top where your main navigation links go, your main call-to-action button if you have one, your social media links if you display them, and your logo.
A heading is a style of headline used in the “copy” or text of your website, and most platforms give you a few different options.
Squarespace v7.1 gives you 4 different heading sizes all in the same font (without Custom CSS to install other options)
Squarespace v7.0 gives you 3 different heading options but they can be different fonts and sizes.
other platforms like Showit (last time I used it) give you even more options; each can be entirely different, from the font style, the size, the color, etc.
Now that we’ve cleared that up, let’s move on!
Headings are not just font or text style options for your website; they are PARAGRAPH styles. (Let that sink in!)
That’s why the dropdown in the text formatting bar doesn’t list them by the font name. It lists them by the paragraph style designation.
Styles vs Font (in Google Doc’s text formatting bar)
Paragraph Styles (in Squarespace’s text formatting bar)
Style vs. Font: the difference + why it matters
Google, screen readers, and the like use the hierarchy of those Styles to know where your headlines are and to make sense of your website’s content and copy within the structure you’re setting as you form or write your copy (text) on the page.
The headings used on your site form an outline (for Google, in the code) of what the page’s text talks about. To see a visual example, scroll back to the top of this page & check out the Table of Contents at the top of this post. That’s a visual representation of how Google will read your page’s content before it scans the whole page.
Your headings structurally represent the content on that page, no matter what font you choose for each one.
And don’t get me wrong, for this to work –you don’t have to have an actual table of contents. Just so we’re clear on that!
So choosing which heading to use & when suddenly becomes, arguably, at least as important as the visual style of the font itself, ––because…
“if Google can’t scan the page and make sense of what’s on it, it’s not as likely to show that page to people who are looking for that information… and if no one is seeing your page(s), it doesn’t matter what the visual style is.”
🤯 😬 ...shit.
If you felt that realization like a backhanded slap to the face, it’s okay. As I said earlier, it’s not common knowledge for DIY-ers and I didn’t expect you to know that already. That’s why I’m telling you now!
Okay, that’s why headings are important, but how do you use them correctly?
The actual purpose of each Heading
Think of the copy on your website pages –each page individually– as if it started with an outline, like this example below:
Example of an Outline Summary in a structured Google Doc
Heading 1
Within an outline, the title is the “Title” and is the most important thing on your page; that’s your Heading 1.
You don’t have multiple titles in the same document, do you? No. So you shouldn’t be using your Heading 1 more than once on any page, and usually never outside of the topmost section on your page.
It exists almost solely to tell people (& Google) what type of page they just landed on before they are required to read anything else.
It’s not meant to be preceded by a Heading 2, 3 or 4 within the same section.
If you’re now wondering what text to use in a Heading 1, keep reading!
Heading 2
The next most important piece of your outline is the Heading 2 and it should be visually smaller than your Heading 1 font size. You can think of it as a subheading or a secondary title for your page’s content.
Within an outline structure, these are your listed items that don’t indent yet. They’re the second most important, after the title.
You can have more than one Heading 2 on the same page, but I’d stick to just one Heading 2 within the same section.
Generally, I try to keep Heading 2’s usage per page to a max of 2-3x on medium-length content pages and use it just once, if at all, on shorter pages. For sales pages that can get VERY long, you can have a bit more leeway with that rule of thumb.
Remember to always use them as a section heading though, so it naturally sits at the top of the content that it describes.
It’s not meant to be preceded by a Heading 3 or Heading 4 within the same section.
example section layout (structure)
Heading 3
This is akin to the first indented line in your outline. It’s the third most important headline on the page, and it should be visually smaller than both your Heading 1 and 2 font sizes.
Just like with an outlined document, there tend to be more Heading 3s, because these are breaking down the different topics within any section’s content, underneath the Heading 2.
It’s not meant to be preceded by Heading 4 within the same section.
Heading 4
This is your last available option on 7.1 websites before you cross over into what’s structurally considered the body content. It’s the least important of the options and should also be the smallest, visually.
If you use custom fonts in v7.1, your Heading 4 is a great way to use an accent font, like a script style. Because script or cursive fonts can be harder to read for some, it needs to be used sparingly in most cases, which makes it a great fit for a custom Heading 4 style, because it’s not as likely to affect your SEO when you want to use it for a stylistic choice.
Want to learn more about installing custom fonts? Get the Custom CSS font installation snippet in this post here.
Heading Hierarchy & SEO
Search engines look at website-specific text tags in the HTML code that make up the structure of the content we see on the screen, in order to decide how to read your content & learn what’s on the page. These tags are hidden in the code but triggered by the format you choose from the list of pre-styled options wherever you’re adding text to a page of your site.
“When you choose your font from the formatting bar, you’re not just choosing a size or a style, you’re also choosing which hierarchal tag gets written into the code of your site, which Google looks for and uses to understand the content and hierarchy of information on that page.”
What are the style tags?
In Squarespace v7.0 you know them as:
Heading 1 – which is greater than
Heading 2 – which is greater than
Heading 3 – which is greater than
Body
In Squarespace v7.1 you know them as:
Heading 1 – which is greater than
Heading 2 – which is greater than
Heading 3 – which is greater than
Heading 4 – which is greater than
Paragraph 1 – which is greater than
Paragraph 2 – which is greater than
Paragraph 3
What are the HTML style tags?
In the HTML code, that example section layout (structure) from earlier would look more like this:
<h1>Services</h1>
<h2>How We Can Help</h2>
<h3>Package 1</h3>
<h3>Package 2</h3>
<h3>Package 3</h3>If you are using Headings willy-nilly, as they say, –stop and fix yo shit!
Google (and other search engines) uses this nested hierarchy to determine how your content is organized kind of like the auto-formating features activated in word processors (like Google Docs, Word, or Pages) when we started a numbered list or an outline.
Google can learn what you’re talking about with these titles & subtitles in the right order and it’s important for Google to get it right, so they can display your page(s) to people who are actually looking for that information.
example section layout (structure + labels)
Their SEO value
Using keywords & phrases
If you’re really on top of your game, you’ll name the page (Heading 1) something that includes your niche’s keywords, or keyword phrases that describe the content on that page to get the most SEO use out of them.
For Headings 2, 3, and 4: make sure you use keywords where you can, but here the keywords are geared more toward what’s necessary to:
describe or summarize the information in the section beneath each heading
or in the paragraphs directly under it (describing only the content before the next heading).
If your content ISN’T organized properly, Google could show someone a page to something that isn’t helpful for them because it didn’t understand your content well enough.
If your headings have vague, arbitrary, or cutesy words, like saying “Offerings” or “My Magic” instead of “Services,” Google’s bots will be somewhat outsmarted by your wit and aren’t as likely to understand the general purpose of that page –and thus, have no idea who needs to see your page.
What happens when using text inside an image? Google can’t see/read that text and so whatever’s written inside that JPG or PNG is completely useless from an SEO standpoint. It also doesn’t always resize well across different screen sizes from large to small, so it could easily become very hard to read on smaller screens (ie: mobile and tablet devices, which is how a large percentage of people access websites these days).
Example 1:
I recently saw this happen during a website audit. The website’s About page had a really neat slideshow with slides talking about what the business did and the effect felt somewhat interactive which was great… but having ALL of the content on that page (EXCEPT for the heading “About” at the top) inside those images, meant that Google sees an empty page with one word on it ––not super useful for their SEO ranking, I’m afraid!Example 2:
When I first designed my Portfolio page many years ago, I designed the word “Portfolio” in a graphic (image) and used that as the title for that page, instead of using a Heading 1, ––which of course meant that Google saw no Heading 1 on that page & so it therefore had no title… –See? We all make mistakes like this! Live & learn.
How can that affect your SEO rank?
When someone clicks through and quickly bails because they couldn’t find what they wanted, they are leaving your site too quickly (ie: before whatever Google’s mystical, acceptable allotment of time is –and believe me, it’s MUCH, MUCH less time than you think).
If that scenario happens a lot, your “Bounce Rate” goes up. Over time if that Bounce Rate stays high for that page, then your SEO rank can be penalized –which is basically just being demoted in rank. With a high Bounce Rate for those key phrases, Google will assume that means the content on those pages is not actually relevant to the keyphrases you’re using (in those headings), and as a result will show that page to fewer and fewer people over time, which will bring you less traffic to that page.
Tips for styling your headings
I’ll leave you with a bit of design advice. (Finally! ––The “pretty part!)
When you pick the sizes and font styles for your headings, whether you’re on version 7.0 or 7.1 (or any other website builder platform) you need to be cognizant of the visual importance that both the size, color, and font choices give to each heading.
Basic design principles play into this!
Tip ❶
(Heading) SIZE MATTERS. 😏
I know; insert joke here. But it’s true –for design that is. 😂 Why?
something big will always look more important at a glance than something small, so your heading’s sizes need to follow the hierarchy with Heading 1 being larger than all the others, and so on down the line.
one of the easiest ways to create importance, because size can even override color in visual importance; for example
If your Heading 3 is a mustard yellow and your paragraph beneath that is black you might read the heading first because the yellow draws your attention
if Heading 2 is much larger than your Heading 3, you’ll see/read it first because it’s larger, ––then read the Heading 3 and then the paragraph beneath it, which is forcing the viewer to read the content in the right order.
Visual hierarchy example: encouraging readers to see the content in a certain order
Tip ❷
FONT CHOICES CAN HELP or HURT
beyond just what looks pretty, if you choose a font that is harder to read it will hurt the visual impact your headings make on the page
you’ll also want to aim for a font that will be a good contrast with your paragraph copy to make those headings stand out & not blend in, but not so much contrast that it’s illegible.
illegible fonts inadvertently remove the focus from the words themselves and place it inherently on the confusion or irritation formed when someone is trying & failing to read those words; the impact of the words themselves gets lost in this process.
Font choices affect the hierarchy & legibility of your content
Contrasting Colors: Light vs Dark + Bright vs Dull
Tip ❸
COLORS ARE IMPORTANT
they can drastically affect your content’s vibe much more than you realize!
bright colors usually take visual precedence over dark colors, simply because we notice bright colors before darker ones
use this to your advantage when you want to draw attention to or pull it from other places depending on the contrast between colors
all colors carry meaning with them, whether you want them to or not; for example, depending on the context & the design:
yellow can represent both high energy and cowardice
red is associated with stop (stop signs & red lights), passion, anger, and high energy, among other things
Color affects the order we read content & what we “want” to click on
