SEO para aplicaciones javascript
1 recomendación627 vistas
Este documento explica cómo hacer que las aplicaciones de una sola página (SPA) sean rastreables para los bots de búsqueda como Google. Recomienda adoptar el esquema de rastreo AJAX mediante la inclusión de fragmentos de hash en las URLs, generar snapshots HTML estáticos de las páginas dinámicas para que los bots puedan indexar el contenido, y actualizar el sitemap para incluir las nuevas URLs AJAX.
SEO para aplicaciones javascript
- 1. SEO EN APLICACIONES AJAX o cómo hacer su SPA amigable para Google bot
- 2. HOLA, SOY SERGIO ACOSTA ...trabajo en
- 3. SPA: SINGLE PAGE APPLICATION
- 5. 1. El usuario abre http://movies.com/index.html#/movie/1 2. index.html vacío cargando con enlaces en JS 3. El usuario carga la aplicación (todo el código JavaScript) 4. Empieza el enrutador - aca sabemos de /#movie/1 5. Los modelos empiezan y se descargan los JSONs 6. Las vistas empiezan y de se presenta la plantilla 7. ¡LISTO! El usuario ve el contenido ¿QUÉ VE EL USUARIO?
- 7. ¿QUÉ VE EL CRAWLER? 1. El robot ingresa a http://movies.com/index.html#/movie/1 2. index.html vacío cargando con enlaces en JS
- 9. ¿POR QUÉ ESTO ES IMPORTANTE?
- 10. LA SOLUCIÓN
- 11. ¿QUÉ ES UN SNAPSHOT HTML?
- 12. HTML SNAPSHOT
- 13. HASH FRAGMENT, HASHBANG, PUSHSTATE? WTF!
- 14. HASH: # HASHBANG: #! HASH FRAGMENT: Todo después del signo # en la URL PUSHSTATE: HTML5 history API
- 15. 1.1 INDICARLE AL CRAWLER QUE SU SITIO SOPORTA EL ESQUEMA DE CRAWLING AJAX Si su aplicación AJAX contiene urls como estas: www.example.com/ajax.html#key=value ahora debería ser la siguiente: www.example.com/ajax.html#!key=value
- 16. 1.2 MANEJAR PAGINAS SIN HASH FRAGMENTS <meta name="fragment" content="!">
- 17. 2. CONFIGURAR SU SERVIDOR PARA MANEJAR SOLICITUDES A URLS QUE CONTIENEN _escaped_fragment_ El crawler modificara cada URL AJAX como: www.example.com/ajax.html#!key=value para convertirse temporalmente en: www.example.com/ajax.html? _escaped_fragment_=key=value
- 18. OPCIONES PARA ENTREGAR EL SNAPSHOT
- 19. Incluir la versión de sus URLS que prefiere que se muestren en los resultados de búsqueda: http://example.com/ajax.html#!key=value No incluya enlaces como estos: http://example.com/ajax.html? _escaped_fragment_=key=value 3. ACTUALIZAR SU SITEMAP PARA LISTAR SUS NUEVAS URLS AJAX
- 20. 4. PRUEBE LA RASTREABILIDAD DE SU APP
- 21. EN RESUMEN 1. El sitio adopta el esquema de crawling AJAX 2. Por cada URL que tiene contenido producido dinámicamente el servidor provee el snapshot HTML 3. El motor de búsqueda indexa el snapshot HTML y sirve la URL AJAX original en los resultados de búsqueda
- 22. ¿CÓMO CREAR SNAPSHOTS HTML? ● Usar un headless browser como: ○ PhantomJS ○ Zombie.js ○ HtmlUnit ○ Ghost ○ Crawljax ○ Watij ● Generar HTML estáticos en el lado del servidor
- 23. PRERENDER.IO ● prerender phantomjs service ● prerender-node middleware ● prerender_rails middleware
- 25. ¿QUIÉN MAS USA LOS SNAPSHOTS?
- 26. ¿QUIÉN MAS USA LOS SNAPSHOTS?
- 27. ¿QUIÉN MAS USA LOS SNAPSHOTS?