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


240

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 de même, tout en optimisant au mieux les moteurs de recherche, les lecteurs d'écran, IE 6+ et les navigateurs qui ont désactivé CSS et / ou les images.

Exemple un: 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 deux: trouvé cela 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;
}

Exemple trois: même HTML, approche différente utilisant le retrait de texte. Il s'agit de l'approche «Phark» pour le remplacement d'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 le 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.


vous devriez consulter ce sujet à: stackoverflow.com/questions/1874895/…
meo

15
Matt Cutts répond à cette question. youtu.be/fBLvn_WkDJ4
troynt

2
L' titleattribut ne devrait-il pas être dans le <a>?
bobo

23
Cette question ne doit pas être marquée comme hors sujet. C'est une question assez clairement définie sur l'optimisation des CSS et des moteurs de recherche. Ce n'est pas parce que ce n'est pas C # que ce n'est pas du code.
MikeMurko

3
@troynt Je trouve que Matt Cutts donne parfois des conseils trompeurs. En tant que tel, j'ai tendance à ne pas le regarder.
TheBlackBenzKid

Réponses:


221

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 en h1 est très, très important!


12
le fait d'encapsuler un h1 autour d'une image avec du texte alternatif a-t-il le même poids (en termes de référencement) que le texte brut enveloppé avec un h1?
Andrew

11
Soit dit en passant, il est pertinent, un logo fait partie du contenu de votre site Web, il n'est pas utilisé pour la décoration, alors utilisez <img> avec l'attribut alt et non CSS pour votre logo.
Boris Guéry

14

34
Malheureusement, le lien dans le commentaire laissé par @troynt est maintenant rompu. Voici un nouveau permalien vers le contenu: youtu.be/fBLvn_WkDJ4
ahsteele

10
Pour tous ceux qui se demandent ce qu'il y a dans la vidéo liée: Matt Cutts dit essentiellement, vous devriez utiliser l'attribut alt de la balise img au lieu de cacher le texte avec css.
bjunix

17

Je le fais principalement comme celui ci-dessus, mais pour des raisons d'accessibilité, je dois prendre en charge la possibilité de désactiver les images dans le navigateur. Donc, plutôt que de retirer le texte du lien de la page, je le couvre en positionnant absolument le <span>sur toute la largeur et la hauteur du <a>et en le plaçant z-indexau-dessus du texte du lien dans l'ordre d'empilement.

Le prix est un vide <span>, 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 */  }

1
Quel est le problème avec l'indentation? Mon hypothèse était que les lecteurs d'écran et les robots d'exploration récupèrent toujours le texte malgré l'indentation.
ckarbass

2
Désolé, il m'a fallu si longtemps pour revenir ici. Le seul problème avec l'indentation est que si les images sont désactivées dans le navigateur de l'utilisateur mais que CSS est activé, rien n'apparaît, texte ou images. C'est une sorte de cas de bord, mais important à considérer pour moi, travaillant sur un site Web universitaire.
Rob Knight

hmm ... Je n'ai pas pu faire fonctionner ça. Le texte d'ancrage apparaissait toujours en haut de l'image.
Andrew

<nitpicker> utilisez #logo span à la place, il sera plus efficace pour le navigateur de rendre </nitpicker>
Chris Missal

1
Dans certains cas, vous avez besoin d'un {top: 0} pour #logo une étendue.
Marcus

11

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

<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.

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 uniquement dans des cas particuliers.


3
display:nonen'est pas accessible.
KPM

La meilleure méthode consiste à envelopper le logo sous div en raison de son accessibilité, de son ergonomie et de son optimisation SEO, et est principalement utilisée dans les grandes organisations Web. Twitter, Amazon, Mozilla n'utilisent pas <h1> pour leurs logos mais les titres principaux pour mieux capturer la valeur de la page. bit.ly/1MR4fr5
Oriol

4

Un coup de sifflet un peu tard ici, mais je n'ai pas pu résister.

Votre question est à moitié imparfaite. Laisse-moi expliquer:

La première moitié de votre question, sur le remplacement d'image, est une question valable, et mon avis est que pour un logo, une simple image; un attribut alt; et CSS pour son positionnement sont suffisants.

La deuxième moitié de votre question, sur la "valeur SEO" 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 un titre principal, ni même un titre du tout, 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. Sémantiquement, les titres (H1 - H6) sont appropriés pour, bien, juste cela: les titres et sous-titres pour le contenu.

