El footer o pi√© de p√°gina es un elemento muy olvidado en la mayor√≠a de sitios web, pero que bien trabajado y dise√Īado, puede mejorar la experiencia de usuario, el SEO y la conversi√≥n del sitio. Por ello, en esta entrada quiero ense√Īarte qu√© es el footer, qu√© elementos poner y c√≥mo editarlo en WordPress.

¬ŅQu√© es el Footer?

Cuando hablamos sobre el footer o pi√© de p√°gina, hacemos referencia a la √ļltima secci√≥n de la p√°gina en la que nos encontramos. Generalmente, se trata de una secci√≥n bien diferenciada del resto del contenido, ya que suele utilizar un color diferente o alg√ļn tipo de divisi√≥n.

Definición: El footer o pié de página es un elemento de HTML que aparece como norma general en todas las páginas que conforman un sitio web e indica a los usuarios el final de la pagina en la que se encuentra. La etiqueta de apertura de este elemento es <footer> y su etiqueta de cierre es </footer>.

Otras definiciones de footer que te pueden interesar son las de Wikipedia o Mozilla developer.

Al igual que otros elementos de HTML como el <header> o <aside>, la etiqueta <footer> puede contener informaci√≥n, enlaces, im√°genes, etc. que haya decidido el dise√Īador web y que pueden ser de utilidad para mejorar la experiencia de usuario y un mejor funcionamiento del sitio web.

** El elemento <footer> no lleg√≥ hasta HTML5. Hasta ese momento, el pi√© de p√°gina se defin√≠a con un elemento¬†<div id=‚ÄĚfooter‚ÄĚ></div>.

¬ŅPor qu√© es importante el footer?

Lo primero por lo que el footer es importante a nivel de dise√Īo web es porque marca el final de la p√°gina web. Es el elemento que indica al usuario que no hay m√°s informaci√≥n y no puede seguir navegando hacia abajo.

Pero, ¬Ņel pi√© de p√°gina solo sirve para esto? NO. Existen otras 4 razones m√°s por las que el footer es importante en una p√°gina web:

1# Informa

Dentro del elemento footer podremos a√Īadir informaci√≥n relacionada con otras p√°ginas y contenidos que tenemos en nuestro sitio web y que pueden ser interesantes para el usuario. Algunos ejemplos son:

  • Enlaces a p√°ginas interesantes como: √ļltimas entradas, comentarios, categor√≠as…etc.
  • Copyright de la p√°gina web.
  • Enlaces a p√°ginas de Aviso Legal y Pol√≠tica de Privacidad.
  • Datos de contacto.

Por ello, podemos decir que el pi√© de p√°gina es un elemento donde a√Īadir informaci√≥n de crucial inter√©s para los usuarios.

2# Mejora la navegación

Muchas veces las p√°ginas contienen grandes secciones que no caben en el men√ļ de la p√°gina web. Por ello, y para facilitar la navegaci√≥n de los usuarios, puedes poner estos enlaces o men√ļs en el footer.

De esta forma cuando el usuario alcanza el final de la página y no haya encontrado lo que busca (o no lo haya visto), tenga una opción fácil de acceder a páginas interesantes para él.

Debido a esto, es com√ļn ver en el pi√© de p√°gina elementos como:

  • Apartados de preguntas frecuentes (FAQ)
  • Barras de b√ļsqueda
  • Men√ļs desplegados
  • Enlaces a servicios secundarios
  • Enlaces a p√°ginas de Pol√≠ticas de Devoluciones, Soporte T√©cnico o Pasarelas de Pago.

Un gran ejemplo de Footer que informa y ayuda a la navegación a páginas importantes es el de Footlocker:

Ejemplo Footer - Pié de página

3# Ayuda al SEO

En SEO, el enlazado interno cada vez tiene mayor importancia, ya que cuando enlazas a una p√°gina la est√°s transmitiendo autoridad.

