This has been asked several times on varous stack's and in various forms, there is no right or wrong answer because Google does understand the text-indent
usage when using background
, however...
It is widely agreed that using a proper image using an ALT tag is the better way of keeping your code more semantic and having better accessibility. For example this answer on Stack Overflow back in 2009 has the most upvotes (170+) for the same question:
SOURCE
You're missing the option:
<h1>
<a href="http://stackoverflow.com">
<img src="logo.png" alt="Stack Overflow" />
</a>
</h1>
Matt Cutts from Google also discussed about this during one of his Q&A videos on YouTube and basically said its better to use ALT tag and avoid using text-indent.
SOURCE
YouTube Transcript:
Okay Richard M from Australia asks, "if you have a company logo on
your site what is the best way to include the text to the logo for SEO
purposes, all tags CSS hiding or does it matter"
Yes it does matter it's much better use in all tag them to use like
I'm hiding some CSS, you know nine thousand pixel over to the that's
what the hell tag was more or less built for I you know are all
attribute you know how everyone a fair up but yeah go ahead in years
old and that's a fantastic way to say you know this is the text that
in my logo search engines can read that and use that.
I would not you know hide it using CSS or anything like that when is a
perfectly valid perfectly simple way to do it it does the job just
fine.
text-indent for PNG Sprites, not SEO
However, with all this said many people, many websites still continue to use text-indent, mostly because of the use of PNG sprites for page compression, for example Pro Webmasters uses text-indent.
Avoid using text-indent with headers, why? because...
So, while I won't say using text-indent should be avoided, I do agree it should be avoided when using header tag, this is because you shouldn't really associate your logo with a header, its not a header... its your logo, your page titles should be compiled with real text based headers.
Repeating the same god damn h1's
Using the format h1 > a > img
will likely repeat on all of your pages, and this brings issues into should you be using multiple h1's on the page...? that's why many top companies nowadays just use a > img
because, its the most correct method...
Using h1 > a > img
or h1 > a
with text-indent
is purely because your attempting to rank higher for those keywords, spamming the same phrase on every single page isn't going to make you rank any better if its a
vs h1
, it's one of several hundred signals that Google uses, most old, dated SEO advice will tell you h1 is the most important, its simply not... plain text with no markup can rank just as well, with other factoring signals.
Ideally Code
A more up to date ideal example would be something like this:
<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.example.com/">
<img itemprop="logo" src="http://www.example.com/logo.png" alt="Example" />
</a>
<div>
Summary
- If your using PNG sprites then you could choose text-indent, but do lose the h1
- If your not using PNG sprites use the ALT tag, but again lose the h1
less negative
one. Thetext-indent
one i've seen even on wordpress' core.a
method, and without the header.