Blog / Tutorial de Parallax Scrolling con Posicionamiento (SEO) Español

Capas en parallax

Un tutorial en español de como hacer parallax scrolling y SEO (Posicionamiento en buscdadores) a su vez.

Aqui hay dos publicaciones sobre parallax scrolling y SEO mas completas

Parallax Scrolling y SEO – Tutoriales y Ejemplos

Parallax Scrolling Websites and SEO – A Collection of Solutions and Examples

Tu sitio debe poder encontrarse en la web para lograr las visitas y los clics que queremos. Podemos tener un diseño muy innovador y creativo pero si nadie encuentra nuestra web ¿De qué nos sirve? Aquí el posicionamiento es indispensable.

La última tendencia en diseño web son los sitios con desarrollos parallax. El parallax scrolling es una técnica que permite animar con cierto movimiento algunos elementos en las webs, creando la sensación de ver tres dimensiones a través de la superposición de capas. Un ejemplo de web con diseño parallax es Drug Treatment.

De esta manera, el visitante con sólo hacer scroll con su mouse, puede recorrer el sitio viendo muchos efectos especiales. Impresionante, ¿no les parece? Sin embargo, por lograr esto, se cometen varios errores de SEO. El error más común de los sitios diseñados con parallax es incluir la estructura entera del sitio en una misma vista: home y subsecciones bajo una misma URL.

Ejemplo Parallax Web

En el parallax scrolling se ponen en juego la creatividad e ingenio de los diseñadores y programadores para crear sitios atractivos para el usuario, sitios que inviten a los visitantes a quedarse e interactuar en la página web.

Ahora, el diseño con técnicas parallax ¿es compatible con una optimización para el posicionamiento en buscadores?

Ninguna de las páginas que hemos visto desarrolladas y premiadas con esta técnica está optimizada para buscadores.

Podemos ver ejemplos como Ok Studios en los que el diseño y la originalidad se destacan pero, ¿Dónde quedó el posicionamiento de esta webs?

La principal razón por la cual posicionamiento y parallax scrolling no podrían ser compatibles es la idea de que todo el contenido queda ubicado bajo una misma URL, siendo que para el buen posicionamiento es muy importante que las principales palabras claves tengan cada una su propia URL. El problema del contenido en un sitio con tecnología parallax es cierto, pero no es un problema en sí para el posicionamiento, veamos por qué…

Contenido: el mayor dilema

El contenido que pongamos bajo la URL principal en una página web con parallax debe estar lo más optimizado posible, creando un equilibrio entre las palabras claves que nos interesa posicionar y un diseño que mantenga a los visitantes interesados en seguir recorriendo nuestro sitio ¡todo un desafío!

Generalmente los sitios con parallax poseen una única URL, bajo la cual se ubica todo el contenido. Para resolver esto y como técnica de posicionamiento podemos crear una home súper interactiva e innovadora y usar todavía algunas páginas internas y subsecciones que permitan ubicar el contenido bajo más de una única URL, en vez de usar anclas.

Debemos usar de manera inteligente los títulos que incluyamos en cada vista del scrolling ya que serán H1 y ya sabemos lo que eso significa para el posicionamiento y el uso de nuestras palabras claves. Muchos H1 compitiendo entre sí quizás no es una buena idea, pero si elegimos sabiamente algunos títulos y los incluimos en nuestro recorrido, el posicionamiento puede funcionar.

 

 

perfectly-optimized-page

Ejemplo de página “perfectamente optimizada”
Fuente: SEOMoz - How Do I Build the Perfectly Optimized Page?

 

En una web con parallax scrolling, el contenido deberá acotarse significativamente. Mucho contenido en cada vista va en contra de la búsqueda de un mejor diseño y calidad visual.

¿Cómo generamos contenido para nuestro posicionamiento entonces? Simple, a través de pestañas o pop ups que aparecen cuando el visitante cliquea o pasa el puntero por determinado objeto. Estas pestañas no son consideradas contenido oculto (muy mal vistas por Google), ya que el usuario puede ver el contenido completo al realizar una acción en la web.

SEO Onsite optimization and Parallax Scroll

 

Diseño en capas, ¿una desventaja?

La creatividad y el ingenio deberán unirse también para encontrar la manera de ubicar los elementos en la página y las diferentes capas, de manera que no sobrecarguen la web y el tiempo de carga sea rápido. Es muy molesto ver el tiempo de carga de una web segundo tras segundo ¿No es cierto? Nuestros visitantes quieren ver el sitio YA, y los buscadores aprecian en gran medida eso: un sitio que se carga rápidamente seguramente tenga una mejor posición que aquel que demore mucho. Lo mejor es crear un diseño de pocas capas y quizás un poco más sencillo y convertir eso en un tiempo de carga más rápido.

parallaxIllustration

Web con parallax scrolling y optimización SEO

seo web optimization

Parallax Scrolling SEO website tutorial

Más ejemplos de las vistas de páginas internas:

internal pages1

internal pages2

internal pages3

internal pages4

 

Como pudimos ver, diseñar un sitio con parallax scrolling y optimizado para el posicionamiento en buscadores si es posible. Todo depende de la creatividad y experiencia de los profesionales a cargo. Este tutorial se puede ver en ingles aca How to create a parallax scrolling website with SEO

Aca hay otro articulo muy bueno sobre Parallax Scrolling and SEO

En Posicionamiento Web pensamos que es posible afrontar un reto como este, creemos que es un camino lleno de desafíos, pero posible de lograr. Poder realizar un sitio web parallax con posicionamiento en buscadores sin duda te pondrá por delante de tu competencia, y lograrás que tus visitas permanezcan más tiempo en tu página.

Escrito por: