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?

seo css images

— user1551817
fonte

Isso não tem resposta real, pois a resposta muda muito com a situação.

— dentro de

@insidesin, nenhum logotipo deve sempre ser imagens .

— ZzzzBov

Não estamos falando de logotipos aqui, estamos falando de logotipos e nomes de empresas.

— dentro de

@insidesin Não, o OP diz que o logotipo compreende uma imagem e um nome da empresa . O nome faz parte do logotipo.

— Angew não está mais orgulhoso de SO

>I'm not sure whether to save the company name text as part of an image file, or to have it as actual text in the html and styled using css.

Não, ele está pensando em não colocá-lo. Não é ciência de foguetes. Em algumas situações, o texto deixado fora da imagem seria benéfico.

— dentro de

Respostas:

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

— Simon Hayter
fonte

As tags Alt devem ser usadas para todas as imagens e / ou objetos carregados em sua cena / site. Já deve estar quase pronto, agora.

— dentro de

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

— Pete
fonte

A tag ALT deve conter qualquer texto na imagem por razões de acessibilidade em qualquer caso. Lembre-se de que seu objetivo é ajudar as pessoas cegas e com deficiência visual que usam leitores de tela a saber o que é uma imagem e, no caso de logotipos que contêm texto, o que dizem. Ele deve conter o nome da empresa, o número de telefone, se presente, e qualquer outro texto.

— GeekOnTheHill

@GeekOnTheHill Um logotipo nunca deve conter um número de telefone por motivos de acessibilidade e ux, pois em dispositivos móveis eles não poderão tocar nele e discar o número. Mas concordo que a descrição alternativa deva descrever o conteúdo da imagem se o logotipo contiver informações adicionais, como um slogan.

— Simon Hayter

Eu concordo, Simon. Colocar números de telefone em logotipos é uma prática horrível na era dos dispositivos móveis e telas sensíveis ao toque. No entanto, se o número de telefone estiver lá, apesar de desaconselhável, acho que também precisa estar na etiqueta ALT. A razão pela qual digo isso é porque representantes de organizações para cegos me disseram enfaticamente que deveria ser. Aparentemente, não é possível entrar em contato com uma empresa porque o número de telefone não aparece de maneira que um leitor de tela possa interpretar é uma fonte frequente de frustração para visitantes cegos. Mas eu concordo, é melhor que não esteja no logotipo.

— GeekOnTheHill

O altconteúdo de um logotipo não deve conter "logotipo" (a menos que "logotipo" faça parte do nome, é claro).

— unor