SEO vs. React: roboty indeksujące są mądrzejsze niż myślisz

  1. Robienie badań
  2. Test Preactjs.com
  3. ✅ Bing
  4. ✅ Yahoo
  5. ✅ Duck Duck Go
  6. ⚠️ Baidu
  7. Aktualizacja 25 października 2016 r
  8. Potwierdzenia

Wiele osób nadal martwi się, że jeśli zbudujesz strony internetowe za pomocą narzędzi takich jak React, Angular lub Ember, zaszkodzi to rankingowi Twojej wyszukiwarki.

Myślenie brzmi mniej więcej tak: roboty indeksujące, których używają wyszukiwarki, nie będą w stanie poprawnie zaindeksować strony, chyba że są całkowicie renderowane w przeglądarce użytkownika. Zamiast tego zobaczą tylko kod HTML dostarczony z zaplecza.

Jeśli ten kod HTML zawiera tylko kilka metatagów i tagów skryptów, wyszukiwarka założy, że Twoja strona jest w zasadzie pusta i źle oceniasz.

Często widzę, że konsultanci zajmujący się optymalizacją wyszukiwarek internetowych (SEO) zalecają renderowanie strony na zapleczu, aby roboty indeksujące mogły zobaczyć wiele ładnego kodu HTML, który mogą następnie indeksować.

Dla mnie ta rada wydaje się nieracjonalna i nierealistyczna. Jest rok 2016. Użytkownicy oczekują, że strony będą dynamiczne i zapewnią im przyjemną obsługę. Nie chcą czekać na załadowanie nowej strony HTML za każdym razem, gdy coś klikną.

Czy więc stwierdzenie „renderowanie po stronie klienta szkodzi rankingowi strony” nadal jest ważne?

Robienie badań

Po pierwsze, zastrzeżenie: nie jestem żadnym ekspertem od SEO. Ale trochę przeczytałem na ten temat i oto co znalazłem.

Oto zapowiedź od Google na blogu dla webmasterów od października 2015 r .:

Test Preactjs.com

Niedawno napisałem tweet na temat konsultantów SEO, którzy wyślizgują się z mojego ukochanego Reactu. Aby być precyzyjnym, jestem w trakcie migracji do Preact , lekka alternatywa dla Reakcji Facebooka. Otrzymałem tę odpowiedź Jason Miller , jeden z programistów pracujących nad Preact:

Poza artykułem na blogu z wyszukiwarek, który zacytowałem powyżej, Jason napisał na Twitterze link do wyszukiwarki Google Preact strona główna , który wygląda tak:

Ta strona jest renderowana w całości po stronie klienta, przy użyciu Preact, ponieważ jej kod źródłowy dowodzi:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Preact: Szybka 3kb Reakcja alternatywna z tym samym API ES6. Komponenty i Wirtualny DOM. </title> <meta name = "viewport" content = "width = szerokość urządzenia, początkowa skala = 1, maximum-scale = 1, minimal-ui"> <meta name = "aplikacja mobilna -capable "content =" yes "> <meta name =" apple-mobile-web-app-zdolny "content =" yes "> <meta name =" format-detection "content =" telephone = no "> <meta name = "theme-color" content = "# 673AB8"> <link rel = "manifest" href = "/ manifest.json"> <link rel = "icon" type = "image / png" href = "/ assets / app -icon-192.png "sizes =" 192x192 "> <script> (function (url) {window ['_ boostrap _' + url] = fetch (url);}) ('/ content' + location.pathname.replace ( / ^ / (repl)? / $ /, '/index')+'.md'); </script> <link rel = "ikona skrótu" href = "/ favicon.ico"> <link href = "/ style.6bae35e4ff9d687cb418.css" rel = "arkusz stylów"> </head> <body> <script> (funkcja (i, s, o, g, r, a, m) {i ['GoogleAnalyticsObject'] = r; i [r] = i [r] || funkcja () {(i [r] .q = i [r] .q || []). push (argumenty)}, i [r] .l = 1 * new Date (); a = s.createElement (o), m = s.getElementsByTagName (o) [0]; a.async = 1; a.src = g; m.parentNode.insertBefore (a, m) }) (okno, dokument, „skrypt”, „// www.google- analytics.com/analytics.js','ga');ga('create ',' UA-6031694-20 ',' auto '); ga (' send ',' pageview '); </script> <skrypt type = "text / javascript" src = "/ bundle.a0afd09fd48712ed0f26.js"> </script> </body> </html>

Jeśli Googlebot nie był w stanie odczytać kodu HTML renderowanego przez Preact, nie pokazywałby więcej niż zawartość metatagów.

A oto jak wyglądają wyniki Google podczas wyszukiwania witryny: preactjs.com :

Inne artykuł przez Andrew Farmer od marca 2016 r. ostrzega przed brakiem obsługi JavaScript przez wyszukiwarki inne niż Google:

✅ Bing

Ostrzeżenie Andrew dotyczące Binga wydaje się nieistotne. Tu są Wyniki Bing podczas wyszukiwania witryny: preactjs.com :

✅ Yahoo

I Wyniki Yahoo podczas wyszukiwania witryny: preactjs.com :

✅ Duck Duck Go

I Wyniki Duck Duck Go podczas wyszukiwania witryny: preactjs.com :

⚠️ Baidu

Chińska wyszukiwarka Baidu ma problemy z preactjs.com. Tu są jego wyniki podczas wyszukiwania witryny: preactjs.com :

Wydaje się więc, że jeśli priorytetem jest dla ciebie ranking w wyszukiwarce, która jest zasadniczo tylko w Chinach, nie ma nic złego w renderowaniu stron internetowych po stronie klienta za pomocą JavaScript, o ile przestrzegasz pewnych podstawowych zasad (cytowanych z Post na blogu Andrew Farmera ):

  • Renderuj komponenty przed wykonaniem jakichkolwiek asynchronicznych działań.
  • Przetestuj każdą ze stron za pomocą Fetch jako Google, aby upewnić się, że Googlebot znajduje Twoją zawartość

Dziękuje za przeczytanie!

Aktualizacja 25 października 2016 r

Andrew Ingram przeprowadziłem te same testy, które przeprowadziłem i doszedłem do innego wniosku.

Cytat z Andrew:

Śledź dyskusję na Hacker News

Potwierdzenia

Podziękowania dla Adama Audette ( Ziemia wyszukiwarki ) i Andrew Farmer za ich doskonałe artykuły na blogu, z których cytowałem, Jason Miller za jego wkład i inspirację moi koledzy z Grupa eBay za ich wsparcie i Quincy Larson z Bezpłatny Code Camp za opublikowanie tego artykułu!

Czy więc stwierdzenie „renderowanie po stronie klienta szkodzi rankingowi strony” nadal jest ważne?
192.png "sizes =" 192x192 "> <script> (function (url) {window ['_ boostrap _' + url] = fetch (url);}) ('/ content' + location.pathname.replace ( / ^ / (repl)?