¿Deberíamos poner nuestro logotipo superior como una imagen o como un <h1>?
Este es un interesante debate que lleva mucho tiempo entre nosotros, y es que no sabemos si es mejor utilizar una imagen como logotipo o por el contrario utilizar un texto <h1> con el fin de mejorar nuestro SEO. Lo que está claro es que si nuestro logo es una imagen no puede ser un <h1>. Personalmente apuesto por la imagen con su correspondiente alt y title para el posicionamiento, sin forzar el <h1> con esa capa para mostrar luego la imagen por css. ¿Cual es vuestra elección?
Este el código ejemplo si utilizamos una imagen:
<a href="/" title="Volver al inicio" id="logo">
<img src="/images/carrerologo.gif" alt="Carrero logo" title="Carrero logo" />
</a>y este un ejemplo utilizando <h1>:
<h1><a href="/" title="Volver al inicio">Carrero</a></h1>
h1 a{
width:;
height:;
display:block;
text-indent:-9999px;
background:url(/images/carrerologo.gif);
}Tu logo es un contenido, no un estilo.
Estilo vs contenido, en un tema sensible en los estándares de la web, cierto es que tenemos que diferenciar entre lo que es contenido y lo que es un estilo para el diseño.
Un logo es contenido. Este es un elemento totalmente independiente en tu diseño web y no debe estar controlado por un estilo. Además imagina que alguien visita tu web y su navegador no soporta o no carga estilos, que pasaría con nuestra imagen de marca, no estaría presente y es algo que no debemos permitir. Nuestra imagen corporativa es una representación virtual de lo que significa nuestra marca, por eso es un contenido y no debemos insertarla mediante un estilo.
Y si lo que quieres es un <h1> cuanto antes en tu diseño por temas de posicionamiento en buscadores, quizás tendrías que optar por un ejemplo así:
<a href="/" title="Volver al inicio" id="logo">
<img src="/images/carrerologo.gif" alt="Carrero logo" title="Carrero logo" />
</a>
...
<h1>Bienvenido al sitio web de los Hermanos Carrero</h1>fuente: CSS Wizardry y @danielulczyk
Creo que va a ser un tema de debate eterno. Yo por mi parte uso , porque creo que más que un logo es el nombre del sitio y desde el punto de vista de la accesibilidad lo tomo como si fuera el título de un libro, por esa razón pienso que debe ir como texto y como el más importante. Con respecto al SEO, usar h1 para ese nombre o para otro título creo que no varía mucho hoy en día.
Lo que quizás encuentro ventajoso en ver una en el lugar del logo es cuando uno imprime la página, ya que la hoja de estilos de impresora no carga imágenes de fondo y me parece importante que ahí aparezca.
De todas formas, el debate se termina en nosotros, ya que al 95% de los usuarios no les debe importar, mientras vean algo, ya sea logo o texto. Este tema tendría que haber sido solucionado con HTML5, incluyendo una etiqueta que solucionara temas de imágen, semática y accesibilidad.
Bueno, un punto de vista más..
Saludos!
Depende de si lo que vas a poner en el H1 es algo fácilmente posicionable por tener pocos resultados en google, en tal caso mejor poner la imagen con el alt y title y ya está, queda mejor.
Sin embargo si tu nombre es algo dificil de posicionar quizá necesites ganar un punto extra usando un anagrama como imagen y el texto como h1.
Yo suelo trabajar con WordPress y opto por anular el enlace del header en el logo, dejo este como una imagen sin enlazar a la home ya que este enlace lo ubico en el menú de navegación.
En cuanto a los H1 prefiero utilizarlos en los títulos de los artículos, claro esta que yo prefiero potenciar los artículos de forma independiente antes que darle toda la fuerza a la home del sitio.
También es cierto que si no tienes una imagen de marca y utilizas como en tu caso un texto quizás utilizar H1 en el logo puede ser la opción mas acertada pero sigo pensando que potenciar el nombre del sitio y no los títulos de los artículos no es lo mas lógico ya que lo que nos interesa es que cada articulo se posicione por si solo y no que sean residuos de la home.
Un saludo
En la home debe ser Nombre del sitio, eso porque independiente de si va con imagen de contenido o como background o incluso sin imagen, el sitio siempre debe tener un nombre/titulo y por eso el h1.
Si solo quieres mostrar la imagen, al texto le das un text-indent por css para que no quede visible.
En el resto de las páginas del sitio debe ser un contenedor con imagen de contenido o por background de css, es recomendable que además sea un enlace a la home del sitio. En todas estas páginas el h1 es el título del contenido.
Saludos
No quisiera ser pregunto pero donde pondría yo ese código? y si hay un tutorial para ello… gracias.