2

Let’s say I have this setup:

HTML:

<a href="#" class="menu_links"><span class="hidetext">Graphic </span>Design</a>

CSS:

.hidetext {
  height: 1px;
  width: 1px;
  position: absolute;
  overflow: hidden;
  top: -10px;
}

It will only display "Design" for sighted people and when you toggle CSS off, it will show "Graphic Design".

Is this bad/good for SEO? And will you get a penalty via Google by doing this?

  • Which is the idea behind hiding only a part of the link anchor? What do you want to achieve with it? – Zistoloen Jan 3 '15 at 10:17
  • I would to achieve a good balance for sighted people and for screen-readers / googlebot. The sighted people can easily see the concept behind a menu I'm making but I fear for the screen readers. – Mikkel Madsen Jan 3 '15 at 11:48
4

Your goal is excellent, and I think the approach you are looking for is already existent in CSS as @media and display.

One option

HTML

<a href="#" class="menu_links"><span class="hidetext">Graphic </span>Design</a>

CSS

@media screen {
 span.hidetext {
  display: none;
 }
}

@media aural {
 span.hidetext {
  display: inline;
 }
}

Useful references

  1. CSS Media Types
  2. CSS display Property
  3. If IE prior to 8.0 is important to you, you might want HTML5 Shiv

Second option

Serve different HTML based on the media type. If you do that, you will probably want to use the alternative meta element.

  • 1
    Many thanks for this approach mate :) I don't think Google would punish you for using this method. – Mikkel Madsen Jan 3 '15 at 23:54
  • Do you know if screen readers support the aural media type? (AFAIK most did not some years ago.) – unor Jan 4 '15 at 17:16
0

I don't think your site can be penalized for this even if it's not a good practice.

However, you should know this kind of practice on the entire link is not allowed at all. Indeed, Google penalizes when an entire link is hidden for users but not for Googlebot. You can read the Google support page for more details.

  • They just state you can't do it. But I've seen a lot talk about the balance between design and accessibility. Our design wll break badly if we implement the usage of very descriptive anchor text because it will be too large. And W3C said this technique was ideal but that was 3 years ago. And they state the usage of "tittle" in the anchor tag is useless. So is there a good practice to help screen readers and GoogleBot to get a better understanding of the link, because the sighted people can easily see the concept of the menu. Cheers. – Mikkel Madsen Jan 3 '15 at 11:45
  • 1
    Obviously, you have a good reason to do this (especially thinking about users before SEO here), that's why I think you have no issue for SEO of the site. – Zistoloen Jan 3 '15 at 13:18

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.