En HTML5, plus d'un en-tête est autorisé par page, mais un logo ne mérite pas l'un d'eux. Votre logo, qui pourrait être un widget vert flou et du texte est dans une image sur le côté de l'en-tête pour une raison - c'est une sorte de "tampon", pas un élément hiérarchique pour structurer votre contenu. Le premier (si vous utilisez plus dépend de votre hiérarchie de titres) H1 de chaque page de votre site doit titrer son sujet. Le principal titre principal de votre page d'index pourrait être «La meilleure source de widgets verts flous à New York». Le titre principal sur une autre page peut être «Détails d'expédition pour nos widgets flous». Sur une autre page, il peut s'agir de «À propos des widgets flous de Bert Inc.». Vous avez eu l'idée.

Note latérale: Aussi incroyable que cela puisse paraître, ne regardez pas la source des propriétés Web appartenant à Google pour des exemples de balisage correct. Il s'agit d'un poste à part entière.

Pour tirer le meilleur parti de la valeur SEO de HTML et de ses éléments, jetez un œil aux 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 SEO.


1
Ajoutant à cela, que tout cela est vrai, et le logo ne devrait pas être le h1 sur une autre page sauf la page d'accueil (et idéalement pas sur une page d'accueil). Cependant, souvent sur une page d'accueil, l'endroit le plus pertinent pour le h1 sera le logo, car le contenu de la bannière du héros peut ne pas être suffisamment spécifique au sujet du site Web (c'est-à-dire qu'il peut se rapporter à un service ou un produit actuel qui est poussé plutôt que le thème central du site). Si le site n'a qu'un seul domaine d'intérêt (par exemple, un site pour une application), la zone des héros peut fonctionner pour le h1. Quand cela ne fonctionne pas, une image avec alt enveloppé dans h1 est meilleure que rien.
elmarko

3

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, j'irais avec votre première suggestion, quelque chose du 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 si votre conception utilise des titres de page, mais c'est ma position sur cette question.


Je suis presque sûr que les IMG sont considérés comme du contenu, contrairement aux images d'arrière-plan CSS. C'est pourquoi j'ai tendance à me tourner vers des images d'arrière-plan pour des images à l'échelle du site et des choses de cette nature qui ne sont pas explicitement pour le contenu de cette page.
Joe Phillips

@ d03boy: Eh bien, dans ce cas, vous pourriez faire un div en ligne qui a le bon dimensionnement pour la taille du logo et lui donner l'arrière-plan. Une plage à l'intérieur (qui a la visibilité: caché;) fournira un remplacement "texte alternatif".
Ross

6
Le débat sur le premier semestre est désormais un lien mort
Alex

3
<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 au tag H1 une priorité élevée, à l'intérieur du tag h1 devrait être le nom de votre site. En utilisant cette méthode si vous recherchez le nom du site dans le référencement, il affichera également le logo de votre site.

vous souhaitez masquer le nom du site OU le texte, veuillez utiliser le retrait de texte en valeur négative. ex

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

2

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

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

Je suggère de mettre le titre en <a>élément parce que le client voudrait savoir quel est le sens de cette image. Parce que vous avez défini text-indentle test <h1>, l'utilisateur frontal peut obtenir des informations sur le logo principal pendant qu'il survole le logo.


2

Comment fonctionne le W3C?

Jetez simplement un œil à https://www.w3.org/ . L'image a un z-index:1, le texte est ici mais derrière à cause du z-index:0couplé auposition: absolute;

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

1

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

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


Vous pouvez toujours utiliser H1 pour le logo sur la page principale uniquement.
Mariusz Jamro


0

Je ne sais pas mais c'est le format 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 pour autant que je puisse voir. Vous pouvez le css mais je ne le vois pas se charger plus rapidement.


0

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

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 rendez-les tous les deux relativement positionnés.
  3. Utilisez l'ancienne technique zeldman.com pour masquer le texte à l'aide des propriétés de retrait de texte, d'espace blanc et de débordement.
<div class="title-stack">
    <h1 class="title-stack__title">StackOverflow</h1>
    <a href="#" class="title-stack__logo">
        <img src="/images/stack-overflow.png" alt="Stack Overflow">
    </a>
</div>
.title-stack {
    display: grid;
}
.title-stack__title, .title-stack__logo {
    grid-area: 1/1/1/1;
    position: relative;
}
.title-stack__title {
    z-index: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

-1
<h1><a href="/" title="Some title">Name</a></h1>
h1 a{
  width: {logo width};
  height: {logo height};
  display:block;
  text-indent:-9999px;
  background:url({ logo url});
}

Il est préférable de ne pas utiliser des retraits de texte massifs comme celui-ci, car cela entraîne un impact potentiellement important sur les performances. Explication détaillée ici .
Nick F

-1
<div class="logo">
    <h1><a href="index.html"><span>Insert Website Name</span></a></h1>
    <p>Insert Slogan Here</p>
</div>
#header .logo h1 {
    background: red; /* replace with image of logo */
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a {
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a span {
    display:none;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.