5

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>
|improve this question
  • 1
    What audit shows two h1 tags? – John Conde♦ Nov 2 '15 at 23:25
  • This does not look like well-formed, validated HTML. Please use the W3C Markup Validation Service first, before posting markup-related questions. – user57132 Nov 3 '15 at 3:02
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>
|improve this answer
  • 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 3 '15 at 0:25
  • Do search engines index text contained in SVG elements? – MrWhite Nov 3 '15 at 0: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 Nov 3 '15 at 1:06
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.

|improve this answer
  • 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 3: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 4:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.