Angularjs seo
Analítica Web

ANGULARJS: COMO ORIENTARLO AL SEO

¡Hola! Mi nuevo post es un poco especial ya que he querido indagar en algo más técnico para el posicionamiento SEO que afecta directamente a los desarrolladores: la programación en ANGULARJS.  Para empezar, hay que saber que: “AngularJS es un framework de JavaScript de código abierto, de Google”. (Aquí puedes saber más sobre AngularJSEstá claro que muchos conocerán este framework pero otros quizá no sepan ni lo que es un framework. Pero como no es un blog de desarrollo sino un blog centrado en el posicionamiento web, no explicaré cómo se desarrolla con AngularJS sino cómo orientar su trabajo de cara al SEO y a Google. ¿Te interesa? Entonces sigue leyendo.

ANGULARJS: CÓMO INDEXAR EN GOOGLE

Desde el algoritmo Caffeine, Google ha ido perfeccionando la indexación de las páginas web actualizando sus crawlers (o arañas) a la lectura y entendimiento de la programación de las mismas. En este caso, con Javascript. No me extenderé en explicar Javascript, ya que es un lenguaje de programación muy técnico, pero si te interesa saber más información, te paso un enlace que te lo explicará. El único detalle es que hay que aplicar unas metodologías para poder indexar: esas son el HASHBANG y/ó el PUSHSTATE.

¿QUÉ ES EL HASHBANG?

 

HASHBANG SEO

Google tuvo la idea de que para poder indexar AJAX (Asynchronous JavaScript And XML) y ser accesible, se debe hacer uso del HASHBANG #!.
Un Hashbang (también llamado She-Bang) el cual el símbolo es #! (conocido como un número mágico de 2 bytes) se usa en la cabecera de un script para indicar al sistema que el fichero contiene un conjunto de comandos los cuales deben ser ejecutados por el intérprete especificado. Con las URL Hashbang, el navegador necesita descargar una página HTML, descargar y ejecutar código JavaScript, reconocer la ruta de acceso del Hashbang (sólo visible en el navegador) y luego recoger y procesar el contenido de la URL. Para que un enlace en AJAX sea indexable, debemos disponer siempre de 2 URL: una que devuelve sólo la parte de la página que tiene que repintar para los usuarios y otra que devuelve la página entera para los crawlers y los usuarios que tengan JavaScript desactivado.
Un ejemplo de Hashbang sería usando el redireccionamiento 301.
– www.midominio.com/#!contacto/c22vq
– www.midominio.com/contacto
La primera será la que lea el navegador y se redireccione y la segunda la que el usuario ponga en el navegador y sea visible para éste.
Google y otros motores de búsqueda como Bing, apoyan el formato de URL Hashbang. Lo utilizan para identificar la página actual a la que se está accediendo con una URL determinada. Estos motores de búsqueda transforman la URL en un formato de URL personalizada que les permita ser accesibles por el servidor:
– http://www.midominio.com/#!/signup/page
– http://www.midominio.com/?_escaped_fragment_=/signup/page
Para una mayor información técnica, qué mejor que en la propia página web de Google Developers“.

¿QUÉ ES EL PUSHSTATE?

pushstate seo

El PushState (HTML5) es la alternativa a quien no quiere usar el Hashbang (Google).
Básicamente el PushState es una API de HTML5 que permite cambiar de dirección dentro de la misma URL o sitio web sin recargar la página. AJAX es la tecnología que se encarga de que esta “manipulación” funcione. Poder construir una página web que funcione completamente con AJAX pero que pueda ser indexada por los buscadores. Ejemplo:
– Si tienes un buscador de productos con muchos filtros, tendrías que tener un link para cada combinación. Eso sería molesto para el usuario ya que tendría que recargar la página cada vez que cambia un filtro. Aquí PushState lo que hace es cambiar la url y aplicar dinámicamente los filtros y que los buscadores puedan seguir los links.
Si te interesa programar con esta opción, te paso un link donde te lo explicará detalladamente.

¿HASHBANG O PUSHSTATE? DEPENDE…

hashbang o pushstate

Dicho todo esto… ¿cuál es mejor para el posicionamiento SEO? Pues desde mi punto de vista y después de todas mis indagaciones al respecto es… depende.
Es decir, disponemos de CMS muy útiles y fáciles de manejar y posicionar como lo son WordPress o Joomla. Y trabajar con AngularJs hace que tú como SEO y el propio desarrollador tengáis que centraros en múltiples variantes poder indexar cada página así como mejorar la UX y la velocidad de carga del sitio web.  Así que, ¿tú que prefieres: Hashbang, PushState o directamente un CMS? ¿Conocías estos modos de indexación para Javascript? Siempre es bueno conocer más allá de lo que manejamos como norma general, pero para mí es más complicado estar pendiente de estas variantes para AJAX que usar un Plugin de Seo en WordPress.
La opinión profesional de un “Full Stack Developer” es que para e-commerce, blogs, páginas web sin nada “fuera de lo normal” mejor usar los CMS. En cambio, si necesitas una App móvil o una aplicación web, entonces sí que puedes decantarte por tecnologías basadas en JavaScript.
Por cierto, no hay que olvidar que disponemos de una gran herramienta de Google para poder comprobar cómo se indexan las páginas y cómo lee GoogleBot nuestra web: Google WebmasterTools.

¡Listo! ¿Con ganas de ver el siguiente post? ¡Pues nos vemos la semana que viene! 😉

Publicaciones anteriores Siguiente publicación

También puede interesarte

6 Comentarios

  • Responder Raúl 5 junio, 2017 at 6:19 am

    Hola Vanessa.
    Buen artículo!

    Casualmente hace algunos días implementé pushState en una web, que si bien no está desarrollada con Angular, tenia algunas páginas que cambiaban bastante mediante ajax, así que en el success del ajax modifico la URL. Obviamente al no ser una web Angular, usar pushStste solo es parte de la solución global.

    pushSatate(); 😉

    De todos modos, si a Angular nos remitimos, mas allá de las URL’s, el problema es el renderizado y la falta de HTML que leer por parte de los buscadores.
    No me fijé si tienes algún post en ese sentido…

    Saludos desde Bs. As.

    • Responder Vanessa Tejada 7 junio, 2017 at 6:33 pm

      Hola Raúl! Gracias por tu comentario. 🙂
      Respecto a lo del renderizado y la indexación para el buscador, sí, tienes razón. Al pintarse al momento la página cada vez que ésta se solicita por parte del usuario, es complicado mandar al robot la indexación de la misma cuando “está en el aire”, es decir, es dinámica. En este caso, se me ocurre hacerlo mediante petición al servidor de páginas estáticas y así mandarle este contenido al bot de rastreo. Pero es un poco complicado porque podría tratarse de Black Hat y ser penalizado por mostrar 2 contenidos, uno orientado al robot y otro al usuario. Aunque no sea tu intención, es lo que puede llegar a entender Google.
      Como tal no tenía un artículo sobre ello salvo éste, aunque me parece un mundo interesante en el que sumergirte e indagar más en ello. Quizá escriba un artículo más a fondo en el que busque una solución más clara y amigable para el SEO, para cuando se utiliza un Framework JavaScript.
      ¡Saludos! 😉

  • Responder Alberto 11 enero, 2017 at 7:54 am

    Hola, excelente artículo, lamentablemente en los enlaces que compartes veo que ya es “deprecated” =(

    • Responder Vanessa Tejada 11 enero, 2017 at 10:17 am

      Hola Alberto! Gracias por tu comentario! 😉 Cierto, el tema del Hasbang #! que creó Google ya no es adecuado para la indexación de tecnología AJAX. Por lo que he estado averiguando, es mejor centrarse en la opción del PushState, History API de HTML5. Te paso un enlace bastante interesante y aclaratorio sobre el tema. Espero que te sea útil. https://en.onpage.org/wiki/AJAX_Crawling_Scheme Un saludo!

  • Responder Vanessa Tejada 12 noviembre, 2015 at 5:03 pm

    Hola Marcos!! Muchas gracias! De verdad que para mi es un orgullo ver comentarios así. 😉 Saludos!

  • Responder Marcos Quispe 12 noviembre, 2015 at 3:57 pm

    Hola Vanessa!! interesante articulo!! te felicito…. escribir, expresar tus conocimientos en palabras que otros entienden es fabuloso. espero el siguiente post.
    Soy alguien amante del desarrollo android, frontend, SEO y google analytics.
    Saludos desde Bolivia.

  • Deja una respuesta