Reemplazar texto H1 con una imagen de logo: ¿el mejor método para SEO y accesibilidad?

Parece que hay algunas técnicas diferentes por ahí, así que esperaba obtener una respuesta “definitiva” sobre esto …

En un sitio web, es una práctica común crear un logotipo que enlace a la página de inicio. Quiero hacer lo mismo, mientras mejor optimizo para motores de búsqueda, lectores de pantalla, IE 6+ y navegadores que han desactivado CSS y / o imágenes.

Ejemplo uno: no usa una etiqueta h1. No es tan bueno para SEO, ¿verdad?

 

Ejemplo dos: Encontré esto en alguna parte. El CSS parece un poco hacky.

 

Stack Overflow

 /* css */ #logo { padding: 70px 0 0 0; overflow: hidden; background-image: url("http://sofes.miximages.com/css/logo.png"); background-repeat: no-repeat; height: 0px !important; height /**/:70px; } 

Ejemplo tres: el mismo HTML, enfoque diferente usando texto-sangría. Este es el enfoque “Phark” para el reemplazo de imágenes.

 

Stack Overflow

 /* css */ #logo { background: transparent url("http://sofes.miximages.com/css/logo.png") no-repeat scroll 0% 0%; width: 250px; height: 70px; text-indent: -3333px; border: 0; margin: 0; } #logo a { display: block; width: 280px; /* larger than actual image? */ height: 120px; text-decoration: none; border: 0; } 

Ejemplo cuatro: El método Leahy-Langridge-Jefferies . Se muestra cuando las imágenes y / o css están desactivados.

 

Stack Overflow

 /* css */ h1.logo { margin-top: 15px; /* for this particular site, set this as you like */ position: relative; /* allows child element to be placed positioned wrt this one */ overflow:hidden; /* don't let content leak beyond the header - not needed as height of anchor will cover whole header */ padding: 0; /* needed to counter the reset/default styles */ } h1.logo a { position: absolute; /* defaults to top:0, left:0 and so these can be left out */ height: 0; /* hiding text, prevent it peaking out */ width: 100%; /* 686px; fill the parent element */ background-position: left top; background-repeat: no-repeat; } h1#logo { height: 60px; /* height of replacement image */ } h1#logo a { padding-top: 60px; /* height of the replacement image */ background-image: url("http://sofes.miximages.com/css/logo.png"); /* the replacement image */ } 

¿Qué método es el mejor para este tipo de cosas? Proporcione html y css en su respuesta.

Te estás perdiendo la opción:

 

Stack Overflow

título en href e img en h1 es muy, muy importante!

Lo hago principalmente como el anterior, pero por razones de accesibilidad, necesito apoyar la posibilidad de que las imágenes se deshabiliten en el navegador. Entonces, en lugar de sangrar el texto del enlace fuera de la página, lo cubro colocando a todo lo ancho y alto de y usando z-index para colocarlo sobre el texto del enlace en el astackmiento orden.

El precio es un vacío, pero estoy dispuesto a tenerlo allí para algo tan importante como un

.

 

Stack Overflow

 #logo a { position:relative; display:block; width:[image width]; height:[image height]; } #logo a span { display:block; position:absolute; width:100%; height:100%; background:#ffffff url(image.png) no-repeat left top; z-index:100; /* Places  on top of  text */ } 

Si los motivos de accesibilidad son importantes, utilice la primera variante (cuando el cliente quiera ver la imagen sin estilos)

  

No es necesario cumplir con los requisitos imaginarios de SEO, ya que el código HTML anterior tiene una estructura correcta y solo usted debería decidir si esto es adecuado para sus visitantes.

También puedes usar la variante con menos código HTML

 

Stack Overflow

 /* position code, it may be absolute position or normal - depends on other parts of your site */ #logo { ... } #logo a { display:block; width: actual_image_width; height: actual_image_height; background: url(image.png) no-repeat left top; } /* for accessibility reasons - without styles variant*/ #logo a span {display: none} 

Tenga en cuenta que he eliminado todos los demás estilos CSS y hacks porque no se corresponden con la tarea. Pueden ser útiles solo en casos particulares.

Creo que estarás interesado en el debate H1 . Es un debate sobre si se debe usar el elemento h1 para el título de la página o para el logotipo.

Personalmente iría con tu primera sugerencia, algo así:

    

About Us

MyCorp has been dealing in narcotics for over nine-thousand years...

