SEO vs.React: los rastreadores web son más inteligentes de lo que cree

A muchas personas todavía les preocupa que si crea un sitio web con herramientas como React, Angular o Ember, perjudicará su clasificación en los motores de búsqueda.

El pensamiento es algo como esto: los rastreadores web que utilizan los motores de búsqueda no podrán rastrear una página correctamente a menos que esté completamente renderizada en el navegador del usuario. En cambio, solo verán el código HTML entregado desde el backend.

Si ese código HTML no contiene más que un par de metaetiquetas y etiquetas de secuencia de comandos, el motor de búsqueda asumirá que su página está básicamente en blanco y lo clasificará mal.

Por lo general, veo que los consultores de optimización de motores de búsqueda (SEO) recomiendan que renderice su página en el backend, para que los rastreadores web puedan ver una gran cantidad de código HTML agradable que luego puedan indexar.

Para mí, este consejo me parece irracional y poco realista. Es 2016. Los usuarios esperan que las páginas sean dinámicas y les proporcionen una experiencia de usuario ágil. No quieren esperar a que se cargue una nueva página HTML cada vez que hacen clic en algo.

Entonces, ¿sigue siendo válida la afirmación "la representación del lado del cliente perjudica el ranking de su página"?

Haciendo la investigación

Primero, un descargo de responsabilidad: de ninguna manera soy un experto en SEO. Pero leí un poco sobre el tema, y ​​esto es lo que encontré.

Aquí hay un anuncio de Google en su blog para webmasters de octubre de 2015:

En la actualidad, siempre que no esté impidiendo que Googlebot rastree sus archivos JavaScript o CSS, por lo general, podemos representar y comprender sus páginas web como los navegadores modernos. Para reflejar esta mejora, recientemente actualizamos nuestras Directrices técnicas para webmasters a fin de recomendar que no se permita que el robot de Google rastree los archivos CSS o JS de su sitio.

Aquí hay un artículo de Search Engine Land de mayo de 2015:

Realizamos una serie de pruebas que verificaron que Google es capaz de ejecutar e indexar JavaScript con una multitud de implementaciones. También confirmamos que Google es capaz de representar la página completa y leer el DOM, indexando así el contenido generado dinámicamente. Se respetan las señales SEO en el DOM (títulos de página, meta descripciones, etiquetas canónicas, etiquetas meta robots, etc.). El contenido insertado dinámicamente en el DOM también es rastreable e indexable. Además, en ciertos casos, las señales DOM pueden incluso tener prioridad sobre las declaraciones contradictorias en el código fuente HTML. Esto requerirá más trabajo, pero fue el caso de varias de nuestras pruebas.

Estas dos fuentes sugieren que, de hecho, es seguro utilizar el diseño renderizado del lado del cliente.

La prueba de Preactjs.com

Recientemente, tuiteé un lamento sobre los consultores de SEO que critican mi amado React. Para ser precisos, estoy en el proceso de migrar a Preact, una alternativa liviana a React de Facebook. Recibí esta respuesta de Jason Miller, uno de los desarrolladores que trabaja en Preact:

Aparte del artículo de blog de Search Engine Land que he citado anteriormente, Jason tuiteó un enlace a una búsqueda de Google para la página de inicio de Preact, que se ve así:

Esta página se representa completamente del lado del cliente, utilizando Preact, como lo demuestra una mirada a su código fuente:

Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.
(function(url){window['_boostrap_'+url]=fetch(url);})('/content'+location.pathname.replace(/^\/(repl)?\/?$/, '/index')+'.md');
(function(i,s,o,g,r,a,m))(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-6031694-20', 'auto');ga('send', 'pageview');

Si el robot de Google no pudiera leer el código HTML generado por Preact, no mostraría más que el contenido de las metaetiquetas.

Y, sin embargo, así es como se ven los resultados de Google al buscar el sitio: preactjs.com :

Otro artículo de Andrew Farmer de marzo de 2016 advierte sobre la falta de compatibilidad con JavaScript en motores de búsqueda distintos de Google:

En mi investigación no pude encontrar ninguna evidencia de que Yahoo, Bing o Baidu admitan JavaScript en sus rastreadores. Si el SEO en estos motores de búsqueda es importante para usted, necesitará utilizar el renderizado del lado del servidor, que hablaré en un artículo futuro.

Así que decidí probar la prueba de Jason con otros motores de búsqueda:

✅ Bing

La advertencia de Andrew sobre Bing parece insustancial. Estos son los resultados de Bing al buscar el sitio: preactjs.com :

✅ Yahoo

Y los resultados de Yahoo al buscar el sitio: preactjs.com :

✅ Duck Duck Go

Y los resultados de Duck Duck Go al buscar el sitio: preactjs.com :

⚠️ Baidu

Chinese search engine Baidu does have problems with preactjs.com. Here are its results when searching for site:preactjs.com:

So it would seem that unless ranking high in what is essentially a China-only search engine is a priority for you, there’s nothing wrong with rendering your web pages on the client-side using JavaScript, as long as you follow some basic rules (quoted from Andrew Farmer’s blog post):

  • Render your components before doing anything asynchronous.
  • Test each of your pages with Fetch as Google to ensure that the Googlebot is finding your content

Thanks for reading!

Update 25th October 2016

Andrew Ingram ran the same tests that I ran an came to a different conclusion.

Quote from Andrew:

A continuación, se muestra cuántas páginas han indexado varios motores de búsqueda mediante la consulta "site: preactjs.com" Google: 17 Bing: 6 Yahoo: 6 Baidu: 1 Uno de los resultados de Google es una página de error, pero presumiblemente no se puede desindexar automáticamente debido a que todavía no hay una forma de declarar un equivalente 404 en SPA. También he leído (no recuerdo dónde) que Google tiene una latencia de unos pocos días cuando se trata de indexar SPA en comparación con el servidor- aplicaciones renderizadas. Puede que esto no sea un problema para usted, pero vale la pena conocerlo.

Su hipótesis de trabajo es que los robots de los motores de búsqueda distintos de Google pueden indexar las páginas renderizadas del lado del cliente, pero no rastrearlas , es decir, seguir enlaces e indexar otras páginas de un sitio web.

→ Siga la discusión sobre Hacker News

Agradecimientos

Thanks to Adam Audette (Search Engine Land) and Andrew Farmer for their excellent blog articles from which I quoted, Jason Miller for his input and inspiration, my colleagues from the eBay Classifieds Group for their support and Quincy Larson of Free Code Camp for publishing this article!