css - titulo - Reemplazo del texto H1 con una imagen de logotipo: ¿el mejor método para SEO y accesibilidad?
h1 con imagen html (14)
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 article .
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 enlaza con la página de inicio. Quiero hacer lo mismo, mientras optimizo mejor los motores de búsqueda, los lectores de pantalla, IE 6+ y los navegadores que han desactivado CSS y / o imágenes.
Ejemplo uno: No usa una etiqueta h1. No es tan bueno para SEO, ¿verdad?
<div id="logo">
<a href="">
<img src="logo.png" alt="Stack Overflow" />
</a>
</div>
Ejemplo Dos: Encontré esto en algún lugar. El CSS parece un poco hacky.
<h1 id="logo">
<a href="">Stack Overflow</a>
</h1>
/* css */
#logo {
padding: 70px 0 0 0;
overflow: hidden;
background-image: url("logo.png");
background-repeat: no-repeat;
height: 0px !important;
height /**/:70px;
}
Ejemplo tres: el mismo HTML, enfoque diferente con sangría de texto. Este es el enfoque "Phark" para el reemplazo de imágenes.
<h1 id="logo">
<a href="">Stack Overflow</a>
</h1>
/* css */
#logo {
background: transparent url("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 de Leahy-Langridge-Jefferies . Aparece cuando las imágenes y / o css están apagadas.
<h1 id="logo" class="logo">
<a href="">Stack Overflow</a>
</h1>
/* 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("logo.png"); /* the replacement image */
}
¿Qué método es el mejor para este tipo de cosas? Por favor, proporcione html y css en su respuesta.
Creo que estaría interesado en el debate H1 . Es un debate sobre si usar el elemento h1 para el título de la página o para el logotipo.
Personalmente me gustaría ir con tu primera sugerencia, algo como estas:
<div id="header">
<a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a>
</div>
<!-- or alternatively (with css in a stylesheet ofc-->
<div id="header">
<div id="logo" style="background: url(''logo.png''); display: block;
float: left; width: 100px; height: 50px;">
<a href="#" style="display: block; height: 50px; width: 100px;">
<span style="visibility: hidden;">Homepage</span>
</a>
</div>
<!-- with css in a stylesheet: -->
<div id="logo"><a href="#"><span>Homepage</span></a></div>
</div>
<div id="body">
<h1>About Us</h1>
<p>MyCorp has been dealing in narcotics for over nine-thousand years...</p>
</div>
Por supuesto, esto depende de si su diseño utiliza títulos de página, pero esta es mi postura sobre este tema.
Entrando un poco tarde aquí, pero no pude resistir.
Tu pregunta tiene fallas a medias. Dejame explicar:
La primera mitad de su pregunta, sobre el reemplazo de la imagen, 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" del H1 para un logotipo, es el enfoque equivocado para decidir qué elementos usar para los diferentes tipos de contenido.
Un logotipo no es un encabezado primario, ni siquiera un encabezado, y usar el elemento H1 para marcar el logotipo en cada página de su sitio hará (un poco) más daño que beneficio para sus clasificaciones. Semánticamente, los encabezados (H1 - H6) son apropiados para, bueno, solo eso: encabezados y subtítulos para el contenido.
En HTML5, se permite más de un encabezado por página, pero un logotipo no merece uno de ellos. Su logotipo, que podría ser un widget verde difuso y algo de texto está en una imagen al lado 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 su jerarquía de encabezados) H1 de cada página de su sitio debe encabezar su tema. El encabezado principal principal de su página de índice puede ser ''La mejor fuente para los widgets Fuzzy Green en Nueva York''. El encabezado principal 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.''. Tienes la idea
Nota al margen: por increíble que parezca, no busque en el origen de las propiedades web propiedad de Google para ver ejemplos de marcas correctas. Este es un post completo en sí mismo.
Para obtener la mayor parte del "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 el valor para los usuarios antes de los motores de búsqueda, y tendrá más éxito con su SEO
Lo hago principalmente como el de arriba, pero por razones de accesibilidad, debo admitir 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 absolutamente <span><a> y utilizando z-index para colocarlo sobre el texto del enlace en el apilamiento orden.
El precio es uno vacío <span> , pero estoy dispuesto a tenerlo allí para algo tan importante como un <h1> .
<h1 id="logo">
<a href=""><span></span></a>
</h1>
#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 <span> on top of <a> text */ }
No sé, pero este es el formato que he usado ...
<h1>
<span id="site-logo" title="xxx" href="#" target="_self">
<img src="http://www.xxx.com/images/xxx.png" alt="xxx" width="xxx" height="xxx" />
<a style="display:none">
<strong>xxx</strong>
</a>
</span>
</h1>
Simple y no ha hecho ningún daño a mi sitio por lo que puedo ver. Podrías css pero no veo que se cargue más rápido.
Por razones de SEO:
<div itemscope itemtype="https://schema.org/Organization">
<p id="logo"><a href="/"><span itemprop="Brand">Your business</span> <span class="icon fa-stg"></span> - <span itemprop="makesOffer">sell staff</span></a></p>
</div>
<h1>Your awesome title</h1>
Se supone que un nuevo método (Keller) mejora la velocidad sobre el método de -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/
Si los motivos de accesibilidad son importantes, utilice la primera variante (cuando el cliente quiera ver la imagen sin estilos)
<div id="logo">
<a href="">
<img src="logo.png" alt="" />
</a>
</div>
No es necesario que cumpla con los requisitos de SEO imaginarios, ya que el código HTML de arriba tiene la estructura correcta y solo usted debe decidir si lo hace adecuado para sus visitantes.
También puedes usar la variante con menos código HTML.
<h1 id="logo">
<a href=""><span></span></a>
</h1>
/* 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 correspondían a la tarea. Pueden ser útiles en casos particulares solamente.
Te estás perdiendo la opción:
<h1>
<a href="http://.com">
<img src="logo.png" alt="" />
</a>
</h1>
¡El título en href y img a h1 es muy, muy importante!
Te perdiste el título en el elemento <a> .
<h1 id="logo">
<a href="#" title="..."><span></span></a>
</h1>
Sugiero poner el título en el elemento <a> 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 <h1> , ese usuario de front-end podría obtener información del logotipo principal mientras se desplazan sobre el logotipo.
Un punto que nadie ha mencionado es el hecho de que el atributo h1 debe ser específico para cada página y el uso del logotipo del sitio replicará efectivamente el H1 en cada página del sitio.
Me gusta usar un índice h1 oculto para cada página, ya que el mejor SEO h1 a menudo no es el mejor valor de ventas o estético.
<div class="logo">
<h1><a href="index.html"><span>Insert Website Name</span></a></h1>
<p>Insert Slogan Here</p>
</div>
#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;
}
<h1>
<a href="http://.com">
<img src="logo.png" alt="" />
</a>
</h1>
Esta fue la buena opción para SEO porque SEO le da alta prioridad a la etiqueta H1, dentro de la etiqueta h1 debe estar 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 del sitio O el texto, use la sangría de texto en valor negativo. ex
h1 a {
text-indent: -99999px;
}
<h1><a href="/" title="Some title">Name</a></h1>
h1 a{
width: {logo width};
height: {logo height};
display:block;
text-indent:-9999px;
background:url({ logo url});
}