Remplacer le texte H1 par une image de logo : meilleure méthode pour le référencement et l'accessibilité ?

Question

Il semble qu'il existe plusieurs techniques différentes, alors 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 veux faire la même chose, tout en optimisant au mieux les moteurs de recherche, les lecteurs d'écran, IE 6+ et les navigateurs qui ont désactivé les CSS et/ou les images.

Premier exemple : N'utilise pas de balise h1. C'est moins bon pour le référencement, non ?

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

Deuxième exemple : J'ai trouvé ça quelque part. La CSS semble un peu bancale.

<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 en utilisant l'indentation du texte. C'est l'approche "Phark" du remplacement des images.

<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 css sont désactivées.

<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 est la meilleure méthode pour ce genre de choses ? Veuillez fournir html et css dans votre réponse.

Answer 1

Vous manquez l'option :

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

title dans href et img dans h1 est très, très important !

Answer 2

Je le fais principalement comme celui ci-dessus, mais pour des raisons d'accessibilité, je dois supporter la possibilité que les images soient désactivées dans le navigateur. Ainsi, plutôt que d'indenter le texte du lien en dehors de la page, je le couvre en positionnant de manière absolue la balise <span> sur toute la largeur et la hauteur de la <a> et en utilisant z-index pour le placer au-dessus du texte du lien dans l'ordre d'empilement.

Le prix est de un vide <span> mais je suis prêt à l'avoir 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 */  }

Answer 3

Si les raisons d'accessibilité sont importantes, utilisez la première variante (lorsque le client veut voir l'image sans les styles).

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

Il n'est pas nécessaire de se conformer à des exigences de référencement imaginaires, car le code HTML ci-dessus a une structure correcte et vous seul devez décider si cela convient à vos visiteurs.

Vous pouvez également 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 peuvent être utiles dans des cas particuliers seulement.

Answer 4

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

Votre question est à moitié fausse. Laissez-moi vous expliquer :

La première partie de votre question, sur le remplacement de l'image, est une question valable, et mon opinion est que pour un logo, une simple image, un attribut alt et une CSS pour son positionnement sont suffisants.

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

Un logo n'est pas un titre principal, ni même un titre tout court, et l'utilisation de l'élément H1 pour baliser le logo sur chaque page de votre site fera (légèrement) plus de mal que de bien à votre classement. D'un point de vue sémantique, les titres (H1 - H6) sont appropriés pour, eh bien, juste cela : des titres et des sous-titres pour le contenu.

En HTML5, plus d'un titre est autorisé par page, mais un logo ne mérite pas d'en avoir un. Votre logo, qui peut être un widget vert flou et un peu de texte, se trouve dans une image sur le côté de l'en-tête pour une bonne raison : il s'agit d'une sorte de "tampon", et non d'un élément hiérarchique pour structurer votre contenu. Le premier (le fait d'en utiliser plusieurs dépend de la hiérarchie de vos rubriques) H1 de chaque page de votre site doit titrer son sujet. Le principal titre primaire de votre page d'index pourrait être "La meilleure source de gadgets verts et flous à New York". L'en-tête principal d'une autre page pourrait être "Détails de l'expédition de nos gadgets flous". Sur une autre page, il peut s'agir de "A propos de Bert's Fuzzy Widgets Inc". Vous voyez le genre.

Remarque : aussi incroyable que cela puisse paraître, ne regardez pas la source des propriétés Web appartenant à Google pour trouver des exemples de balisage correct. C'est un article à part entière.

Pour tirer le maximum de "valeur SEO" du HTML et de ses éléments, jetez un coup d'œil à l'outil Spécifications HTML5 et prenez des décisions de balisage basées sur la sémantique (HTML) et la valeur pour les utilisateurs avant les moteurs de recherche, et vous aurez plus de succès avec votre référencement.

Answer 5

Comment fait le W3C ?

Il suffit de jeter un coup d'œil https://www.w3.org/ . L'image a un z-index:1 le texte est là mais en retrait à cause de la z-index:0 couplé à la position: absolute;

Le HTML original :

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="http://stackoverflow.com/">
        <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 original :

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