it-swarm.dev

Come funziona l'indicizzazione dei motori di ricerca per le applicazioni web JavaScript come REACT?

Sto progettando di implementare reazioni.js per la mia applicazione. Dato che sono nuovo a reagire, ne dubito, in che modo Google indicizzerà i componenti di reazione? E quali sono le migliori pratiche necessarie per rendere l'applicazione correttamente visibile nella ricerca di Google.

Qualcuno ha qualche idea per favore aiutami su questo.

26
suyesh

Quindi posso tranquillamente dire che ho ottenuto una SPA reattiva con chiamate API per renderizzare perfettamente in googlebot (Fetch and Render). Quindi questo non è un compito impossibile, ma dirò che non c'è molta documentazione per aiutarti lungo la strada.

Dal momento che sembra che tu abbia una nuova app, traccerò entrambe le strade che potresti potenzialmente andare giù.

Pre-rendering lato server (SSR)

Inizia con il pre-rendering lato server (SSR) e mantienilo. Ci sono molti modi per farlo in reazione e questo alla fine significa che dovrai restare con le librerie isomorfe che supportano SSR.

Tuttavia, andando lungo il percorso SSR le probabilità di essere indicizzati da google sono significativamente più elevate poiché non devi fare affidamento sul fatto che googlebot funzioni con il tuo JS.

Rendering lato client (una normale app JS)

Crea semplicemente un'app normale React senza SSR ... sostanzialmente come al solito. I vantaggi sono che non devi affrontare alcuna complessità aggiuntiva di SSR e non sei limitato alle librerie sono isomorfi. Fondamentalmente questo è il più semplice, ma devi sperare che il tuo JS si compili e venga eseguito correttamente da Googlebot.

Le mie osservazioni

Dirò che il pre-rendering sul lato server è incredibilmente difficile da far funzionare a volte poiché molte librerie potrebbero non supportarlo e questo a sua volta introduce molta complessità che non si desidera affrontare.

Il percorso di rendering lato client è davvero solo il solito e posso confermare che in effetti funziona con Googlebot. Ecco cosa ho fatto per far funzionare il rendering lato client:

  1. Ho aggiunto "babel-polyfill" all'elenco delle importazioni il prima possibile

  2. Inline my Javascript per ridurre il tempo di caricamento complessivo e ridurre al minimo le chiamate non necessarie. L'ho fatto con Razor (C #) ma puoi farlo come vuoi.

  3. Aggiunta una chiamata esterna al polyfill di Financial Times (non sono sicuro che sia necessario)

  4. NODE_ENV = la produzione aiuterà anche qui. Ridurrà la dimensione complessiva del pacchetto

Per chiunque su C #, questo è come potrebbe apparire:

clientWithRender.jsx (il punto di ingresso del mio jsx)

import React from "react";
import ReactDOM from "react-dom";
import 'babel-polyfill';

import App from "./App/App.jsx";
import { Router, Route, indexRouter, hashHistory } from "react-router";

ReactDOM.render(
<App></App>,
document.getElementById('App'));

Index.cshtml

<script src="https://ft-polyfill-service.herokuapp.com/v2/polyfill.min.js"></script>
@Html.InlineScriptBlock("~/Scripts/react/react.clientWithRender.bundle.js")
17
WillHua

Se dai un'occhiata in questo articolo del 2015 sul blog di Google Webmaster Central puoi vedere che google consiglia di non fare nulla di diverso per il SEO in una singola pagina (o come la chiamavano AJAX) - che includerebbe la reazione.

Lì non entrano in molti dettagli su come lo fanno, ma fintanto che la tua applicazione è costruita semanticamente e si esegue il rendering molto rapidamente - dovrebbe classificarsi.

Danno molta enfasi alle prestazioni, con tempi di rendering più rapidi che portano a classifiche più alte. Ciò mette tutte le applicazioni a pagina singola in uno svantaggio maggiore rispetto al rendering lato server.

Se vuoi una guida più specifica - questo sembra davvero un buon punto di partenza .

12
mikegeyser