¿El nombre de la empresa en el logotipo debe ser una imagen o texto?

Estoy poniendo un logotipo (compuesto por una imagen y el nombre de la empresa) en mi sitio web. No estoy seguro de si guardar el texto del nombre de la empresa como parte de un archivo de imagen, o tenerlo como texto real en el html y con estilo usando css.

Obviamente, si lo guardo todo como una imagen, entonces no tengo que preocuparme de que el usuario tenga las fuentes correctas, etc. Pero pensé que tenerlo como texto podría ser mejor para el SEO.

¿Es una cuestión de gustos o es mucho mejor que la otra?

seo css images

— usuario1551817
fuente

Esto no tiene una respuesta real ya que la respuesta cambia enormemente con la situación.

— dentro del

@insidesin, ningún logotipo debe ser siempre una imagen .

— zzzzBov

No estamos hablando de logos aquí, estamos hablando de logos y nombres de compañías.

— dentro del

@insidesin No, el OP dice que el logotipo comprende una imagen y el nombre de una empresa . El nombre es parte del logo.

— Angew ya no está orgulloso 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.

No, está contemplando no ponerlo. No es ciencia espacial. En algunas situaciones, el texto que queda fuera de la imagen sería beneficioso.

— dentro del

Respuestas:

A Google le gusta el atributo alt de la compañía

Tanto Google como Bing entienden que un logotipo a menudo se repetirá en PNG, GIF y JPEG. Simplemente marque el logotipo con la descripción alternativa para informar a los motores de búsqueda que es un LOGOTIPO para su negocio.

Un ejemplo básico:

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

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

Un ejemplo de esquema de JavaScript:

Si desea mantener su código simple, use el esquema JSON-LD, ya que nunca necesitará editar el código de la página, sino agregar un código al final de su página o usar el Administrador de etiquetas de Google para inyectar en la página sin mover un dedo,

p.ej

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

A Google también le gustan los logotipos SVG

Si desea que Google o Bing vean el nombre de su empresa en la imagen, puede hacerlo utilizando el formato SVG. Este formato le permite usar TEXTO dentro de la imagen que será vista por el usuario y los motores de búsqueda. Si la accesibilidad es una preocupación, debe mantener el nombre de la empresa como TEXTO y no como una forma, por ejemplo, crear esquemas.

Por ejemplo, algo como esto:

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

A Google no le gustan los logotipos pirateados de CSS

A los motores de búsqueda no les gusta que los logotipos se muestren con trucos y otras cosas similares, como text-indent e.g -9999px; background: url(logo.png) no-repeat;. Los fondos siempre deben usarse como fondo. Si se trata de un elemento de recurso en la página, siempre es una imagen y nunca un fondo. Use los 2 ejemplos anteriores y no este ... esto fue útil 'en el pasado' pero ya no es necesario con el marcado disponible.

Este método también apesta a la accesibilidad (usuarios discapacitados).

— Simon Hayter
fuente

Las etiquetas Alt deben usarse para cada imagen y / u objeto cargado en su escena / sitio. Ya debería ser casi repetitivo.

— dentro del

Como el texto es parte del logotipo, lo mantendría en la imagen (ahorra al tratar de hacer coincidir las fuentes no estándar y tener que colocarlo exactamente como está en el logotipo): siempre puede colocarlo en el atributo alt o use microdatos para mejorar su 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>

Más información sobre los microdatos de la organización.

Herramienta de validación de microdatos de Google

Directrices de Google sobre el marcado de logotipos

— Pete
fuente

La etiqueta ALT debe contener cualquier texto en la imagen por razones de accesibilidad en cualquier caso. Recuerde que su propósito es ayudar a las personas ciegas y con discapacidad visual que usan lectores de pantalla para saber qué es una imagen y, en el caso de logotipos que contienen texto, lo que dicen. Debe contener el nombre de la compañía, el número de teléfono si está presente y cualquier otro texto.

— GeekOnTheHill

@GeekOnTheHill Un logotipo nunca debe contener un número de teléfono por razones de accesibilidad y ux, ya que en dispositivos móviles no podrán tocarlo y marcar el número. Pero estoy de acuerdo en que la descripción alternativa debe describir el contenido de la imagen si el logotipo contiene información adicional, como un eslogan.

— Simon Hayter

Estoy de acuerdo, Simon. Poner números de teléfono en logotipos es una práctica horrible en la era de los dispositivos móviles y las pantallas táctiles. Sin embargo, si el número de teléfono está allí a pesar de ser desaconsejable, creo que también debe estar en la etiqueta ALT. La razón por la que digo esto es porque los representantes de organizaciones para ciegos me han dicho enfáticamente que debería ser así. Aparentemente, no poder contactar a una empresa porque el número de teléfono no aparece de ninguna manera que un lector de pantalla pueda interpretar es una fuente frecuente de frustración para los visitantes ciegos. Pero estoy de acuerdo, es mejor que no esté en el logotipo en absoluto.

— GeekOnTheHill

El altcontenido de un logotipo no debe contener "logotipo" (a menos que "logotipo" sea parte del nombre, por supuesto).

— hasta el