Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

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)?