Cada sitio tiene un logotipo, y ya sea una función de relleno de página o un elemento de diseño pequeño, a menudo forma la función de título principal de su página. Este artículo le mostrará cómo implementar un logotipo utilizando el marcado semántico correcto y un código HTML simple, con toda la presentación realizada a través de CSS.
Se asegurará de que aquellos que navegan por su sitio sin imágenes vean una alternativa decente y proporcionen a los motores de búsqueda una representación correcta del título de su página.
Empecemos con el código HTML. Debe ser lo más simple posible, mostrando solo el nombre de su sitio / logotipo incluido en las etiquetas de encabezado y un enlace:
Ahora, una vez que tiene el código HTML en su lugar, es simplemente un caso de estilo con algún CSS sencillo.
Este CSS hace dos cosas principales:
- Le dice al navegador que cree un área determinada para su logotipo y aplique un fondo
- Mueve el texto real para mostrarlo fuera de vista (9,999 píxeles a la izquierda)
Si alguien navega a su sitio con CSS e imágenes habilitadas, verá su hermoso logotipo. De lo contrario, la imagen de fondo no se mostrará, pero la sangría del texto tampoco se aplicará, lo que significa que verán el texto del encabezado como normal. ¡Perfecto!
Es una forma simple pero efectiva de asegurar que su logotipo se muestre correctamente, permanezca accesible y sea recogido correctamente por los motores de búsqueda.