Mobile app version of vmapp.org
Login or Join
Becky754

: H1 vs H2 vs Other for website title/logo and SEO It is a common practice for front-end developers to put the website title or logo in H1 tag and the title in H2. But most of the time the

@Becky754

Posted in: #Heading #Seo

It is a common practice for front-end developers to put the website title or logo in H1 tag and the title in H2. But most of the time the title of the page/article is more important because it carries the content value. So my question is what is the best approach from semantic and SEO viewpoint. Examples:


logo - H1, title - H1
logo - H1, title - H2
logo - H2, title - H1
logo - other tag, title - H1


Provided other variants if you think they will have bigger effect.

10.09% popularity Vote Up Vote Down


Login to follow query

More posts by @Becky754

7 Comments

Sorted by latest first Latest Oldest Best

 

@Kaufman445

Your logo doesn't need to be nested in a heading -- a simple linked image in the header is enough. But both your site title and page/article title should be <h1>. This article is informative: The Truth About Multiple H1 Tags in the HTML5 Era.

10% popularity Vote Up Vote Down


 

@Alves908

This is a terrific question, due to the practices (and templates) that are out there.

Personally, I like to refer to "Outlining 101" logic, considering the following:

H1 is like a title (certainly you like to complement your HTML title) and there should be just one per page, just as a page has only one title

H2 is kind of like Roman Numerals in the outline: I., II., III., etc.

H3 would be the outline equivalent of A., B., C.

Often, the practical use of this logic is hard to enforce on a web page exactly -- there are so many incidental bits of info that just don't roll up into that hierarchy. However, if you sit down and try to break it down with that logic, I feel there is a benefit to the discipline.

10% popularity Vote Up Vote Down


 

@Smith883

What you're really looking for in your H1 tag is the page title or what makes this page unique. If you're using an image in it, you need to do it with a fallback method for degradability:

<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>

<h1><span>Unique Page Title</span></h1>


This way you can set an image to show up for the H1 (which people often misuse as the logo area) and still have good content inside it for people using degraded internet experiences. It also makes your SEO value happy.

10% popularity Vote Up Vote Down


 

@Yeniel560

Here is a good rationale: Your logo is an image, not a <h1>

Semantically, <h1> should be used for the page title, and the page title ought to be unique per page. Your logo or site name is not the page title (aside from perhaps the home page).

Your logo/site name should be in a plain div, perhaps with ID of 'heading'. Or, the <header> tag if using HTML5.

10% popularity Vote Up Vote Down


 

@Ogunnowo487

I usually don't put the logo or site title in an H1. The way I like to look at it is that each page is a document. That document is about a particular subject, as reflected in the page title and also the main heading. The website itself is just the publisher of the document. So, semantically, it's incorrect to use the site logo or name as the main heading of each page. Logos are displayed prominently to remind the user where they are and for branding purposes, but they're not actually part of the content or document.

I mean, when you watch a news story you might see a little news channel logo in the corner, but the news story isn't going to be titled "CNN" or "BBC News". The headline will be about the story, not the network publishing the story. Likewise, when you read a magazine, only the article title is used in the heading, not the name of the publication.

It's also semantically incorrect to use an H1 tag for the logo/site name and one for the document title. Headings define the hierarchical structure of the content on the page; using one for the site name and another for the document title is like saying, this page has 2 main sections: "mydomain.com" and "contact us".

10% popularity Vote Up Vote Down


 

@Alves908

IMO there should be only one H1 on the page. And the H1 should always before the H2 - to maintain a correct hierarchy of your content.

The logo is often repeated on every page and, like you say, on most pages the title is nearly always more important.

On the homepage I would consider using:
logo/title - H1[, title - H2]
Although, on your homepage the logo could well be your title.

However, on all subsequent pages I would go for:
logo - other tag, title - H1
Even having the logo as a background-image if appropriate.

10% popularity Vote Up Vote Down


 

@XinRu657

See Page #37 of Google's SEO Report Card document:


Most product main pages have an
opportunity to use one <h1> tag, like
the example above, but they're
currently only using other heading
tags (<h3> in this case) or larger
font styling. While styling your text
so it appears larger might achieve the
same visual presentation, it does not
provide the same semantic meaning to
the search engine that an <h1> tag
does. The product's name and/or a few
words about its features are great to
have in an <h1> tag for the product
main page.


Per Google's own analysis of its offerings, I would arrive at the conclusion that Google expects a unique, page-specific value to appear in an H1 (the illustration in the linked doc illustrates this).

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme