Bądź jednym z robotem - Pt 1 - Nrwl

1. 3 części
2. Googlebot
3. Trzyczęściowa historia Googlebota
4. Wiek stron serwera
5. Age of Aided Comprehension
6. Age of Literacy
7. Progresywne ulepszanie
8. Adresy URL i linki
9. Bez Hashes
10. Wariacje
11. kliknij 👎 <a href=””> 👍
12. Konsola wyszukiwania
13. Poprawne roboty
14. Bądź szybki
15. Jak indeksuje Googlebot

Jeff Cross jest współzałożycielem nrwl.io , zapewnienie konsultacji kątowych zespołom przedsiębiorstw. Wcześniej pracował w zespole rdzenia Angular w Google, kierując zespołem Angular Mobile.

Googlebot

3 części

Jest to pierwsza z 3-częściowej serii poświęconej tworzeniu aplikacji Angular zrozumiałych i indeksowalnych przez Googlebota. W tym artykule omówimy krótką historię ewolucji zdolności Googlebota do indeksowania aplikacji JavaScript i omówimy niektóre najlepsze praktyki dotyczące aplikacji JavaScript w ogóle. Druga i trzecia część będą obejmować zagadnienia specyficzne dla kątów i przydatne narzędzia.

SEO jest ważnym tematem dla deweloperów, którzy rozumieją, że dotykają aplikacji, które opierają się na ruchu w wyszukiwarkach, ponieważ problemy z SEO są trudne i kosztowne, aby poprawić fakt po fakcie, potencjalnie kosztując tygodnie lub miesiące utraty ruchu.

Googlebot

SEO to szeroki temat. Ten artykuł skupia się na jednym aspekcie SEO: indeksowaniu. Skupiam się tylko na jednym robocie Googlebot (robocie Google) i skupiam się tylko na indeksowaniu aplikacji JavaScript i Angular. Przez indeksowanie rozumiem proces nawigowania do Googlebota, ładowania i analizowania stron. Nie będę zajmował się indeksowaniem, rankingiem ani żadnymi innymi zabawnymi tematami.

Trzyczęściowa historia Googlebota

Pre-2009 (Age of Server Pages), 2009–2015 (Age of Aided Comprehension), 2015+ (Age of Literacy)

Wiek stron serwera

Przed 2009 r. Programiści zaakceptowali, że jeśli używają jQuery, Backbone lub innych bibliotek JS do renderowania swoich aplikacji w przeglądarce, wyszukiwarki nie będą w stanie zrozumieć ich zawartości. Więc strony musiałyby być renderowane na serwerze w jakiejś formie, a następnie mogą być ulepszone za pomocą JavaScript w przeglądarce. Ponieważ struktury JavaScript zaczęły rosnąć i być używane do budowania całych aplikacji „Aplikacje jednostronicowe”, Google dostrzegło potrzebę zapewnienia programistom instrukcji dla robotów na temat zawartości ich aplikacji.

Age of Aided Comprehension

Więc w 2009 r. Google zaproponował nowy protokół użycie kombinacji znacznika meta do wskazania aplikacji było aplikacją JavaScript, a konfiguracja serwera do obsługi prostej wersji zawartości strony, gdy strona byłaby żądana za pomocą parametru zapytania o nazwie _escaped_fragment_ .

Na dzień dzisiejszy strona docs AngularJS implementuje ten protokół. Jeśli odwiedzasz https://docs.angularjs.org/api/ng/function/angular.bind , zobaczysz normalną stronę.

Zrzut ekranu z https://docs.angularjs.org/api/ng/function/angular.bind

Ale jeśli zmienisz adres URL, aby zawierał _escaped_fragment_ , https://docs.angularjs.org/ ? _escaped_fragment_ = api / ng / function / angular.bind , zobaczysz tę samą treść w znacznie prostszej, nie stylizowanej formie, bez JavaScript, dzięki czemu robot będzie mógł łatwo zrozumieć zawartość strony.

Zrzut ekranu z https://docs.angularjs.org/?_escaped_fragment_=api/ng/function/angular.bind

W tym momencie w październiku 2009 r. Googlebot zwiększał swoją zdolność do renderowania i analizowania aplikacji JavaScript. Udostępniając opcję _escaped_fragment_, programiści mogą pomóc robotowi indeksującemu mieć większą pewność co do zawartości stron dynamicznych.

Age of Literacy

Szybko do października 2015 r. Googlebot stał się znacznie bardziej zaawansowany w zakresie nawigacji i analizowania aplikacji JavaScript. Zespół wyszukiwania ogłosił na blogu webmasterów Google że poprzednia propozycja użycia _escaped_fragment_ jest obecnie przestarzała. Przeszukiwacz ewoluował na tyle, by móc bezbłędnie i konsekwentnie przeszukiwać aplikacje z jedną stroną JavaScript.

Czy dzięki rozwojowi robota JavaScript programiści JavaScript mogą po prostu tworzyć aplikacje w normalny sposób, nie martwiąc się o zdolność indeksowania? Ogólnie tak, ale nie bez pewnych zastrzeżeń, zastrzeżeń i gwiazdek. Aby wyjaśnić bieżące zalecenia dotyczące indeksowania aplikacji JavaScript, John Mueller z Google opublikowane w Google+ z kilkoma zwięzłymi sugestiami. John też przedstawiony na ten sam temat na AngularConnect 2016 , wchodząc w trochę więcej szczegółów niż jego post w Google+, ale powtarzając wiele z tych samych punktów. Zaproponuję moje podsumowanie postu i prezentacji.

