web-dev-qa-db-fra.com

Remplacer le texte H1 par une image de logo: la meilleure méthode de référencement et d’accessibilité?

Il semble y avoir quelques techniques différentes, donc j'espérais obtenir une réponse "définitive" à ce sujet ...

Sur un site Web, il est courant de créer un logo qui renvoie à la page d'accueil. Je souhaite faire de même, tout en optimisant l'optimisation pour les moteurs de recherche, les lecteurs d'écran, IE 6+ et les navigateurs ayant désactivé CSS et/ou les images.

Exemple 1: N'utilise pas de balise h1. Pas aussi bon pour le référencement, non?

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Exemple 2: Trouvé ceci quelque part. Le CSS semble un peu hacky.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    padding: 70px 0 0 0;
    overflow: hidden;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:70px;
}

Troisième exemple: Même HTML, approche différente avec indentation du texte. C'est l'approche "Phark" du remplacement de l'image.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    background: transparent url("logo.png") no-repeat scroll 0% 0%;
    width: 250px;
    height: 70px;
    text-indent: -3333px;
    border: 0;
    margin: 0;
}

#logo a {
    display: block;
    width: 280px; /* larger than actual image? */
    height: 120px;
    text-decoration: none;
    border: 0;
}

Exemple quatre: La méthode Leahy-Langridge-Jefferies . S'affiche lorsque les images et/ou les fichiers css sont désactivés.

<h1 id="logo" class="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
h1.logo {
    margin-top: 15px; /* for this particular site, set this as you like */
    position: relative; /* allows child element to be placed positioned wrt this one */
    overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
    padding: 0; /* needed to counter the reset/default styles */
}

h1.logo a {
    position: absolute; /* defaults to top:0, left:0 and so these can be left out */
    height: 0; /* hiding text, prevent it peaking out */
    width: 100%; /* 686px; fill the parent element */
    background-position: left top;
    background-repeat: no-repeat;
}

h1#logo {
    height: 60px; /* height of replacement image */
}

h1#logo a {
    padding-top: 60px; /* height of the replacement image */
    background-image: url("logo.png"); /* the replacement image */
}

Quelle méthode est la meilleure pour ce genre de chose? Veuillez fournir html et css dans votre réponse.

cssxhtmlimageseo
232
Andrew

Vous manquez l'option:

<h1>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

le titre en href et img to h1 est très important!

213
Rahul

Je le fais principalement comme celui ci-dessus, mais pour des raisons d'accessibilité, je dois prendre en charge la possibilité de désactivation des images dans le navigateur. Ainsi, plutôt que d'indenter le texte du lien de la page, je le couvre en positionnant absolument le <span> </ code> sur toute la largeur et la hauteur du <a> et en utilisant z-index pour le placer au-dessus du texte du lien dans l'ordre d'empilement.

Le prix est un <span> vide, mais je suis prêt à l'avoir là pour quelque chose d'aussi important qu'un <h1>.

<h1 id="logo">
  <a href="">Stack Overflow<span></span></a>
</h1>

#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height]; }

#logo a span {
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:#ffffff url(image.png) no-repeat left top;
   z-index:100; /* Places <span> on top of <a> text */  }
17
Rob Knight

Si les raisons d’accessibilité sont importantes, utilisez la première variante (lorsque le client souhaite voir une image sans style)

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Pas besoin de se conformer aux exigences SEO imaginaires, car le code HTML ci-dessus a une structure correcte et vous seul devez décider que cela convient à vos visiteurs.

Aussi, vous pouvez utiliser la variante avec moins de code HTML

<h1 id="logo">
  <a href=""><span>Stack Overflow</span></a>
</h1>

/* position code, it may be absolute position or normal - depends on other parts of your site */
#logo {
  ...
}

#logo a {
   display:block;
   width: actual_image_width;
   height: actual_image_height;
   background: url(image.png) no-repeat left top;
}

/* for accessibility reasons - without styles variant*/
#logo a span {display: none}

Veuillez noter que j'ai supprimé tous les autres styles CSS et hacks car ils ne correspondaient pas à la tâche. Ils ne peuvent être utiles que dans des cas particuliers.

11
se_pavel

Arriver un peu tard ici, mais je n'ai pas pu résister.

Votre question est à moitié défectueuse. Laissez-moi expliquer:

La première partie de votre question, sur le remplacement des images, est une question valable. À mon avis, c’est pour un logo, une image simple; un attribut alt; et CSS pour son positionnement sont suffisants.

La deuxième partie de votre question, sur la "valeur de référencement" du H1 pour un logo, est la mauvaise approche pour décider quels éléments utiliser pour différents types de contenu.

Un logo n'est pas une rubrique principale, ni même une rubrique du tout, et utiliser l'élément H1 pour marquer le logo sur chaque page de votre site fera (légèrement) plus de mal que de bien à votre classement. Sémantiquement, les en-têtes (H1 - H6) sont appropriés pour, enfin, juste cela: les en-têtes et les sous-titres pour le contenu.

