web-dev-qa-db-fra.com

Pour le référencement du nom de la société, devrions-nous utiliser un logo avec alt texte ou un nom de société div remplacé en CSS avec une image?

Laquelle de ces alternatives serait la moins négative pour le moteur de recherche Google?

<h1>
    <a href="#" title="Company Name">
        <img src="img/logo.png" alt="Logo" title="Company name" />
    </a>
</h1>

ou

<h1>
    <a href="#" title="Company Name">
        Company Name
    </a>
</h1>

accompagné par

h1 { background-image: url('../img/logo.png'); }
h1 a { text-indent: -9999px; }

ou accompagné de

h1 { background-image: url('../img/logo.png'); }
h1 a { color: transparent; user-select: none; }
seocssimageshtml5hidden-text
2
ghaschel

Le logo est contenu, pas présentation. Donc, il devrait être inclus dans le HTML, pas dans le CSS. Par conséquent, l'utilisation de l'élément img constitue le choix approprié.

Toutefois, vous ne devez pas utiliser la valeur alt "Logo" pour cela; utilisez plutôt le nom de l'entreprise (c'est-à-dire ce que le logo représente). Ensuite, vous pouvez et devez omettre l’attribut title. (Et l'attribut title de l'élément a devrait probablement dire quelque chose comme "Vers la page d'accueil" au lieu de répéter le nom de la société.)

<img src="img/logo.png" alt="ACME Inc." />

Et si vous vous souciez du contour du document HTML5, le nom du site (logo ou texte) devrait figurer dans un élément h1 appartenant à la racine de sectionnement body (je ne suis donc pas d'accord avec ce dernier). Si vous obtenez une entrée de haut niveau non étiquetée dans le plan (vous devez vous assurer de toujours utiliser les éléments de sectionnement de manière explicite, sinon vous pourriez vous retrouver avec un plan mal défini).

<body>

  <!-- this represents the document heading, which should not be confused with the main content heading -->
  <h1>
    <a href="#" title="To ACME’s homepage">
      <img src="img/logo.png" alt="ACME" />
    </a>
  </h1> 

  <main>
    <article>
      <!-- this represent the main content heading -->
      <h2>…</h2> <!-- may also use <h1> instead -->
    </article>
  </main>

</body>

¹ Voir d'autres réponses pour plus de détails:

4
unor

Cela a été demandé à plusieurs reprises sur plusieurs piles et sous différentes formes. Il n'y a pas de bonne ou de mauvaise réponse, car Google comprend l'utilisation de text-indent lors de l'utilisation de background, cependant ...

Il est largement admis que l’utilisation d’une image appropriée à l’aide d’une balise ALT est le meilleur moyen de garder votre code plus sémantique et d’avoir une meilleure accessibilité. Par exemple, cette réponse sur Stack Overflow en 2009 contient le plus de votes positifs (plus de 170) pour la même question:

SOURCE

Vous manquez l'option:

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

Matt Cutts, de Google, a également évoqué cette question lors de l'une de ses vidéos de questions-réponses sur YouTube et a déclaré qu'il était préférable d'utiliser la balise ALT et d'éviter l'utilisation d'indentation textuelle.

SOURCE

Transcription YouTube: OK Richard M de l’Australie demande "si vous avez un logo de société sur votre site quelle est la meilleure façon d'inclure le texte au logo à des fins de référencement, toutes les balises cachées par CSS ou est-ce important

Oui, c'est important, il est bien préférable d'utiliser toutes les balises comme si je cachais du CSS, vous savez que neuf mille pixels plus loin, c'est pour cela que la balise infernale a été plus ou moins construite, car vous savez tous que vous savez comment Tout le monde a raison mais oui, allez-y dans des années et c'est une façon fantastique de dire que vous savez que c'est le texte que les moteurs de recherche de logo peuvent lire et utiliser.

Je ne voudrais pas que vous sachiez le cacher en utilisant CSS ou quoi que ce soit du genre. C’est un moyen parfaitement simple et parfaitement valide de le faire, mais le travail est parfait.

text-indent pour les sprites en PNG, pas pour le référencement

Cependant, malgré tout ce que beaucoup de gens ont dit, de nombreux sites Web continuent à utiliser l'indentation du texte, principalement à cause de l'utilisation des images-objets PNG pour la compression de page. Par exemple, Pro Webmasters utilise l'indentation du texte.

Évitez d'utiliser l'indentation du texte avec des en-têtes, pourquoi? parce que...

Donc, même si je ne dirai pas que l'utilisation de l'indentation du texte doit être évitée, je conviens que cela devrait être évité lors de l'utilisation d'une balise d'en-tête, car vous ne devriez pas vraiment associer votre logo avec un en-tête, ce n'est pas un en-tête ... c'est votre logo, les titres de vos pages doivent être compilés avec du texte réel en-têtes.

Répéter le même dieu sacrément h1

L'utilisation du format h1 > a > img sera probablement répétée sur toutes vos pages. Cela soulève des problèmes si vous utilisez plusieurs h1 sur la page ...? C’est pourquoi de nombreuses grandes entreprises utilisent de nos jours a > img, car c’est la méthode la plus correcte ...

Utiliser h1 > a > img ou h1 > a avec text-indent est uniquement parce que votre tentative de ) rang plus élevé pour ces mots-clés, spammer la même phrase sur chaque page ne vous rendra pas meilleur si son a vs h1, c’est un Sur plusieurs centaines de signaux utilisés par Google, la plupart des avis de référencement datés et datés vous diront que h1 est le plus important, ce n'est tout simplement pas ... du texte brut sans balisage peut tout aussi bien être classé, avec d'autres signaux d'affacturage.

