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

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

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 */  }

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.

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.

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.

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

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.

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

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.

Une nouvelle méthode (Keller) est censé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-the-9999px-hack-new-image-replacement/

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.

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>

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

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

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