Heading Tags For SEO Guide: How to Properly Assign Tags To Font Styles For Web Design & SEO

Feb 14

Sometimes web designers not experienced in SEO will improperly assign header styles to your font styles. The mistake is in thinking that header tags (H1, H2, H3, H4, etc) are supposed to be a way to organize front styles rather than their actual purpose: to indicate the hierarchy of information on the web page.

In this article, we are going to learn how to properly assign font styles to the different heading tags when designing a website, or fixing a design to be better optimized for SEO. This should also be part of the checklist whenever you are publishing a new blog post.

What Are Heading Tags?

Heading tags are a piece of code you surround your text with. An example of this is the H1 tag. You would wrap your text in a H1 tag by doing the following: <h1>your text goes here</h1>

This heading tag is added in the back-end of your site, but would not show up in the front-end of your site. Instead it would do the following two things to your line of text:

Apply any styles to the text that you assigned to the heading type (for example, a lot of the times designers make H1 tags styled quite big like your title). Because of this, often you assign certain brand typography rules to certain tags so that it is easier to add different styled text to your site by just adding the heading tag.
Signal to Google that the text inside the tag is of a certain importance. For example, Google will look at all text inside a H1 tag as the main subject of a page’s content (similar to a page title). This is why it is important to not just think about your font styles when adding heading tags to your content, you also need to think about what it signals to Google. This is the part of the heading tag that has SEO implications.

What Are The SEO Implications of Each Heading Tag?

Google does care about usability on a blog post. Using a clear and different font styles for your titles, headings, and paragraphs not only makes it easier to read but also greatly benefits your search results! The easier your site is to use, the more people will want to click and keep clicking through. This goes beyond just choosing different typefaces or font weights though, you also want your headings to be TECHNICALLY different too.

To do this, you need to make sure you use different heading tags in a CONSISTENT manner when creating web pages or blog posts. Typically page titles are reserved for H1 tags (You should only have one of these bad boys on your page). Section titles for H2 tags, and so forth. Your body text should use the <p> tag (p stands for paragraph).

Page Title: H1 Tag (Make sure there is only one of these on the page)

Section Headers: H2 Tag

Sub-Section Header: H3 Tag

(Optional) Feature/Quote text: H4 Tag

Body Text: P Tag (Paragraph Tag)

Not only will using the right heading tags signal the right kind of information to Google, but it has been shown to improve traffic (because of this) when you do it properly!

According to a whitepaper by Search Metrics (2015), 80% of #1 ranked sites on Google used proper H1 tags. According to Moz’s most recent survey, proper tags is the third-most influential ranking factor group for search results.

Thus, it is highly important to make sure that you have one H1 tag/Title tag, and properly assigned H2-H6 tags on your web pages.

Why Should I Assign A Certain Font Style To a Heading Tag?

Assigning certain font styles to heading tags via CSS will drastically speed up the web design process. Think about designing a website in the same way you might want to quickly format a 100 page Word document. In word processors you can apply heading styles to your document, then all you need to do is change the font, size, colour, etc of that heading style and it will be automatically applied to the whole document. This is exactly how heading tags work on a website. Adding all your tags whenever you create content will mean that heading tag styles just automatically get assigned throughout the whole site and it saves so much time.

How To Assign Font Styles To Heading Tags

So how do I translate a branding guideline’s typography rules to my heading tags?

Well, the first and easiest way to do this is to inquire if your branding/web designer can tell you how they should be applied. This is generally not a default deliverable, but it’s always best to ask. They might not know themselves though, especially if your brand designer doesn’t have a background in web, and your web designer doesn’t have a background in SEO.

So let’s pretend that your web/branding designer can’t help you with this. You will then need to translate your own branding font guidelines into heading tag/web application rules. Here is a step-by-step process to starting that:

Start with your page titles. How do you want the titles of your pages to be styled on your website? Think about this in the context of blog titles, and also in the context of non-blog page titles. This should be the CSS style you apply to your H1 tags.

