En este post vamos a ver la estructura de una página web corporativa. Es decir, una página web de empresa, aunque también podría servir para un autónomo.
Si lo que quieres es saber qué es una página web, te lo explico aquí.
ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES
ÍNDICE DEL POST
- 1.- Cabecera o header de la estructura de una página web corporativa
- 2.- El footer o pié de página de la estructura de una web corporativa
- 3.- La home o página de inicio de la estructura de una web corporativa
- 4.- Página de “nosotros” de una página web corporativa
- 5.- Página de servicios de la empresa
- 6.- Página de contacto de una web corporativa
- 7.- Blog
- 8.- Páginas de información legal
1.- Cabecera o header de la estructura de una página web corporativa
La cabecera o header es la parte superior de la web, una parte fundamental en la estructura de una web y donde habitualmente encontramos el menú de navegación del sitio.
El header o cabecera de la web corporativa se repite exactamente igual en todas las páginas interiores del sitio web.
En la siguiente imagen puedes ver un ejemplo de un header o cabecera de una web corporativa. En este caso es una cabecera con un color de fondo semi transparente que permite ver la imagen que hay tras dicho header.
Ejemplo de header de una página web corporativa
La mayoría de header están formado por dos filas, aunque puede haber headers con más o menos filas. En la imagen anterior puedes ver:
a.- Fila superior: en esta fila puedes ver información de contacto en la parte superior izquierda junto a enlaces de redes sociales y en la parte derecha un ítem de menú.
b.- Fila principal: en esta fila puedes ver el logo de la empresa y el menú de navegación principal de la página web corporativa.
Como antes he indicado, el header o cabecera aparecerá en todas y cada una de las páginas que conforman el sitio web de la empresa.
1.1.- Qué elementos no deben faltar en el header de una página web corporativa
Vamos a ver algunos de los elementos habituales de la estructura del header de una web de empresa y la conveniencia de cada uno de ellos.
i.- email: es habitual ver en el header de la web el email de contacto. Desde luego es un lugar inmejorable debido a la gran visibilidad de esta zona de la web corporativa.
Algunas empresas no publican su email, y en su lugar muestran un formulario de contacto para evitar recibir spam. Ten en cuenta que un email público será recopilado por bots que se encargan de recopilar correos para luego enviar correo tipo spam.
ii.- Teléfono: sin duda uno de los mejores lugares debido a su gran visibilidad para publicar el número de teléfono de contacto de la empresa es el header, además de la página de contacto.
Iii.- Redes sociales: también es habitual ver en los header o cabeceras los iconos de las redes sociales en las que está presente la empresa.
Cupón: horizonweb
No siempre interesa poner estos iconos en el header y que tengan tanta visibilidad, ya que en determinados tipos de páginas en las que se vende algún tipo de producto tampoco parece muy interesante dar pié a las personas que visitan la web a hacer clic en las redes sociales y salir de la página.
El flujo siempre debe ir desde las redes sociales hacia la web corporativa y no al revés. Por eso, en determinados casos es posible que sea más útil poner los iconos de redes sociales en el footer o pié de la web donde tienen mucha menos visibilidad.
iv.- logo: el logo es otro elemento habitual en las cabeceras o headers de las web corporativas. El logo suele estar en la fila principal del header y habitualmente en el lateral izquierdo, aunque no siempre como has podido ver en la imagen anterior.
La funcionalidad del logo a parte de mostrar nuestra imagen corporativa es la de ser un enlace hacia la página de inicio o home. Es decir, cuando el visitante esté perdido por nuestra web puede hacer clic en el logo y volver a la home o página de inicio.
Por diferentes razones como la falta de espacio cuando tenemos muchos ítems o elementos en el menú, el logo muchas veces se situá centrado por encima de los elementos del menú.
Esta opción está bien pero debemos tener en cuenta que tener el logo situado por encima del menú provocará que el header tenga más altura y por tanto el espacio de visualización para el resto de la web es más pequeño.
En estos casos en el que se sitúa el logo por encima del menú de la web corporativa es interesante reducir el tamaño del logo o que directamente desaparezca cuando el visitante comienza a hacer scroll (desplaza la visualización de la página hacia abajo)
Pueden suceder dos cosas cuando accedemos a una página y comenzamos a hacer scroll para ver la parte inferior de la página.
a.- El header y menú desaparecen: de esta manera cuando el visitante comienza a hacer scroll el menú de navegación y el header que lo contiene desaparecen.
Este es el formato de toda la vida que hoy en día pierde adeptos ya que es muy interesante que el visitante siempre tenga visible el menú de navegación completo de la web, y esto no sucede con este formato.
b.- El header y menú permanecen flotantes: este es el formato que más se utiliza hoy en día. Cuando se hace scroll en la página el header habitualmente reduce su altura pero el menú permanece flotante y visible en todo momento.
Es decir, el menú de navegación siempre es visible para el visitante independientemente de la página y zona en la que esté.
En la siguiente imagen puedes ver como queda el header flotante al hacer scroll en la misma web que veíamos en la anterior imagen.
Header o menú flotante de una web o menú sticky (pegajoso)
Disponer de un header flotante es algo que va a depender de la plantilla de WordPress que estemos utilizando.
El pié de página o footer es otra parte fundamental en la estructura de una página web corporativa y se corresponde con la parte inferior de una página web.
Al igual que sucedía con el header, el footer se repite en cada una de las páginas interiores de un sitio web.
Las posibles distribuciones y estructura del footer va a venir marcada por la plantilla WordPress que estemos utilizando.
En la mayoría de ocasiones a nivel de diseño el footer muestra un color más oscuro que el header y el contenido.
Ejemplo de footer de una web corporativa de 2 columnas
i.- Información de contacto: es muy habitual incluir diferentes elementos de información de contacto en el footer de una web.
Como por ejemplo la dirección de la empresa, el email o el teléfono de contacto.
ii.- ¿Un mapa de situación?: en algunos sitios web verás que incluyen un pequeño mapa de ubicación de Google Maps.
Mi recomendación es que el mapa de ubicación lo incluyas en la página de contacto y no en el footer del sitio web.
Ten en cuenta que este tipo de mapas incrustados retardan la carga de la página web, y si el mapa lo pones en el footer el retardo en la carga se producirá en todo el sitio web, ya que el footer es un elemento que se carga y por tanto se muestra en cada una de las páginas del sitio web corporativo.
iii.- Texto general: algunas empresas incluyen una breve descripción cuya finalidad es informar visitante de manera general del tipo de empresa que está visitando.
En caso de que utilicéis este tipo de texto, ya que es un texto que va a aparecer en todas y cada una de las páginas del sitio web corporativo, mi recomendación es que tenga un contenido muy general y que no se trabaje ninguna palabra clave a nivel de SEO para evitar la posible «canibalización» entre diferentes páginas (que unas páginas se posicionen por keywords asignadas a otras páginas).
iv.- ¿un menú?: Habrás visto en algunos sitios web que aparece en el footer un gran menú que en muchas ocasiones repite los mismos ítems del menú situado en el header.
Repetir en el footer los elementos del menú superior es en mi opinión una tontería que solo servirá para retrasar la carga de todas las páginas del sitio web y por lo tanto provocará que nuestra web corporativa sea más lenta.
Enlaces de menú en el footer de la web corporativa
Otra cosa, es poner en el footer otro menú diferente al del header que incluya elementos menos destacados pero que deben aparecer en todas las páginas de la web como el aviso legal, política de privacidad, etc. Esto si es algo en mi opinión más lógico y razonable, ya que el footer es un sitio ideal para poner enlaces a partes de la web menos destacadas pero que deban aparecer en todas las páginas del sitio.
Cupón: horizonweb
v.- Créditos de la web: La zona de créditos se situá en la barra inferior del pié de página. En la zona de créditos aparecerá el nombre de la empresa o nombre del sitio web.
Habitualmente las empresas de diseño utilizan esta zona de créditos para poner un enlace hacia su empresa (lo ideal es que este tipo de enlaces sean nofollow).
Hay muchas plantillas para WordPress que habitualmente usan esta zona para poner un enlace hacia la página comercial de su plantilla.
En algunas plantillas sustituir estos créditos que viene por defecto es más fácil y en otras plantillas más complicado.
vi.- Iconos redes sociales: También resulta habitual encontrar en el footer de páginas web corporativas los iconos de las redes sociales en las que está presente la emrpesa.
Mi opinión personal es que el footer es un sitio más adecuado que el header para mostrar los iconos de redes sociales, ya que es un lugar menos visible que el header. Mi opinión es que cuando alguien accede a nuestra web no debemos ponerle fácil el salir de ella (incluso aunque sea a nuestras redes sociales)
Es interesante que estos enlaces sean de tipo nofollow y que se abran en una nueva pestaña del navegador, para que el visitante aumente el tiempo de presencia en el sitio web (mejora el SEO) y no salga fácilmente.
La posibilidad de incluir enlaces en el footer de manera general nos al va a aportar la plantilla WordPress que estemos utilizando.
En cualquier caso, si la plantilla que utilizas no dispone de ninguna opción de configuración siempre será posible añadirlos a través de widgets.
vii.- Imágenes: Ocasionalmente también podemos encontrar en el footer algún tipo de imagen en una web corporativa.
Habitualmente se incluyen imágenes de sellos de calidad conseguidos por la empresa, logos de asociaciones a las que pertenece la empresa, etc.
3.- La home o página de inicio de la estructura de una web corporativa
La home o página de inicio es sin duda una de las páginas más importantes en la estructura de una web corporativa.
En la página de inicio debe quedar reflejado de manera general el tipo de empresa que está visitado el usuario.
Es interesante que quede reflejado en esta página los servicios principales que presta la empresa con enlaces a otras páginas internas para ampliar información.
También es interesante incluir en esta página recomendaciones de clientes.
Vamos a ver los principales elementos que debe incluir la página de inicio o home de una web corporativa o de empresa:
i.- Imagen o imágenes de presentación: habitualmente en la parte superior de la home se incluye una imagen o varias imágenes que se muestran a través de un slider.
Esta imagen es lo primero que se ve al acceder a la página de inicio, por lo que es fundamental que esta imagen tenga un acabado profesional.
Nuestra imagen corporativa está en juego en esta imagen inicial de la home.
Es decir, que esta imagen o imágenes deben proceder de una banco de imágenes profesional o realizada por un fotógrafo profesional.
Lo ideal es que la imagen sea una imagen personalizada de la empresa, realizada in situ por un fotógrafo y no una procedente de una banco de imágenes.
Pero no todas las empresas se pueden permitir este tipo de servicio fotográfico. En estos casos si es interesante poder tirar de un banco de imágenes profesional.
En algunas webs se ha incluido un vídeo corporativo en la home en vez de la habitual imagen de presentación. Esto puede suponer ciertos problemas a la hora de la carga de la home, por lo que en principio no es en mi opinión la opción más recomendable.
ii.- Resumen servicios principales: es fundamental que en la página de inicio se presenten los principales servicios o productos que ofrece la empresa.
No hay que describir de manera detallada cada uno de los servicios, simplemente hay que hacer una presentación de los mismos con una breve descripción.
¿y cómo podemos hacerlo?
Una forma bastante habitual de presentar los servicios principales de la emrpesa es a través de iconos.
Podemos poner varios iconos, con un título cada uno y una breve descripción. Cada icono representará un servicio y bajo ellos aparecerá un botón o enlace que llevará a la página específica de cada servicio.
Servicios de una empresa presentados a través de iconos
Más servicios presentados con iconos + bloques de contenido desplegables
iii.- Resumen empresa: algunas empresas también incluyen en la home o página de inicio una sección con una breve información descriptiva de la empresa que se ampliará en la página de nosotros o quiénes somos.
Sección de la home con una breve descripción de la empresa
iv.- Recomendaciones: también es muy interesante incluir en la home recomendaciones de clientes con la finalidad de mejorar la confianza del visitante en nuestra empresa.
Este tipo de recomendaciones es muy eficaz y transmiten mucha confianza al visitante.
La mayoría de page builders de WordPress disponen de un módulo específico para la realización de recomendaciones
Recomendaciones de clientes en la home de la web corporativa
4.- Página de “nosotros” de una página web corporativa
Esta es una página interior que no puede faltar en un sitio web corporativo que se precie. Puede recibir diferentes nombres: nosotros, quiénes somos, la empresa, etc.
En el menú se suele situar a la derecha de la página de inicio o home.
En esta página interior se presenta la empresa, su historia, su misión, visión y valores. También podríamos añadir la responsabilidad social corporativa en caso de que tuviéramos alguna actuación implementada.
Se hará mención de sellos de calidad que haya conseguido al empresa y asociaciones a las que pertenezca.
En este caso mi recomendación es no dividir el contenido de esta página en otras subpáginas, ya que no es una página especialmente importante para temas de posicionamiento web.
Cupón: horizonweb
Podemos crear varias secciones en la página donde presentemos los diferentes elementos descritos:
i.- Presentación de la empresa: en una primera sección de la página podemos hacer una presentación de la emrpesa, describiendo sus aspectos fundamentales.
ii.- Misión, visión y valores: en otra sección podemos incluir la misión, visión y valores de la empresa.
Misión, visión y valores de la web de El Pozo
iii.- Historia: en otra sección de la página de “nosotros” se describe la historia de la emrpesa.
iii.- Responsabilidad social corporativa: otra sección se puede dedicar a la R.S.C en caso de que tengamos implementada alguna actuación. En caso contrario omitiríamos esta sección de la página de nosotros.
iv.- Sellos de calidad y asociaciones: en otra sección podemos indicar los sellos de calidad obtenidos por la empresa o asociaciones a las que pertenece.
Podemos incluir el logo y una breve descripción del sello o la asociación a la que se hace mención.
5.- Página de servicios de la empresa
La página o páginas dedicadas a los servicio de la empresa son fundamentales en la estructura de una página web corporativa.
Mi recomendación es que usemos una página específica para cada uno de los servicios que disponga la empresa. De esta manera podremos hacer un esfuerzo específico a nivel de SEO Posicionamiento web para cada uno de los servicios de que dispone la empresa y nos podrán encontrar a través de Google de manera independiente para cada uno de los servicios.
Esta página o páginas se suelen situar a la derecha de la página de “Nosotros” en el menú de la web. Si tienes varias páginas de servicios, lo habitual es que se desplieguen de una principal.
Es indispensable que a parte de imágenes o iconos las páginas de servicios dispongan de texto suficiente para conseguir un posicionamiento adecuado.
Podemos usar recursos como los botones desplegables (conmutadores o toggles en Divi) de los cuales disponen muchas plantillas o page builders de wordpress para incluir texto y que este aparezca en un primer momento oculto (no para Google) al visitante para mostrar una web más limpia y visual.
Bloques desplegables, conmutadores o toggles realizados con la plantilla Divi
6.- Página de contacto de una web corporativa
En la página de contacto de una web corporativa incluiremos los medios a través de los cuales visitante se puede poner en contacto con la empresa y la localización de la misma.
Algunos elementos que puede incluir la página de contacto son:
i.- el email: el email a través del cual se puede contactar con la empresa. Algunas empresas prefieren sustituir la publicación del correo en la web por un formulario de contacto con la finalidad de evitar el spam en el buzón de correo.
ii.- el nº de teléfono: teléfono a través del cual se puede contactar con la empresa. También podemos poner un teléfono específico y el logo de Whatsapp en caso de que el cliente pueda contactar a través de dicha aplicación.
iii.- Formulario de contacto: es algo habitual en las páginas de contacto corporativas. Cuando el visitante rellene el formulario de contacto recibiremos un email con los datos rellenados por el visitante.
Es importante que en el formulario solo pidamos los datos imprescindibles, ya que cuantos más datos pidamos menos visitantes rellenarán el formulario de contacto.
iv.- Dirección y Mapa de localización: también es habitual incluir la dirección física de la empresa acompañada de una mapa incrustado de Google Maps.
En el caso de la plantilla Divi para WordPress disponemos de un módulo específico de mapa para incluir este tipo de mapas de localización de Google.
Ejemplo de una página de contacto de una web corporativa
7.- Blog
El blog no es algo que deba tener de manera obligatoria una página web corporativa. Si estás buscando solo un posicionamiento local, que es lo más habitual, no te va a hacer falta.
Si por el contrario, vas a intentar posicionar tu web a nivel nacional, disponer de un blog y trabajarlo bien es un arma bastante potente para conseguir los objetivos de la empresa.
8.- Páginas de información legal
Las páginas web corporativas deben de disponer visible en todas las páginas del sitio de una serie de enlaces a las páginas de información legal.
El mejor sitio para colocar estos enlaces es el footer, ya que éste se muestra en todas las páginas del sitio pero tiene menos visibilidad que el menú del header. Eso es lo que queremos, que el acceso a estas páginas esté siempre visible, pero menos que el resto de páginas corporativas que hemos visto en los apartados anteriores.
Lo ideal es que estas páginas os las redacte una empresa especializada en términos legales, pero al principio también podéis adaptar los textos que encontréis en otras webs corporativas a vuestros casos específicos.
Aunque ni mucho menos soy un especialista en términos legales, os voy a dar unas indicaciones de las diferentes páginas de información legal de que debe disponer una web corporativa:
i.- Aviso Legal: en esta página se reflejan los datos de la empresa o autónomo como su NIF/CIF, Nombre empresa o autónomo, dirección domicilio social y otros.
ii.- Política de Privacidad: en la política de privacidad se refleja como se gestionan los datos personales que se obtienen a través de la web. Como podrían ser los obtenidos a través de un formulario de contacto.
iii.- Política de Cookies: en esta página se reflejan la utilización o no de cookies en el normal funcionamiento de la web. Existen plugins de WordPress que generan éstas páginas con una serie de textos estandarizados además del típico popup de aviso a navegantes de utilización de cookies en la web.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
