Qué es el JavaScript SEO y cómo optimizarlo
Cuando haces SEO en tus sitios web, ¿tienes en cuenta la gestión del JavaScript que utilizan tus páginas?
Saber cómo rastrea Google este lenguaje de programación es indispensable para conseguir la indexación de las URLs y obtener el mejor posicionamiento en las páginas de resultados de búsqueda.
No se trata de aprender a programar en JavaScript, pero sí necesitas saber cómo lo lee Google para optimizar el rastreo.
Hoy quiero hablarte de SEO JavaScript; veremos los aspectos básicos que te ayudarán a mejorar el SEO de los sitios webs que gestionas. Y compartiré contigo tres frameworks que debes conocer para optimizar tu gestión de optimización y posicionamiento web.
¿Qué es el SEO JavaScript?
El SEO JavaScript es parte del trabajo de optimización para los motores de búsqueda que tiene por objetivo mejorar el rendimiento de los sitios web que utilizan JavaScript; es decir, lo que se busca es que las URLs sean rastreables e indexables.
Si bien JavaScript es muy útil para añadir funcionalidad a tus webs, puede afectar de alguna manera el rendimiento de tus páginas, y eso puede derivar en un empeoramiento del posicionamiento.
Esto se debe a que los algoritmos de Google no saben procesar el código de manera completa.
Hay formas de mejorar la indexación de las páginas que utilizan código JavaScript; para ello necesitas saber cómo se realiza el rastreo.
Los 5 pasos que sigue Google para procesar las páginas con JavaScript
En los inicios de los buscadores, solía bastar el HTML para poder ver el contenido de las URLs. Con la implementación del JavaScript en cada vez más sitios web, los buscadores se han adaptado para emular a los navegadores y poder leer los contenidos de la misma manera en que lo hacen los usuarios.
Google realiza esta representación a través de lo que llaman WRS (Web Representation Service) que se lleva a cabo en cinco pasos:
- Cola de rastreo
- Rastreador
- Procesamiento
- Cola de Procesamiento
- Renderizado
Veamos cada uno de estos pasos con detalle.
Cola de rastreo
Como paso previo al rastreo de una página, el robot de Google la pone en una cola. Esto se debe a que Google tiene un crawling budget (presupuesto de rastreo) y debe asignar prioridad a las solicitudes.
Por lo general, los sitios más recientes o aquellos que tienen muchas páginas requieren de más tiempo, es decir, utilizan más parte del presupuesto.
Rastreador
El robot de Google coge una URL de la cola de rastreo y verifica si está autorizado para rastrearla. Para ello hace una lectura al archivo robots.txt.
Si una página tiene en su configuración la instrucción no follow, el robot no envía una solicitud a la URL y pasa de largo para continuar con la siguiente URL de la cola.
Procesamiento
En este paso el robot verifica enlaces a otras páginas dentro del sitio, y también los diferentes archivos que se necesitan para configurar una página. Google obtiene los enlaces a otras páginas y a los recursos mediante las etiquetas <link>.
Para que Google pueda rastrear los enlaces internos y externos debes utilizar los anchor text y las etiquetas HTML que contengan la URL de la página enlazada en el atributo href.
Cola de procesamiento
Cada página rastreada pasa por el proceso de renderizado. Antes de ello, Google las pone en una cola y prioriza de la misma manera que lo hace con la cola de rastreo.
Si una página está etiquetada con la instrucción “no index”, Google no la podrá en cola. Esto es algo en lo que todos sabemos que hay que poner mucha atención.
Renderizado
En esta etapa el robot renderiza las páginas para interpretar lo que ve un usuario. Es aquí donde se procesa JavaScript. Si la carga de la página lleva mucho tiempo, Google la penaliza; es decir, su posicionamiento no será en la primera página de los resultados de búsqueda.
Convierte tu página web en un sitio optimizado con JavaScript SEO friendly
En JavaScript SEO los procesos de optimización son muy parecidos a los métodos que ya conoces en el SEO tradicional, salvo por algunas pequeñas variantes.
Seo OnPage
Todas las etiquetas habituales para el SEO OnPage se siguen aplicando tal y como las conocemos como, por ejemplo, título, atributos alt, metadescripción y metarobots.
Un inconveniente que se presenta con frecuencia en los sitios web que utilizan JavaScript es que las descripciones y los títulos se reutilizan, lo que dificulta el indexado; y en cuanto a las imágenes es común ver que no se configuran los atributos alt.
Permite el rastreo por parte de los bots de Google
Configura el archivo robots.txt los permisos para que el bot de Google pueda rastrear todos los recursos de las páginas. Para ello agrega estas líneas al archivo:
User-Agent: Googlebot
Allow: .css
Allow. js
Asegúrate de que las direcciones URL son rastreables
Es frecuente encontrar URLs como xxx.com/#tema. Utilizar hashes en enrutamiento es una práctica errónea porque los servidores no tienen en cuenta nada que siga a un #.
En el caso del enrutador Vue puedes configurarlo de la siguiente manera:
const router = new VueRouter ({
mode: ‘history’,
router: [] //the array of router links
)}
Evita siempre el contenido duplicado
Cuanto trabajas con JavaScript con frecuencia puede suceder que se generen varias URLs para un mismo contenido. Y cuando los bots de Google encuentran contenido duplicado no saben cómo indexarlo y pueden penalizarte.
Cuando audites tu sitio podrás identificar el contenido que podría comprometer la indexación. Si tienes contenido duplicado, elige la URL que quieres indexar y utiliza etiquetas canónicas.
Utiliza frameworks de JavaScript para SEO
Un framework JavaScript es una biblioteca que te suministra plantillas prediseñadas con el respectivo código. Esta herramienta que se instala como un plugin del tipo JavaScript SEO Tools, te permite configurar gran parte de las etiquetas que necesitas para optimizar tu sitio.
Configura las páginas de error
Los frameworks de JavaScript no pueden dar un error del tipo 404 porque no están en el servidor. En este caso hay dos alternativas para configurar las páginas de error que funcionan muy bien:
- Añade a la página que muestra el error una etiqueta “no index” que arroje una respuesta de código 404.
- Agrega la etiqueta “no index” a la página que presenta el fallo e incluye un mensaje de error. De esta manera, el código de estado será 200 y recibirá tratamiento de 404 leve.
Mapa del sitio (sitemap)
Los enrutadores incluidos en los framework de JavaScript suelen tener un módulo capaz de generar sitemaps. Para saber si el tuyo la tiene busca sitemap + router.
Aunque Google no penaliza un sitio por no tener un sitemap, es recomendable que cuentes con uno actualizado para facilitar a los bots de Google indexar las páginas relevantes de tu sitio.
Asegúrate de hacer todos los redireccionamientos
Si bien los redireccionamientos del tipo 301/302 son del lado del servidor, puedes indicarlos desde JavaScript para que las páginas puedan ser rastreadas de manera correcta.
Carga lenta de las páginas
Algunas páginas pueden tardar mucho tiempo en cargar y eso es negativo para la experiencia del usuario. Puedes recurrir a plugins que hagan de manera diferida la carga de imágenes.
De esta manera, la página cargará más rápido y no sufrirás las penalizaciones de Google por carga lenta.
Frameworks de SEO JavaScript
Existen gran cantidad de JavaScript SEO Tools que conocemos como frameworks. Todas ofrecen muchas funcionalidades; sin embargo, solo algunas logran popularidad por sus características y usabilidad.
A continuación, te muestro las tres mejores JavaScript SEO Tools de acuerdo con la experiencia y opiniones de miles de personas que ya las utilizan en sus estrategias de SEO.
React.js
Si tus webs tienen contenidos dinámicos y sitios web grandes, React.js es una de las mejores opciones. Creada por Facebook en 2013, te permite simplificar interfaces de usuario y ofrece una alta fiabilidad.
Además de Facebook, también la utilizan PayPal, Instagram y Uber; sin duda, una buena referencia de lo confiable que es esta herramienta.
Meteor.js
El framework Meteor te permite actualizar contenido de manera muy rápida. Otra de sus cualidades es que centraliza la gestión las bases de datos, el back end y el front end; esto hace que muchas de las tareas se simplifiquen y ahorres tiempo.
Desde su lanzamiento en 2012 se le han incluido muchas mejoras y también se han creado extensiones (plugins) que permiten que sea aún más práctico. Otra de sus ventajas es que su curva de aprendizaje es baja. Es una herramienta JavaScript SEO orientada a Google.
Vue.js
Este framework simple e intuitivo se dio a conocer en 2014; gracias a que es Open Source y a una comunidad de usuarios que aportan su experiencia para mejorarlo, crece de forma sostenida y gana cada vez más popularidad entre los desarrolladores.
Además de ser una herramienta que funciona muy bien, el acceso a sus recursos y códigos sumado al apoyo que puedes encontrar en la comunidad de desarrolladores hace que esta JavaScript SEO Tool resulte muy versátil, útil y de confianza.
Conclusión acerca de qué es el JavaScript SEO
El SEO JavaScript es una técnica que necesitas conocer y dominar para optimizar tus sitios web. Por suerte, no es necesario que domines el lenguaje de programación.
Con las herramientas creadas por los desarrolladores, solo tienes que instalarlas en tus webs y esperar a que ellas hagan por ti todo lo necesario para mejorar la velocidad de carga de las páginas, haciendo más eficiente el rastreo de los bots de Google.
Prueba los diferentes framework disponibles y escoge el que mejor funcione para que tus sitios web sean JavaScript SEO friendly.
¿Cómo gestionas el SEO JavaScript de tus páginas web? ¿Qué frameworks utilizas? Cuéntanos en comentarios, nos encantará leerte.