En este caso, el footer es un buen elemento donde poner enlaces a páginas que te interesa posicionar. Eso sí, debes tener en cuenta que cuantos más enlaces incluyas, menos autoridad transmites a cada página.

Algunos consultores SEO optan por poner un enlace al Sitemap o a una página donde enlazan todas aquellas páginas que les interesan, pero todo depende de tu estructura web y qué quieres posicionar. ¡Cada web es un mundo diferente!.

Ejemplo de Footer - José Facchin

4# Aumenta la confianza

Por otro lado, el pié de página es muy usado para aumentar la confianza de los usuarios en un sitio web, sobre todo cuando hablamos de tiendas online.

Una de las pr√°cticas m√°s usadas es introducir im√°genes de certificados de seguridad como SSL, pago seguro, organizaciones oficiales, etc.

Si introduces elementos que demuestren que tu p√°gina es segura, aumentar√°s la confianza de los usuarios y las conversiones.

Adem√°s, el footer es el lugar indicado si quieres presumir de alg√ļn premio que hayas ganado. El mejor ejemplo de esto es PC Componentes que tiene incluido los premios que ha ganado su e-commerce.

Ejemplo de Footer - WebPositer

 

¬ŅQu√© poner en el footer de una web?

El footer es un elemento al que muchas veces no se presta la suficiente atenci√≥n, por lo que es com√ļn encontrar sitios web con un pi√© de p√°gina sin dise√Īar y que no son visualmente agradables.

Desde hoy tienes que pensar en el footer como un elemento que te da la posibilidad de mejorar tu web, no solo desde el punto de vista SEO, sino a nivel de usabilidad y comportamiento de usuario.

Si no sabes qué elementos utilizar a la hora de personalizar tu footer, aquí te dejo una lista de elementos que son los más usados por las páginas web:

Elementos para personalizar el footer

1# Información de contacto

Ya sea una tienda online, una p√°gina corporativa o de marca personal, es costumbre poner los datos de contacto en el footer.

Esto se debe a que en la mayor√≠a de p√°ginas web, el pi√© de p√°gina es un elemento com√ļn y lo podemos encontrar en todas y cada una de las p√°ginas de ese sitio. Aunque he de decir que actualmente hay plantillas de WordPress que te permiten poner un footer personalizado en algunas p√°ginas o incluso hacerlo desaparecer como si fuese una p√°gina de aterrizaje de publicidad.

En cuanto a la información de contacto más habitual destacaría:

  • N√ļmero de tel√©fono
  • Direcci√≥n de correo electr√≥nico
  • Direcci√≥n f√≠sica (sobre todo en tiendas y empresas).

2# Enlaces a redes sociales

Al igual que pasa con la informaci√≥n de contacto, los enlaces a perfiles sociales se suelen colocar en dos sitios: en la parte superior del men√ļ (header top en WordPress) y en el footer.

Las redes sociales son uno de los mejores canales para comunicarte con tus usuarios/clientes, así que si trabajas y mimas tus redes sociales no dudes en enlazarlas en tu web.

3# Enlaces a páginas de información esencial

En todos los sitios web, independientemente de la temática, existe una serie de páginas que debemos enlazar sí o sí y el footer es el mejor lugar para hacerlo.

Los ejemplos m√°s comunes son:

  • Aviso legal
  • Pol√≠tica de cookies
  • Pol√≠tica de privacidad

Si hablamos de una tienda online adem√°s de lo anterior habr√≠a que a√Īadir:

  • Condiciones de cambios y devoluciones
  • Condiciones de env√≠o
  • P√°ginas relacionadas con pagos

4# P√°ginas m√°s interesantes a nivel SEO

El footer es muy utilizado también para mejorar el enlazado interno de los sitios web, poniendo enlaces a las páginas más importantes a nivel SEO. Estos enlaces ayudan tanto a la navegación como a la transmisión de autoridad de una página a otra, aunque debes tener en cuenta que los enlaces en el footer no son los más relevantes para Google.