idéalement Code

Voici un exemple idéal plus moderne:

<div itemscope itemtype="http://schema.org/Organization">
    <a itemprop="url" href="http://www.example.com/">
        <img itemprop="logo" src="http://www.example.com/logo.png" alt="Example" />
    </a>
<div>

Résumé

  • Si vous utilisez des sprites PNG, vous pouvez alors choisir text-indent, mais vous perdez le h1.
  • Si vous n'utilisez pas les images-objets PNG, utilisez la balise ALT, mais perdez-la à nouveau h1.
3
Simon Hayter

Vous devez utiliser la solution <img> plutôt que la solution d’image d’arrière-plan. La plupart des sites ont une image de logo plutôt qu'un fond de logo - Google la prend pleinement en charge. La solution d’image standard fonctionne également mieux avec l’accessibilité.

La solution d’image d’arrière-plan pourrait éventuellement vous pénaliser pour le bourrage de texte caché ou de mots clés. (Je dirais qu'il est peu probable que votre site porte réellement le nom de votre société, en particulier si le logo comporte le nom de la société dans l'image, mais avec des algorithmes automatisés, vous ne le saurez jamais.)

Vous ne devez pas utiliser de balise H1 autour du nom de votre société ou de votre logo. La balise h1 doit être différente sur chacune de vos pages. Les logos et les noms de sociétés sont généralement utilisés sur toutes les pages. De toute façon, vous n'avez pas besoin d'utiliser le nom de votre entreprise dans un H1 à des fins de classement. Votre site se classera bien pour le nom de votre entreprise avec peu d'effort de votre part, car:

  • Votre domaine est le nom de l'entreprise
  • De nombreux liens entrants vers votre site auront le nom de la société comme texte d'ancrage
  • Vous utiliserez le nom de votre société ailleurs, ce qui donnera au mot clé beaucoup de poids
    • En tant que titre de la page d'accueil: Nom de l'entreprise - Widgets depuis 2007
    • À la fin de la plupart des autres titres de page: Guide des widgets 2015 - Nom de la société
    • Dans le pied de page avec vos droits d'auteur: Copyright 2015 nom de l'entreprise
2
Stephen Ostermiller

En tant que variante optimisée, je considérerais celle qui contient la plupart des signaux pertinents pour le référencement. Et c'est à mon avis celui-ci:

<div itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://www.example.com/" title="My Firm">
    <h1 itemprop="name">My Firm</h1>
    <img itemprop="logo" src="http://www.example.com/logo.png" alt="Example" title="My Firm"/>
  </a>
</div>
2
Evgeniy