A diferencia de un sitio web tradicional, que utiliza el paradigma de comunicación cliente-servidor, una aplicación JavaScript (Ajax y otras aplicaciones web) utiliza el enfoque de «representación del lado del cliente», que implica:

El diseño de la página, CSS y JavaScript se cargan en la solicitud inicial. Con frecuencia, parte o todo el material no se carga. Luego, JavaScript envía una segunda solicitud al servidor, que se responde en JSON, lo que genera el HTML necesario.

El uso de marcos de JavaScript permite a los desarrolladores construir aplicaciones en línea a las que se puede acceder desde una sola página web; esto se conoce como SPA (aplicación de una sola página). Tomemos, por ejemplo, Twitter, que es una aplicación móvil y de escritorio.

Sin embargo, debido a que los bots brindan señales que están conectadas con muchos sitios, esta estrategia es incompatible con el SEO.

El diseño de la versión SSR permite la reproducción del lado del servidor, lo que significa que el usuario verá una página completa en su navegador, con HTML creado en Javascript por el servidor en lugar del navegador.

Del lado del cliente, BackBone, Knockout.JS, Ember.JS y AngularJS de Google ahora compiten.

Varios problemas surgen como resultado de esta estrategia de desarrollo.

* 1 * El bot descarga el código HTML y evalúa el material incluido en el código para explorar un sitio JS completo.

Con la excepción del robot de Google, que utiliza un navegador sin cabeza, se ignora la mayor parte del contenido JS y Ajax.

* 2 * El segundo desafío es decidir qué indexar. Las interacciones hacen que el material cambie con frecuencia.

¿Cuáles son las señales? ¿Cómo evalúa los enlaces y el contenido de una página?

¿Qué tienen que ver estas señales entre sí? ¿Cómo podemos seguir utilizando el método actual si el concepto de una página conectada a una URL ha desaparecido?

* 3 * Desafío # 3: Un sitio solo se puede renderizar en AngularJS completo si el JS está habilitado; de lo contrario, el sitio es simplemente invisible. Debido a que el código fuente solo muestra variables, también es difícil para los motores de búsqueda acceder al contenido de estos sitios para indexarlos.

Como resultado, no es inesperado observar una gran influencia en la visibilidad SEO de estos sitios …

Como resultado, no es inesperado notar una gran influencia en la exposición SEO de estos sitios.

AJAX es popular entre los desarrolladores web que usan marcos populares como React y Angular para crear aplicaciones de una sola página.
AJAX se puede utilizar para crear una aplicación en línea interactiva, fácil de usar y sin problemas que funciona de manera similar a un programa de escritorio dedicado.

Sin embargo, la facilidad de uso y la utilidad de los sitios AJAX se obtienen a expensas del SEO de su sitio.
AJAX no es tan diferente de Flash para los rastreadores de motores de búsqueda, especialmente cuando se trata de la navegación del sitio web del corredor, que carga todas las páginas en la misma URL, dificultades de encubrimiento y botones inútiles de retroceso, siguiente y actualización.

Sin embargo, la reputación de AJAX está cambiando, ya que los principales motores de búsqueda están desarrollando soluciones para webmasters y ayudando a mejorar las experiencias de los usuarios. Aún así, esto ha recibido poca atención y la mayoría de los sitios web AJAX aún no están optimizados o no están indexados en los resultados de búsqueda de Google. Este consejo debería ayudarlo a que su sitio sea destacado si es uno de los numerosos.

Los ingenieros de Google han estado trabajando incansablemente para mejorar el rastreo y la indexación de las páginas AJAX, y han encontrado una serie de soluciones en el proceso, incluido el fragmento de escape en la URL, que ayuda a miles de sitios AJAX a obtener visibilidad de Google, y más recientemente , han comenzado a renderizar previamente estas páginas por parte de Google para una experiencia de usuario mucho mejor.

Ahora sabemos que Google lee el JS que crea el título, la meta descripción, los robots y las meta etiquetas: prueba de soporte.

Para reconocer una página compatible con dispositivos móviles o descubrir contenido oculto, Google comprende los archivos CSS y JS.

Google puede leer eventos Onclick, lo que significa que puede indexar material creado dinámicamente en JS.

Sin embargo, es erróneo creer que Google puede leerlo todo. El motor no detecta ninguna indicación sobre cómo iniciar Ajax porque no requiere que se carguen eventos.