Por supuesto, esto depende de si su diseño utiliza títulos de página, pero esta es mi postura sobre este tema.

Te perdiste el título en el elemento .

 

Stack Overflow

Sugiero colocar el título en el elemento porque el cliente querría saber cuál es el significado de esa imagen. Debido a que ha establecido text-indent de text-indent para la prueba de

entonces, ese usuario de la interfaz puede obtener información del logotipo principal mientras se desplazan sobre el logotipo.

Tocando un poco tarde aquí, pero no pude resistirme.

Tu pregunta es medio defectuosa. Dejame explicar:

La primera mitad de su pregunta, sobre el reemplazo de imágenes, es una pregunta válida, y mi opinión es que para un logotipo, una imagen simple; un atributo alt; y CSS para su posicionamiento son suficientes.

La segunda mitad de su pregunta, sobre el “valor SEO” de H1 para un logotipo, es el enfoque equivocado para decidir qué elementos usar para diferentes tipos de contenido.

Un logotipo no es un encabezado principal, ni siquiera un encabezado en absoluto, y usar el elemento H1 para marcar el logotipo en cada página de su sitio hará (ligeramente) más daño que bien para su clasificación. Semánticamente, los encabezados (H1 – H6) son apropiados para, bueno, solo eso: títulos y subtítulos para el contenido.

En HTML5, se permite más de un encabezado por página, pero un logotipo no es merecedor de uno de ellos. Su logotipo, que podría ser un widget de color verde difuminado y algo de texto, se encuentra en una imagen al costado del encabezado por una razón: es una especie de “sello”, no un elemento jerárquico para estructurar su contenido. El primero (si usa más depende de la jerarquía de su encabezado) H1 de cada página de su sitio debe encabezar su tema. El encabezado principal principal de su página de índice podría ser “La mejor fuente para widgets verdes borrosos en Nueva York”. El encabezado primario en otra página podría ser ‘Detalles de envío para nuestros widgets difusos’. En otra página, puede ser ‘Acerca de Bert’s Fuzzy Widgets Inc.’. Entiendes la idea.

Nota al pie: Por increíble que parezca, no busque en el origen de las propiedades web propiedad de Google ejemplos de marcas correctas. Esta es una publicación completa en sí misma.

Para aprovechar al máximo el “valor SEO” del HTML y sus elementos, eche un vistazo a las especificaciones de HTML5 y tome decisiones de marcado basadas en la semántica (HTML) y valor para los usuarios antes de los motores de búsqueda, y tendrá un mayor éxito con su SEO.

 

Stack OverflowStack Overflow

Esta era la buena opción para SEO porque SEO le otorga a la etiqueta H1 una alta prioridad, dentro de la etiqueta h1 debe figurar el nombre de su sitio. Usando este método si busca el nombre del sitio en SEO, también mostrará el logotipo de su sitio.

Si desea ocultar el nombre o el texto del sitio, utilice texto en sangría en valor negativo. ex

 h1 a { text-indent: -99999px; } 

Un punto que nadie ha tocado es el hecho de que el atributo h1 debe ser específico para cada página y usar el logotipo del sitio replicará efectivamente el H1 en cada página del sitio.

Me gusta utilizar el índice de az oculto h1 para cada página ya que el mejor SEO h1 a menudo no es el mejor para las ventas o el valor estético.

Creo que el ejemplo uno es más que suficiente ya que el texto alternativo se mostrará si las imágenes están desactivadas. Esto también ayudará a los motores de búsqueda a conocer su sitio.

Actualización: Parece que estaba equivocado. Revisa este artículo .

No sé, pero este es el formato que he usado …

 

Simple y no ha hecho daño a mi sitio por lo que puedo ver. Podrías descifrarlo pero no lo veo cargar más rápido.

Se supone que un nuevo método (Keller) mejora la velocidad con el método -9999px:

 .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } 

recomendado aquí: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

 

Name

 h1 a{ width: {logo width}; height: {logo height}; display:block; text-indent:-9999px; background:url({ logo url}); } 
  
 #header .logo h1 { background: red; /* replace with image of logo */ display:block; height:40px; /* image height */ width:220px; /* image width */ } #header .logo h1 a { display:block; height:40px; /* image height */ width:220px; /* image width */ } #header .logo h1 a span { display:none; } 

Por motivo de SEO:

  

Your awesome title