What is an H1 tag?
It’s an HTML element that’s usually used to identify the title of an article.
But from an SEO perspective, it’s much more than that, and the value behind an H1 tag is changing.
What We’ll Cover:
- What an H1 tag is
- How they differ from title tags
- How H1s have changed
- H1 markup
- How to find the H1 of a page
- Styling
- H1 tags and SEO
- How to optimize for SEO
- How to optimize for users
- Best practices
- H1 Tag FAQs
The H1 tag is so much more than just a title.
Some digital marketers have noticed significant ranking improvements when they optimize an H1 tag and do nothing else on the page, showing just how seriously the Google search algorithm takes the tag.
If you want to ensure that your business gets maximum exposure online, then you need to know how to properly use the tag in your content marketing efforts.
What Is an H1 Tag?
Let’s start with the technicalities.
In the simplest terms, an H1 tag is a defined HTML element that stands for HyperText Markup Language.
HTML is the language interpreted by web browsers like Google Chrome and Firefox to output certain formatting on a web page. In this case, the H1 is usually presented in large, bold letters as a header.
There are other header tags as well: H2, H3, H4, H5 and even H6.
What Is an H1 Tag?
Historically, the size of the lettering decreased as the number in the header tag increased. In other words, the font size in H2 was smaller than the font size in H1. The font size in H3 was smaller than the font size in H2, and so on. As HTML has evolved over time, that’s no longer necessarily the case and styles can be more flexible.
However, it’s still often the case that H1 lettering is the largest of the lot.
That’s why this particular tag is so frequently used as the title of a page.
Are H1 Tags the Same Thing as Title Tags?
Not exactly.
While H1’s are commonly used to title a page, there’s also an HTML title tag, completely independent of the header tags.
So, technically speaking, H1’s aren’t required to be used as a page’s title.
However, it’s generally considered good h1 tag SEO to make your title tag the same as your H1 tag plus the title of your website.
For example, if the title of your article is “Guide to African Safaris” and the title of your website is “World Travelers Blog,” then your title tag should be something like “Guide to African Safaris – World Travelers Blog.”
As you can see, the article title and the website title are separated by a dash. You’ll often see a pipe (“|”) instead of a dash to separate the two titles.
In fact, if you do a search on just about any popular keyword, you’ll likely see Page 1 of the search results populated with titles in that format. Take a look at the search results for “LCD TV Reviews” for some examples.
Distinguishing Title Tag and H1 Tag via Google SERP Examples
Keep in mind, it’s the contents of the title tag that appear in the search results, not the contents of the H1 tag. On the page, the H1 indicates to a user what the content will be about, making it an essential tool for user experience.
We’ll delve into that subject more in another section.
How the H1 Tag Has Changed Over the Years
In the early 2000’s (seems like a lifetime ago, right?), H1 inclusion was practically mandatory for high SEO ranking. Rules like limiting H1 tags to one per piece of content have gone by the wayside.
Now, Google insiders have said themselves that omitting or stacking up on H1s isn’t the be-all-end-all. What’s important is that it serves your purpose of generating a seamless and helpful user experience.
Granted, they help delineate page structure so the user doesn’t get confused. But if they’re not helpful, don’t feel like you have to abide by antiquated SEO rules.
H1 Markup
As we’ve seen, the H1 tag is a markup in an HTML document. But what is markup, exactly?
It’s an element within an HTML document that’s interpreted rather than displayed, meaning it’s a bit of code. For example, an H1 tag looks like this in HTML: <h1>
When your web browser encounters that text string, it knows that it’s markup because it’s surrounded by the “less-than” and “more-than” symbol. As a result, it doesn’t output the string “<h1>” to your screen.
Instead, your browser knows that the string following it should be formatted in a specific way.
If your browser sees “<h1>A Guide to African Safaris”, it will format the string “A Guide to African Safaris.”
How does it format the string? Usually in large lettering, but that’s really up to the styling on your page. We’ll cover styling in just a bit.
You also might be wondering how the browser knows when to stop formatting the string. In other words, when does the formatted text end?
Your browser looks for an ending tag to determine where the formatted text stops. The ending tag is nearly identical to the markup tag, except that it contains a backslash, indicating that the formatting has ended: </h>.”
In the example above, the whole string would look like this: “<h1>A Guide to African Safaris</h1>”.
That “</h1>” is a closing tag. It tells your browser when to stop formatting the text.
If the HTML document author forgot to include that closing tag, the whole page would appear in a large font since your browser doesn’t know where to end the H1 formatting.
H1 vs. h1: Is There Any Difference?
You might have noticed that the tag is called H1 and h1 interchangeably. That’s perfectly acceptable because HTML isn’t case insensitive. Your browser can’t interpret the difference between a capital H and a lower case h.
That means <h1> is the same as <H1>. You can feel free to use either case interchangeably on your website.
How to Find the H1 Tag for a Page
Next, let’s take a look at the tag in action. Head over to an article entitled “How to Use Amazon Product Ads to Drive Sales.”
View the source of that article. If you aren’t familiar with how to view the source, you can usually do it by right-clicking on the article and selecting “View page source” from the context menu that appears.
A new window will open in another tab. Take a look at the URL bar and you’ll see the exact same URL you just clicked on but with “view-source:” in front of it.
First, pay attention to the HTML document’s raw source. You’ll see plenty of tags in it.
Remember, tags begin with the “less-than” sign (“<”). Look on the left-hand side of the page and you’ll notice a huge number of tags. Each one has a different function to make the page appear correctly.
What is H1 in HTML?
To make things easy when looking for the H1, just search for it.
Type Control-F (for “find”) on your keyboard to bring up a search bar.
In that search bar, enter “<h1>”. The browser will take you to the location of the tag. It should be highlighted
As you can clearly see, the text that follows the tag is the title of the article: How to use Amazon Product Ads to Drive Sales.
If you use the search bar to search for the title tag, you’ll see that the text in the title tag is the same as the text in the H1 tag plus the name of the website (“Ignite Visibility”).
What is H1 in HTML
Styling
As we’ve seen, tag formatting varies from website to website.
Why? Because each site has its own, unique stylesheet.
If you’re unfamiliar with the concept of a stylesheet, it’s a bit of code that tells browsers how to format text on a web page.
For example, one website might style the tag to display in 24-point, bold font that’s colored orange. Another site might style it to display in 26-point black italics.
In some cases, the styling for the tag is embedded within the web page itself. It’s usually at the top, in the <head> section.
However, many sites externalize the styling, meaning they reference a stylesheet file that exists independent of the HTML document.
That file is often named style.css. The “.css” extension stands for “cascading stylesheet.”
By manipulating the .css directly, you have the ability to dictate how your H1 looks on your website including the font family, size, color, line spacing, and margins.
If you’re using WordPress for your content management system (CMS) of choice, then you’re probably already using a theme. In that case, your theme designer has set up an H1 style and you likely don’t need to do anything.
H1 Tags for SEO
How important are H1 tag SEO? In just a couple of words, it’s inconclusive..
Search Engine Land says flatly “that the H1 tag holds the most SEO weight out of all the headings.”
Despite this importance, many content marketers don’t use H1 tags. (In a 2020 Moz experiment, changing H2s to H1s made no marked difference in SEO performance.)
Moz’s 2015 survey of search engine ranking factors lists “Page-Level Keyword and Content-Based Metrics” as the third most important ranking factor. That large category includes “keyword term/phrase in particular parts of the HTML code on the page (title element, H1s, alt attributes, etc).” However, this data is outdated. Now, user experience is more important, whichever white-hat way you choose to achieve it.
How Do You Optimize an H1?
What does it mean to “optimize” an H1?
In a nutshell, it means populating the tag with content that’s guaranteed to get you maximum exposure in the search engine results pages (SERPs).
There’s a lot that goes into making that happen, though.
For starters, make sure that your tag includes the keyword you’re targeting. That means if you want your article to show up at the top of the results when people search for “women’s handbags,” then you should include the phrase “women’s handbags” in your tag.
Keep in mind: it’s also important that you deliver in terms of your content.
In other words, if “women’s handbags” is in your H1, then your content had better be all about women’s handbags. Google will notice if it’s not and the page won’t rank well.
Does it matter where in your tag the keyword appears? That’s a matter of some debate.
Some people think it’s best to have it right at the beginning. Unless those folks have seen the code that’s used to rank web pages, though, they’re just guessing or basing their analysis on personal experiences.
For practical purposes, none of the commoners outside of the Google engineering team knows exactly what goes into ranking a website.
However, Google has made it abundantly clear that there are two magic words to improving your SEO rankings: user experience.
That means that your tag should accurately reflect the contents of your web page.
Rather than guessing where you should put the keyword in your H1 tag, you should instead make sure that its contents include the keyword to appeal to your target audience (plus, they’ll know what to expect).
User Optimization
Modern-day SEO is really not about search engine optimization. It’s about user optimization.
That means Google is far more likely to show you some love if you make your website easy for visitors to navigate. If you produce amazing, original content that answers searcher’s questions, gives them what they’re looking for, and keeps them coming back for more, you can be sure that Google will reward you with improved search rankings.
On the other hand, if you opt for a strictly technical route and try to manipulate the search engines to give your site a good rank without regard for user experience, you can expect to fall flat on your face.
SEO isn’t a numbers game or a formula. It’s an art, designed to give users exactly what they’re looking for.
When it comes to optimizing your site, page, and H1 tag, follow the #1 rule of journalism: give the people what they want.
Best Practices:
1. Use a Single H1
It’s important to use only a single H1 tag per page.
Although you can use multiple H1s, it’s frowned upon in digital marketing circles. And for good reason: it causes clutter and confusion for both the user and the search engine algorithms.
Adding multiple tags dilutes the SEO value of each one.
If you have multiple H1 tags, how will Google determine which one has the target keyword? How will your users know what they’re supposed to take away?
Instead of causing confusion, stick with a single tag. Even the longest of longtails should fit into a single tag.
If you have an article with multiple subheaders, use the H2 tag for each of the subheaders.
Google won’t have a problem with multiple H2 tags. In fact, Google expects multiple H2 tags in great content.
2. Try to Limit Your Tag to 20-70 Characters
As we’ve seen, you should be able to fit even longtail keywords into a single H1 tag. If possible, though, try to limit its length to 20-70 characters.
Why? For a couple of reasons.
First, recall that you’re trying to create a positive user experience. If you keep your title brief, your visitors will appreciate it.
Second, remember that you also want your H1 and title tags to match. So if you have a very lengthy H1 tag, then you’ll likely have an even longer title tag as it usually contains the website name as well.
And remember: the title tag is what gets displayed in the search results.
If you have a really long title tag, you can expect that Google won’t display the whole thing in the SERPs. Instead, it will shorten the title and add ellipsis (“…”) to the end of the shortened version.
Clearly, if the information is getting cut off in search results, it isn’t getting to people in your target market who are looking for info related to your business.
That’s why, whenever possible, you should limit your tag length to 20-70 characters.
You’ll find that some high-profile websites max out titles at 70 characters. That’s for the reasons described here.
3. Make a Statement
Remember, your styling is likely already established by whatever WordPress theme you’re using. You probably don’t need to change anything.
But your site might be the exception to that rule.
That’s why you should check the styling of your tags to see if you need to make changes.
You can either look at an existing article that you’ve already published or create a test article and preview it in Draft mode.
When you’re looking at your tag, ask yourself the following questions:
- Does the text stand out?
- Is it the largest text on the page?
- Does the design fall in line with the overall look and feel of the page?
- Is there plenty of whitespace before and after it so that text isn’t running together?
As you evaluate the design, put yourself in the shoes of a visitor to your site. Ask if it would look great to somebody in your target market.
Let’s take another look at the “How to Use Amazon Product Ads to Drive Sales” article.
What do you think? Does the title stand out?
Poor H1 Tag Example
It’s safe to say that the title does stand out. It’s presented in white text with a contrasting but theme-compliant background.
In fact, it’s almost impossible to miss it.
Those subheaders you see just below it are using H2 tags, which provide clear emphasis to each section without detracting from the H1 tag.
4. Avoid Keyword Stuffing
If you use the keyword in your H1 tag (and, as we’ve seen, you should), then make sure you avoid stuffing it throughout the article.
That’s because Google hates keyword-stuffing, and it’s especially not recommended for your h1 tag seo.
In the old days of SEO, online marketers ranked a web page by keyword-stuffing. They just repeated the keyword as much as possible throughout the content so that Google would think it was relevant.
Those days are long gone.
That doesn’t mean you shouldn’t use the keyword in your content at all, though. In fact, you should use it as much as possible. Just make it look natural.
If you try to force keywords into content where they don’t belong, you’ll provide a lousy user experience. Don’t expect a good rank.
5. Address User Intent
Thus far, we’ve gone over user experience. Now, it’s time to look at user intent.
User intent answers this very simple question: “What does the user expect to see when he or she clicks on my article in the search results?”
Your H1 tag (and therefore your title tag) should answer that question.
Let’s take a look at an example.
Suppose a user is looking for a great overview of on-page SEO optimization. However, in this case, the user is aware that Google has gone through a number of revisions over the years. She wants something that’s more recent.
So she Googles “on-page SEO checklist 2020.” And lo and behold, one of our own articles emerges on Page 1 of the SERPs.
H1 tags play a big part in what appears on the search results page
Now ask yourself this question: does the title display in the search results address the user’s intent?
First, it offers a “complete” checklist for on-page SEO. That tells the user that the article is a thorough analysis of the tool.
Next, it also includes “2020”, telling the user that it’s an up-to-date guide.
So yes, the title effectively addresses user intent as does the H1 tag in the article itself.
User intent is pretty major for Google today and can play a big part in bounce rate, which is a ranking signal.
That was confirmed by Steven Levy, who wrote a book about his experience at Google headquarters.
According to Google engineers, if a user doesn’t return to search results quickly after clicking on a link, then that’s a good indication that he or she is happy with the result. In that case, the bounce rate is low.
On the other hand, if a user jumps right back to search results after clicking on a link, then the user didn’t find what he or she was looking for. That means Google will likely demote that search result for the keyword.
That’s why it’s important that you align your H1 tag, your title, and your content with your keyword. Then, people will click on your link in the SERPs and hang around for a while.
You’ll provide a much more positive user experience and enjoy a higher rank.
H1 Tag FAQ:
1. What Is the Difference Between an H1 Tag and a Header Tag?
Nothing.
The terms “h1 tag” and “header tag” can be used interchangeably.
That’s because the h1 tag is usually considered the “header” (or title) of the content.
Unfortunately, HTML also has a <head> element which adds even more confusion into the issue. The h1 or header tag doesn’t go in the <head> section. It stays within the <body> section.
The title tag, on the other hand, which is usually the same thing as the h1 tag, does go into the <head> section.
2. How Can I Manually Verify If an H1 Tag Exists on a Web Page?
Right-click on the web page when you’re viewing it in a browser. Then, select “View page source” or “View source” from the context menu that appears.
A new tab will open showing you the source of the web page. That’s the raw HTML.
Hit Ctrl-F to find text. In the text box that appears, enter “<h1”. It’s not case sensitive by default so you don’t have to worry about missing “H1” tags if you enter “<h1”.
Once you’ve entered that text, the search should take you to the first occurrence of an h1 tag. If it can’t find anything, then no h1 tag exists on the page.
3. Does the H1 Tag Have to Be at the Top of the Page?
For H1 tag SEO purposes, yes.
Think about it: the h1 tag is usually the title of the web page. How often do you see a title that’s not at the top of a document you’re reading?
That wouldn’t make any sense.
Plus, Google is expecting the H1 tag at the top. It’s best not to disappoint Google if you want to earn a good rank.
If there’s text that you want to stand out lower in the document, use the subheader tags, such as h2, h3, and h4.
4. Does the Styling of the H1 Tag Matter for SEO Purposes?
Probably not.
The styling of the tag (its color, size, font and spacing) is intended to appeal to a human audience. Google usually won’t “see” it the way that humans see it.
All Google will see is some text between <h1>.
There’s a caveat, though. If your h1 tag styling makes the text difficult to read on a mobile platform, Googlebot might pick up on that. Then, your page will suffer in rank because it’s considered mobile-hostile.
Be sure to run your page through Google’s mobile-friendly test to make sure it looks great on a smartphone, tablet, or phablet.
5. Does the H1 Have to Match the Title Tag?
No, they do not. HTML reads them as two separate entities, though they both serve the same purpose as “titles” explaining what your page is about.
Title tags do not appear on the actual webpage and your H1 does — it is good SEO practice to keep the title tag and H1 as close to the same when possible.
6. What are Some Common H1 Mistakes?
If you’re going to focus on the H1 tag in your content endeavors, try not to make these key mistakes:
- Excluding an H1 tag when it’s necessary. (Don’t exclude an H1 tag if it helps your audience understand what your content is about!)
- Sticking to a single H1 tag when you feel like you need more. (Don’t feel like you have to stick to just 1 per piece. If you think you need more, go for it.)
- Focusing solely on the algorithm. (Prioritize your users’ experiences, not the search engine algorithm’s.)
- Duplicating H1 tags. (If it’s not necessary, why go overboard?)
Wrapping Up
Now you know what an H1 tag is and how you can use it to improve your rank. Make it a point today to go over your content and find areas of improvement in your tags so that you can attract more people to your website. But most of all, prioritize user experience and search intent, because that’s the crux of this whole SEO thing, anyway!
