Cargando

Ir a contenido

X


Ver Más! Profesionales IT y desarrolladores: Llega el evento más importante del año! Servicios cloud, Business Applications, Analytics, IoT, Machine Learning, Bots, Blockchain etc.


 


Estrategias de SEO para aplicaciones JavaScript

Aprende técnicas para tener una buena estrategia SEO enfocada a webs que hacen uso de JavaScript,.AJAX etc.


Escrito por abr 30 2015 08:37


Cuando desarrollamos una web muchas veces usamos JavaScript ya que es ideal para la elaboración de sitios web innovadores y con múltiples funcionalidades del lado cliente. Una de las tecnologías más utilizadas es AJAX.

Mediante frameworks como Jquery, Prototype, Mootools y otros, que permiten hacer peticiones al servidor, recibir el resultado y activar la carga de cierto contenido de la página sin refrescar la web y completamente transparente para el usuario.

Actualmente la mayoría de las páginas web muestran una fuerte dependencia de JavaScript para crear efectos y funcionalidades del lado cliente, esto trae consigo riesgos muy conocidos en términos de SEO, problemas de enlaces o incompatibilidades, fallos técnicos, velocidad de descarga, etc.

Veremos en este tutorial algunas estrategias para la desarrollar sitios web y aplicaciones AJAX evitando tener problemas en la rama de SEO.


jqueryajax.jpg


Ventajas y Desventajas de utilizar AJAX


Las ventajas en términos de experiencia de usuario son claros: páginas rápidas, menos sobrecarga para el servidor que sólo procesa el pedido y devuelve el contenido que sea necesario para el usuario. Muchas funcionalidades web de nueva generación no se hacen fácilmente sin el uso de JavaScript o Jquery ya que brinda la necesidad de que el usuario haga clic en un elemento de la web y para el navegador no deba actualizar la página entera sino solo un bloque de contenido e incluso mostrar información diferente para distintos usuarios.

La desventaja es que el contenido devuelto pueden no ser visibles para los motores de búsqueda y el robot a menudo no analizará el código Jquery o Ajax. Un problema es que el contenido de una página sea solo visible para el navegador, pero no en el servidor, las forma de rastreo de los robots puede hacer que no vean algunos contenidos o que algunos enlaces fallen ya que el robot no puede entender de JavaScript que sean muy complejos.

Google ha ido evolucionando continuamente las capacidades de rastreo de código Ajax y Javascript de sus robots, mientras Bing y Yahoo no han evolucionado mucho.

Incluso los motores de búsqueda no pueden representar con precisión el contenido más relevante para una consulta de búsqueda por lo que el exceso de utilización de esta tecnología puede ocasionar mal posicionamiento en los resultados de búsqueda.

Ejemplos de elementos y bloques html mejorando el SEO


Si necesitamos crear un bloque apliquemos nombes semánticos a las clases es decir con sentido que describa el contenido:

Ejemplo un bloque que muestre algún contenido
<div class=”bloquecentro”>
  <div class=”bloquetop”>

</div>
       <div class=”bloquecontenido”>

       </div>
</div>
Seria mejor darle un sentido más semántico a cada bloque de código html para que los robots puedan entender que contenido mostrarán:
<div class=”seccion-noticias”>

  <div class=”titulo-noticias”>

</div>
       <div class=”noticias”>

       </div>
  </div>
La estructura es clara para ser rastreada aunque el contenido no se haya generado en el HTML. El marcado semántico ya que contiene palabras claves, es importante utilizar etiquetas HTML adecuadas para el contenido, ante la duda podemos consultar el manual de Html de W3school.

Al igual que las listas ordenadas o desordenadas, un propósito las listas de definición es para mostrar la lista de contenido orientado, como en el caso expuesto podrían ser las noticias o una lista de productos. Esto permite más densidad de palabras clave, menos desorden en el código.

Uno de los aspectos más importantes es que el contenido que genera Javascript para el usuario sea el mismo contenido exactamente igual al que se le muestra a los buscadores o a los robots de búsqueda.

Google indica como solución posible que si nuestro sitio web incluye tecnologías a las cuales los motores de búsqueda no pueden acceder o no pueden interpretar, como JavaScript o Ajax, entonces debemos hacer uso de texto descriptivo o marcadores para que estos elementos puedan mostrar que contenido correspondería se mostrara y así mejorar la accesibilidad del sitio. Muchos usuarios usan dispositivos móviles, navegadores no estándares, software desactualizados y conexiones lentas, por lo que podrían tener fallas al momento de ver el contenido o utilizar alguna funcionalidad.

