El término Header es algo que podemos escuchar muchas veces cuando hablamos de algún tema relacionado con nuestra página web y es normal perderse en definiciones y palabras técnicas (a todos nos pasa) y podemos no entender un post o una conversación por algo que estamos acostumbrados a ver todos los días (vaya tontería, ¿no?)
Por esto mismo en este post vamos a hablar de forma sencilla qué es el header o cabecera de una página web y vamos a ver algunos consejos para sacarle partido y provecho y que no sea poco más que un adorno.
¿Listos? Vamos al lío
¿Qué es un header o cabecera en una página web?
Este elemento es uno de los más importantes en una web, porque es lo primero que los usuarios ven cuando entran en tu página y por eso debes tener en cuenta dos cosas: primero que los usuarios deben poder navegar fácilmente en él y segundo, que ofrezca información importante y relevante.
¿Qué poner en mi header o cabecera?
En la cabecera de una web solemos encontrar varios elementos importantes. Algunos pueden ser opcionales, pero otros son definitivamente imprescindibles. Vamos a hacer un repaso de todos ellos:
La marca, el logotipo o el nombre de la web
Queremos que de un vistazo destaque nuestra marca, que además debería describir de forma simple sobre qué va la web. Ten en cuenta que la gente espera que este logotipo sea un enlace hacia la home o inicio.
El menú de navegación principal
Al final, la misión principal de esta zona de tu página web es facilitar la navegación y para eso, un elemento imprescindible que no puede faltar es el menú principal donde el usuario puede hacer clic e ir a las diferentes partes de tu web.
Otra pregunta diferente sería qué Urls incorporar a este menú principal. Hay algunas que son casi obligatorias, por ejemplo: inicio, sobre nosotros, servicios…
Otras que sencillamente son información complementaria o embudos de ventas y que no tienen que estar ahí nunca, por ejemplo: políticas legales, gracias por registro, enlaces de instagram, etc.
Pero tenemos otros que va a depender de nuestro proyecto.
Por ejemplo, ¿pondrías la url «Blog» en tu menú de navegación? pues la respuesta es «depende» (se veía venir), ya que si en tu proyecto el blog es algo secundario solo para atraer cierto tráfico por SEO hacia unas landing de venta o registro… quizás no debes ponerlo ahí y dejarlo enlazado en el footer.
Iconos de las redes sociales
Esto depende de tus proyectos y objetivos. Si tu objetivo es crear una comunidad fuerte en las redes sociales porque las usas como fuente de embudos y ventas, vale. Pero, aunque es un elemento que se suele ver mucho en esta zona, yo la verdad no estoy muy de acuerdo con ponerlo aquí, ¿por qué?
Por que el flujo natural de tráfico debe ser desde las redes sociales hacia tu web, no al revés. En tu web es donde tienes tus servicios, formularios, embudos, lead magnets, etc.
Es como si le damos un flyer (post en redes sociales) a alguien en la calle para que vaya a tu tienda (web) y cuando entra, lo primero que hacemos es invitarlo a salir a la esquina donde está el chaval repartiendo flyers… un poco sin sentido, ¿no?
Información de contacto
Esto es muy útil para negocios locales. Poner en la cabecera o header tus datos de contacto, ya sea dirección o teléfono de reservas, por ejemplo, puede mejorar muchísimo tu conversión, no dudes en probarlo.
Un buscador
Esto es especialmente útil en blogs y página webs que cuenta con mucha información de diferentes temas, facilitando al usuario buscar directamente lo que le interesa.
Además, en Google Analytics podemos ver qué es lo que está buscando las personas en tu buscador y esto te puede dar ideas de productos o contenidos que funcionan mejor o que podrías crear nuevos.
Selector de idiomas
Si tienes una web en varios idioma, el header es el sitio perfecto para poner esas pequeñas banderas típicas que todos sabemos que sirven para cambiar el idioma de la web.
Algunos consejos para mejorar la calidad de tu Header
Te voy a dar algunos consejos generales que se pueden aplicar a la mayoría de los casos y te ayudarán a darle más valor a tu header y que aumente su efectividad y utilidad.
En este caso, menos es más, incluye solo una información sencilla, concreta y breve.
Incluye con el logo, si es necesario, un pequeño eslogan que aclare a que te dedicas. A veces los logos pueden ser muy abstractos
Cuida mucho que el diseño vaya acorde con la web y entre todas las urls.
El Header debe ser un elemento que ayude al usuario en la navegación de la web, no confundirlo.
Puedes incluir tu CTA (llamada a la acción) principal en el header, por ejemplo: reserva, suscríbete, haz tu pedido…
Intenta que tu header no sea muy alto. En la zona de la web que vemos antes de hacer scroll («tirar pa bajo») siempre debemos poner una información o llamada a la acción importantes, si nos pasamos de alto en la cabecera, le quitamos espacio a estas informaciones.
Diferentes tipos de Header según el tipo de web
Cabecera de un blog
En un blog, lo importante es facilitar la navegación entre los diferentes contenidos, por eso podemos ver elementos como:
- Las categorías del blog
- Un buscador para encontrar artículos o temas de interés
- Un «sobre nosotros» donde se hable quién o qué empresa está detrás del blog.
Además, si es el típico blog de marca personal, por ejemplo de marketing (si, exacto, como el mío), es también común encontrar enlaces a servicios o páginas de ventas.
Header de una web de empresa
En el caso de la cabecera de una web corporativa de una empresa, encontraremos elementos cómo:
- Inicio
- Sobre nosotros
- Servicios con varios submenús con los diferentes servicios individuales
- Blog
- Portafolio o casos de éxito
- Tienda (si tienen)
- Contacto
Además, en este tipo de webs es normal encontrar lo que se llama un «header top«, lo que viene siendo un lugar encima del header donde se colocan elementos como llamadas a la acción o cierta información: teléfono, email, acceso a usuarios, etc.
Header de una tienda online
En el caso de una tienda suele ser muy importante la zona del logo y el cuidado con los colores, porque se busca destacar mucho el branding o imagen de marca y además encontraremos elementos como:
- Categorías de productos
- Productos destacados
- Rebajas
- Mi cuenta
Además, en el «header top» es normal ver algún tipo de cupón o código de descuento para mejorar las conversiones.
¿Cómo se escribe el Header en HTML?
Voy a ser muy muy breve aquí, porque aunque esta información le pueda venir bien a algunos frikis como yo, sé que la mayoría entrará en coma o saldría corriendo aterrado. Así que solo dos cosas rápidas:
Antiguamente, el header se escribía en el código de nuestra web mediante un div con el id o class header. Algo tal que así:
<div id="header">aquí iría el contenido de tu header</div>
Pero desde que apareció el querido html5, la cabecera o header tiene su propia etiqueta semántica (vivimos buenos tiempos XD)
<header>aquí iría el contenido de tu header o cabecera</header>
Aunque ya sabes cómo hacerlo con HTML, la realidad es que hoy en día no es necesario saber esto, pudiéndolo hacer con pocos clics con constructores visuales como «Elementor pro«.
¿En qué situaciones no debe haber Header en una página web?
¿Todas las páginas y urls deben tener header?, ¿Hay algún caso en el que el header sea una desventaja y sea mejor no tenerlo?, ¿estás leyendo esto con voz de anuncio? 😛
Pues la respuesta es que no siempre tenemos por qué contar con los elementos de la cabecera en nuestra página web y hay un ejemplo en el que se ve muy bien: Una landing page o página de aterrizaje.
Cuando llegas a una landing page, el objetivo de ésta es que leas el contenido, te guste y realices la acción que se haya fijado, como rellenar un formulario, descargar un lead magnet o hacer una compra.
Por lo cual, para evitar fugas o distracciones, en este tipo de páginas se eliminan los elementos del header al igual que cualquier enlace que no sea el de la acción objetivo de la landing.
Otros ejemplos de páginas que no suelen tener header (y siempre por el mismo motivo) son el carrito de venta y la página de pago de una tienda online.
Conclusión
Al final la cabecera es algo que tienen todas nuestras páginas web, pero muchas veces no pensamos muy bien el por qué está ahí y cómo podemos mejorarla. Así que espero que con este artículo te haya quedado bien claro qué es un header (si no te quedó claro, puedes preguntarme en los comentarios) y que hayas sacado en claro alguna estrategia o truquito que te ayude a sacarle un poco más de utilidad.
¿Conocías todas las funciones que puede tener el Header en tu página web?
¿Tu header es una herramienta para mejorar las conversiones y la experiencia de usuario? ¿O lo tienes como un adorno sin más?
Déjame un Comentario, me encantará leerte
