web-dev-qa-db-fra.com

Pénalité de référencement en cachant du texte pour les voyants mais pas pour les lecteurs d'écran

Disons que j'ai cette configuration:

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;
}

Il affichera uniquement "Design" pour les voyants et, lorsque vous désactiverez CSS, il affichera "Graphic Design".

Est-ce mauvais/bon pour le référencement? Et obtiendrez-vous une pénalité via Google en faisant cela?

seogoogle-searchcssaccessibilityhidden-text
2
Mikkel Madsen

Votre objectif est excellent et je pense que l’approche que vous recherchez existe déjà dans CSS comme @media et display.

Une 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;
 }
}

Références utiles

  1. Types de média CSS
  2. Propriété d'affichage CSS
  3. Si IE antérieur à 8.0 est important pour vous, vous voudrez peut-être HTML5 Shiv

Deuxième option

Servez un code HTML différent en fonction du type de support. Si vous faites cela, vous voudrez probablement utiliser le méta-élément alternatif.

4
hunterhogan

Je ne pense pas que votre site puisse être pénalisé pour cela même si ce n'est pas une bonne pratique.

Cependant, vous devez savoir que ce type de pratique sur l'ensemble du lien n'est pas autorisée du tout. En effet, Google pénalise le fait qu'un lien entier soit masqué pour les utilisateurs mais pas pour Googlebot. Vous pouvez lire le page d’assistance Google pour plus de détails.

0
Zistoloen