Los enlaces y parámetro por URL


Google prefiere que se utilice el hashbang como parámetro en una url, porque de esta manera le será más fácil interpretar sus enlaces cuando pasamos al sitio un hastabang como un parámetro.

Un ejemplo muy utilizado es en la web de Twitter. Google lo utiliza para retener y solicitar el contenido de esa página estática. Para mostrar lo que las URLs reescritas contienen, he aquí algunos ejemplos:

Esta URL generada por alguna consulta es mejor y más SEO semántica
www.miweb.com/#!madrid/productos

Estas dos url son más difíciles de entender para los robots, pero sin duda la última mejora algo la semántica.
www,miweb,com/?tmp=madrid/productos
www.miweb.com/?ciudad=madrid&seccion=productos

Mientras podamos hacer SEO semántico al contenido generado y mostrar el mismo contenido que un usuario vería en los buscadores, esto no representa un gran problema.

Pestañas y barras de navegación deslizables


En el caso de tener el contenido distribuido en pestañas, donde el contenido cambia mediante jquery u otro framework según la pestaña en que nos posicionamos , debe existir una url independiente para cada pestaña, cuando el usuario hace clic en una pestaña también puede realizarse una petición al servidor para generar contenido completamente nuevo. La estructura de cada enlace podría ser algo como:

www.miweb.com?tab=ventas
www.miwebe.com/?tab=clientes
www.miweb.com/?tab=productos

El truco con las pestañas se produce con CSS y Javascript, el servidor devuelve el contenido de todas las pestañas con la primera petición de página. Cuando el usuario hace clic en una pestaña, las clases definidas en CSS hacen que el navegador oculte el contenido asociado con una pestaña y mostrar sólo los contenidos relacionados con la pestaña se hace clic, mientras se ocultan las demás, pero están en el código esto esta permitido, por ello es bueno darle un sentido semántico a la estructura.

Es muy importante también no permitir el rastreo de Javascript o archivos CSS en robots.txt de nuestro sitio web ya que puede perjudicar el posicionamiento e indexación de su contenido y puede resultar con fallas para las estadísticas de rastreo.

Una de las directrices de Google webmaster dice específicamente no permitir rastrear estos archivos pero tampoco bloquearlos u ocultarlos al robots.

Google Webmaster Tools para verificar y analizar el rastreo


Google Webmaster Tools nos brinda la oportunidad de informar a google, mediante la verificación de propiedad sobre nuestro sitio web. Inicia sesión con la cuenta de Google o Gmail y luego podremos verificar nuestro sitio web.

google-webmaster.jpg


Una vez que haya verificado la propiedad, se puede presentar el sitemap.xml para comenzar a rastrear el sitio y luego Google comenzará a indexar sus URL.

El robot tarda cerca de dos semanas para que los enlaces aparezcan correctamente en Google Search.

No hay manera fácil de asegurarse de que todo está funcionando, pero hay algunas herramientas que le ayudarán a ver lo que está pasando. El mejor es utilizar la herramienta Explorar como Googlebot, que nos muestra exactamente lo que Google ve al rastrear el sitio web. Puedes acceder Google Webmaster Tools en Diagnóstico.

Mediante las herramientas de Google para Webmasters Tools podremos comprobar los enlaces indexados y corregir o eliminar estos enlaces para que tu web esté optimizada a los buscadores y tenga enlaces sin peligro de ser penalizados que ayuden a mejorar tu SEO, entre otras funcionalidades.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0


AYUDA A MEJORAR ESTE TUTORIAL!

¿Quieres ayudarnos a mejorar este tutorial más? Puedes enviar tu Revisión con los cambios que considere útiles. Ya hay 0 usuario que han contribuido en este tutorial al enviar sus Revisiones. ¡Puedes ser el próximo!


Tutoriales Relacionados



5 Comentarios


Alex Pereiro
abr 30 2015 08:55

Tutorial de 10. Gracias Sergio. Ya te sigo.


Sergio Culoccioni
abr 30 2015 12:50

Alice Sawn
abr 30 2015 12:55

A mi también me ha gustado mucho. 5 ***** votadas :)


Esteban Sanz
abr 30 2015 16:00

Te sigo también Sergio, haces buenos temas de Marketing. saludos.


Sergio Culoccioni
abr 30 2015 16:04

Gracias si quieren algun tema sugieranlo y redacto un tutorial.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado abr 30 2015 08:37
  •   Visitas 750
  •   Nivel
    Profesional