Headings are used to structure the contents of a document by specifying a hierarchy of sections. They help creating the
document outline for user agents. It’s also helpful to know that H1 heading is one of the most talked and controversial subject among
search engine optimization professionals. And that’s for a good reason; the lack of communication with webmasters from search engines leaves room for intense debates. Add accessibility issues next to SEO and you will see why such debates will never end.
Before going into what SEOs, programmers, designers and copywriters should know about HTML headings, let’s go through some of the most common questions about them. Keep not that for the rest of the article I will mostly refer to H1 and HTML headings interchangeably.
Tricky questions about the H1 tag
First thing everybody needs to know (before thinking SEO) is that headings play a huge role into the
accessibility of your website. Screen readers are looking for H1 to H6 tag to rapidly “jump” blind people within the section of a page. They can “skim” a page by pressing the “H” key to jump/hear from one heading to another. Considering this argument only, you should pay more attention to your document outline and headings.
Here are few interesting questions:
1. Will multiple H1 hurt my rankings or is it considered a spam technique?
2. Is it ok to have the same H1 on each page of the website?
3. Is it H1 image replacement in the logo good/bad/spam?
4. Should H1 be the same with <TITLE> tag?
5. Is there any correlation between H1 and better rankings?
Here’s what I think:
1. Will multiple H1′s hurt my rankings or are they considered spam?
Will multiple H1 tags hurt my ranking?
Most likely no. Multiple H1s are acceptable and if you think logically, there are valid reasons for multiple H1 on the same page. For example, WordPress assigns H1 to all post title on the home page (we actually modified the theme to go with H2, if you look at our blog home page). This myth has also been debunked by Matt Cutts, the head of web spam at Google, in
this video.
Keep in mind thou that multiple H1 could trigger spam flags, as reported
here.
Contradictory enough, Bing
recommends that each page should contain a single H1 tag.
2. Is it ok to have the same H1 on each page of the website?
Same H1 on each page, good or bad?
Yes and No. Again, if you look at the default installation of WordPress you will notice that WP sets the same H1 on each page (usually, that H1 will be the blog name). This can be good or bad, depending on your website. I used to wrap the same, most important keyword in an H1 on each page to hint Google about what’s the main theme of the website (Internet Marketing Services). However, read question #5 to understand why we don’t mind too much about same H1 on the each page of the site.
3. Is it H1 image replacement in the logo considered spam. Is it good or is it bad?
W3C uses H1 image replacement too
No, it is definitely not spam as long as you don’t abuse this technique with keyword stuffing or other crazy stuff. W3C uses image replacement, SEOmoz used it before their 2011 redesign, A List Apartdoes it too and Smashing Magazine also.
Funny, there’s even a
website where you can vote your opinion on this subject.
Bing suggests in the same document mentioned at questions #1 that each heading should contain only text. So, Bing doesn’t like image replacement? And since there seems to be a very strong
similarity between Google and Bing algorithms, would this mean you should not use H1 image replacement for Google?
I wouldn’t worry about it, however I tend not to recommend putting logo images with alt text under the H1 heading. I would rather put a text tagline below/above the logo and make it H1, rather than image replacement, depending on the website.
I am not sure if H1 image replacement is good or not from an accessibility point of view. Any light on this subject would be appreciated.
4. Should H1 be the same with <TITLE> tag?
There’s no penalty for doing so, but the answer is no, it shouldn’t. Search engines tend to give less weight to content which is not directly visible in the browser or SERPs, because such content can and is abused/spammed. You can’t hide the TITLE element on the title bar of the browsers, but you can do that with H1, right? Thinking white hat (where you don’t actually hide H1 content) why would you repeat the same content twice?
The HTML specs specify that, authors should use the TITLE element to identify the contents of a document and that the TITLE element is not considered part of the flow of text. Hence, TITLE and H1 are used in different contexts. TITLE is used to identify the contents of a document, while H1 describes the section of information that it introduces.
5. Is there any correlation between H1 and better rankings?
Yes, but not as much as you think of. Lots of SEO think that H1 has a great impact in rankings, but SEOmoz research
claims that there is little positive influence on rankings, as compared to using large font. But, wait! It’s not zero, and if it’s positive then you should take it into consideration.
However, one thing is for sure: changing the content of the heading tags is changing the document outline and structure. And that’s important.
Keyword Confidence with & w/o H1
The tables above are displaying what Bing is “thinking” about the relevance of the term
seo services on our home page. The left hand had “
seo services” in the H1 tag, while the one on the right does not contain the term inside the H1 tag. To get this “secret” keyword confidence report read our article on
Ad Intelligence.
Also, here’s an interesting statement from one of the recent Google Webmaster Central
blog post:
“One way Google’s algorithms determine the context of content on a page is by looking at the page’s headings. The way semantic markup is used throughout a site, including h1, h2, and h3 tags, helps us to understand the priorities of a site’s content”
What designers should know about HTML headings
- Don’t embed headings into
images
- The look and feel of the headings can be altered using CSS; if your desired font is not browser standard you should use image replacement techniques such as sFIR to accomplish your goals
- Heading levels (1-6) should be differ visually one from each other, at least by font size, if not by color and letter spacing too
- Think how your design will be coded in HTML so that the first heading in the code will be H1, then H2, then H3 and so on. It’s interesting to note that
Web Content Accessibility Guidelines 2.0 WCAG 2.0 accepts (and even suggests) using H2 before H1 for 3 column layouts. What’s even more surprisingly is that they also suggested that headings can be used to display navigation elements.
- Do not use inline styles, use CSS include files (for page load speed)
- You should use headings consistently throughout your designed page (consistent design)
What SEOs should know about H1 and other HTML heading tags?
- Using the appropriate HTML heading order helps users get a sense of the hierarchy of information on the page. The appropriate use of H1-H3 heading tags also allows users of assistive technologies to understand the hierarchy of information. (
source)
- H1 should be the first heading on the page.
- Use the main keyword of the page in H1
- If you chose to have the same H1 on each page of the website, use the single most important keyword for your business inside the H1
- You can have multiple headings on the same page, even H1 if it makes sense (see question #1 above)
- It’s not advisable to skip heading levels (i.e. H1 to H3), but you can go from H2 to H3 then H3 again, then back to H2
- Google will
always focus on content relevance rather than the HTML standards compliance or the technical knowledge of the programmer, designer or webmaster who wrote the code.
- Anything that visually looks like a heading should be marked up as a real HMTL heading because it is more important to mark up headings as headings than having a perfect heading hierarchy.
What should programmers know about H1-H6 tags
- Every page within your site should have at least one heading, preferably the H1 tag
- Default WordPress themes (and possibly other blogging platform) are big time offenders: multiple H1 tags on the front page, H2 in sidebars, etc
- If you’re running a WP blog, the home page needs a different heading structure than the post page –
read this article to understand why
- Use H1 to H6 to mark up the text for humans not for search engine bots
- Generally, it is not a good idea to hide (i.e. -9999px outside the screen, or display:none) anything under heading tags. This may trigger a spam flag or a human evaluation of your website and you don’t want that ;)
What should copywriters know about H1-H6 tags
- All other headings (except H1) are subheadings; they should thematically connected with the previous level heading
- Your H1 should contain your main keyword on that page, or site if you go with a site wide H1, it should be the same on each page
- H1 should be similar but not the same as the page <TITLE>
- Headings should be grammatically correct, logical, easy to scan and related to the text to follow
- Headings are one of the most important things to consider for
conversion rate optimization. They should contain your targeted keyword but also entice visitors to take action on that page. There should be a tradeoff between CRO and SEO
Hopefully, you are now fully convinced that you have to use headings properly on each page of the website, if not for SEO purposes but at least for accessibility concerns. One of the main reasons for using them, apart from being good coding practice, heading tags are for screen readers, and it is very important for that reason alone.
If you were patient enough to read this entire article, I would like to have your thoughts on this controversial subject.
Pitstop Media offers ROI focused SEO services. If you need a SEO company to help you rank #1 please contact us for a free, no obligation quote. We’ve helped companies rank first on Google in short periods of time, for highly competitive terms.
Rating: 9.4/10 (37 votes cast)
Rating: +15 (from 15 votes)
HTML Headings and SEO - The Complete HTML Reference Guide for SEO, 9.4 out of 10 based on 37ratings
Traian is the founder and Director of Search Marketing at Pitstop Media Inc. He has more than 10 years experience in helping small and medium businesses generate and convert organic traffic from search engines. Most of his time is dedicated to growing the company and spending time with the family. Connect with Traian on
Google+
Candace Dellos said:
Jul 27, 11 at 9:53 amWatpads said:
Nov 07, 11 at 11:24 amTraiaN said:
Nov 10, 11 at 4:28 pmRakel O'Add said:
Nov 12, 11 at 8:03 amTraiaN said:
Nov 14, 11 at 10:42 ammystaku said:
Dec 19, 11 at 10:50 pmAli said:
Jan 15, 12 at 3:19 pmvery tanks for your tutorial :)
regards
ancajasjc said:
Mar 12, 12 at 1:07 amSlots said:
Mar 12, 12 at 11:23 amTraiaN said:
Mar 12, 12 at 11:30 amknow/care if a page was generated with WordPress or is a static html. As long as the H1 tag is pertinent and not spammy, you should be fine.Yaeger Design said:
Apr 04, 12 at 2:26 pmAndrew Taylor said:
Jul 22, 12 at 12:54 pmTraiaN said:
Jul 22, 12 at 4:13 pmIf the volume is low, you could rank for that term is you add Australia at the end of the TITLE tag. I would not use the word Australia in the H1 heading, but I would probably use it in the copy of the product.
Janardhanprasad DVS said:
Jul 25, 12 at 8:32 amJanardhanprasad DVS
Traian Neacsu said:
Jul 25, 12 at 10:36 amMatras Kopen said:
Aug 08, 12 at 2:30 amBruce Wampler said:
Sep 03, 12 at 1:13 pmSteven said:
Sep 30, 12 at 11:36 pmHow To Write SEO Friendly Blog Headline said:
Oct 03, 12 at 6:30 amStefan said:
Dec 04, 12 at 12:37 amTraian Neacsu said:
Dec 04, 12 at 1:27 pmTom said:
Dec 19, 12 at 2:35 pmSunita said:
Dec 27, 12 at 11:28 amKamal Yusuf said:
Jan 29, 13 at 9:23 amRoni Mmi said:
Feb 07, 13 at 12:45 amAlfredo said:
Feb 13, 13 at 1:54 pmTraian Neacsu said:
Feb 18, 13 at 3:34 pmRex said:
Feb 22, 13 at 5:08 amTraian Neacsu said:
Feb 25, 13 at 10:47 amV. Antonio said:
Feb 28, 13 at 7:58 pmh1 {
padding-top: 100px;
width: 200px;
height: 0;
overflow: hidden;
background: transparent url(‘yourLovelyLogo.png’) 0 0 no-repeat;
}
So long as the text in the logo image and the text within the H1 matches, I don’t see an issue with this method. Your thoughts or opinion?
Traian Neacsu said:
Feb 28, 13 at 9:47 pmNancy said:
Mar 09, 13 at 3:16 pmh2 fonts. I have been struggling with using the same H1 title on each page of within category or if I should make the H1 title on each page unique. Still a little torn. I noticed that top ranking competitors sites use a unique h1 for each sub category.
Eoghan Wyndham said:
Mar 19, 13 at 4:43 pmTraian Neacsu said:
Mar 19, 13 at 8:52 pmNugraha said:
Apr 04, 13 at 6:42 am