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

Je le fais surtout 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. Donc, plutôt que de mettre en retrait 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 utilisant z-index pour le placer au-dessus du texte du lien dans l'ordre d'empilement.

, Le prix est un vide - <span>, mais je suis prêt à 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 veut 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 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 peut être utile dans des cas particuliers seulement.

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

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 l'élément <a> car le client voudrait savoir quelle est la signification de cette image. Parce que vous avez défini text-indent pour le test de <h1>, cet utilisateur frontal peut obtenir des informations sur le logo principal pendant qu'il survole le logo.

Sonnant un peu tard ici, mais n'a pas pu résister.

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

La première moitié de votre question, sur le remplacement d'image, est une question valide, et mon opinion est que pour un logo, une image simple; 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 en-tête principal, ni même un en-tête du tout, et l'utilisation de L'élément H1 pour marquer le logo sur chaque page de votre site fera (légèrement) plus de mal que de bien pour votre classement. Sémantiquement, les titres (H1-H6) sont appropriés pour, eh bien, juste cela: les titres et les sous-titres pour le contenu.

En HTML5, plus d'un titre est autorisé par page, mais un logo ne mérite pas l'un d'entre 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 titre) H1 de chaque page de votre site devrait titre son sujet. Le titre principal principal de votre page d'index pourrait être "la meilleure Source pour les Widgets verts flous à New York". Le titre principal sur une autre page pourrait être "détails D'expédition pour nos Widgets flous". Sur une autre page, il peut être " à propos de floue de Bert Widgets Inc.'. Vous obtenez l'idée.

Side note: 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. Ceci est un poste entier en soi.

Pour obtenir le plus de" valeur SEO " sur HTML et ses éléments, jetez un oeil à la Spécifications HTML5, et prendre des décisions de balisage basées sur la sémantique (HTML) et la valeur aux utilisateurs avant les moteurs de recherche, et vous aurez un meilleur succès avec votre référencement.

<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 parce que le référencement donne la haute priorité à la balise H1, à l'intérieur de la balise 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 montrera votre site logo.

Vous voulez masquer le nom du site ou le texte veuillez utiliser text-indent en valeur négative. ex

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

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 répliquera efficacement le H1 sur chaque page du site.

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

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

Update: on dirait que j'avais tort. Vérifiez cet article .

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 pas fait de mal à mon site autant que je peux voir. Vous pouvez le css mais je ne le vois pas charger plus vite.

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/

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

Pour SEO raison:

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