Le nom de l'entreprise 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 l'entreprise dans le cadre d'un fichier image, ou l'avoir en tant que texte réel en html et stylisé en utilisant css.

Évidemment, si je l'enregistre en tant qu'image, je n'ai pas à me soucier que l'utilisateur ait les bonnes polices, etc. Mais je pensais que l'avoir comme texte pourrait être mieux pour le référencement.

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

Google aime l'attribut alt de l'entreprise

Google et Bing comprennent qu'un logo sera souvent répété partout en PNG, GIF et JPEG. Balisez simplement le logo en utilisant la description alternative pour informer les moteurs de recherche qu'il s'agit d'un 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 garder votre code simple, utilisez le schéma JSON-LD car vous n'avez alors jamais besoin de modifier le code de la page, mais ajoutez plutôt un code à la fin de votre page ou utilisez 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 également les logos SVG

Si vous souhaitez que Google ou Bing voient le nom de votre entreprise dans l'image, vous pouvez le faire en utilisant le format SVG. Ce format vous permet d'utiliser TEXT dans l'image qui sera vue par l'utilisateur et les moteurs de recherche. Si l'accessibilité est un problème, vous devez conserver le nom de l'entreprise en tant que TEXTE et non en tant que forme, par exemple 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 CSS

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

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

Comme le texte fait partie du logo, je le garderais dans l'image (économise en essayant de faire correspondre les polices non standard et en le positionnant exactement comme 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 d'organisation

Outil de validation des microdonnées Google

Consignes Google sur le balisage de logo