¿Qué es Header de una página web? Funciones y elementos a tener en cuenta

Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on facebook
Facebook
Share on telegram
Telegram

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.

Así que ¿Listos? Rock&Roll

¿Qué es el Header en una páginas web y cómo podemos mejorarlo?

También te puede interesar:

Los mejores cursos SEO gratis y de Pago

¿Qué es una palabra clave?


¿Qué es un header o cabecera en una página web?

El header, encabezado o cabecera es un término que se usa en diseño y programación web para describir la zona superior de una página web, una de las zonas más importantes en la misma y cómo ocurre con el Footer, se repite en casi todas las urls para darle coherencia y facilitar la navegación dentro de tu 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 logo 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>

Ahora que ya sabemos qué es un header, qué funciones tiene, cómo mejorarlo e incluso hemos dado una pincelada de cómo se escribe en el código de nuestra página web. Pero me surge una pregunta… ¿siempre es obligatorio tener un header?, ¿quizás hay algún caso en el que lo mejor sea no tenerlo?

¿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

¿Te gustó este Post? Compártelo en tus Redes Sociales

Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on facebook
Facebook
Share on telegram
Telegram

Autor: Jonathan Vélez

Mi nombre es Jonathan Vélez, soy Formador de Marketing Digital, Consultor especializado en SEO y Diseño web y creo contenido en mi blog para ayudaros con vuestros proyectos.

Soy un apasionado del SEO y la Formación

«El tiempo pone a cada uno en su lugar… bueno, si tienes una estrategia quizás un poco más arriba»

Artículos Destacados

¡Recurso Gratuito!

Si eres diseñador web… o quieres serlo

La Hoja de Ruta para estabilizar tus ingresos con clientes recurrentes y que tu negocio de diseño web sea rentable.

Comentarios del post - Anímate y cuéntame qué te ha parecido

12 respuestas

  1. ¡Un post muy bueno Jonathan! Gracias a ti y a la formación que me diste he aprendido y tengo un header estupendo.

  2. Muy buen post! Me han surgido dos dudas, la primera, en el header de una tienda online ¿no recomiendas un sobre nosotros? y la segunda, ¿en que caso recomiendas añadir imágenes al header? (Si es que las recomiendas en algún caso)

    1. Hola Miriam,

      Aunque en cuanto a los header en tiendas online he dicho lo más característico, por supuesto, hoy en día en cualquier página web es interesante tener un sobre nosotros, para personalizar y poner cara a la marca.

      Por otro lado, en un header de una web que no sea de una tienda, no suelo poner imágenes (a parte del logo) por disminuir la carga. pero en el caso de un ecommerce, si puede ser interesante montar un megamenú con imágenes, siempre que esté bien hecho y pensando en la conversión.

      Un saludo y gracias por pasarte por mi blog.

  3. Muchas gracias Jonathan por este post para conocer mejor qué es header, me lo guardo, interesante las funciones y elementos a tener en cuenta que expones.

    Un saludo,
    Nagore García Sanz

  4. Qué es el Header en una página web?

    Me aguardo este post, práctico para el día a día de los que nos dedicamos al marketing digital y para los clientes, pues sabes que lo que quieren es vender!!

    Un saludo Toñi

  5. Me sonaba el término pero ahora ya se que es un header, yo le llamé cabecero de toda la vida jaja pero mira que bien que ahora ya me quedó claro y la importancia que tiene.

    gracias por compartir tus conocimientos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable: Jonathan Vélez
Finalidad: Gestión de los comentarios de las publicaciones
Legitimación: Consentimiento del interesado
Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. Los boletines electrónicos o newsletter están gestionados por entidades cuya sede y servidores se encuentran dentro del territorio de la UE
Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.

¿QUIERES MÁS INFORMACIÓN!?

te llamamos gratis

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad