Should I include my logo text using 'alt' or CSS?

Google Search Central · 58K views · 2009 · 0:53

Open on YouTube

Web developmentexplainerdated

Why Webmasters Stack Exchange recommends it

Webmasters Stack Exchange answerers point people to it as a direct statement from a Google engineer that alt text beats CSS image replacement for logos in headings.

Recommended by 1 people across 1 different months, 2010 to 2015.

Why Stack Overflow recommends it

Stack Overflow users link it as Google's official word that logo text belongs in an image's alt attribute rather than hidden with CSS techniques like text-indent.

Recommended by 0 people across 0 different months, 2011 to 2013.

What it is

A under one-minute Google Webmaster Help video from 2009 in which Matt Cutts answers a viewer question about whether to put a logo's text in an alt attribute or hide text with CSS. He says the alt attribute is the better approach for SEO.

What people said

Recommends Simon Hayter · 2015-11 · Webmasters Stack Exchange · on “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?”

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 [LINK] You're missing the option: <h1> <a href=" [LINK] "> <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 AL

Cites jessegavin · 2010-09 · Webmasters Stack Exchange · on “When should i consider having text as an image in my website heading”

Matt Cutts (from google) says that the alt tag is better than CSS image replacement for SEO in this video: [this video]

Cites Drew · 2011-08 · Stack Overflow · on “HTML5Boilerplate and the Image Replacement Class text-indent -999em”

I have been using HTML5Boilerplate for most of my projects, as it is a great framework but me and the other developer have been going back and forth about the image replacement class and the use of text-indent:-999em. He sent me these two links: [LINK] [this video] I know the HTML5Boilerplate team did a lot of research when they put together the stylesheet, and I know it is a common technique that a lot of developers use. What do you guys think of it? Should I start using another technique so our sites don't get penalized or is it OK to keep using it? Thanks!

Cites amosrivera · 2011-10 · Stack Overflow · on “Should I use font-size: 0 for image links?”

The important thing here is using your alt tag attribute for SEO, Google recommends it this way [this video] . Having said that there are several css techniques for this. The one i recommend one is using text-indent: -99999em; instead of decresing the font-size .

Cites Tarun · 2011-11 · Stack Overflow · on “Is using the logo tag in sprites good or bad?”

When in rome, do what the romans do. About logo in IMG tag, official words from Google.. [this video] Reason for keeping in tag: To have good search engine visibility, and when someone google's for ur company name, logo should come up in image results. Reason for keeping in css-sprites [background image]: Faster load time Big Brands: All big brands have a media section on their website, also a press section where they keep all their logos in downloadable format.

Cites greven · 2012-01 · Webmasters Stack Exchange · on “Best and safest SEO way to hide h1 tags”

Use it like this <h1> <a href=" [LINK] "> <img src="image.jpg" alt="My Website" /> </a> </h1> Check this link from a Google Webmaster: [this video]

Cites Ayman Safadi · 2012-01 · Stack Overflow · on “Should I use multiple h1 or multiple h2 without h1?”

#3: Remove it, and change all h2 to h1. For SEO, hiding text is frowned upon because it can be considered black-hat SEO. Unless you're going to replace the header with an image that has the text, "Tutors". Should I include my logo text using 'alt' or CSS? [this video] Hiding Text with CSS for SEO [LINK] If you insist on hiding the text, Accessibility/SEO Friendly CSS Hiding [LINK] You cannot have <h2> unless there's an <h1> beforehand. Headings, heading hierarchy, and document outlines [LINK]

Cites bobek · 2012-01 · Stack Overflow · on “<h1> tag on home page?”

Per google, It's not the best practice to hide content of the page. The text that describes your image is an alt tag, and this should be used for that purpose, not hidden h1 tag. Here : [LINK] [this video]

Cites misticx · 2012-05 · Stack Overflow · on “Hiding Text using css: text-indent”

I would suggest you two ways, and none of them is text-indent(which is obsolete method). First way is to remove text, and instead it ad a title to your anchor, like this: <a href="index.php" id="logo" title"My Website"></a> Second way, is to add an image in this anchor tag: <a href="index.php" id="logo"><img src="path/to/image" alt="My Website"/></a> These two ways are much better then text-indent, especially because few months ago Google announced that it has radically changed the way of indexing sites to prevent bite links and other forms of fraud, meaning that the text-indent will not look favorably, perhaps not from the start, but will try to wean people from it. See this video: [this video]

Cites ahsteele · 2013-03 · Stack Overflow · on “Replacing H1 text with a logo image: best method for SEO and accessibility?”

Unfortunately the link in the comment left by @troynt is now broken. Here's a new permalink to the content: [this video]