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

Je pense que vous serez intéressé par le Débat sur le H1 . Il s'agit d'un débat pour savoir s'il faut utiliser l'élément h1 pour le titre de la page ou pour le logo.

Personnellement, j'opterais pour votre première suggestion, quelque chose de ce genre :

<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 de l'utilisation ou non de titres de page dans votre conception, mais c'est ma position sur cette question.

Answer 2

<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 le référencement donne à la balise H1 une priorité élevée, à l'intérieur de la balise h1 doit être le nom de votre site. En utilisant cette méthode, si vous recherchez le nom du site dans le référencement, le logo de votre site apparaîtra également.

si vous voulez cacher le nom du site OU le texte, utilisez l'indentation du texte en valeur négative. ex

h1 a {
 text-indent: -99999px;
}

Answer 3

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

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

Je suggère de mettre le titre dans <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> afin que l'utilisateur frontal puisse obtenir des informations sur le logo principal lorsqu'il le survole.

Answer 4

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

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

Answer 5

Après avoir lu les solutions ci-dessus, j'ai utilisé une solution CSS Grid.

1. Créez un div contenant le texte h1 et l'image.
2. Positionnez les deux éléments dans la même cellule et faites en sorte qu'ils soient tous deux positionnés de manière relative.

3. Utilisez l'ancien zeldman.com technique pour masquer le texte à l'aide des propriétés d'indentation, d'espace blanc et de débordement.

   <div class="title-stack"> <h1 class="title-stacktitle">StackOverflow</h1> <a href="#" class="title-stacklogo"> <img src="/images/stack-overflow.png" alt="Stack Overflow"> </a> </div>

   .title-stack { display: grid; } .title-stacktitle, .title-stacklogo { grid-area: 1/1/1/1; position: relative; } .title-stack__title { z-index: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; }