En 2009, Google introdujo la técnica hashbang (#!) Para rastrear e indexar mejor Ajax. Cuando el robot encuentra una URL que contiene un hashbang, rastreará la página y reemplazará el hashbang con un
fragmento de escape.antes de indexar la página en su forma original.
Sin embargo, esta estrategia ahora es obsoleta porque Google afirma ser capaz de comprender el material generado por Ajax …

Debido a que las URL de navegación dinámica siguen siendo las mismas, la técnica de estado de empuje de IP historyHTML5 proporciona una mejor opción a largo plazo.
Debido a que está incluido en HTML5, también tiene la ventaja de permitir la navegación incluso cuando el usuario de Internet deshabilita JavaScript.

Pushstate () modifica la ruta de la URL que se muestra en la barra de direcciones del navegador del usuario.
Es ideal para SEO, ya que los motores pueden escanear estas URL y distinguirlas entre sí.

También debe tener en cuenta que Google sugiere usar Pushstate para hacer que su desplazamiento infinito sea compatible con SEO.

Cada una de las consultas del rastreador es verificada por el middleware de prerender.io, que se coloca en un servidor. Si el middleware detecta que la solicitud proviene de un rastreador, envía una solicitud para el HTML estático de la página. Si este no es el caso, la solicitud se envía a rutas de servidor convencionales.

Al utilizar AJAX para desarrollar sitios web, los SEO con frecuencia enfrentan una dificultad. Estos sitios brindan una experiencia de usuario maravillosa mientras cargan material en la página más rápido. Sin embargo, Google no indexa dichos sitios web, lo que hace que el SEO del sitio se vea afectado. Afortunadamente, Google ha propuesto una solución que permite a los webmasters tener lo mejor de todos los mundos. Los sitios web que implementan el plan deben crear dos versiones de su contenido: una para dispositivos móviles y otra para computadoras de escritorio.

Usuarios con JS habilitado y una URL de ‘estilo AJAX'

URL estáticas tradicionales para motores de búsqueda

El nuevo protocolo ‘hashbang' exige el uso de un hash y un signo de exclamación – #! Cuando incluye el hashbang en la URL de una página, Google reconoce que está siguiendo el protocolo y trata la URL de manera diferente. Acepta todo lo que sigue al hashbang y lo pasa como parámetro de URL al sitio web. Para el parámetro, utilizan el término
fragmento de escape . Luego, la URL se reescribirá y Google solicitará contenido de la página estática.

Para que la solución funcione, hay dos requisitos.
El primer paso es que el sitio se registre en el esquema de rastreo AJAX, que permite al rastreador solicitar URL desagradables.
Se agrega un disparador al encabezado de la página para hacer esto.
Si la página no incluye hashbang pero tiene la directiva en el encabezado, la directiva se elude.

Para concluir, existe una variedad de estrategias para que su sitio web AJAX esté correctamente posicionado en Google.
Todo comienza notificando a Google que sus páginas se muestran usando Javascript, luego de lo cual Google le pregunta a su URL escapando de los argumentos del fragmento, y finalmente entrega HTML estático para los rastreadores.

Puede parecer difícil, pero existen herramientas para hacerlo más fácil, y el propio Google tiene varias instrucciones y herramientas para ayudarlo.

Es factible rastrear e indexar un sitio construido con el framework JavaScript, pero lo que nos interesa es cómo posicionar nuestras páginas.

Primero, si la prueba Explorar como Google no obtiene los resultados deseados. Hay un problema.

La respuesta se puede encontrar en el navegador sin cabeza: un navegador «sin cabeza» es un entorno de software de línea de comandos con una API de JavaScript que puede representar una página HTML completa ejecutando HTML, CSS y JS de la misma manera que lo hace un navegador. Lo llamamos sin cabeza porque carece de una interfaz gráfica de usuario (interfaz de usuario).

Podemos probar los programas creados por los frameworks JS y Ajax simulando todo lo que sucede en el navegador.

Tenga en cuenta que con los sistemas de análisis web, este tipo de rastreo genera «visitas falsas» (porque ejecutan todos los scripts sin excepción).

Phantom JS y Casper JS son navegadores sin cabeza, y el último tiene la característica adicional de raspar.

Screaming Frog en modo «JavaScript crawl» también se puede utilizar para auditar.

Screaming Frog es un rastreador de SEO que recientemente incluyó un modo de «navegador sin cabeza» basado en PhantomJS. Como resultado, puede rastrear todo un sitio Angular.

En la configuración de araña, observe JS, CSS e imágenes.

Botify también ofrece esta opción desde enero de 2017.

Solución 1: Utilice una técnica de mejora progresiva para codificar de manera diferente.

El enfoque de mejora progresiva implica construir su sitio en tres capas:

El código HTML contiene el material (contenido y funcionalidades accesibles para todos).

Las hojas de estilo en cascada externas controlan el formato (CSS).

Funciones escritas en un script de terceros, como JavaScript.

Solución 2: cree sus propias instantáneas HTML. Para Ajax, Google recomienda esta solución.

En resumen, el código JS se realiza en el lado del servidor a través de un navegador sin cabeza para generar el HTML generado por el código JS.

Este código se «captura» antes de enviarse al navegador del usuario de Internet, al igual que una página HTML normal.

Sin embargo, esta estrategia pierde algo del atractivo de la «representación del lado del cliente», ya que la página se vuelve estática.

Enviar imágenes a los robots de los motores de búsqueda únicamente es un arbitraje común.

Solución 3:Utilice un servidor de pre-tendencias de terceros como tercera opción. El rastreo de nuestro sitio se simplifica gracias a las tecnologías de reproducción previa de documentos. Cuando un rastreador visita su sitio, un servidor de pre-tendencias le permite pre-renderizar sus páginas como estáticas, y le mostrará el renderizado HTML estático final tan pronto como la herramienta lo reconozca.

Prerender, SEO 4 Ajax (¡Cocorico!) Y Brombone son las soluciones de pre-tendencia de terceros más populares.

Tenga en cuenta que este enfoque puede parecer un encubrimiento incluso si no lo es.

Además, los servidores de representación hacen que Ajax sea rastreable utilizando el enfoque obsoleto. Para tener en cuenta:

Alternativamente, existe el enfoque de los hash bangs y las piezas que se escapan (como se vio anteriormente).

Alternativamente, puede usar el enfoque de fragmentos de escape con una metaetiqueta como esta: meta name = «fragment» content = «!»>

Tenga en cuenta que este enfoque HTML5, que usa la función pushstate (), está tan desactualizado como los demás .
Por el momento, esta estrategia funciona en todos los motores de búsqueda.
Sin embargo, hasta entonces,

Estoy luchando por hacer que un sitio web basado en AJAX sea compatible con SEO. Como se recomienda en los tutoriales en la web, agregué
hrefatributos
«bonitos»
a los enlaces:
<a href="#!site=contact" data-id="contact" class="navlink">контакт</a>y, en un div donde el contenido se carga con AJAX de forma predeterminada, un script PHP para rastreadores:

$files = glob('./pages/*.php'); foreach ($files as &$file) { $file = substr($file, 8, -4); } if (isset($_GET['site'])) { if (in_array($_GET['site'], $files)) { include ("./pages/".$_GET['site'].".php"); } }
tengo la sensación de que al principio necesito Además, corte la
_escaped_fragment_=parte
(...)/index.php?_escaped_fragment_=site=aboutporque, de lo contrario, el script no podrá obtener
GETel
sitevalor de la URL, ¿verdad?

pero, de todos modos, ¿cómo sé que el rastreador transforma enlaces bonitos (aquellos con
#!) en enlaces feos (que contienen
?_escaped_fragment_=)? Me han dicho que sucede automáticamente y no necesito proporcionar este mapeo, pero Explorar como Googlebot no me proporciona ninguna información sobre lo que sucede con la URL.
El bot de Google consultará automáticamente las
?_escaped_fragment_=URL.

Entonces, el
www.example.com/index.php#!site=aboutbot de Google consultará:
www.example.com/index.php?_escaped_fragment_=site=about
En el sitio PHP lo obtendrá como
$_GET['_escaped_fragment_'] = "site=about"
Si desea obtener el valor del «sitio», debe hacer algo como esto:

if(isset($_GET['_escaped_fragment_'])){ $escaped = explode("=", $_GET['_escaped_fragment_']); if(isset($escaped[1]) && in_array($escaped[1], $files)){ include ("./pages/".$escaped[1].".php"); } }