{"id":12468,"date":"2023-04-07T06:24:57","date_gmt":"2023-04-07T14:24:57","guid":{"rendered":"https:\/\/ahrefs.com\/blog\/es\/?p=12468"},"modified":"2023-05-15T23:28:03","modified_gmt":"2023-05-16T07:28:03","slug":"react-seo","status":"publish","type":"post","link":"https:\/\/ahrefs.com\/blog\/es\/react-seo\/","title":{"rendered":"React SEO: Las mejores pr\u00e1cticas para que sea SEO-Friendly"},"content":{"rendered":"<div class=\"intro-txt\"> La creciente prevalencia de <a href=\"https:\/\/reactjs.org\" target=\"_blank\" rel=\"noopener\">React<\/a> no pasa desapercibida&nbsp;<\/div>\n<p>React y otras bibliotecas similares (como <a href=\"https:\/\/vuejs.org\" target=\"_blank\" rel=\"noopener\">Vue.js<\/a>) se est\u00e1n convirtiendo en la opci\u00f3n preferente para empresas m\u00e1s grandes que demandan un desarrollo complejo. Aquellas empresas donde un enfoque m\u00e1s simple (como usar un tema de WordPress) no satisface los requisitos b\u00e1sicos.<\/p>\n<p>A pesar de ello, los SEOs inicialmente no adoptaron bibliotecas como React, ya que los motores de b\u00fasqueda luchan por representar JavaScript de forma efectiva, siendo la preferencia el contenido disponible <a href=\"https:\/\/support.google.com\/surveys\/answer\/6172725?hl=en\" target=\"_blank\" rel=\"noopener\">dentro de la fuente HTML<\/a>.<\/p>\n<p>Sin embargo, los desarrollos tanto en Google como en React pueden renderizar en JavaScript. Es decir, se han simplificado estas complejidades, lo que resulta en que el SEO ya no obstaculiza el uso de&nbsp;React.<\/p>\n<p>A\u00fan as\u00ed, quedan algunas complejidades que analizaremos en esta&nbsp;gu\u00eda.<\/p>\n<p>En este post cubriremos:<\/p>\n<ul>\n<li><a href=\"#1-what-is-react\">Qu\u00e9 es&nbsp;React<\/a><\/li>\n<li><a href=\"#2-rendering-with-react\">Renderizando con&nbsp;React<\/a><\/li>\n<li><a href=\"#3-how-google-processes-pages\">C\u00f3mo procesa Google las p\u00e1ginas<\/a><\/li>\n<li><a href=\"#4-common-seo-issues\">Problemas comunes de <em>React SEO<\/em><\/a><\/li>\n<\/ul>\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"Antes que nada\u2026 \u00bfqu\u00e9 es React?\" data-section=\"1-what-is-react\">\n<h2><strong>Antes que nada\u2026<\/strong><strong> \u00bfqu\u00e9 es&nbsp;React?<\/strong><\/h2>\n<\/div><\/div>\n<p>React es una biblioteca JavaScript <em>open-source<\/em> desarrollada por Meta (anteriormente Facebook) para crear aplicaciones web y m\u00f3viles. Las principales caracter\u00edsticas de React son que (1) es declarativa, (2) est\u00e1 basada en componentes y (3) permite una manipulaci\u00f3n m\u00e1s sencilla <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/API\/Document_Object_Model\/Introduction\" target=\"_blank\" rel=\"noopener\">del DOM<\/a>.<\/p>\n<p>La forma m\u00e1s sencilla de entender los componentes es pensar en ellos como plugins, como por ejemplo de WordPress. Permiten a los desarrolladores crear r\u00e1pidamente un dise\u00f1o y agregar funcionalidad a una p\u00e1gina usando <a href=\"https:\/\/mui.com\" target=\"_blank\" rel=\"noopener\">bibliotecas de componentes como MUI<\/a> o <a href=\"https:\/\/tailwindui.com\" target=\"_blank\" rel=\"noopener\">Tailwind UI<\/a>.<\/p>\n<p>Si quieres saber por qu\u00e9 los desarrolladores prefieren React, empieza con estas lecturas:<\/p>\n<ul>\n<li><a href=\"https:\/\/ui.dev\/imperative-vs-declarative-programming\/\" target=\"_blank\" rel=\"noopener\">Programaci\u00f3n imperativa vs programaci\u00f3n declarativa<\/a><\/li>\n<li><a href=\"https:\/\/www.geeksforgeeks.org\/reactjs-components\/\" target=\"_blank\" rel=\"noopener\">Componentes de&nbsp;React<\/a><\/li>\n<\/ul>\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"Renderizando con React\" data-section=\"2-rendering-with-react\">\n<h2><strong>Renderizando<\/strong><strong> con&nbsp;React<\/strong><\/h2>\n<\/div><\/div>\n<p>React implementa un <em><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/architecture\/app-shell\" target=\"_blank\" rel=\"noopener\">App Shell Model<\/a><\/em>, lo que significa que la gran mayor\u00eda del contenido (si no todo) se representar\u00e1 en el lado del cliente (CSR, por sus siglas en ingl\u00e9s <em>Client-side Rendered)<\/em> de forma predeterminada.<\/p>\n<p>CSR significa que el c\u00f3digo HTML contiene principalmente la biblioteca React JS, en vez de que el servidor env\u00ede el contenido completo de la p\u00e1gina dentro de la respuesta HTTP inicial del servidor (la fuente HTML).<\/p>\n<p>Tambi\u00e9n incluir\u00e1 c\u00f3digo JavaScript que contenga <a href=\"https:\/\/www.pluralsight.com\/guides\/load-and-render-json-data-into-react-components\" target=\"_blank\" rel=\"noopener\">datos JSON<\/a>, o enlaces a archivos <em>JS,<\/em> que contengan componentes React. Puedes saber r\u00e1pidamente si una web est\u00e1 renderizando del lado del cliente comprobando su c\u00f3digo fuente HTML. Para ello, haz clic con el bot\u00f3n derecho en un p\u00e1gina web y selecciona \u201cVer c\u00f3digo fuente\u201d (o CTRL\/CMD +&nbsp;U).<\/p>\n<img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled-1.png\">\n<p>Si no ves muchas l\u00edneas de HTML, lo m\u00e1s probable es que la aplicaci\u00f3n est\u00e9 renderizada del lado del cliente.<\/p>\n<p>Sin embargo, cuando inspeccionas el elemento haciendo clic con el bot\u00f3n derecho y seleccionando \u201cInspeccionar elemento\u201d (o F12 \/ CMD + \u2325 + I), ver\u00e1s el DOM generado por el navegador (el sitio donde el navegador ha renderizado el c\u00f3digo JavaScript).<\/p>\n<p>Ah\u00ed ver\u00e1s que la p\u00e1gina tiene mucho c\u00f3digo HTML:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled.jpg\"><\/p>\n<p>Observa el ID appMountPoint en el primer &lt;div&gt;. Com\u00fanmente ver\u00e1s un elemento como ese en una <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/SPA\" target=\"_blank\" rel=\"noopener\">aplicaci\u00f3n de una sola p\u00e1gina<\/a> (SPA, por sus siglas en ingl\u00e9s <em>single-page application)<\/em>, por lo que una biblioteca como React sabe d\u00f3nde debe inyectar HTML. <a href=\"https:\/\/www.wappalyzer.com\/\" target=\"_blank\" rel=\"noopener\">Las herramientas de detecci\u00f3n de tecnolog\u00eda, por ejemplo, Wappalyzer<\/a>, tambi\u00e9n son muy buenas para detectar la biblioteca.<\/p>\n<div class=\"editor-note\"><div class=\"editor-title\">NOTA DEL EDITOR<\/div><div class=\"editor-content\"> El <a href=\"http:\/\/ahrefs.com\/es\/site-audit\/\">Site Audit de Ahrefs<\/a> guarda tanto el HTML sin procesar enviado desde el servidor, como el HTML renderizado en el navegador, haciendo m\u00e1s f\u00e1cil detectar si un sitio tiene contenido renderizado del lado del cliente.<br>\n<img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled.gif\"><br>\nMejor a\u00fan, puedes buscar tanto en el HTML sin procesar como en el renderizado qu\u00e9 contenido se est\u00e1 renderizando espec\u00edficamente en el lado del cliente. En el siguiente ejemplo, puedes ver que esta p\u00e1gina est\u00e1 renderizando en el lado del cliente contenido clave de la p\u00e1gina, como la etiqueta &lt;h1&gt;.<br>\n<img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled-1.gif\"><\/div><div class=\"editor-info clearfix\"><div class=\"editor-photo\"><img decoding=\"async\" alt=\"Joshua Hardwick\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2019\/07\/me-1.jpg\"><\/div><div class=\"extra-box\"><div class=\"editor\">Joshua Hardwick<\/div><div class=\"editor-job\">Head of Content<\/div><\/div><\/div><\/div>\n<p>Las webs creadas con React se diferencian del enfoque m\u00e1s tradicional de dejar el trabajo pesado de renderizar el contenido en el servidor utilizando lenguajes como PHP, llamado <em>Server-side Rendering<\/em> (SSR).<\/p>\n<img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/react_seo_1-SPA.png\">\n<p>Antes del SSR, los desarrolladores lo ten\u00edan a\u00fan m\u00e1s&nbsp;f\u00e1cil.<\/p>\n<p>Creaban documentos HTML est\u00e1ticos que no cambiaban, los alojaban en un servidor y los enviaban inmediatamente. El servidor no necesitaba renderizar nada, y el navegador, normalmente, ten\u00eda muy poco que renderizar.<\/p>\n<p>Las SPA (las <em>single-side applications, <\/em>incluidas las que utiliza React) est\u00e1n volviendo a este enfoque est\u00e1tico. Ahora est\u00e1n pre-renderizando JavaScript en HTML antes de que un navegador solicite la URL. Este enfoque se denomina <em>Static Site Generation<\/em> (SSG), tambi\u00e9n conocido como<em> Static Rendering.<\/em><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/react_seo_2-SPA.png\"><\/p>\n<p>En la pr\u00e1ctica, SSR y SSG son muy parecidos.<\/p>\n<p>La diferencia clave es que con el SSR el contenido se renderiza cuando el navegador solicita una URL, mientras que con el SSG el contenido se pre-renderiza en tiempo de compilaci\u00f3n (cuando los desarrolladores despliegan c\u00f3digo nuevo o un administrador web cambia el contenido de la&nbsp;web).<\/p>\n<p>SSR puede ser m\u00e1s din\u00e1mico, pero m\u00e1s lento debido al tiempo adicional requerido por parte del servidor al renderizar el contenido antes de enviarlo al navegador del usuario.<\/p>\n<p>SSG es m\u00e1s r\u00e1pido, ya que el contenido ya ha sido renderizado. Lo que significa que se puede entregar al usuario inmediatamente (lo que se traduce como un TTFB, <em>Time to First Byte,<\/em> m\u00e1s r\u00e1pido).<\/p>\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"C\u00f3mo procesa Google las p\u00e1ginas\" data-section=\"3-how-google-processes-pages\">\n<h2><strong>C\u00f3mo procesa Google las p\u00e1ginas<\/strong><\/h2>\n<\/div><\/div>\n<p>Para entender por qu\u00e9 el enfoque de renderizado del lado del cliente por defecto de React causa problemas de SEO, primero hay que entender c\u00f3mo Google rastrea, procesa e indexa las p\u00e1ginas.<\/p>\n<p>Podemos resumir los conceptos b\u00e1sicos de c\u00f3mo funciona esto en los siguientes pasos:<\/p>\n<ol start=\"1\">\n<li><strong>Rastreo<\/strong>: <a href=\"https:\/\/ahrefs.com\/blog\/es\/que-es-googlebot\/\" data-ahr=\"https:\/\/ahrefs.com\/blog\/es\/googlebot\/\">Googlebot<\/a> env\u00eda solicitudes GET a un servidor para las URL en la cola de rastreo, y guarda el contenido de la respuesta. Googlebot hace esto para HTML, JavaScript, CSS, archivos de imagen, etc.<\/li>\n<li><strong>Procesamiento<\/strong>: esto incluye agregar URLs a la cola de rastreo que se encuentra dentro de los enlaces &lt;a href&gt; dentro del HTML. Tambi\u00e9n incluye URLs de recursos de cola (CSS\/JS) que se encuentran dentro de etiquetas <a href=\"https:\/\/www.w3schools.com\/tags\/tag_link.asp\" target=\"_blank\" rel=\"noopener\">&lt;link&gt;<\/a> o im\u00e1genes dentro de las etiquetas <a href=\"https:\/\/www.w3schools.com\/tags\/tag_img.asp\" target=\"_blank\" rel=\"noopener\">&lt;img src&gt;<\/a>. Si el Googlebot encuentra una etiqueta <em>noindex<\/em> en esta etapa, el proceso se detiene. Googlebot no procesar\u00e1 el contenido y Caffeine (el indexador de Google) no lo indexar\u00e1.<\/li>\n<li><strong>Rendering<\/strong>: Googlebot ejecuta c\u00f3digo JavaScript con un <a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/lkgr\/headless\/README.md\" target=\"_blank\" rel=\"noopener\">navegador <\/a><em><a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/lkgr\/headless\/README.md\" target=\"_blank\" rel=\"noopener\">headless Chromium<\/a><\/em> para encontrar contenido adicional dentro del DOM, pero no la fuente HTML. Hace esto para todas las URLs de&nbsp;HTML.<\/li>\n<li><strong>Indexaci\u00f3n<\/strong>: Caffeine toma la informaci\u00f3n de Googlebot, la normaliza (arregla el c\u00f3digo HTML que est\u00e9 roto) y despu\u00e9s trata de entender todo, calculando previamente algunas se\u00f1ales de posicionamiento listas para mostrarse dentro de un resultado de b\u00fasqueda.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled.png\"><\/p>\n<div class=\"sidenote\"><div class=\"sidenote-title\">Nota al margen.<\/div>Si quieres obtener m\u00e1s informaci\u00f3n sobre este proceso, Google lo explica muy bien <a href=\"https:\/\/developers.google.com\/search\/docs\/advanced\/javascript\/javascript-seo-basics\" target=\"_blank\" rel=\"noopener\">aqu\u00ed<\/a>. Patrick Stox tambi\u00e9n tiene un art\u00edculo que explica los <em><a href=\"https:\/\/ahrefs.com\/blog\/es\/javascript-seo\/\">JavaScript SEO facts<\/a><\/em><em>.<\/em><\/div>\n<p>Hist\u00f3ricamente, los problemas con React y otras librer\u00edas JavaScript se han debido a que Google no maneja demasiado bien el paso del renderizado.<\/p>\n<p>Algunos ejemplos son:<\/p>\n<ul>\n<li><strong>No renderizar JavaScript<\/strong>: es un problema antiguo, pero Google solo comenz\u00f3<a href=\"https:\/\/searchengineland.com\/google-now-crawling-and-indexing-flash-content-14299\" target=\"_blank\" rel=\"noopener\"> a <\/a><a href=\"https:\/\/searchengineland.com\/google-now-crawling-and-indexing-flash-content-14299\" target=\"_blank\" rel=\"noopener\">renderizar JavaScript de forma limitada en 2008<\/a>. Sin embargo, todav\u00eda depend\u00eda de un esquema de rastreo para sitios JavaScript creados en 2009. (Desde entonces, Google <a href=\"https:\/\/developers.google.com\/search\/blog\/2015\/10\/deprecating-our-ajax-crawling-scheme\" target=\"_blank\" rel=\"noopener\">ha desaprobado<\/a> el esquema).<\/li>\n<li><strong>El motor de renderizado (Chromium) est\u00e1 desactualizado<\/strong>: esto result\u00f3 en una <a href=\"https:\/\/www.deepcrawl.com\/blog\/news\/what-version-of-chrome-is-google-actually-using-for-rendering\/\" target=\"_blank\" rel=\"noopener\">falta de soporte para las \u00faltimas funciones de navegador y JavaScript<\/a>. Si has utilizado una funci\u00f3n de JavaScript que Googlebot no admite, es posible que tu p\u00e1gina no se muestre correctamente, lo que podr\u00eda afectar negativamente a la indexaci\u00f3n de tu contenido.<\/li>\n<li><strong>Google tuvo un retraso de renderizado<\/strong>: en algunos casos, <a href=\"https:\/\/twitter.com\/Paul_Kinlan\/status\/1040147543345098752\" target=\"_blank\" rel=\"noopener\">los retrasos eran de semanas<\/a>, ralentizando el tiempo para que los cambios en el contenido lleguen a la etapa de indexaci\u00f3n. Esto habr\u00eda descartado depender de Google para generar contenido para la mayor\u00eda de las&nbsp;webs.<\/li>\n<\/ul>\n<p>Afortunadamente, Google ha resuelto la mayor\u00eda de estos problemas. <a href=\"https:\/\/developers.google.com\/search\/blog\/2019\/05\/the-new-evergreen-googlebot\" target=\"_blank\" rel=\"noopener\">Googlebot ha mejorado<\/a>. Por lo que ya es siempre compatible con las \u00faltimas funciones de Chromium.<\/p>\n<p>Adem\u00e1s, ahora el retraso de renderizaci\u00f3n son cinco segundos, como anunci\u00f3 Martin Splitt en la Cumbre de Desarrolladores de Chrome en noviembre de&nbsp;2019:<\/p>\n<blockquote class=\"small\"><div class=\"quote-content\">El a\u00f1o pasado, Tom Greenaway y yo estuvimos en este escenario y os dijimos: \u2018Bueno, ya sabes, puede tardar hasta una semana, lo sentimos mucho. Olv\u00eddate de esto, \u00bfvale? Porque los n\u00fameros ahora son mejores. Repasamos los n\u00fameros y descubrimos que, de media, el tiempo que pasamos entre rastrear y obtener estos resultados es, de media, \u00a1cinco segundos!<\/div><\/blockquote>\n<p>Todo esto suena muy bien, pero, \u00bfutilizar el renderizado del lado del cliente y dejar que Googlebot muestre el contenido es la estrategia correcta?<\/p>\n<p>Lo m\u00e1s probable es que la respuesta siga siendo <em>no.<\/em><\/p>\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"Problemas comunes de React SEO\" data-section=\"4-common-seo-issues\">\n<h2><strong>Problemas comunes de React&nbsp;SEO<\/strong><\/h2>\n<\/div><\/div>\n<p>En los \u00faltimos cinco a\u00f1os, Google ha innovado su gesti\u00f3n del contenido JavaScript, pero las webs renderizadas completamente del lado del cliente introducen otros problemas que tienes que tener en cuenta.<\/p>\n<p>Es importante saber que se <strong>pueden superar todos los problemas con React y&nbsp;SEO.<\/strong><\/p>\n<p>React JS es una herramienta de desarrollo. React no es distinta a cualquier otra herramienta dentro de un <em>stack <\/em>de desarrollo, ya sea un plugin de WordPress o la CDN que elijas. La forma en que lo configures determinar\u00e1 si perjudica o mejora el&nbsp;SEO.<\/p>\n<p>Al fin y al cabo, <strong>React es bueno para el SEO, ya que mejora la experiencia del usuario.<\/strong> Solo tienes que asegurarte de tener en cuenta estos problemas que suelen ocurrir:<\/p>\n<h3><strong>1. Elige la estrategia de renderizado adecuada<\/strong><\/h3>\n<p>La cuesti\u00f3n m\u00e1s importante que tendr\u00e1s que abordar con React es c\u00f3mo renderiza el contenido.<\/p>\n<p>Como hemos mencionado, hoy en d\u00eda Google renderiza muy bien JavaScript. Pero, no es el caso con otros motores de b\u00fasqueda. <a href=\"https:\/\/blogs.bing.com\/webmaster\/october-2019\/The-new-evergreen-Bingbot-simplifying-SEO-by-leveraging-Microsoft-Edge\/\" target=\"_blank\" rel=\"noopener\">Bing tiene algo de soporte con el renderizado de JavaScript<\/a>, aunque su eficiencia es desconocida. Otros motores de b\u00fasqueda como Baidu, Yandex y otros ofrecen un soporte limitado.<\/p>\n<div class=\"sidenote\"><div class=\"sidenote-title\">Nota al margen.<\/div>Esta limitaci\u00f3n no s\u00f3lo afecta a los motores de b\u00fasqueda. Adem\u00e1s de los auditores de sitios, las herramientas SEO que rastrean la web y proporcionan datos cr\u00edticos sobre elementos como los <em>backlinks<\/em> de un sitio <strong>no renderizan JavaScript.<\/strong> Esto puede tener un <strong>impacto significativo<\/strong> en la calidad de los datos que proporcionan. La \u00fanica excepci\u00f3n es Ahrefs, que ha estado <a href=\"https:\/\/ahrefs.com\/blog\/crawling-javascript\/\">renderizando JavaScript en toda la web desde 2017<\/a> y actualmente renderiza <strong>m\u00e1s de 200 millones de p\u00e1ginas al&nbsp;d\u00eda.<\/strong><\/div>\n<p>Introducir esta inc\u00f3gnita constituye un buen argumento para optar por una soluci\u00f3n de renderizado en el servidor que garantice que <em>todos<\/em> los rastreadores puedan ver el contenido de la&nbsp;web.<\/p>\n<p>Adem\u00e1s, renderizar el contenido en el servidor tiene otra ventaja muy importante:<em> los tiempos de&nbsp;carga.<\/em><\/p>\n<h4><strong>Los tiempos de&nbsp;carga<\/strong><\/h4>\n<p><a href=\"https:\/\/www.speedcurve.com\/blog\/javascript-dominates-browser-cpu\/\" target=\"_blank\" rel=\"noopener\">La renderizaci\u00f3n de JavaScript es intensiva para la CPU<\/a>, lo que hace que las grandes bibliotecas como React tarden m\u00e1s en cargarse y volverse interactivas para los usuarios. Por lo general, los valores de <em><a href=\"https:\/\/ahrefs.com\/blog\/es\/core-web-vitals\/\">Core Web Vitals<\/a><\/em><em>,<\/em> como el tiempo de interactividad (TTI, por sus siglas en ingl\u00e9s <em>Time to Interactive<\/em>), son mucho m\u00e1s altos para las SPAs, especialmente en <em>smartphones,<\/em> <a href=\"https:\/\/www.similarweb.com\/platforms\/\" target=\"_blank\" rel=\"noopener\">el dispositivo que m\u00e1s usa la gente para consumir contenido online<\/a>.<\/p>\n<img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled-3.jpg\">\n<p>Sin embargo, tras la renderizaci\u00f3n inicial por parte del navegador, los tiempos de carga posteriores tienden a ser m\u00e1s r\u00e1pidos debido a lo siguiente:<\/p>\n<ul>\n<li>El renderizado del lado del cliente no provoca una actualizaci\u00f3n de toda la p\u00e1gina, lo que significa que la biblioteca s\u00f3lo necesita cargarse una&nbsp;vez.<\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/reconciliation.html\" target=\"_blank\" rel=\"noopener\">El algoritmo \u201cdiffing\u201d de React<\/a> s\u00f3lo cambia el HTML en el DOM que ha cambiado de estado, por lo que el navegador <a href=\"https:\/\/medium.com\/@gethylgeorge\/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e\" target=\"_blank\" rel=\"noopener\">s\u00f3lo vuelve a renderizar el contenido que ha cambiado<\/a>.<\/li>\n<\/ul>\n<p>En funci\u00f3n del n\u00famero de p\u00e1ginas vistas por visita, los datos pueden ser globalmente positivos:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled-38.png\"><\/p>\n<p>Sin embargo, si tu web tiene un n\u00famero bajo de p\u00e1ginas vistas por visita, te costar\u00e1 obtener datos positivos para todos los Core Web Vitals.<\/p>\n<h4><strong>Soluci\u00f3n<\/strong><\/h4>\n<p>La mejor opci\u00f3n es optar por SSR o SSG debido principalmente a:<\/p>\n<ul>\n<li>Renderizados iniciales m\u00e1s r\u00e1pidos.<\/li>\n<li>No tener que depender de los rastreadores de los motores de b\u00fasqueda para renderizar el contenido.<\/li>\n<li>Mejoras en el TTI debido a la menor cantidad de c\u00f3digo JavaScript que el navegador tiene que analizar y renderizar antes de volverse interactivo.<\/li>\n<\/ul>\n<p>Implementar SSR dentro de React es posible a trav\u00e9s del <a href=\"https:\/\/reactjs.org\/docs\/react-dom-server.html\" target=\"_blank\" rel=\"noopener\">ReactDOMServer<\/a>. Pero recomiendo usar un framework de React que se llama <a href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"noopener\">Next.js<\/a> y <a href=\"https:\/\/nextjs.org\/docs\/basic-features\/pages#static-generation-recommended\" target=\"_blank\" rel=\"noopener\">usar sus opciones SSG<\/a> y <a href=\"https:\/\/nextjs.org\/docs\/basic-features\/pages#server-side-rendering\" target=\"_blank\" rel=\"noopener\">SSR<\/a>. Tambi\u00e9n puedes implementar CSR con Next.js, pero el framework empuja a los usuarios hacia SSR\/SSG por su velocidad.<\/p>\n<p>Next.js admite lo que llama \u201c<a href=\"https:\/\/nextjs.org\/docs\/advanced-features\/automatic-static-optimization\" target=\"_blank\" rel=\"noopener\">Optimizaci\u00f3n est\u00e1tica autom\u00e1tica<\/a>\u201d. En la pr\u00e1ctica, esto significa que puedes tener algunas p\u00e1ginas en una web que usen SSR (como una p\u00e1gina de cuenta) y otras p\u00e1ginas que usen SSG (como un&nbsp;blog).<\/p>\n<p>El resultado: SSG y TTFB r\u00e1pido para p\u00e1ginas no din\u00e1micas, y SSR como estrategia de representaci\u00f3n de respaldo para contenido din\u00e1mico.<\/p>\n<div class=\"sidenote\"><div class=\"sidenote-title\">Nota al margen.<\/div>Puede que hayas o\u00eddo hablar de <a href=\"https:\/\/reactjs.org\/docs\/react-dom.html\" target=\"_blank\" rel=\"noopener\">React Hydration con<\/a> <a href=\"https:\/\/reactjs.org\/docs\/react-dom.html\" target=\"_blank\" rel=\"noopener\">ReactDOM.hydrate()<\/a>. Aqu\u00ed es donde el contenido se entrega a trav\u00e9s de SSG\/SSR y luego se convierte en una aplicaci\u00f3n renderizada del lado del cliente durante la renderizaci\u00f3n inicial. Esta puede ser la opci\u00f3n m\u00e1s obvia para futuras aplicaciones din\u00e1micas en vez de SSR. No obstante, actualmente la <em>Hydration<\/em> funciona cargando toda la librer\u00eda React, adjuntando despu\u00e9s manejadores de eventos <em>(<\/em><em><a href=\"https:\/\/reactjs.org\/docs\/handling-events.html\" target=\"_blank\" rel=\"noopener\">event handlers<\/a><\/em><em>)<\/em> al c\u00f3digo HTML que va a cambiar de todas formas. React mantiene as\u00ed el HTML entre el navegador y el servidor en sincron\u00eda. A d\u00eda de hoy, no recomendar\u00eda este enfoque, ya que todav\u00eda tiene implicaciones negativas para las <em>web vitals<\/em> como TTI para el render inicial. La <em><a href=\"https:\/\/github.com\/facebook\/react\/pull\/14717\" target=\"_blank\" rel=\"noopener\">Hydration<\/a><\/em><a href=\"https:\/\/github.com\/facebook\/react\/pull\/14717\" target=\"_blank\" rel=\"noopener\"> parcial<\/a> puede resolver esto en el futuro \u201chidratando\u201d s\u00f3lo las partes importantes de la p\u00e1gina (como las que est\u00e1n dentro de la ventana del navegador) en vez de toda la p\u00e1gina. Hasta entonces, SSR\/SSG es la mejor opci\u00f3n.<\/div>\n<p>Es importante mencionar que Next.js optimiza la <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/critical-rendering-path\" target=\"_blank\" rel=\"noopener\">ruta de renderizaci\u00f3n cr\u00edtica<\/a> para aplicaciones React con caracter\u00edsticas como:<\/p>\n<ul>\n<li><a href=\"https:\/\/nextjs.org\/docs\/basic-features\/image-optimization\" target=\"_blank\" rel=\"noopener\">Optimizaci\u00f3n de im\u00e1genes<\/a>: esto agrega atributos de ancho y alto &lt;img&gt; y <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLImageElement\/srcset\" target=\"_blank\" rel=\"noopener\">srcset<\/a>, carga diferida y cambio de tama\u00f1o de imagen.<\/li>\n<li><a href=\"https:\/\/nextjs.org\/docs\/basic-features\/font-optimization\" target=\"_blank\" rel=\"noopener\">Optimizaci\u00f3n de fuentes<\/a>: esto incluye fuentes CSS y agrega controles para <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/font-display\" target=\"_blank\" rel=\"noopener\">visualizaci\u00f3n de fuentes<\/a>.<\/li>\n<li><a href=\"https:\/\/nextjs.org\/docs\/basic-features\/script\" target=\"_blank\" rel=\"noopener\">Optimizaci\u00f3n de secuencias de comandos<\/a>: esto te permite elegir cu\u00e1ndo se debe cargar una secuencia de comandos: antes o despu\u00e9s de que la p\u00e1gina sea interactiva o \u201cperezosa\u201d.<\/li>\n<li><a href=\"https:\/\/nextjs.org\/docs\/advanced-features\/dynamic-import\" target=\"_blank\" rel=\"noopener\">Importaciones din\u00e1micas<\/a>: si implementas las mejores pr\u00e1cticas para <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Code_splitting\" target=\"_blank\" rel=\"noopener\">divisi\u00f3n de c\u00f3digo<\/a>, esta funci\u00f3n facilita la importaci\u00f3n de c\u00f3digo JS cuando sea necesario, en vez de dejar que se cargue en el renderizado inicial y ralentizarlo.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/11\/timing-for-page-experience\" target=\"_blank\" rel=\"noopener\">La velocidad y los <\/a><em><a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/11\/timing-for-page-experience\" target=\"_blank\" rel=\"noopener\">Core Web Vitals<\/a><\/em><a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/11\/timing-for-page-experience\" target=\"_blank\" rel=\"noopener\"> positivos son un factor de posicionamiento<\/a>, aunque menor. Las funciones de Next.js facilitan la creaci\u00f3n de experiencias web muy buenas que te dar\u00e1n una ventaja competitiva.<\/p>\n<div class=\"recommendation\"><div class=\"recommendation-title\">Recomendaci\u00f3n<\/div><div class=\"recommendation-content\"> \n<p>Muchos desarrolladores implementan sus aplicaciones web Next.js usando Vercel (los creadores de Next.js), que tiene <a href=\"https:\/\/vercel.com\/docs\/edge-network\/overview\" target=\"_blank\" rel=\"noopener\">una red perimetral global de servidores<\/a>. \u00bfQu\u00e9 significa esto? Tiempos de carga bastante r\u00e1pidos.<\/p>\n<p>Vercel proporciona <a href=\"https:\/\/vercel.com\/docs\/concepts\/analytics\/web-vitals\" target=\"_blank\" rel=\"noopener\">datos sobre <\/a><em><a href=\"https:\/\/vercel.com\/docs\/concepts\/analytics\/web-vitals\" target=\"_blank\" rel=\"noopener\">Core Web Vitals<\/a><\/em><a href=\"https:\/\/vercel.com\/docs\/concepts\/analytics\/web-vitals\" target=\"_blank\" rel=\"noopener\"> de todos las webs<\/a> instaladas en la plataforma, pero tambi\u00e9n puedes obtener datos a\u00fan m\u00e1s detallados para cada URL usando el <a href=\"http:\/\/ahrefs.com\/es\/site-audit\">Site Audit de Ahrefs<\/a>.<\/p>\n<p>Simplemente agrega una clave API dentro de la configuraci\u00f3n de rastreo de tus proyectos.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled-40.png\"><\/p>\n<p>Despu\u00e9s de ejecutar la auditor\u00eda, echa un vistazo al \u00e1rea de rendimiento. Ah\u00ed, el <a href=\"https:\/\/ahrefs.com\/es\/site-audit\">Site Audit<\/a> te ense\u00f1ar\u00e1 gr\u00e1ficos que muestran datos del Informe de experiencia del usuario de Chrome (CrUX) y Lighthouse.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled-42.png\"><\/p>\n<\/div><\/div>\n<h3><strong>2. Usa los c\u00f3digos de estado correctamente<\/strong><\/h3>\n<p>Un problema com\u00fan con la mayor\u00eda de los SPAs es que no reportan correctamente los c\u00f3digos de estado. Esto se debe a que el servidor no est\u00e1 cargando la p\u00e1gina, sino el navegador. Por lo general, ver\u00e1s problemas con:<\/p>\n<ul>\n<li>No hay redireccionamientos 3xx, en su lugar se utilizan redireccionamientos JavaScript.<\/li>\n<li>Los c\u00f3digos de estado 4xx no informan de las URL \u201cno encontradas\u201d.<\/li>\n<\/ul>\n<p>A continuaci\u00f3n puedes ver que he realizado una prueba en una web que usa React con <a href=\"http:\/\/httpstatus.io\" target=\"_blank\" rel=\"noopener\">httpstatus.io<\/a>. Esta p\u00e1gina, obviamente, deber\u00eda ser un 404 pero devuelve un c\u00f3digo de estado 200. Esto se llama un <em>soft 404.<\/em><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled-5.jpg\"><\/p>\n<p>El riesgo que nos encontramos es que Google puede decidir indexar esta p\u00e1gina (dependiendo de su contenido). Google podr\u00eda servirla a los usuarios, o se podr\u00eda utilizar para evaluar una&nbsp;web.<\/p>\n<p>Adem\u00e1s, informar de los 404 ayuda a los SEOs a auditar una web. Si de forma accidental enlazas internamente a una p\u00e1gina 404 y \u00e9sta devuelve un 200, detectar r\u00e1pidamente la zona con una herramienta de auditor\u00eda puede resultar mucho m\u00e1s complicado.<\/p>\n<p>Hay un par de formas de resolver este problema. Si est\u00e1s renderizando del lado del cliente:<\/p>\n<ol start=\"1\">\n<li>Usa el <em><a href=\"https:\/\/reactrouter.com\" target=\"_blank\" rel=\"noopener\">framework<\/a><\/em><a href=\"https:\/\/reactrouter.com\" target=\"_blank\" rel=\"noopener\"> de React Router<\/a>.<\/li>\n<li><a href=\"https:\/\/ultimatecourses.com\/blog\/react-router-not-found-component\" target=\"_blank\" rel=\"noopener\">Crea un componente 404<\/a> que muestre cuando no se reconoce una&nbsp;ruta.<\/li>\n<li>Agrega una etiqueta <em>noindex<\/em> a las p\u00e1ginas \u201cno encontradas\u201d.<\/li>\n<li>Agrega un &lt;h1&gt; con un mensaje como \u201c404: P\u00e1gina no encontrada\u201d. No ser\u00eda ideal, ya que no informamos con un c\u00f3digo de estado 404. Pero evitar\u00e1 que Google indexe la p\u00e1gina y te ayudar\u00e1 a reconocer la p\u00e1gina como un 404 <em>soft.<\/em><\/li>\n<li>Utiliza redirecciones JavaScript cuando tengas que cambiar una URL. Como hemos dicho, no es lo ideal, pero Google sigue las redirecciones JavaScript y pasa se\u00f1ales de posicionamiento.<\/li>\n<\/ol>\n<p><strong>Si est\u00e1s utilizando SSR<\/strong>, Next.js lo simplifica con <a href=\"https:\/\/nextjs.org\/docs\/api-routes\/response-helpers\" target=\"_blank\" rel=\"noopener\">ayudantes de respuesta<\/a> que te permiten establecer cualquier c\u00f3digo de estado que quieras, incluidas las redirecciones 3xx o un c\u00f3digo de estado 4xx. El enfoque que describ\u00ed usando React Router tambi\u00e9n se puede poner en pr\u00e1ctica usando Next.js, pero si usas Next.js, es probable que tambi\u00e9n est\u00e9s implementando SSR\/SSG.<\/p>\n<h3><strong>3. Evita las URL con <\/strong><em><strong>hash<\/strong><\/em><\/h3>\n<p>Este problema no es tan com\u00fan en React, pero es esencial evitar URLs con hash como las siguientes:<\/p>\n<ul>\n<li>https:\/\/reactspa.com\/#\/tienda<\/li>\n<li>https:\/\/reactspa.com\/#\/sobre-nosotros<\/li>\n<li>https: \/\/reactspa.com\/#\/contacto<\/li>\n<\/ul>\n<p>Por norma general Google no ver\u00e1 nada despu\u00e9s del hash. Todas estas p\u00e1ginas se ver\u00e1n como https:\/\/reactspa.com\/.<\/p>\n<h4><strong>Soluci\u00f3n<\/strong><\/h4>\n<p>Las SPAs con enrutamiento del lado del cliente deber\u00edan implementar la API History para cambiar de p\u00e1gina.<\/p>\n<p>Puedes hacerlo con relativa facilidad tanto con <a href=\"https:\/\/danthareja.gitbooks.io\/react-router-tutorial\/content\/lessons\/10-clean-urls\/\" target=\"_blank\" rel=\"noopener\">React Router<\/a> como con <a href=\"https:\/\/nextjs.org\/docs\/api-reference\/next\/router\" target=\"_blank\" rel=\"noopener\">Next.js<\/a>.<\/p>\n<h3><strong>4. Usa enlaces &lt;a href&gt; donde sea relevante<\/strong><\/h3>\n<p>Un error com\u00fan con SPAs es usar un &lt;div&gt; o un &lt;button&gt; para cambiar la URL. Esto no es un problema con React en s\u00ed, sino c\u00f3mo se utiliza la biblioteca.<\/p>\n<p>Hacer esto presenta un problema con los motores de b\u00fasqueda. Como hemos mencionado anteriormente, cuando Google procesa una URL busca URLs adicionales para rastrear dentro de los elementos &lt;a&nbsp;href&gt;.<\/p>\n<p>Si falta el elemento &lt;a href&gt;, Google no rastrear\u00e1 las URL <a href=\"https:\/\/ahrefs.com\/blog\/es\/google-pagerank\/\">ni transmitir\u00e1 PageRank<\/a>.<\/p>\n<h4><strong>Soluci\u00f3n<\/strong><\/h4>\n<p>La soluci\u00f3n es incluir enlaces &lt;a href&gt; a las URLs que quieras que Google descubra.<\/p>\n<p>Comprobar si est\u00e1s enlazando correctamente a una URL es f\u00e1cil. Inspecciona el elemento que enlaza internamente y comprueba el HTML para asegurarte de que has incluido enlaces &lt;a&nbsp;href&gt;.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled-44.png\"><\/p>\n<p>Como en el ejemplo arriba, puedes tener un problema si no lo&nbsp;est\u00e1n.<\/p>\n<p>Hay que hacer hincapi\u00e9 en que la falta de enlaces &lt;a href&gt; no siempre es un problema. Una de las ventajas de la CSR es que, cuando el contenido es \u00fatil para los usuarios pero no para los motores de b\u00fasqueda, puedes cambiar el contenido del lado del cliente y no incluir el enlace &lt;a&nbsp;href&gt;.<\/p>\n<p>En el ejemplo anterior, el sitio utiliza una navegaci\u00f3n por facetas que enlaza con millones de combinaciones de filtros que no son \u00fatiles para que un motor de b\u00fasqueda los rastree o indexe.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled-46.png\"><\/p>\n<p>Cargar estos filtros del lado del cliente tiene sentido en este caso, ya que el sitio conservar\u00e1 <em><a href=\"https:\/\/ahrefs.com\/blog\/es\/crawl-budget\/\">crawl budget<\/a><\/em> al no agregar enlaces &lt;a href&gt; para que Google los rastree.<\/p>\n<p>Next.js te lo pone f\u00e1cil con <a href=\"https:\/\/nextjs.org\/learn\/basics\/navigate-between-pages\/link-component\" target=\"_blank\" rel=\"noopener\">su componente de enlace<\/a>, que lo puedes configurar <a href=\"https:\/\/nextjs.org\/learn\/basics\/navigate-between-pages\/client-side\" target=\"_blank\" rel=\"noopener\">para permitir la navegaci\u00f3n del lado del cliente<\/a>.<\/p>\n<p>Si te has decidido por implementar una aplicaci\u00f3n completa de CSR, <a href=\"https:\/\/v5.reactrouter.com\/web\/api\/Hooks\/usehistory\" target=\"_blank\" rel=\"noopener\">puedes cambiar las URLs con React Router<\/a> usando <a href=\"https:\/\/www.w3schools.com\/jsref\/event_onclick.asp\" target=\"_blank\" rel=\"noopener\">onClick<\/a> y el <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/History_API\" target=\"_blank\" rel=\"noopener\">History API<\/a>.<\/p>\n<h3><strong>5. Evita la carga diferida del c\u00f3digo HTML que sea esencial<\/strong><\/h3>\n<p>Es habitual que las webs desarrolladas con React inyecten contenido en el DOM cuando el usuario hace clic o pasa el rat\u00f3n por encima de un elemento, simplemente porque la librer\u00eda lo facilita.<\/p>\n<p>No es algo necesariamente malo, pero el contenido a\u00f1adido al DOM de esta forma no ser\u00e1 visto por los motores de b\u00fasqueda. Si el contenido inyectado incluye contenido textual importante o enlaces internos, puede llegar a tener un impacto negativo:<\/p>\n<ul>\n<li>El rendimiento de la p\u00e1gina (ya que Google no ver\u00e1 el contenido).<\/li>\n<li>La descubribilidad de otras URLs (ya que Google no encontrar\u00e1 los enlaces internos).<\/li>\n<\/ul>\n<p>Tomemos un ejemplo de una web con React JS que he auditado hace poco. Es un <em>ecommerce <\/em>de una marca conocida con enlaces internos importantes dentro de su navegaci\u00f3n facetada.<\/p>\n<p>Sin embargo, se inyectaba en el DOM un modal que mostraba la navegaci\u00f3n en m\u00f3vil al pulsar un bot\u00f3n \u201cFiltrar\u201d. Observa el segundo &lt;!----&gt; dentro del HTML de&nbsp;abajo:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/Untitled-2.gif\"><\/p>\n<h4><strong>Soluci\u00f3n<\/strong><\/h4>\n<p>Detectar estos problemas no es f\u00e1cil. Hasta donde s\u00e9, ninguna herramienta te informar\u00e1 directamente sobre&nbsp;ellos.<\/p>\n<p>En su lugar, tienes que buscar elementos comunes tipo:<\/p>\n<ul>\n<li>Acordeones<\/li>\n<li>Modales<\/li>\n<li>Pesta\u00f1as<\/li>\n<li>Mega men\u00fas<\/li>\n<li><em>Hamburger menus<\/em><\/li>\n<\/ul>\n<p>A continuaci\u00f3n, tendr\u00e1s que inspeccionar el elemento y ver lo que ocurre con el HTML al abrirlos\/cerrarlos, haciendo clic o pasando el rat\u00f3n por encima (como he hecho en el GIF de arriba).<\/p>\n<p>Supongamos que te das cuenta de que JavaScript est\u00e1 a\u00f1adiendo HTML a la p\u00e1gina. En este caso, tendr\u00e1s que trabajar con los desarrolladores. Esto es para que en vez de inyectar el contenido en el DOM, se incluya dentro del HTML por defecto y se oculte y muestre mediante CSS utilizando propiedades como <a href=\"https:\/\/www.thoughtco.com\/display-none-vs-visibility-hidden-3466884\" target=\"_blank\" rel=\"noopener\">visibility: hidden; o display: none;<\/a>.<\/p>\n<h3><strong>6. No te olvides de lo importante<\/strong><\/h3>\n<p>Aunque hay consideraciones adicionales de SEO con las aplicaciones React, esto no significa que no se apliquen otros <em>fundamentals<\/em>.<\/p>\n<p>Tendr\u00e1s que asegurarte de que tus aplicaciones React siguen las mejores pr\u00e1cticas:<\/p>\n<ul>\n<li><a href=\"https:\/\/ahrefs.com\/blog\/es\/etiquetas-canonical\/\">Canonicalizaci\u00f3n<\/a><\/li>\n<li><a href=\"https:\/\/ahrefs.com\/blog\/es\/marcado-schema\/\" data-ahr=\"https:\/\/ahrefs.com\/blog\/es\/datos-estructurados\/\">Datos estructurados<\/a><\/li>\n<li><a href=\"https:\/\/ahrefs.com\/blog\/es\/como-crear-un-sitemap\/\">Sitemaps XML<\/a><\/li>\n<li><em><a href=\"https:\/\/ahrefs.com\/blog\/es\/mobile-first-index\/\">Mobile-first<\/a><\/em><\/li>\n<li><a href=\"https:\/\/ahrefs.com\/blog\/es\/arquitectura-web\/\">Arquitectura web<\/a><\/li>\n<li><a href=\"https:\/\/ahrefs.com\/blog\/es\/que-es-https\/\" target=\"_blank\" rel=\"noopener\">HTTPS<\/a><\/li>\n<li><em><a href=\"https:\/\/ahrefs.com\/blog\/es\/title-tag-seo\/\">Title tags<\/a><\/em><\/li>\n<li><a href=\"https:\/\/ahrefs.com\/blog\/es\/busqueda-semantica\/\">HTML sem\u00e1ntico<\/a><\/li>\n<\/ul>\n<h2><strong>Reflexiones<\/strong><strong> finales<\/strong><\/h2>\n<p>Desafortunadamente, trabajar con aplicaciones React se a\u00f1ade a una lista de problemas bastante larga que un SEO t\u00e9cnico tiene que comprobar. Pero gracias a <em>frameworks<\/em> como Next.js, el trabajo de un SEO se ha hecho mucho m\u00e1s f\u00e1cil que&nbsp;antes.<\/p>\n<p>Esperamos que esta gu\u00eda te haya ayudado a entender mejor lo que tienes que tener en cuenta como SEO a la hora de trabajar con aplicaciones React.<\/p>\n<p>\u00bfTienes alguna pregunta sobre c\u00f3mo trabajar con React? <a href=\"https:\/\/twitter.com\/AhrefsES\" target=\"_blank\" rel=\"noopener\">Escr\u00edbenos por Twitter<\/a>.<\/p>\n<figure style=\"text-align: right\"><a href=\"https:\/\/wordable.io?utm_source=export-branding&amp;utm_medium=click&amp;utm_campaign=export-branding\" target=\"blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/app.wordable.io\/branding\/long-white-bg.png\"><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>React y otras bibliotecas similares (como Vue.js) se est\u00e1n convirtiendo en la opci\u00f3n preferente para empresas m\u00e1s grandes que demandan un desarrollo complejo. Aquellas empresas donde un enfoque m\u00e1s simple (como usar un tema de WordPress) no satisface los requisitos<span class=\"ellipsis\">\u2026<\/span><\/p>\n<div class=\"read-more\">Leer m\u00e1s \u203a<\/div>\n<p><!-- end of .read-more --><\/p>\n","protected":false},"author":29,"featured_media":12672,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"footnotes":""},"categories":[9],"tags":[],"coauthors":[55],"class_list":["post-12468","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technical-seo","odd"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React SEO: Las mejores pr\u00e1cticas para que sea SEO-Friendly<\/title>\n<meta name=\"description\" content=\"React se est\u00e1 convirtiendo en la opci\u00f3n preferente para empresas m\u00e1s grandes que requieren un desarrollo complejo, lo que representa algunos desaf\u00edos en el SEO. En esta gu\u00eda te contamos c\u00f3mo resolverlos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ahrefs.com\/blog\/es\/react-seo\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React SEO: Las mejores pr\u00e1cticas para que sea SEO-Friendly\" \/>\n<meta property=\"og:description\" content=\"Las mejores pr\u00e1cticas que tienes que conocer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ahrefs.com\/blog\/es\/react-seo\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de SEO de Ahrefs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Ahrefs\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-07T14:24:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-16T07:28:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/fb_react_seo-SPA.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sam Underwood\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SamUnderwoodUK\" \/>\n<meta name=\"twitter:site\" content=\"@ahrefs\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/react-seo\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/react-seo\\\/\"},\"author\":{\"name\":\"Sam Underwood\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/#\\\/schema\\\/person\\\/d9462cd503cf6231a28fd7e0a26041c1\"},\"headline\":\"React SEO: Las mejores pr\u00e1cticas para que sea SEO-Friendly\",\"datePublished\":\"2023-04-07T14:24:57+00:00\",\"dateModified\":\"2023-05-16T07:28:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/react-seo\\\/\"},\"wordCount\":4189,\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/react-seo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/fb_react_seo-SPA.png\",\"articleSection\":[\"SEO T\u00e9cnico\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/react-seo\\\/\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/react-seo\\\/\",\"name\":\"React SEO: Las mejores pr\u00e1cticas para que sea SEO-Friendly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/react-seo\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/react-seo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/fb_react_seo-SPA.png\",\"datePublished\":\"2023-04-07T14:24:57+00:00\",\"dateModified\":\"2023-05-16T07:28:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/#\\\/schema\\\/person\\\/d9462cd503cf6231a28fd7e0a26041c1\"},\"description\":\"React se est\u00e1 convirtiendo en la opci\u00f3n preferente para empresas m\u00e1s grandes que requieren un desarrollo complejo, lo que representa algunos desaf\u00edos en el SEO. En esta gu\u00eda te contamos c\u00f3mo resolverlos.\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/react-seo\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/react-seo\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/fb_react_seo-SPA.png\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/fb_react_seo-SPA.png\",\"width\":1200,\"height\":630},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/\",\"name\":\"Blog de SEO de Ahrefs\",\"description\":\"Estrategias de link building y consejos de posicionamiento SEO\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/#\\\/schema\\\/person\\\/d9462cd503cf6231a28fd7e0a26041c1\",\"name\":\"Sam Underwood\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/sam-underwood.jpg2d95b47261979537f0b3df576de96d42\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/sam-underwood.jpg\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/sam-underwood.jpg\",\"caption\":\"Sam Underwood\"},\"description\":\"Sam Underwood es un consultor independiente que ayuda a negocios de ecommerce a hacer crecer sus ingresos org\u00e1nicos a trav\u00e9s de SEO on-page, SEO t\u00e9cnico y estrategias de contenido.\",\"sameAs\":[\"https:\\\/\\\/www.samunderwood.co.uk\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/samunderwooduk\\\/\",\"https:\\\/\\\/x.com\\\/SamUnderwoodUK\"],\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/es\\\/author\\\/sam-underwood\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React SEO: Las mejores pr\u00e1cticas para que sea SEO-Friendly","description":"React se est\u00e1 convirtiendo en la opci\u00f3n preferente para empresas m\u00e1s grandes que requieren un desarrollo complejo, lo que representa algunos desaf\u00edos en el SEO. En esta gu\u00eda te contamos c\u00f3mo resolverlos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ahrefs.com\/blog\/es\/react-seo\/","og_locale":"es_ES","og_type":"article","og_title":"React SEO: Las mejores pr\u00e1cticas para que sea SEO-Friendly","og_description":"Las mejores pr\u00e1cticas que tienes que conocer.","og_url":"https:\/\/ahrefs.com\/blog\/es\/react-seo\/","og_site_name":"Blog de SEO de Ahrefs","article_publisher":"https:\/\/www.facebook.com\/Ahrefs","article_published_time":"2023-04-07T14:24:57+00:00","article_modified_time":"2023-05-16T07:28:03+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/fb_react_seo-SPA.png","type":"image\/png"}],"author":"Sam Underwood","twitter_card":"summary_large_image","twitter_creator":"@SamUnderwoodUK","twitter_site":"@ahrefs","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahrefs.com\/blog\/es\/react-seo\/#article","isPartOf":{"@id":"https:\/\/ahrefs.com\/blog\/es\/react-seo\/"},"author":{"name":"Sam Underwood","@id":"https:\/\/ahrefs.com\/blog\/es\/#\/schema\/person\/d9462cd503cf6231a28fd7e0a26041c1"},"headline":"React SEO: Las mejores pr\u00e1cticas para que sea SEO-Friendly","datePublished":"2023-04-07T14:24:57+00:00","dateModified":"2023-05-16T07:28:03+00:00","mainEntityOfPage":{"@id":"https:\/\/ahrefs.com\/blog\/es\/react-seo\/"},"wordCount":4189,"image":{"@id":"https:\/\/ahrefs.com\/blog\/es\/react-seo\/#primaryimage"},"thumbnailUrl":"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/fb_react_seo-SPA.png","articleSection":["SEO T\u00e9cnico"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/ahrefs.com\/blog\/es\/react-seo\/","url":"https:\/\/ahrefs.com\/blog\/es\/react-seo\/","name":"React SEO: Las mejores pr\u00e1cticas para que sea SEO-Friendly","isPartOf":{"@id":"https:\/\/ahrefs.com\/blog\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ahrefs.com\/blog\/es\/react-seo\/#primaryimage"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/es\/react-seo\/#primaryimage"},"thumbnailUrl":"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/fb_react_seo-SPA.png","datePublished":"2023-04-07T14:24:57+00:00","dateModified":"2023-05-16T07:28:03+00:00","author":{"@id":"https:\/\/ahrefs.com\/blog\/es\/#\/schema\/person\/d9462cd503cf6231a28fd7e0a26041c1"},"description":"React se est\u00e1 convirtiendo en la opci\u00f3n preferente para empresas m\u00e1s grandes que requieren un desarrollo complejo, lo que representa algunos desaf\u00edos en el SEO. En esta gu\u00eda te contamos c\u00f3mo resolverlos.","inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahrefs.com\/blog\/es\/react-seo\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/ahrefs.com\/blog\/es\/react-seo\/#primaryimage","url":"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/fb_react_seo-SPA.png","contentUrl":"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2023\/03\/fb_react_seo-SPA.png","width":1200,"height":630},{"@type":"WebSite","@id":"https:\/\/ahrefs.com\/blog\/es\/#website","url":"https:\/\/ahrefs.com\/blog\/es\/","name":"Blog de SEO de Ahrefs","description":"Estrategias de link building y consejos de posicionamiento SEO","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ahrefs.com\/blog\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/ahrefs.com\/blog\/es\/#\/schema\/person\/d9462cd503cf6231a28fd7e0a26041c1","name":"Sam Underwood","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2022\/02\/sam-underwood.jpg2d95b47261979537f0b3df576de96d42","url":"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2022\/02\/sam-underwood.jpg","contentUrl":"https:\/\/ahrefs.com\/blog\/es\/wp-content\/uploads\/2022\/02\/sam-underwood.jpg","caption":"Sam Underwood"},"description":"Sam Underwood es un consultor independiente que ayuda a negocios de ecommerce a hacer crecer sus ingresos org\u00e1nicos a trav\u00e9s de SEO on-page, SEO t\u00e9cnico y estrategias de contenido.","sameAs":["https:\/\/www.samunderwood.co.uk\/","https:\/\/www.linkedin.com\/in\/samunderwooduk\/","https:\/\/x.com\/SamUnderwoodUK"],"url":"https:\/\/ahrefs.com\/blog\/es\/author\/sam-underwood\/"}]}},"as_json":null,"json_reviewers":[20],"_links":{"self":[{"href":"https:\/\/ahrefs.com\/blog\/es\/wp-json\/wp\/v2\/posts\/12468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahrefs.com\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahrefs.com\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/es\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/es\/wp-json\/wp\/v2\/comments?post=12468"}],"version-history":[{"count":0,"href":"https:\/\/ahrefs.com\/blog\/es\/wp-json\/wp\/v2\/posts\/12468\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/es\/wp-json\/wp\/v2\/media\/12672"}],"wp:attachment":[{"href":"https:\/\/ahrefs.com\/blog\/es\/wp-json\/wp\/v2\/media?parent=12468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/es\/wp-json\/wp\/v2\/categories?post=12468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/es\/wp-json\/wp\/v2\/tags?post=12468"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/es\/wp-json\/wp\/v2\/coauthors?post=12468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}