3

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?

Improve this question
2
  • Which is the idea behind hiding only a part of the link anchor? What do you want to achieve with it?
    – Zistoloen
    Jan 3, 2015 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, 2015 at 11:48

2 Answers 2

Reset to default
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.

Improve this answer
2
  • 1
    Many thanks for this approach mate :) I don't think Google would punish you for using this method.
    – Mikkel Madsen
    Jan 3, 2015 at 23:54
  • Do you know if screen readers support the aural media type? (AFAIK most did not some years ago.)
    – unor
    Jan 4, 2015 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.

Improve this answer
2
  • 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, 2015 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, 2015 at 13:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.