--- title: SEO para aplicaciones AJAX url: https://juanluismora.es/seo/seo-para-aplicaciones-ajax.html --- # SEO para aplicaciones AJAX Juan Luis Mora · Actualizado el 30 de junio de 2023 [![SEO AJAX](https://juanluismora.es/img/seo-ajax.webp)](https://juanluismora.es/)Os hablaba la semana pasada de un proyecto sobre [posicionamiento web](https://juanluismora.es/) en el que estoy trabajando para conseguir [url limpias con ASP](https://juanluismora.es/seo/url-limpias-con-php.html), pues para ese mismo proyecto también va se necesario trabajar el **SEO de una aplicación AJAX (acrónimo de Asynchronous JavaScript And XML)** que están desarrollando. Los problemas con el **SEO de AJAX** son similares (sin entrar en tecnicismos) a los que tiene por ejemplo FLASH, la principal dificultad estriba en que no generan suficiente texto legible para los buscadores La solución funciona de la siguiente manera: el rastreador encuentra una URL de AJAX con el fragmento hash(#!). A continuación, solicita el contenido de esta dirección URL al servidor, pero el servidor web devuelve el contenido en forma de una instantánea con HTML, que es procesada por el rastreador y la asociará con la dirección URL original. ## Making AJAX App Crawlable: Esquema de funcionamiento Google dio una posible solución para este tipo de aplicaciones web y para ello creó Make AJAX Application Crawlable, de donde hemos traducido gran parte de este articulo. El esquema de funcionamiento se refleja en la siguiente figura: [![Seo en AJAX](https://juanluismora.es/img/seo-ajax-300x185.webp)](https://juanluismora.es/) Según el esquema: - De una parte para el navegador - Se solicita una url amigable - Se obtiene un código js. - De otra parte el buscador - Detecta compatibilidad con AJAX - Solicita una url no amigable - Obtiene una instantánea html del sitio para indexarlo ### Indicar compatibilidad con AJAX Para que los buscadores detecten la compatibilidad con AJAX App Crawlable tenemos que indicarlo añadiendo «!» al «#» de cada url. [![url en AJAX](https://juanluismora.es/img/has1-300x61.webp)](https://juanluismora.es/) [![ulr amigable en AJAX](https://juanluismora.es/img/has2-300x59.webp)](https://juanluismora.es/) ### ¿Que es una instantánea HTML? Ahora cuando el buscador detecte esto solicitará la siguiente url [![Url no amigable en AJAX](https://juanluismora.es/img/escaped-300x47.webp)](https://juanluismora.es/) Entonces el servidor le mostrará una instantánea en HTML, podemos ver un ejemplo de esto: - Tomemos está url *http://gwt.google.com/samples/Showcase/Showcase.html#!CwRadioButton* y veamos su código fuente, podremos comprobar que no pone **nada de texto útil** *[![AJAX visto por el navegador](https://juanluismora.es/img/fuente1-300x163.webp)](https://juanluismora.es/)* - De la anterior captura es importante destacar que en la cabecera también podemos indicar que nuestro código es AJAX App Crawlable poniendo esta etiqueta: [![AJAX App Crawlable](https://juanluismora.es/img/meta-300x35.webp)](https://juanluismora.es/) - Ahora hagamos los mismo con *http://gwt.google.com/samples/Showcase/Showcase.html?\_escaped\_fragment\_=CwRadioButton,* podremos ver que el código html que se sirve no es nada limpio ni optimizado, pero por lo menos tiene partes de textos que pueden ser útiles. [![Instantanea HTML de AJAX](https://juanluismora.es/img/codigo.webp)](https://juanluismora.es/) ### ### URL amigable y no amigable para AJAX Llamaremos URL amigable a la que tiene la forma: *www.example.com/ajax.html#!key=valu*e y url no amigable a la de forma: *www.example.com/ajax.html?\_escaped\_fragment\_=key=value* ## Como crear instantáneas en HTML Existen diversos métodos para crear las instantáneas HTML y se puede elegir uno u otro según las necesidades, os dejamos un pequeño resumen, pero os aconsejamos leer la página original: Crear instantáneas HTML para AJAX - Crear contenido estático para cada estado dinámico, se usan técnicas como HIJAX para servir el contenido estático de estado dinámico. Si ya tiene este contenido, o si el contenido de su aplicación no cambia con frecuencia - Gran parte de su contenido es creado por una tecnología del lado del servidor como PHP o ASP.NET. Para este caso podemos interceptar las url no amigables y mostrar una instantánea de la página por ejemplo con PHP usando soporte de DOM en PHP. - Gran parte de su contenido se crea en el cliente con JavaScript, podemos considerar el uso de una tecnología como un headless browser para crear una instantánea de HTML. Por ejemplo HtmlUnit . ### Y ahora, ¿Que url utilizo? Cuando tengamos todo lo anterior preparado, usaremos siempre las url amigables, es decir de la forma: *www.example.com/ajax.html#!key=valu*e tanto en sitemap como en enlaces entrantes, también deberemos pones esa en las etiquetas canónicas. --- **¿Te ha servido?** Si quieres que lo mire en tu web, [aquí te cuento cómo trabajo el SEO](https://juanluismora.es/seo-freelance) o [escríbeme](https://juanluismora.es/contacto). ## Relacionado - [Error en el login de WordPress: bucle de redirección (solución)](https://juanluismora.es/seo/error-en-login-de-wordpress-wp-login-phpredirect.html) - [Precio de una auditoría SEO: qué debe incluir y de qué depende](https://juanluismora.es/seo/auditoria-seo-precio.html) - [WPO en WordPress: por dónde empezar de verdad](https://juanluismora.es/seo/como-hago-wpo-en-wordpress.html) - [URLs limpias y amigables: cómo funcionan de verdad](https://juanluismora.es/seo/url-limpias-con-php.html) ## ¿Lo miro en tu web? Le echo un vistazo a los datos y te digo qué tocar primero. [Escríbeme un correo](mailto:seo@juanluismora.es?subject=Consulta%20desde%20https%3A//juanluismora.es/seo/seo-para-aplicaciones-ajax.html) [Pedir presupuesto SEO](https://juanluismora.es/presupuesto-seo#agenda) Juan Luis Mora · Ingeniero informático y consultor SEO freelance. SEO en español para España y el mundo. Escribo para IAs desde Google Bard.