Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Accessibility Websites CSS: Part 2

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

Text-Indent trick and SEO

So, about the video PART 1 showing the Text-Indent set to -20k px:

How does google see this? Is it some kind of trick that will be negatively valued by the algorithm? Are we going to get a negative vote from the search engines if we use that trick to implement the LOGO feature but still think about accessibility?

Thanks for the answer!

3 Answers

Hi Lorenzo,

I was curious about this too. Google's quality guidelines for hidden text and links seem to indicate that Google considers this deceptive (see the third bullet point). I think the best practice might be to use an image tag in your h1 tag, and use the alt attribute for your text.

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

Thank you both for the answer! Yeah, I have read the guidelines shortly after asking the very question and it seems that the algorithm for Google is going to search CSS aswell, or at least it is able to check styling values like transparent, opacity 0 and so on, so to avoid the "Bulk Keywords Action" that some SEO specialists use to do!

Thanks guys!

That link is about text that exists to manipulate search rankings. That link also says that not all hidden text is deceptive. If all hidden text was deceptive then websites with drop down menus, or slideshows, or accordion style faq's where you click on the question to reveal the previously hidden answer would all be seen as deceptive because it contains hidden text.

The technique outlined in this video is an old one but it's essentially a font replacement technique. The image shows the same text as in the h1. I don't feel there's anything deceptive about this.

This video seems to suggest that it's ok but you should move on to more modern techniques: https://www.youtube.com/watch?v=hb4LYWxXESY

Now that we have web fonts it's not as necessary to have our text in images to achieve a certain font.

Can we at least agree that the answer is not cut-and-dry? The debate has been going on for years and isn't likely to stop any time soon.

This video from Google, while older than the one you posted, blatantly states the following:

use alt text rather than CSS when your logo is an image

So, sure, Google probably won't blacklist your site for using the logo text indent trick, but based on what Google has said regarding this issue I still think best practice would be using the alt attribute. What it comes down to is the fact that you're indenting the text off-screen in order to improve search engine rankings; if a webpage was created without rankings in mind, there would be absolutely no reason to do this. This is directly contrary to the Google guidelines of "create websites for users, not for search engines."

By the way, for anyone who searches on this topic in the future, another thing to consider when using large text indents is performance. The web browser has to calculate and draw a 9999px (or whatever) box, even if it's not within the viewport. While the performance hit is negligible to modern computers, older computers and some devices (e.g. the first iPad) will suffer noticeably. A better method is:

text-indent: 100%; 
white-space: nowrap; 
overflow: hidden;

Yes, I do think it's not cut-and-dry and I agree that you should move on to something else.

I don't think it is being indented off screen though to improve search engine rankings. It's moved off screen so that visual users don't see that text with whatever fonts they have installed on their system but instead see the text in the image with the specific font the designer wanted them to see. As I mentioned, this is an older technique that was more common when web fonts weren't as prevalent.

Doing this today you would probably have an image of the gear and the h1 text would be live text visible on the screen using a web font. There's no need to hide the text off screen.

Another problem too is that not everyone agrees on whether or not a logo should be an html image with the img tag or a css background image. So you can certainly do the alt text if you have an html image but if you're in the css camp then you don't have that available to you.

I wish there were definitive correct answers on these things because you need to get your project done and you want to do the best things that you can.

Hi Lorenzo,

To my knowledge google doesn't look at the css. Search engines are going to scan the html file and see the text in the h1 as part of the content. Same for screen reader users. They will hear the text in the h1

The negative text indent is purely for visual users. The text is moved out of the way so they don't see it and they see the logo instead. What the logo graphic looks like and what font it uses is really only important for visual users.

So visual users get the logo image, search engines and screen reader users get the text.

Andrew Biviano
Andrew Biviano
6,748 Points

Google is unlikely to consider this 'hidden text' and even less likely to give you a penalty. Hidden text in SEO is referring to adding keywords that are the same color as the background, meaning you'd only see them if you highlighted the area. It's incredibly old-school I haven't seen it on a site in ~8 years.

source: adding front end skills after doing SEO for 10 years