seo para aplicaciones javascript
TRANSCRIPT
SEO EN APLICACIONES AJAXo cómo hacer su SPA amigable para Google bot
HOLA, SOY SERGIO ACOSTA...trabajo en
SPA: SINGLE PAGE APPLICATION
¿CUÁL ES EL PROBLEMA?
1. El usuario abre http://movies.com/index.html#/movie/1
2. index.html vacío cargando con enlaces en JS3. 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 JSONs6. Las vistas empiezan y de se presenta la plantilla7. ¡LISTO! El usuario ve el contenido
¿QUÉ VE EL USUARIO?
¿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
¿POR QUÉ ESTO ES IMPORTANTE?
LA SOLUCIÓN
¿QUÉ ES UN SNAPSHOT HTML?
HTML SNAPSHOT
HASH FRAGMENT, HASHBANG, PUSHSTATE? WTF!
HASH: #HASHBANG: #!HASH FRAGMENT: Todo después del signo # en la URLPUSHSTATE: HTML5 history API
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
1.2 MANEJAR PAGINAS SIN HASH FRAGMENTS
<meta name="fragment" content="!">
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
OPCIONES PARA ENTREGAR EL SNAPSHOT
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
4. PRUEBE LA RASTREABILIDAD DE SU APP
EN RESUMEN
1. El sitio adopta el esquema de crawling AJAX2. 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
¿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
PRERENDER.IO
● prerender phantomjs service● prerender-node middleware● prerender_rails middleware
SERVICIOS EXTERNOS
¿QUIÉN MAS USA LOS SNAPSHOTS?
¿QUIÉN MAS USA LOS SNAPSHOTS?
¿QUIÉN MAS USA LOS SNAPSHOTS?
