: For SEO of the company name, should we use a logo with alt text or a company name div replaced in CSS with an image? Which of these alternatives would be the less negative to Google search
Which of these alternatives would be the less negative to Google search engine?
<h1>
<a href="#" title="Company Name">
<img src="img/logo.png" alt="Logo" title="Company name" />
</a>
</h1>
or
<h1>
<a href="#" title="Company Name">
Company Name
</a>
</h1>
accompanied by
h1 { background-image: url('../img/logo.png'); }
h1 a { text-indent: -9999px; }
or accompanied by
h1 { background-image: url('../img/logo.png'); }
h1 a { color: transparent; user-select: none; }
More posts by @Radia820
4 Comments
Sorted by latest first Latest Oldest Best
The logo is content, not presentation. So it should be included in the HTML, not in the CSS. Therefore using the img element is the appropriate choice.
However, you should not use the alt value "Logo" for it; use the company name (i.e., what the logo stands for) instead. And then you could and should omit the title attribute. (And the title attribute of the a element should probably say something like "To the homepage" instead of repeating the company name.)
<img src="img/logo.png" alt="ACME Inc." />
And if you care about the HTML5 document outline, the site name (whether it’s a logo or text) should be in an h1 element that belongs to the body sectioning root (so I don’t agree with mentioned statements that this should not be done).¹ Otherwise you get an unlabeled top-level entry in the outline (and you would have to make sure to always use sectioning elements explicitly, otherwise you could end up with a wrong outline).
<body>
<!-- this represents the document heading, which should not be confused with the main content heading -->
<h1>
<a href="#" title="To ACME’s homepage">
<img src="img/logo.png" alt="ACME" />
</a>
</h1>
<main>
<article>
<!-- this represent the main content heading -->
<h2>…</h2> <!-- may also use <h1> instead -->
</article>
</main>
</body>
¹ See some of my other answers for more details:
Using <h1> on website name in HTML5
Why does the HTML5 header element require a h tag?
Markup of a blog page and its posts
As most optimized variation i would consider the one which contains most SEO-relevant signals. And this is in my opinion this one:
<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.example.com/" title="My Firm">
<h1 itemprop="name">My Firm</h1>
<img itemprop="logo" src="http://www.example.com/logo.png" alt="Example" title="My Firm"/>
</a>
</div>
You should use the <img> solution rather than the background image solution. Most sites have a logo image rather than a logo background -- Google supports it fully. The standard image solution also works best with accessibility.
The background image solution could possibly get you penalized for hidden text or keyword stuffing. (I would say that it is unlikely if your site is actually for your company name, especially if the logo has the company name in the image, but with automated algorithms, you never know.)
You should not use an H1 tag around your company name or your logo. The h1 tag should be different on each of your pages. Logos and company names are typically used on all pages. You don't need to use your company name in an H1 for ranking purposes anyway. Your site will rank fine for your company name with little effort on your part because:
Your domain is the company name
Many inbound links to your site will have the company name as anchor text
You will use your company name elsewhere which will get the keyword plenty of weight
As the page title of the home page: Company Name - Widgets since 2007
At the end of most other page titles: Widget guide 2015 - Company Name
In the footer with your copyright: Copyright 2015 Company name
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
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.