{"id":9190,"date":"2018-11-20T09:09:03","date_gmt":"2018-11-20T08:09:03","guid":{"rendered":"https:\/\/www.makingscience.com\/blog\/seo-para-react-js\/"},"modified":"2018-11-20T09:09:03","modified_gmt":"2018-11-20T08:09:03","slug":"seo-para-react-js","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/seo-para-react-js\/","title":{"rendered":"SEO para React JS"},"content":{"rendered":"
SEO para React JS<\/div>\n
\u00bfQu\u00e9 es React JS?<\/strong> React JS es una librer\u00eda javascript, desarrollada en \u201copensource\u201d o c\u00f3digo abierto por Facebook, por eso es tan popular. Esta tecnolog\u00eda est\u00e1 orientada a la creaci\u00f3n de las Single Page Application, o webs que s\u00f3lo se refrescan una vez si no cambia el contenido, por lo que son incre\u00edblemente m\u00e1s r\u00e1pidas. JavaScript permite realizar interacciones m\u00e1s complejas que las webs antiguas. Dejamos de lado las webs antiguas por ser est\u00e1ticas y desarrolladas en HTML por las Single Page Applications. Las principales ventajas de React<\/strong> son: <\/p>\n
    \n
  • F\u00e1cil de aprender debido a su sintaxis<\/li>\n
  • Utiliza componentes que facilita el mantenimiento de las aplicaciones. Se elaboran con la composici\u00f3n de varios componentes y con un comportamiento, una vista y un estado.<\/li>\n
  • Tiene DOM virtual que organiza toda la informaci\u00f3n en un \u00e1rbol<\/li>\n
  • La jerarqu\u00eda de datos facilita que los elementos secundarios no afecten a los primarios<\/li>\n
  • Es c\u00f3digo opensource por lo que se actualiza constantemente<\/li>\n
  • Es m\u00e1s ligero puesto que se carga simult\u00e1neamente en el lado del servidor y del cliente<\/li>\n<\/ul>\n

    \u00bfQu\u00e9 son las Single Page Application? En este tipo de webs todo lo que se muestra y se procesa est\u00e1 dentro de la misma p\u00e1gina web, siendo desde un \u00fanico archivo desde donde se procesa todo. Estas aplicaciones web trabajan de una manera distinta, dando mayor peso del lado del cliente y restando peso de la parte del servidor. Esto significa que antes era el servidor quien enviaba el archivo HTML con la petici\u00f3n del usuario y ahora, en las SPA, recibir el HTML conlleva m\u00e1s desarrollo. Problem\u00e1tica para SEO<\/strong> El rastreo y la indexaci\u00f3n de estos sites se vuelve dif\u00edcil para Google ya son p\u00e1ginas casi en blanco, donde con la petici\u00f3n del usuario al servidor s\u00f3lo se recibe un archivo con JavaScript. A pesar de los avances de Google en el rastreo y la interpretaci\u00f3n de JS, los bots no son todav\u00eda capaces de ejecutar el JavaScript y adem\u00e1s, la gesti\u00f3n de los datos HTML complica la situaci\u00f3n. Para que Google interprete correctamente la web debemos de recibir un archivo HTML con toda la metadata. La gesti\u00f3n de esta petici\u00f3n complica el desarrollo t\u00e9cnico de estas webs incrementando las peticiones al servidor. Soluciones SEO para sites con React<\/strong> <\/p>\n

      \n
    • \u00bfC\u00f3mo ayuda Isomorphic React al SEO?<\/li>\n<\/ul>\n

      SI el JavaScript est\u00e1 deshabilitado en el lado del cliente, se ejecuta en el lado del servidor enviando el contenido final al cliente. Si en cambio est\u00e1 habilitado funciona como una aplicaci\u00f3n din\u00e1mica con m\u00faltiples componentes. La carga es infinitamente m\u00e1s r\u00e1pida y la mejora en la experiencia de usuario es tambi\u00e9n notable respecto a las webs tradicionales. <\/p>\n

        \n
      • \u00bfDe qu\u00e9 manera ayuda el Prerendering al SEO?<\/li>\n<\/ul>\n

        Esta soluci\u00f3n representa la p\u00e1gina como un navegador. El prerenderizado esperar\u00e1 a que la p\u00e1gina est\u00e9 completamente cargada para devolver al usuario el contenido HTML. Esto permite que la web sea correctamente rastreada por los bots y elimina la problem\u00e1tica de las p\u00e1ginas con React JS para SEO. Consejos a tomar en una web con React<\/strong> Debemos tener en cuenta algunos aspectos si queremos implementar correctamente el SEO para React Js. <\/p>\n

          \n
        • En el sistema de enrutado<\/strong> cada URL tiene un nombre y ese nombre debe ser lo m\u00e1s \u201camigable\u201d posible describiendo correctamente el contenido de cada p\u00e1gina.<\/li>\n
        • Las metaetiquetas son dif\u00edciles de generar en React<\/strong>, por lo que se deben generar\u00a0dentro del componente\u00a0en el head del documento tanto del lado del cliente como del servidor.<\/li>\n
        • Usar el procesamiento del servidor<\/strong> para facilitar los datos HTML al navegador.<\/li>\n
        • Evitar poner contenido importante detr\u00e1s de un evento de JavaScript<\/strong> ya que es posible que Google no siga los eventos onclick del sitio.<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

          SEO para React JS \u00bfQu\u00e9 es React JS? React JS es una librer\u00eda javascript, desarrollada en \u201copensource\u201d o c\u00f3digo abierto por Facebook, por eso es tan popular. Esta tecnolog\u00eda est\u00e1 orientada a la creaci\u00f3n de las Single Page Application, o webs que s\u00f3lo se refrescan una vez si no cambia el contenido, por lo que […]<\/p>\n","protected":false},"author":21,"featured_media":9191,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[27],"tags":[37],"class_list":["post-9190","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advertising","tag-seo"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/9190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=9190"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/9190\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/9191"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=9190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=9190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=9190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}