it-swarm.dev

Jak działa indeksowanie wyszukiwarek w aplikacjach JavaScript, takich jak REACT?

Planuję wdrożyć React.js dla mojej aplikacji. Ponieważ jestem nowy w reagowaniu, mam wątpliwości, jak Google zaindeksuje komponenty reagujące? A jakie są najlepsze praktyki, aby aplikacja była odpowiednio widoczna w wyszukiwarce Google.

Każdy ma jakiś pomysł, pomóż mi w tym.

26
suyesh

Mogę więc spokojnie powiedzieć, że dostałem reagujące SPA z wywołaniami API, aby idealnie renderować w googlebocie (Fetch and Render). To nie jest niemożliwe zadanie, ale powiem, że nie ma zbyt wiele dokumentacji, która mogłaby ci pomóc po drodze.

Ponieważ wygląda na to, że masz nową aplikację, przedstawię obie możliwości, które możesz potencjalnie zejść.

Wstępne renderowanie po stronie serwera (SSR)

Zacznij od renderowania wstępnego po stronie serwera (SSR) i trzymaj się go. Jest wiele sposobów, aby to zrobić w reakcji, co ostatecznie oznacza, że ​​będziesz musiał trzymać się bibliotek izomorficznych, które obsługują SSR.

Jednak po przejściu ścieżką SSR szanse na zaindeksowanie przez google są znacznie wyższe, ponieważ nie musisz polegać na googlebocie pracującym z Twoim JS.

Renderowanie po stronie klienta (normalna aplikacja JS)

Po prostu zbuduj normalną React Aplikacja bez SSR .. w zasadzie jak zwykle. Korzyści są takie, że nie musisz zajmować się dodatkową złożonością SSR i nie jesteś ograniczony do bibliotek) które są izomorficzne. Zasadniczo jest to najłatwiejsze, ale musisz mieć nadzieję, że JS się skompiluje i będzie działał poprawnie przez Googlebota.

Moje obserwacje

Powiem, że wstępne renderowanie po stronie serwera jest czasem bardzo trudne do uruchomienia, ponieważ wiele bibliotek może go nie obsługiwać, co z kolei wprowadza dużo złożoności, z którą nie chcesz sobie poradzić.

Trasa renderowania po stronie klienta jest jak zwykle naprawdę biznesowa i mogę potwierdzić, że faktycznie działa z Googlebotem. Oto, co zrobiłem, aby renderowanie po stronie klienta działało:

  1. Dodałem „babel-polyfill” do mojej listy importów tak wcześnie, jak to możliwe

  2. Wprowadziłem mój Javascript, aby skrócić całkowity czas ładowania i zminimalizować niepotrzebne połączenia. Zrobiłem to z Razor (C #) , ale możesz to zrobić w dowolny sposób.

  3. Dodano połączenie zewnętrzne do polifillu Financial Times (nie jestem pewien, czy to konieczne)

  4. NODE_ENV = produkcja również tutaj pomoże. Zmniejszy to ogólny rozmiar twojego pakietu

Dla każdego na C # wygląda to tak:

clientWithRender.jsx (punkt wejścia mojego 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

Jeśli spojrzysz w tym artykule z 2015 r. Na głównym blogu Google dla webmasterów zobaczysz, że Google zaleca, aby nie robić niczego innego dla SEO na jednej stronie (lub jak to nazywają AJAX) - co obejmowałby reakcję.

Nie podają tam zbyt wielu szczegółów na temat tego, jak to robią, ale tak długo, jak twoja aplikacja jest zbudowana semantycznie i renderuje się bardzo szybko - powinna rangować.

Kładą duży nacisk na wydajność, a szybszy czas renderowania prowadzi do wyższych rankingów. To powoduje, że wszystkie aplikacje jednostronicowe mają poważną wadę w porównaniu z renderowaniem po stronie serwera.

Jeśli potrzebujesz bardziej szczegółowych wskazówek - wydaje się to naprawdę dobre miejsce do rozpoczęcia .

12
mikegeyser