(Note: There is going to be a very good chance you don’t want the same font styles for every kind of title, especially between blog titles and non-blog page titles. In this instance, you need to choose the style that will show up the most on your site, so as to save you the most amount of time. Then you will still need to add the H1 tag to all page titles, but for the ones you want to be styled differently you would need to add a special CSS class tag to differentiate it, and apply the secondary style in that manner).
Next think about how you like the titles of different sections on your website to appear. There is a good chance that you will want this to be similar to your page title style, but maybe slightly smaller in font size. This will form your H2 tag style choices.
Do the same process for sub-sections on your website. This will most likely be like the H2 tag, but even smaller. I tend to style this in my title font, but at the same size as my body text. This will make up your H3 tag.
Think about how you want feature text, or quotes to be styled on your website. I usually assign this feature text the H4 tag. It’s usually my kind of out there font, and I can just apply a <H4> tag anytime I want the text to get a little crazy. The reason I save this all the way till H4, is because according to Google H1 is the most important tag, and H6 is the least important. So tags H4-H6 tend to have less influence in the way Google understands the information on your page, and it allows you to use the tags a bit more creatively rather than for the organization of information.

Other text style considerations:

You could assign a less important tag to button text; however I prefer to just add a ‘button’ CSS class to text when this is the case rather than using a heading tag for this purpose.
It is also worth noting that you can add a CSS style to links in you style sheet so that they are styled differently, but again this should have nothing to do with heading tags.

CSS Stylesheet Examples of Heading Tag Hierarchy Web Design:

Boop Digital – You can see this in action on this site

h1 {font-family: brandon-grotesque, sans-serif; font-weight: 900; font-style: normal; font-size: 52px;}

h2 {font-family: brandon-grotesque, sans-serif; font-weight: 900; font-style: normal; font-size: 34px;}

h3 {font-family: brandon-grotesque, sans-serif; font-weight: 700; font-style: normal; font-size: 34px;}

h4 {font-family: brandon-grotesque, sans-serif; font-weight: 700; font-style: normal; font-size: 16px;}

p {font-family: futura-pt, sans-serif; font-weight: 300; font-style: normal; font-size: 21px;}

Morgan’s Harbour – You can see this in action here

h1 {font-family: plantin, sans-serif; font-weight: 400; font-style: normal; font-size: 52px;}

h2 {font-family: plantin, sans-serif; font-weight: 400; font-style: normal; font-size: 34px;}

h3 {font-family: futura-pt, sans-serif; font-weight: 600; font-style: normal; font-size: 34px; text-transform: uppercase;}

h4 {font-family: plantin, sans-serif; font-weight: 400; font-style: normal; font-size: 16px; text-transform: uppercase;}

p {font-family: futura-pt, sans-serif; font-weight: 300; font-style: normal; font-size: 21px;}

How to Add a Heading Tag To Text On Your Website

In your text editor add the heading tag you want: H1, H2, H3, H4, H5, or H6 inside the brackets at the beginning of your text, and add a closing bracket at the end of your text like this:

Sometimes your web platform automatically assigns certain text elements in their layouts a heading tag. To check which heading tag is currently being used on a line of text on your site, follow these instructions:

Right-click in your Google Chrome browser and choose the menu option “Google Inspect.” This will open up a panel of developer tools.
In the developer tools panel there is an icon in the top left corner that shows a cursor icon. Click that. This allows you to select any element on the web page and the code for that element will show up on the right side panel.
Select the text you want to link to. In the code you are looking for is the header tag.

How to Add a CSS Style to A Heading Tag On Your Website

WordPress: You can add custom CSS usually through the customize theme menu option

Squarespace Instructions

Showit Instructions

Wix Instructions

The Most Important Lesson:

Each line of text on your web page should be assigned a header style based on the hierarchy of information it represents. If you assign a line of text to a header tag, but the style of font that is automatically applied does not match how you want the text to look in that particular case then you should do one of the following:

If you think that in almost all instances of using that header style you will want a different style then change the default font styling of that header tag.
If this is a scenario where you want a different style, but you won’t want this different style for the majority of cases, then add a custom CSS class to the header tag to represent this use case. Then write a CSS rule so that all header tags with that class added are styled in the way you want.

It is important to clarify with your brand designer and your web designer what your font styles should look like for each of these heading tags with SEO in mind. Although you might use your font a certain way as the ‘title’ of a print document, you might not want that same styling applied to every H1 tag on your site. You also don’t want to start choosing the wrong type of header tag for the line of text you are editing just because you like the way it is styled better. This will end up making for an extremely confusing page of code for search engines to try to understand.

Lauren Kyle