O nome da empresa no logotipo deve ser uma imagem ou texto?

Estou colocando um logotipo (composto por uma imagem e nome da empresa) no meu site. Não tenho certeza se salvar o texto do nome da empresa como parte de um arquivo de imagem ou tê-lo como texto real no html e com estilo usando css.

Obviamente, se eu salvar tudo como uma imagem, não preciso me preocupar com o usuário ter as fontes corretas, etc. Mas pensei que tê-lo como texto pode ser melhor para SEO.

Isso é uma questão de gosto ou é muito melhor que o outro?

Google gosta do atributo alt da empresa

O Google e o Bing entendem que um logotipo geralmente será repetido em PNG, GIF e JPEG. Basta marcar o logotipo usando a descrição alt para informar aos mecanismos de pesquisa que é o LOGOTIPO para o seu negócio.

Um exemplo básico:

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

Um exemplo de esquema:

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

Um exemplo de esquema JavaScript:

Se você deseja manter seu código simples, use o esquema JSON-LD, pois nunca precisará editar o código da página, mas adicione um código no final da página ou use o Gerenciador de tags do Google para injetar na página sem levantar um dedo,

por exemplo

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

O Google também gosta de logotipos SVG

Se você deseja que o Google ou o Bing vejam o nome da sua empresa na imagem, use o formato SVG. Este formato permite que você use TEXTO na imagem que será vista pelo usuário e pelos mecanismos de pesquisa. Se a acessibilidade é uma preocupação, você deve manter o nome da empresa como TEXTO e não como uma forma, por exemplo, criar contornos.

por exemplo, algo como isto:

<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ão gosta de logotipos invadidos por CSS

Os mecanismos de pesquisa não gostam que os logotipos sejam exibidos com truques e outras coisas semelhantes, como text-indent e.g -9999px; background: url(logo.png) no-repeat;. Os fundos sempre devem ser usados ​​como pano de fundo. Se for um elemento de recurso na página, será sempre uma imagem e nunca um plano de fundo. Use os 2 exemplos anteriores e não este ... isso foi útil 'de volta ao dia', mas não é mais necessário com a marcação disponível.

Este método também é uma droga para acessibilidade (usuários com deficiência).

Como o texto faz parte do logotipo, eu o manteria na imagem (economizando na tentativa de corresponder a fontes não padrão e tendo que posicioná-lo exatamente como no logotipo) - você sempre pode colocá-lo no atributo alt ou use microdados para aprimorar seu SEO:

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

Mais informações sobre microdados da organização

Ferramenta de validação de microdados do Google

Diretrizes do Google sobre marcação de logotipo