Potencia tu enlazado interno con enlaces en el footer

Adem√°s de estos enlaces, es habitual ver men√ļs de navegaci√≥n replicados en el footer. De esta forma potencias las principales secciones de tu p√°gina web. ¬°Facilita la navegaci√≥n a tus usuarios!.

5# Certificados

Este elemento es muy √ļtil tanto en p√°ginas de servicios como en tiendas online. Existen m√ļltiples certificados como Google Partners, pago seguro o certificados de calidad de productos.

Insertar imágenes de estos certificados en el pié de página ayuda a la conversión ya que aumenta la percepción de calidad y mejora la sensación de seguridad que tienen los usuarios en los productos/servicios que se ofrecen en esa página web.

6# Logotipo

El logotipo es otro elemento bastante habitual en los footers, ya que ayuda a reforzar la imagen de marca (branding). En muchas ocasiones suele ir acompa√Īado de una frase representativa, normalmente el eslogan del negocio o una breve presentaci√≥n de la empresa.

 

¬ŅC√≥mo configurar, editar y personalizar el Footer en WordPress?

En la mayoría de sitios webs creados con WordPress podemos encontrar dos pasos esenciales antes de tener el footer que habíamos imaginado:

Configurar Footer en WordPress

La gran mayoría de las plantillas de WordPress ya tienen un apartado o sección en el que configurar aspectos principales del footer y cómo se va a componer. Por ejemplo, en una plantilla como Salient que es con la que he creado esta web, dentro de las opciones del tema podremos configurar lo siguiente:

  • Colores de todos y cada uno de los elementos que a√Īadamos al footer. Desde el color de fondo al color de la tipograf√≠a.
  • Anchura del footer: si es full width (ancho completo) o in grid (con m√°rgenes a los lados).
  • La forma en la que va a aparecer el pi√© de p√°gina cuando el usuario est√© navegando por la p√°gina web.
  • Cantidad de columnas que formar√°n el pi√© de p√°gina.

Configurar footer desde theme options

Personalizar el Footer en WordPress

Una vez configurados los aspectos esenciales, es el momento de personalizar el footer. Este apartado es com√ļn en la gran mayor√≠a de p√°ginas creadas en WordPress: Escritorio > Apariencia > Widgets¬†

**En funci√≥n de la configuraci√≥n que hayas elegido, aparecer√°n m√°s o menos secciones en las que a√Īadir widgets y personalizar tu footer.

Personalizar footer en WordPress - Widgets

En este caso, en funci√≥n de la configuraci√≥n previa que he realizado s√≥lo me aparecen dos secciones: Footer √Ārea 1 y Footer Copyright.

Para empezar a personalizar cada sección, primero debes clickar en el apartado correspondiente y se abrirá el desplegable. Una vez desplegado, podrás arrastrar el widget que prefieras para personalizar tu footer.

Ejemplo de cómo personalizar el Footer en WordPress

  • Selecciona el apartado ¬ęFooter Copyright¬Ľ.
  • A√Īade el widget de ¬ętexto¬Ľ y escribe lo que quiera que vean los usuarios.

Personalizar footer en WordPress_ Paso 2

  • Guarda¬†los cambios realizados en el widget.
  • Abre tu p√°gina web y observa c√≥mo queda el cambio.

Personalizar footer en WordPress_ Paso 2 (1)

El footer o pi√© de p√°gina es un elemento esencial en cualquier sitio web. Debes prestarle la atenci√≥n que merece, ya que puede ayudarte a crear una p√°gina con un mejor dise√Īo y que ayude tanto a los motores de b√ļsqueda como a los usuarios a navegar por tu web de una forma c√≥moda.

Y t√ļ, ¬ŅQu√© elementos prefieres utilizar a la hora de personalizar el footer?¬† ¬ŅTienes alg√ļn ejemplo de pi√© de p√°gina perfecto?

¬°Valora este contenido!
[Total: 4 Average: 4]