web-dev-qa-db-fra.com

Quelle est la bonne façon de masquer la balise <h1> et de ne pas être banni de Google?

Le site Web sur lequel je travaille utilise une image définie en CSS comme logo principal. Le code html ressemble à ceci:

<h1>Something.com | The best something ever</h1>

Je voudrais afficher uniquement l'image définie en CSS et transmettre les informations de la balise h1 aux moteurs de recherche uniquement.

Quelle est la bonne façon de procéder? Google est très strict à ce sujet, je sais que l'affichage: rien n'est faux, qu'en est-il de la visibilité: cachée?

Merci d'avance!

htmlcssseo
22
Martin Zahuta

Vous devriez être bien avec visibility: hidden.

Cela dit, si votre image fait partie du conten (et j'oserais dire qu'un logo d'entreprise est un contenu, pas une présentation), et que vous vous souciez du HTML accessible, vous devriez envisager de changer votre code en inclure l'image en tant qu'élément img avec title et alternate texte, au lieu d'un css background-image.

De plus, si vous espérez attirer des moteurs de recherche vers les mots clés à l'intérieur de <h1> élément, vous souhaiterez peut-être inclure ces mots plusieurs fois dans la page. Le titre de la page est un endroit beaucoup plus pertinent que le h1 élément, par exemple.

24
hpique

La solution la plus simple, infaillible et optimale pour le référencement serait

<h1><img src=logo.png alt="Something.com | The best something ever"></h1>
20
Ms2ger

définissez l'image comme arrière-plan de votre h1 (définissez la largeur/hauteur pour qu'elle corresponde), puis définissez votre retrait de texte sur quelque chose de fou comme -9999px. De cette façon, lorsque css est désactivé (comme être analysé), le bot verra le texte dans l'en-tête au lieu de l'arrière-plan.

exemple:

CSS

#myHeader {
width:200px;
height:50px;
background: url('lcoation/of/the/image.jpg') top left no-repeat;
text-indent:-9999px;
}

HTML

<body>
...
<h1 id='myHeader'>HELLO WORLD</h1>
...
</body>
3
cdutson
<h1 style="font-size: 2px; margin: 0px;">Something goes here</h1>

Fonctionne comme un charme .... ;-) Les lecteurs d'écran l'interpréteront et n'affecteront pas votre référencement.

3
user3633421

Vous n'obtiendrez pas de bons résultats de référencement si vous masquez d'abord le h1, puis utilisez des expressions génériques à l'intérieur du h1.

Ne vous contentez pas d'utiliser le h1 pour le dimensionnement, vous pouvez utiliser des classes pour styliser.

Les balises H1 doivent contenir des informations riches en mots clés telles que:

Réparation automobile

La réparation automobile étant le mot-clé qui se rapporte à la page particulière sur laquelle je travaille théoriquement.

J'espère que cela a du sens.

2
talkingD0G

La façon "correcte" de procéder consiste à placer le texte dans la barre de titre ou dans le méta-texte de votre page.

2
me_and

Je pense que la visibilité: cachée; fonctionnerait bien. L'avez-vous déjà essayé?

1
user282835

Redimensionner le bloc fonctionnerait:

h1 {
    overflow: hidden;
    width: 1px;
    height: 1px;
}
0
Chikiro

Un article complet à ce sujet est expliqué ici https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/ Donc, quand je travail j'utilise ce code pour prendre en charge le lecteur d'écran ainsi que masquer certains h1 et utiliser des images à la place comme (logo)

.offscreen{
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

pour en savoir plus suivez le lien

0
Motaz Homsi

Votre site Web se compose-t-il d'une seule page?

Sinon, vous devez mettre le titre de chaque page dans le h1 tag, pas le slogan du site. La répétition du même titre sur chaque page la rendrait pratiquement inutile.

0
Guffa