- 1. Adresy URL muszą być „przyjazne dla Google” i ładować niezależnie
- 2. Wykorzystaj standardowe <a href> linki w swoim HTML
- 3. JavaScript po stronie serwera
Наша команда-партнер Artmisto
ReactJS to popularna biblioteka JavaScript używana dla rosnącej liczby stron internetowych. W rzeczywistości, 5,6% z 10 000 najlepszych stron internetowych korzysta obecnie z React, zgodnie z witryną trendów cyfrowych BuiltWith.
Budowanie stron internetowych i mobilnych aplikacji internetowych w React może pomóc w stworzeniu nowoczesnego interfejsu użytkownika, jednak, podobnie jak wiele technologii JavaScript, istnieją wyzwania związane z wyszukiwarkami. Na szczęście React pozwala na renderowanie JavaScript po stronie klienta lub po stronie serwera (co czyni go „izomorficznym”), co oznacza, że witryna React może konkurować o ruch organiczny.
Niektóre obszary, które należy obserwować, aby zachować i zwiększać ruch organiczny po przejściu na stronę React JS, wymieniono poniżej.
1. Adresy URL muszą być „przyjazne dla Google” i ładować niezależnie
Adresy URL powinny wyglądać jak statyczne adresy URL z katalogami, na ile to możliwe (http://www.alicesbooks.com/fiction/sci-fi/). Co więcej, upewnij się, że używasz słów, które opisują treść, aby każdy mógł ją zrozumieć.
Niektóre witryny o dużym ciężarze JavaScript lub aplikacje jednostronicowe mają hashtag w adresie URL, którego Google prawdopodobnie nie indeksuje (np. Https://www.alicesbooks.com/#scifi).
Użytkownicy powinni mieć możliwość przeglądania i udostępniania adresu URL właściwego dla ich bieżącej strony. Pomoże to wyszukiwarkom i użytkownikom. Nikt nie lubi wysyłać linku do kogoś, tylko po to, by odkryć, że link nie prowadzi do właściwej strony!
Uwaga dla programistów: jedną z metod rozwijania tych unikatowych adresów URL jest komponent nawigacyjny React, taki jak React Router https://github.com/ReactTraining/react-router . PMG wykorzystuje React Router z naszymi własnymi narzędziami.
2. Wykorzystaj standardowe <a href> linki w swoim HTML
Upewnij się, że powiązane treści są powiązane przez <a href> linki, aby zapewnić wykrycie wyszukiwarki.
Unikaj umieszczania ważnych treści za zdarzeniem JavaScript. Google może w ogóle nie śledzić wydarzeń „onclick” witryny. Jak podano Moz w zeszłym roku po prostu „nie używaj zdarzeń onclick JavaScript jako zamiennika wewnętrznego linkowania”.
3. JavaScript po stronie serwera
Dlaczego warto korzystać z renderowania po stronie serwera? Renderowanie po stronie serwera zapewni, że Googlebot będzie mógł łatwo odczytać prosty kod HTML. Tak, Google zdecydowanie może indeksować i wyświetlać JavaScript po stronie klienta. W konkurencyjnych przestrzeniach jest to zbyt kosztowne, aby polegać wyłącznie na renderowaniu skomplikowanego JavaScript przez Google.
- Google jest bardzo zaawansowany pod względem możliwości renderowania JavaScript po stronie klienta. Jednak wyszukiwarki i inne platformy, takie jak Bing, Baidu, Yandex, Apple i Facebook, które regularnie indeksują witryny, są zazwyczaj mniej zaawansowane i mogą powodować znaczne zmniejszenie ruchu.
- Wydajne renderowanie po stronie klienta powoduje, że Google indeksuje mniej stron w witrynie - co oznacza, że nowsze strony będą miały mniejszy ruch. Google nie zawsze renderuje JavaScript po stronie klienta, aby w pełni zrozumieć stronę. Jest to prawdopodobnie spowodowane tym, że czas ten znacznie spowalnia indeksowanie.
- Google może po prostu źle zrozumieć, co człowiek nie miałby problemu z obsługą JavaScript. Czasami drobne błędy JavaScript mogą prowadzić do braku treści w Google.
- Nawet jeśli wyszukiwarka indeksuje i renderuje JavaScript po stronie klienta, może to spowodować nieoczekiwane zachowanie, takie jak indeksowanie ton nieistotnych plików JSON. Wstępnie renderowany HTML jest po prostu łatwiejszy do zrozumienia dla wyszukiwarek (i marketerów).
Co renderować po stronie serwera? Treść i linki powinny być dostępne w języku HTML i muszą być indeksowane przez Google, aby niezawodnie czytać stronę. Pliki JavaScript i CSS powinny być również indeksowane, utrzymując je odblokowane w pliku robots.txt. Początkowa zawartość ładowana przed interakcją użytkownika powinna być wykonana po stronie serwera. Po tym renderowanie po stronie klienta jest w porządku.
Uwagi programisty dotyczące implementacji
- Renderowanie HTML po stronie serwera można wykonać za pomocą „ReactDOM.renderToString” zamiast „ReactDOM.render”. React Helmet może być przydatny do renderowania elementów sekcji głowy, takich jak metatagi.
- Spójrz na Następny framework JS dla React. Następny JS jest zbudowany specjalnie do renderowania po stronie serwera i ma własną wewnętrzną bibliotekę routingu. Budowanie od podstaw jest łatwiejsze niż modyfikowanie kodu w celu renderowania po stronie serwera.
