Poznaj najnowsze informacje i statystyki z konferencji Google I/O 2019.
W wyszukiwarce Google dzieje się wiele rzeczy, o których mówimy podczas Google I/O 2019.
W tym poście skupimy się na sprawdzonych metodach zapewniania wykrywalności aplikacji internetowych JavaScript w wyszukiwarce Google, takich jak:
- Nowa wersja naszego niezawodnego Googlebota
- Potok Googlebota do skanowania, renderowania i indeksowania
- Wykrywanie funkcji i obsługa błędów
- Strategie renderowania
- Narzędzia do testowania witryny w wyszukiwarce Google
- Typowe problemy i możliwe rozwiązania
- Sprawdzone metody SEO w aplikacjach internetowych JavaScript
Poznaj aktualnego Googlebota
W tym roku ogłosiliśmy długo wyczekiwany nowy, ponadczasowy Googlebot.
Googlebot używa teraz nowoczesnego silnika Chromium do renderowania witryn na potrzeby wyszukiwarki Google. Będziemy też testować nowsze wersje Chromium, by na bieżąco aktualizować Googlebota, zwykle w ciągu kilku tygodni od wydania stabilnej wersji Chrome. To ważne ogłoszenie dla programistów stron internetowych i specjalistów ds. SEO, ponieważ wiąże się z wprowadzeniem w Googlebotu ponad 1000 nowych funkcji, takich jak ES6+, IntersectionObserver i Web Komponenty w wersji 1.
Jak działa Googlebot
Googlebot to potok z kilkoma komponentami. Przyjrzyjmy się, jak Googlebot indeksuje strony na potrzeby wyszukiwarki Google.
Proces ten wygląda tak:
- Googlebot umieszcza adresy URL w kolejce do indeksowania.
- Następnie pobiera adresy URL za pomocą żądania HTTP na podstawie budżetu indeksowania.
- Googlebot skanuje kod HTML pod kątem linków i dodaje wykryte linki do kolejki.
- Następnie Googlebot umieszcza stronę w kolejce do renderowania.
- Gdy tylko jest to możliwe, strona Chromium jest renderowana bez interfejsu graficznego i obejmuje też wykonanie JavaScriptu.
- Googlebot używa wyrenderowanego kodu HTML do zindeksowania strony.
Konfiguracja techniczna może mieć wpływ na proces skanowania, renderowania i indeksowania. Na przykład długi czas odpowiedzi lub błędy serwera mogą wpływać na budżet indeksowania. Innym przykładem jest wymaganie JavaScriptu do renderowania linków, co może spowolnić ich wykrywanie.
Używanie wykrywania funkcji i obsługa błędów
Zawsze aktualny Googlebot ma wiele nowych funkcji, ale niektóre z nich nadal nie są obsługiwane. Jeśli będziesz korzystać z nieobsługiwanych funkcji lub nie będziesz prawidłowo obsługiwać błędów, Googlebot nie będzie w stanie wyrenderować ani zindeksować Twoich treści.
Spójrzmy na przykład:
<body>
<script>
navigator.geolocation.getCurrentPosition(function onSuccess(position) {
loadLocalContent(position);
});
</script>
</body>
Zawartość tej strony może się czasami nie wyświetlać, ponieważ kod nie obsługuje kodu, gdy użytkownik odrzuca uprawnienia lub gdy wywołanie getCurrentPosition zwraca błąd. Googlebot domyślnie odrzuca takie prośby o przyznanie uprawnień.
Jest to lepsze rozwiązanie:
<body>
<script>
if (navigator.geolocation) {
// this browser supports the Geolocation API, request location!
navigator.geolocation.getCurrentPosition(
function onSuccess(position) {
// we successfully got the location, show local content
loadLocalContent(position);
}, function onError() {
// we failed to get the location, show fallback content
loadGlobalContent();
});
} else {
// this browser does not support the Geolocation API, show fallback content
loadGlobalContent();
}
</script>
</body>
Jeśli masz problemy ze zindeksowaniem witryny JavaScript, zapoznaj się z naszym przewodnikiem rozwiązywania problemów, aby znaleźć rozwiązania.
Wybór odpowiedniej strategii renderowania dla aplikacji internetowej
Obecnie domyślną strategią renderowania aplikacji jednostronicowych jest renderowanie po stronie klienta. Kod HTML wczytuje kod JavaScript, który następnie w trakcie wykonywania generuje treść w przeglądarce.
Przyjrzyjmy się aplikacji internetowej, która pokazuje kolekcję obrazów kotów i wykorzystuje JavaScript do pełnego renderowania w przeglądarce.
Jeśli masz swobodę wyboru strategii renderowania, rozważ renderowanie po stronie serwera lub wstępne renderowanie. Uruchamiają go na serwerze, generując początkową treść HTML, co może zwiększyć wydajność zarówno dla użytkowników, jak i robotów. Dzięki tym strategiom przeglądarka może rozpocząć renderowanie kodu HTML w miarę napływania przez sieć, co przyspiesza wczytywanie strony. W sesji renderowania na konferencji I/O lub w poście na blogu o renderowaniu w internecie dowiesz się, jak renderowanie i hydratowanie po stronie serwera może poprawić wydajność i wygodę użytkowników aplikacji internetowych, a także więcej przykładów kodu stosowanych w tych strategiach.
Jeśli szukasz obejścia, aby pomóc robotom, które nie wykonują kodu JavaScript, lub jeśli nie możesz wprowadzić zmian w bazie kodu frontendu, rozważ zastosowanie renderowania dynamicznego, które możesz wypróbować w tym ćwiczeniu w programie. Pamiętaj jednak, że korzystanie z renderowania po stronie serwera i wstępnego renderowania nie będzie miało wpływu na wrażenia użytkownika i wydajność, ponieważ renderowanie dynamiczne przekazuje robotom tylko statyczny kod HTML. W tym przypadku nie jest to strategia długoterminowa, a zarazowa.
Przetestuj Twoje strony
Większość stron współpracuje z Googlebotem, jednak zalecamy regularne testowanie stron, aby mieć pewność, że treść jest dostępna dla Googlebota i nie ma żadnych problemów. Istnieje kilka przydatnych narzędzi, które mogą Ci w tym pomóc.
Najprostszym sposobem na szybkie sprawdzenie strony jest test optymalizacji mobilnej. Poza tym pokazuje problemy z dostosowaniem do komórek, a także zrzut ekranu z części strony widocznej na ekranie i wyrenderowanym kodzie HTML tak, jak widzi go Googlebot.
Możesz też sprawdzić, czy występują problemy z wczytywaniem zasobów lub błędy JavaScriptu.
Zalecamy zweryfikowanie domeny w Google Search Console. Pozwoli Ci to korzystać z narzędzia do sprawdzania adresów URL, by dowiedzieć się więcej o stanie skanowania i indeksowania adresu URL, otrzymywać wiadomości po wykryciu problemów przez Search Console i dowiedzieć się więcej o wydajności Twojej witryny w wyszukiwarce Google.
Aby uzyskać ogólne wskazówki i wskazówki dotyczące SEO, możesz skorzystać z audytów SEO w Lighthouse. Aby zintegrować audyty SEO z pakietem testowym, użyj interfejsu wiersza poleceń Lighthouse lub bota Lighthouse CI.
Te narzędzia pomogą Ci identyfikować, debugować i rozwiązywać problemy ze stronami w wyszukiwarce Google. Powinny też być częścią Twojego procesu programowania.
Bądź na bieżąco i w kontakcie
Aby być na bieżąco z ogłoszeniami i zmianami w wyszukiwarce Google, zaglądaj na naszego bloga dla webmasterów, kanał Google dla webmasterów w YouTube oraz nasze konto na Twitterze. Zapoznaj się też z naszym przewodnikiem po wyszukiwarce Google dla programistów oraz serią filmów o SEO i JavaScript, aby dowiedzieć się więcej o SEO i JavaScript.