Progressive Enhancement, URLs and Links, Search Console, poprawne roboty, Be Fast

Progresywne ulepszanie

Przeglądarka używana przez robot do renderowania aplikacji JavaScript nie ma wszystkich funkcji Chrome i innych nowoczesnych przeglądarek. W rozmowie z Johnem we wrześniu 2016 r. Poszczególne obsługiwane interfejsy API obejmują ServiceWorker, Fetch, Promise, requestAnimationFrame i localStorage. Większość aplikacji prawdopodobnie już je wypełnia, a przynajmniej ma awarię. Jeśli którykolwiek z tych interfejsów API jest używany do renderowania zawartości strony, ważne jest, aby strona zawiodła z wdziękiem i nadal mogła renderować treść pod jej nieobecność.

Adresy URL i linki

Kanoniczne adresy URL

Adresy URL są bardzo ważne dla indeksu Google. Wszystkie dokumenty w indeksie Google są wpisywane na adresy URL. Dlatego ważne jest, aby strony miały pojedynczy kanoniczny adres URL. Innymi słowy, jeśli ta sama strona jest dostępna pod różnymi adresami URL, w tym ta sama ścieżka URL z różnymi parametrami zapytania, musisz poinformować Google, jaki jest prawidłowy kanoniczny adres URL dla tej strony.

Bez Hashes

Google ma również silną stronniczość wobec adresów URL, które używają skrótu (/ # /) wewnątrz ścieżek. Jeśli Google widzi linki zawierające hash, zakłada, że ​​zawartość jest nieistotna. Rzadko się zdarza, że ​​Google indeksuje adresy URL skrótami.

Wariacje

Jeśli strona zawiera znaczące odmiany tej samej treści, takie jak treść przetłumaczona na wiele języków, dla każdej wersji strony powinien istnieć unikalny adres URL.

kliknij 👎 <a href=””> 👍

Googlebot nie traktuje programów obsługi kliknięć jako łączy, dlatego ważne jest, aby linki do treści były reprezentowane w atrybucie href elementów kotwiczących.

Konsola wyszukiwania

The Konsola wyszukiwania dostarczone przez Google jest kluczowym narzędziem do zarządzania i monitorowania relacji witryny z indeksem Google. Uwaga dla programistów JavaScript to Pobierz jako Google narzędzie. Pobierz jako Google pozwala programistom zażądać, aby Googlebot pobierał stronę, a następnie wyświetla pewne cechy strony, tak jak to widział Google. Programiści JavaScript będą chcieli kliknąć przycisk „Pobierz i renderuj”, który powoduje, że Googlebot renderuje aplikację JavaScript. Po zakończeniu indeksowania zostanie wyświetlony zrzut ekranu renderowanej strony.

Pobierz jako zrzut ekranu Google nrwl.io

Jest to przydatne, aby upewnić się, że zawartość strony jest poprawna, ale niestety obecnie nie można zobaczyć metadanych strony (tytuł, metaopis, kanoniczny adres URL). Jeśli chcesz zobaczyć te informacje, będziesz musiał oszukać i dodać informacje do treści swojej strony gdzieś, aby pojawiły się na zrzucie ekranu.

Poprawne roboty

Robots.txt określa, w jaki sposób serwery mogą informować roboty, takie jak Googlebot, o tym, jakie treści powinny i nie powinny indeksować. Często konfiguracje te służą do zapobiegania ładowaniu pewnych zasobów, które nie są konieczne do renderowania treści. Ważne jest, aby upewnić się, że robots.txt na serwerze i serwerach, od których zależysz, nie blokują krytycznych zasobów, takich jak biblioteki JavaScript wymagane do renderowania strony.

Bądź szybki

Googlebot może być po prostu robotem, ale to nie znaczy, że ma nieograniczoną cierpliwość. W pewnym momencie, jeśli załadowanie strony zajmuje zbyt dużo czasu, Googlebot zrezygnuje i nie przeanalizuje strony ani nie przeanalizuje jej w bieżącym stanie. Może to spowodować usunięcie stron z indeksu, jeśli ładowanie ich trwa zbyt długo. Dokładny punkt, w którym Googlebot się zrezygnuje, nie jest jasny, ale powszechnie uważa się, że jest to około 5 sekund. Dlatego ważne jest, aby ocenić wszystkie żądania blokowania i pracę, które mogą opóźnić renderowanie krytycznej zawartości, i albo usunąć mniej ważną pracę, albo odroczyć ją do momentu, gdy treść zostanie renderowana.

Jak indeksuje Googlebot

Ważną rzeczą, którą należy wiedzieć o Googlebocie, jest to, że nie klika on linków w aplikacji. Zamiast tego, gdy Googlebot analizuje stronę, zbiera wszystkie znalezione hiperłącza i planuje późniejsze indeksowanie linków. W pewnym momencie w przyszłości, może zaraz lub może za kilka dni, Googlebot wyśle ​​nowe żądanie załadowania strony. Innymi słowy, skup się na tym, jak Twoja strona działa i wyświetla początkowe obciążenie trasy.

W następnej części tej serii skoncentruję się na konkretnych rozważaniach, dzięki którym aplikacje Angular będą mogły być bardziej przeszukiwalne. Jeśli masz pytania lub szczegóły, które chciałbyś omówić, tweetuj na mnie @jeffbcross .

Jeff Cross jest współzałożycielem Nrwl - Enterprise Angular Consulting.