H1 Tag on Logo in Header

Question

So I have a theme that has my Logo as an H1. The logo itself is an SVG file. I am curious if this is bad practice for SEO purposes. My audit shows 2 H1 tags on my pages due to this and I am curious if I should take out the H1 tag from my logo in my header now. I feel like it wouldn't make too much sense to leave it there since my logo is not text based.

Here is how the code sits:

<h1 class="logo-collapse">
                        <a href="https://example.com/" title="My Brand Name" class="logo">
                            <img src="https://example.com/path/to/logo/logo.svg" alt="My Brand Name" width="150"height="55">
                        </a>
                    </h1>

This does not look like well-formed, validated HTML. Please use the W3C Markup Validation Service first, before posting markup-related questions. — , Nov 03 '15 at 03:02

score 1 · Answer 1 · answered Nov 02 '15 at 23:18

1

The H1 tag needs to contain a phrase of some sorts that directly indicates to the user in text what the webpage is about.

Without this text, robots will have a hard time understanding the page, and as a result, it won't be indexed properly. In fact, it might not be indexed at all depending on the search engine you expect to have the page indexed with if any.

What I would do is have the logo image separate from H1, or if you need the text as part of the logo, you can use CSS.

Here's an example on a valid use of H1.

<h1>Some corporation</h1>
<a href="logoinfo.htm">
<img src="someimage.jpg" width=100 height=100>
</a>
<p>This is a page about some corporation.</p>

answered Nov 02 '15 at 23:18

Mike -- No longer here

13,610
4
28
60

I would add only as a warning for future users that only one h1 tag should ever be used and that is should be a significant textual conversational clue as to what the page is about. The h1 tag, more so than any other tag, is a semantics clue that is weighted relatively heavily even though it will not match directly in the SERP snippet. – closetnoc Nov 03 '15 at 00:25
Do search engines index text contained in SVG elements? – MrWhite Nov 03 '15 at 00:26
Well the way the OP presented his coding suggests to me that he's trying to make the header as an image (aka image tag inside h1) – Mike -- No longer here Nov 03 '15 at 01:06

score 1 · Answer 2 · answered Jan 26 '16 at 19:39

1

The H1 tag for logo is a valid option only if you want to make the logo of some text otherwise you can simply change the css and seperate the h1 tag from it and put DIV tag in it so the alignment is not hampered.

for example:

<div class="logo-collapse">
   <a href="https://example.com/" title="My Brand Name" class="logo">
       <img src="https://example.com/path/to/logo/logo.svg" alt="My Brand Name" width="150"height="55">
   </a>
</div>

as you logo is a svg file it has nothing to do with a H1 tag you can change it.

answered Jan 26 '16 at 19:39

Pushpreet Singh Sethi

11
1

You can use a header tag instead of a div here. Then your H1 goes inside an article tag. The idea with the H1 is to be the first heading of the article. Theoretically, you can have an H1 inside the header, the article, and the footer, but this confuses screen readers and probably search crawlers, so it is best to use it only in the article. – Simon White Jan 27 '16 at 03:43
Basically my opinion was this only, to avoid such confusions we should use other tag instead of H1. @SimonWhite – Pushpreet Singh Sethi Jan 28 '16 at 04:15

H1 Tag on Logo in Header

2 Answers2