En HTML5, plusieurs en-têtes sont autorisés par page, mais un logo ne mérite pas l'un d'entre eux. Votre logo, qui peut être un widget vert flou et du texte figurant dans une image sur le côté de l'en-tête pour une raison - c'est en quelque sorte un "tampon", pas un élément hiérarchique pour structurer votre contenu. Le premier (que vous en utilisiez davantage dépend de votre hiérarchie de rubriques) H1 de chaque page de votre site devrait en indiquer le sujet. L’en-tête principal de votre page d’index pourrait être "La meilleure source de widgets verts flous à New York". L'en-tête principal sur une autre page pourrait être "Détails de l'expédition pour nos widgets flous". Sur une autre page, il est peut-être question de "Fuzzy Widgets Inc. de Bert". Vous avez eu l'idée.

Note latérale: Aussi incroyable que cela puisse paraître, ne cherchez pas dans la source des propriétés Web appartenant à Google des exemples de balises correctes. Ceci est un post entier à lui-même.

Pour obtenir le maximum de "valeur de référencement" du HTML et de ses éléments, jetez un œil à spécifications HTML5 , puis prenez des décisions de balisage en vous basant sur la sémantique (HTML) et la valeur des utilisateurs avant les moteurs de recherche. Vous aurez plus de succès avec votre référencement.

3
Mattypants

Je pense que vous seriez intéressé par le débat H1 . C'est un débat sur l'opportunité d'utiliser l'élément h1 pour le titre de la page ou pour le logo.

Personnellement, je vais avec votre première suggestion, quelque chose dans ce sens:

<div id="header">
    <a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a>
</div>

<!-- or alternatively (with css in a stylesheet ofc-->
<div id="header">
    <div id="logo" style="background: url('logo.png'); display: block; 
        float: left; width: 100px; height: 50px;">
        <a href="#" style="display: block; height: 50px; width: 100px;">
            <span style="visibility: hidden;">Homepage</span>
        </a>
    </div>
    <!-- with css in a stylesheet: -->
    <div id="logo"><a href="#"><span>Homepage</span></a></div>
</div>


<div id="body">
    <h1>About Us</h1>
    <p>MyCorp has been dealing in narcotics for over nine-thousand years...</p>
</div>

Bien sûr, cela dépend si votre conception utilise des titres de page, mais c’est ma position sur cette question.

3
Ross
<h1>
  <a href="http://stackoverflow.com">
  Stack Overflow<img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

C’était la bonne option pour le référencement, car celui-ci était prioritaire dans l’intitulé H1. En utilisant cette méthode, si vous recherchez le nom du site dans le référencement, le logo de votre site apparaît également.

vous voulez masquer le nom du site OR texte, veuillez utiliser l'indentation du texte en valeur négative. ex

h1 a {
 text-indent: -99999px;
}
2
Vishal Gupta

Vous avez manqué le titre dans l'élément <a>.

<h1 id="logo">
  <a href="#" title="..."><span>Stack Overflow</span></a>
</h1>

Je suggère de mettre le titre dans l'élément <a> parce que le client voudrait savoir quelle est la signification de cette image. Parce que vous avez défini text-indent pour le test de <h1>, l’utilisateur final peut ainsi obtenir des informations sur le logo principal lorsqu’il survole le logo.

2
30ml

Un point que personne n'a abordé est le fait que l'attribut h1 devrait être spécifique à chaque page et que l'utilisation du logo du site reproduirait efficacement le H1 sur chaque page du site.

J'aime utiliser un index z caché h1 pour chaque page, car le meilleur référencement h1 n'est souvent pas le meilleur choix pour les ventes ou la valeur esthétique.

1
DFA

Pour des raisons de référencement:

<div itemscope itemtype="https://schema.org/Organization">
 <p id="logo"><a href="/"><span itemprop="Brand">Your business</span> <span class="icon fa-stg"></span> - <span itemprop="makesOffer">sell staff</span></a></p>
 </div>
   <h1>Your awesome title</h1>
0
Potky

Comment W3C fait?

Il suffit de jeter un oeil à https://www.w3.org/ . L'image a un z-index:1, le texte est ici mais en retard à cause du z-index:0 couplé au position: absolute;

Le code HTML d'origine: 

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C">
    </a>
    <span class="alt-logo">W3C</span>
</h1>

Le CSS d'origine: 

#w3c_mast h1 a {
    display: block;
    float: left;
    background: url(../images/logo-w3c-screen-lg) no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: #fff;
}
0
Sebastien Horin

Une nouvelle méthode (Keller) est supposée améliorer la vitesse par rapport à la méthode -9999px:

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

recommandé ici: http://www.zeldman.com/2012/03/01/replacing-le-9999px-hack-new-image-replacement/

0
coral_sea

Je ne sais pas mais c'est le format que j'ai utilisé ...

<h1>
    <span id="site-logo" title="xxx" href="#" target="_self">
        <img src="http://www.xxx.com/images/xxx.png" alt="xxx" width="xxx" height="xxx" />
        <a style="display:none">
            <strong>xxx</strong>
        </a>
    </span>
</h1>

Simple et il n’a fait aucun mal à mon site, autant que je sache. Vous pouvez le commander mais je ne le vois pas se charger plus rapidement.

0
Taswiz

Je pense qu'un exemple est plus que suffisant car le texte alternatif sera affiché si les images sont désactivées. Cela aidera également les moteurs de recherche à connaître votre site.

Mise à jour: On dirait que je me suis trompé. Vérifiez ceci article .

0
Shoban