javascript - prerendering - react helmet seo

¿Cómo se usa React.js para SEO?

Question

A los artículos en React.js les gusta señalar que React.js es ideal para fines de SEO. Lamentablemente, nunca he leído, cómo lo haces en realidad. ¿Simplemente implementa _escaped_fragment_ como en https://developers.google.com/webmasters/ajax-crawling/docs/getting-started y deja que React represente la página en el servidor, cuando la url contiene _escaped_fragment_ , o hay más en ella? ?

Ser capaz de no confiar en _escaped_fragment_ sería genial, ya que probablemente no todos los sitios potencialmente rastreadores (por ejemplo, compartiendo funcionalidades) implementan _escaped_fragment_ .

Answer 1

Como dijo el otro respondedor, lo que estás buscando es un enfoque isomórfico. Esto permite que la página provenga del servidor con el contenido renderizado que será analizado por los motores de búsqueda. Como mencionó otro comentarista, esto podría hacer que parezca que estás atrapado usando node.js como tu lenguaje del lado del servidor. Si bien es cierto que se necesita ejecutar javascript en el servidor para que esto funcione, no es necesario que haga todo en el nodo. Por ejemplo, este artículo trata sobre cómo lograr una página isomórfica usando Scala y reaccionar:

https://thebhwgroup.com/blog/isomorphic-web-design-react-scala

Ese artículo también describe los beneficios UX y SEO de este tipo de enfoque isomórfico.

Answer 2

Dos buenas implementaciones de ejemplo:

• https://github.com/erikras/react-redux-universal-hot-example : utiliza Redux , mi marco de gestión de estado de aplicaciones favorito
• https://github.com/webpack/react-starter : utiliza Flux y tiene una configuración de paquete web muy elaborada.

Intente visitar https://react-redux.herokuapp.com/ con javascript activado y desactivado, y mire la red en las herramientas de desarrollo del navegador para ver la diferencia ...

Answer 3

Estoy bastante seguro de que todo lo que ha visto promocionar React como bueno para SEO tiene que ver con poder representar la página solicitada en el servidor, antes de enviarla al cliente. Por lo tanto, se indexará como cualquier otra página estática, en lo que respecta a los motores de búsqueda.

La representación del servidor es posible a través de ReactDOMServer.renderToString . El visitante recibirá la página de marcado ya procesada, que la aplicación React detectará una vez que se haya descargado y ejecutado. En lugar de reemplazar el contenido cuando se llama a ReactDOM.render , simplemente agregará los enlaces del evento. Para el resto de la visita, la aplicación React tomará el relevo y se presentarán más páginas en el cliente.

Si está interesado en obtener más información al respecto, le sugiero que busque "Universal JavaScript" o "Universal React" (anteriormente conocido como "reacción isomórfica"), ya que este se está convirtiendo en el término para las aplicaciones de JavaScript que usan una única base de código para procesar tanto en el servidor como en el cliente.

Answer 4

No hay nada que deba hacer si le interesa el rango de su sitio en Google, ¡porque el rastreador de Google podría manejar JavaScript muy bien! Puede consultar el resultado de SEO de su sitio por el site:your-site-url búsqueda site:your-site-url .

Si también le interesa el rango de su sitio, como Baidu , y el lado de su servidor implementado por PHP , tal vez necesite esto: react-php-v8js .

Answer 5

También es posible a través de ReactDOMServer.renderToStaticMarkup :

Similar a renderToString , excepto que esto no crea atributos DOM adicionales como data-react-id , que React usa internamente. Esto es útil si desea usar React como un simple generador de páginas estáticas, ya que eliminar los atributos adicionales puede ahorrar muchos bytes.

Answer 6

Voy a tener que estar en desacuerdo con muchas de las respuestas aquí desde que logré que mi aplicación React del lado del cliente trabaje con googlebot sin ningún SSR.

Eche un vistazo a la respuesta SO aquí . Solo pude hacerlo funcionar recientemente, pero puedo confirmar que no hay problemas hasta el momento y que googlebot puede realizar las llamadas API e indexar el contenido devuelto.