El efecto Parallax y el SEO

El efecto Parallax es un bonito recurso últimamente muy utilizado en el diseño de las páginas web, pero una utilización incorrecta puede hacer que en términos de SEO no sea tan bonito, por lo tanto a continuación voy a enseñarte unas técnicas para implementar este efecto en tus páginas web que junto al tutorial sobre cómo posicionar mi web lograremos implementar una web creativa sin perder SEO:

Orígenes y definición del efecto Parallax

El efecto parallax se creó originariamente en el sector de los videojuegos con la finalidad de darle al usuario una sensación de profundidad con respecto a los objetos.

Este efecto consiste en que las imágenes del fondo se mueven a cámara lenta mientras que las imágenes en primer plano se mueven de una forma más rápida, esto crea una falsa ilusión de profundidad.

El primer caso de implementación de este efecto en el ámbito web fue con la campaña que vio la luz en 2011 de Nike: Nike Better World.

Como hacer mi web SEO Friendly con el efecto Parallax incluido

Antes de hacer nada es conveniente tener en cuenta estos 2 puntos:

1. Primero crea una estructura para SEO, luego adapta el código para lograr el efecto Parallax.
2. El efecto Parallax no es lo idóneo para dispositivos móviles ya que hace que vayan con una cierta lentitud. Desactívalo para las versiones móviles de tu web.

Una vez tengamos claro eso podemos pasar a las 3 técnicas para una correcta implementación del efecto de tal forma que no perdamos el SEO de la web.

Técnica 1 - Las conocidas webs de 1 página

Una forma de realizar este tipo de web puede ser con la implementación de la librería JQuery PushState. Esta librería nos permite cortar el contenido de esta única página con contenido en diferentes secciones como si de diferentes páginas de contenido se tratara.

Lo que conseguiremos con esto es que Google nos identifique cada sección por separado y las mostrará en las SERPs, además se le asignará para cada sección una URL única junto con sus respectivos metadatos.

En resumen tendremos una sola página de contenido pero que se indexará tantas veces como secciones tenga.

Ventajas:

Es una buena solución si nuestra web no contiene demasiado contenido.

Inconvenientes:

Al estar todo el contenido en una sola página nos arriesgamos a aumentar nuestra tasa de rebote.

Técnica 2 - Una web multipágina con estructura SEO

Esta es una técnica simple y fácil de implementar. Como he recomendado al principio para la realización de este tipo de web debemos primero crear una estructura SEO para la web y más tarde incluir los efectos de desplazamiento con Parallax en cada página.

Ventajas:

Cada página tiene su propio contenido, por lo que no es necesaria una gran implementación.

Inconvenientes:

Los tiempos de carga pueden aumentar al implementar tanto efecto parallax, para combatir esto debemos optimizar lo máximo que podamos el site sino estaremos olvidándonos de uno de los factores clave para la optimización SEO: los tiempos de carga.

Técnica 3 - Efecto parallax en la página de inicio

La última técnica que vamos a ver consiste en la implementación de este efecto únicamente en la página principal de nuestra web, dejando así las demás páginas libres del efecto parallax y con su debida estructura SEO.

Ventajas:

Contaremos con un sitio rápido y flexible, que además contará con una estructura SEO correctamente implementada.

Es más asequible y fácil de diseñar.

Inconvenientes:

No tendremos una web demasiado creativa, aunque en algunos casos esto no es tanto un inconveniente.

Por lo tanto con estas 3 técnicas que hemos visto, ¿Podemos decir que logramos solucionar el problema del parallax con el SEO?

En mi modesta opinión creo que sí, al igual que pienso que estas 3 técnicas no son las únicas para solucionarlo por lo que cualquier comentario con más información al respecto será bienvenido. Puedes ver un ejemplo muy bueno de efecto parallax en esta web: https://www.tustarjetasdevisitas.es

Sin más me despido, muchas gracias por leer mi artículo y más gracias aun si lo compartes :)