web-dev-qa-db-fra.com

Le nom de la société dans le logo doit-il être une image ou un texte?

Je mets un logo (comprenant une image et le nom de l'entreprise) sur mon site Web. Je ne sais pas s'il faut enregistrer le texte du nom de la société en tant que partie d'un fichier image ou l'avoir en tant que texte réel dans le code HTML et le styler avec css.

Évidemment, si je sauvegarde le tout sous forme d'image, je n'ai pas à m'inquiéter du fait que l'utilisateur ait les bonnes polices, etc. Mais j'ai pensé que le faire en tant que texte pourrait être préférable pour le référencement.

Est-ce une question de goût ou est-ce que l'un est bien meilleur que l'autre?

seocssimages
11
user1551817

Google aime attribut alt société

Google et Bing comprennent tous deux qu'un logo sera souvent répété en PNG, GIF et JPEG. Marquez simplement le logo à l'aide de la description de la modification pour informer les moteurs de recherche qu'il s'agit de LOGO pour votre entreprise.

Un exemple de base:

<img src="logo.png" alt="Company Name Logo">

Un exemple de schéma: 

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

Un exemple de schéma JavaScript:

Si vous voulez que votre code soit simple, utilisez le schéma JSON-LD, car vous n'avez jamais besoin de modifier le code de la page, mais plutôt d'ajouter un code à la fin de votre page ou d'utiliser Google Tag Manager pour injecter dans la page sans lever le petit doigt,

par exemple

<img src="logo.png" alt="Company Name Logo">
<script type="application/ld+json">
  {
  "@context": "http://schema.org/",
  "@type": "Organization",
  "url": "http://www.example.com/",
  "logo": "http://www.example.com/logo.png"
  }
</script>

Google aime aussi les logos SVG

Si vous souhaitez que Google ou Bing voient le nom de votre société dans l'image, vous pouvez le faire en utilisant le format SVG. Ce format vous permet d’utiliser le texte dans l’image qui sera vue par les utilisateurs et les moteurs de recherche. Si l’accessibilité vous préoccupe, vous devez conserver le nom de la société sous la forme TEXT et non sous forme de forme, par exemple pour créer des contours.

par exemple quelque chose comme ceci:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <polygon fill="#998675" points="125,466.5 0,250 125,33.5 375,33.5 500,250 375,466.5 "/>
    <rect x="137.5" y="137.5" fill="#534741" width="225" height="225"/>
    <polygon fill="#C7B299" points="250,175 294.1,189.3 321.3,226.8 321.3,273.2 294.1,310.7 250,325 205.9,310.7 178.7,273.2 178.7,226.8 205.9,189.3 "/>
    <text transform="matrix(1 0 0 1 196.3787 253.5039)" font-family="'Montserrat-Bold'" font-size="12">COMPANY NAME</text>
</svg>

Google n'aime pas les logos piratés par CSS

Les moteurs de recherche n'aiment pas que les logos s'affichent avec des astuces et d'autres éléments similaires, tels que text-indent e.g -9999px; background: url(logo.png) no-repeat;. Les arrière-plans doivent toujours être utilisés comme arrière-plan. S'il s'agit d'un élément de ressource sur la page, il s'agit toujours d'une image et jamais d'un arrière-plan. Utilisez les 2 exemples précédents et pas celui-ci ... cela était utile "de retour dans la journée" mais n'était plus nécessaire avec le balisage disponible.

Cette méthode craint également pour l'accessibilité (utilisateurs avec facultés affaiblies).

9
Simon Hayter

Comme le texte fait partie du logo, je le garderais dans l'image (cela évite d'essayer de faire correspondre les polices non standard et de devoir le positionner exactement comme il est dans le logo) - vous pouvez toujours le mettre dans l'attribut alt ou utilisez des microdonnées pour améliorer votre référencement:

<div id="main-logo-holder" itemscope itemtype="http://schema.org/Organization">
  <meta itemprop="name" content="Company Name">
  <meta itemprop="description" content="Company Description">
  <a itemprop="url" id="logo-home" href="https://www.website.co.uk/" class="main-logo">
    <img itemprop="logo" src="logo.jpg" alt="Company Name Logo">
  </a>
</div>

Plus d'informations sur les microdonnées de l'organisation

Google Microdata Validation Tool

directives de Google sur le balisage de logo

17
Pete