Экономика стран

К сожалению, большинство людей, которые будут ими затронуты почти весь мир, не будут иметь никакого влияния на результат. Вести Экономика Дайджест иностранной прессы за 14 августа.
Вести Экономика Греции снова придется списывать долги Греция не сможет самостоятельно расплатиться по долгам, и понадобится новая реструктуризация долгов, чтобы спасти страну от банкротства.

JavaScript, PWA i… SEO

  1. 1. Los Chrome 41
  2. 2. Googlebot nie jest przeglądarką
  3. 3. Googlebot niczego nie klika
  4. 4. Poczuj przepływ
  5. Sytuacja, w której każdy wygrywa
  6. SSR
  7. Uniwersalna aplikacja
  8. Przyjazne dla SEO adresy URL
  9. Metadane + mikroformaty
  10. Prędkość

Progresywne aplikacje internetowe są prawdopodobnie jednym z najlepszych sposobów na poprawę współczynnika konwersji i zadowolenia użytkowników Twoich klientów. Korzystanie z JavaScript jako ramy PWA zapewnia najlepsze możliwe wrażenia użytkownika, ale pozostawia także pytania dotyczące tworzenia aplikacji JS przyjaznej dla robota.

Dzięki PWA uzyskasz natywne interakcje, powiadomienia push i instalację na ekranie głównym. Ale to tylko część obrazu. Ponadto dystrybucja jest znacznie łatwiejsza dzięki standardowej sieciowej możliwości łączenia, udostępniania - i dystrybucji bez aplikacji.

Dowiedz się więcej w Przewodnik dla początkujących po PWA .

Z technicznego punktu widzenia, PWA są rodzajem aplikacji jednostronicowej - aplikacje JavaScript, które działają w środowisku przeglądarki i dlatego nie muszą być pobierane ani instalowane.

Ze swej natury 90% PWA to czysto JavaScript. W większości przypadków programiści wybierają niektóre nowoczesne ramy JS, takie jak React, Vue lub Angular, aby zapewnić użytkownikowi jak najlepsze wrażenia. Ale model dystrybucji to sieć, dla której wyszukiwanie organiczne jest niezbędne.

Branża SEO nie jest pewna, czy Google traktuje (i ocenia!) Witryny oparte na JavaScript i strony HTML w równym stopniu. Dzięki tej wiedzy jasne jest, że SEO i programiści dopiero zaczynają rozumieć, w jaki sposób można przekształcić nowoczesne struktury JavaScript. Możesz przeczytać wiele samouczków i postów na blogu na temat tworzenia przyjaznych dla robotów aplikacji JavaScript. Google się poprawia z nowoczesnymi technikami renderowania w Internecie - jednak nadal istnieje wiele ograniczeń.

Jeśli spojrzymy na tworzenie stron internetowych z ewolucyjnego punktu widzenia, zobaczymy, jak dużą rolę odgrywa w tym procesie JavaScript. Przenieśliśmy się ze statycznych stron internetowych zbudowanych ze zwykłego HTML do dynamicznych aplikacji JavaScript.

Google ma wiele ograniczeń w wykonywaniu JavaScript. Inne wyszukiwarki nie przetwarzają JS w ogóle. Nie oznacza to jednak, że nie możemy budować błyszczących, interaktywnych stron internetowych z nowoczesnymi ramami, które również działają dla wyszukiwarek! - Maria Cieślak - Senior Technical SEO, Słonie

Zapytaliśmy ekspertów z agencji Elephate SEO o ich wyniki i zalecenia dotyczące technik SEO PWA.

Po przeprowadzeniu seria eksperymentów z nowoczesnymi frameworkami JS vs Google , wyniki, które przedstawili, są naprawdę interesujące:

1. Los Chrome 41

Google analizuje i renderuje JS, ale z dużymi ograniczeniami - używa przeglądarki bezgłowej opartej na Chrome 41 (2015 ')… Jeśli używasz nowoczesnych specyfikacji Ecma Script (jak obecnie większość devów), twój JS prawdopodobnie powinien używać wielu podkładek / awarie, aby zapewnić tę samą strukturę kodu / linków do Googlebota. Najgorsze jest to, że trudno powiedzieć, które elementy będą pomyślnie interpretowane i indeksowane przez Google, a które nie.

Niestety dla programistów aplikacji PWA w Chrome 41 interfejsy takie jak IndexedDB i WebSQL są wyłączone. Interfejsy są najczęściej używane do zapewnienia użytkownikom wsparcia w trybie offline.

2. Googlebot nie jest przeglądarką

Sieć World Wide Web jest jednak ogromna, więc Google optymalizuje swoje roboty pod kątem wydajności. Dlatego Googlebot czasami nie odwiedza wszystkich stron, których chcą webmasterzy.

Co najważniejsze, algorytmy Google próbują wykryć, czy zasób jest niezbędny z punktu widzenia renderowania. Jeśli nie, prawdopodobnie nie zostanie pobrany przez Googlebota.

Eksperymenty prowadzone przez Elephate pokazują, że robot indeksujący Google nie czeka dłużej niż 5 sekund na pobranie / renderowanie dowolnego zasobu. Co więcej, może „zoptymalizować” zachowanie aplikacji, nie respektując (wciąż dość powszechnych) wywołań setTimeout () itp.

Tutaj Google Indexer po prostu pominął skrypt i wyrenderował resztę strony. Źródło: Elephate blog .

3. Googlebot niczego nie klika

Upewnij się, czy menu jest widoczne w DOM przed kliknięciem na dowolne elementy menu. Jeśli polegasz na zdarzeniu onClick, może to uniemożliwić przeglądarce indeksowanie struktury witryny.

4. Poczuj przepływ

Przepływ indeksacji dla klasycznych aplikacji HTML i JS różni się znacznie; indeksowanie aplikacji JS Googlebot wymaga dużo więcej zasobów i czasu. Google oficjalnie oświadczył, że „ renderowanie witryn obsługiwanych przez JavaScript w wyszukiwarce Google jest odroczone, dopóki Googlebot nie będzie dysponował zasobami do przetwarzania tej treści.

Źródło: Google I / O '18

To tylko kilka przykładów pułapek, które możesz napotkać podczas pracy z aplikacją SEO. Więcej informacji na temat indeksowania aplikacji JavaScript można znaleźć, czytając „ Najlepszy przewodnik po JavaScript SEO

OK, więc sprawdźmy, jak radzimy sobie z wyzwaniami SEO JavaScript na podstawie naszego własnego studium przypadku.

Vue Storefront to samodzielny sklep internetowy Progressive Web App dla Twojego eCommerce, który może łączyć się z dowolnym zapleczem e-commerce (np. Magento , Pimcore, Prestashop lub Shopware) poprzez API. Jest tworzony przy użyciu struktury Vue.js - i tak to jest SPA (aplikacja Single Page Application), i tak działa dobrze z Google i innymi robotami. Możesz znaleźć więcej informacji o naszym Githubie .

„Po pewnych dobrych praktykach SEO JS, aplikacje jednostronicowe (w tym progresywne aplikacje internetowe) mogą być indeksowane, renderowane i indeksowane, co oznacza, że ​​mogą być przyjazne dla SEO. Na przykład, patrząc na jedną z najpopularniejszych stron internetowych… YouTube. Tak, YouTube jest zbudowany z JavaScript (odwiedź witrynę, wyłącz JavaScript w przeglądarce i zobacz, co się dzieje) i plasuje się bardzo dobrze.

Vue Storefront jest zbudowany z uniwersalnym JavaScript. To jedno z najbardziej przyjaznych SEO rozwiązań rekomendowanych przez Google. ” - Maria Cieślak - Senior Technical SEO, Słonie

Sytuacja, w której każdy wygrywa

Narzędzia i techniki tworzenia stron internetowych zmieniają się - znacznie szybciej niż możliwości wyszukiwarek do obsługi wszystkich nowych funkcji. Google nadal używa silnika renderującego - którego początki sięgają 2015 roku - do renderowania większości nowoczesnych aplikacji internetowych.

Jest rozwiązanie. Możesz oddzielić zawartość obsługiwaną przez robota (po stronie serwera) od supernowoczesnej wersji CSR (po stronie klienta - renderowanej) dla użytkowników. Możesz to zrobić. Prawnie. Bez konsekwencji;)

SSR

Renderowanie po stronie serwera (SSR) to jedna z technik, które zastosowaliśmy przy tworzeniu Vue Storefront. To jak budowanie aplikacji izomorficznej / uniwersalnej, w której piszesz jedną bazę kodu JS dla renderowania po stronie klienta / serwera.

Największe zalety:

Uniwersalna aplikacja

Gdy spojrzysz na dowolny adres URL Vue Storefront - na przykład https://demo.vuestorefront.io/c/women-20 - i kliknij „Wyświetl źródło”, możesz zauważyć, że Vue Storefront zapewnia przeglądarce unikalny, niestandardowy znacznik dla każdego podawanego adresu URL.

OK, więc wygląda na 2003 '- klasyczny HTML + CSS. Wygenerowane przez JavaScript, po stronie serwera.

To jak klasyczna aplikacja internetowa. Po załadowaniu pierwszej strony aplikacja zachowuje się jak typowe SPA z perspektywy klienta - pobieranie danych dla wszystkich kolejnych stron przy użyciu AJAX + Service Workers.

W Googlebocie jest to po prostu HTML, który umożliwia indeksowanie go w optymalny sposób. Dla programisty jest to ten sam kod - bez względu na to, czy jest on renderowany po stronie klienta czy serwera.

Przyjazne dla SEO adresy URL

Bardzo ważne jest zoptymalizowanie struktury linków - nie tylko w celu uniknięcia typowych linków opartych na hashtagach SPA (#products zamiast / products?), Ale także w celu dostosowania adresów URL.

Vue.js zapewnia programistom całkiem fajny mechanizm Vue Routera ( https://router.vuejs.org/ ) gdzie można dodawać i modyfikować niestandardowe mapowania adresów URL / komponentów.

Metadane + mikroformaty

Począwszy od tagów Meta, mikroformatów, otwartego wykresu - w eCommerce dobrze jest korzystać z nich wszystkich, aby poprawić łączność treści i ułatwić udostępnianie. Oczywiście poprawia to również wyniki SEO.

Wybrana struktura powinna umożliwić programistom pracę na poziomie szablonu, tworząc wysoce dostosowaną strukturę HTML. Vue Storefront opiera się na silniku szablonowym - podstawowe struktury mogą być modyfikowane, wymieniane, usuwane itp.

Vue Storefront opiera się na silniku szablonowym - podstawowe struktury mogą być modyfikowane, wymieniane, usuwane itp

Vue.js jest fajny ze swoim systemem. Ostatecznie szablony są kompilowane do zwykłego kodu JavaScript (jak szablony React JSX, ale mają znacznie więcej do zaoferowania, a jednocześnie łatwiej jest zapoznać się z nowymi użytkownikami;))

Prędkość

Czas renderowania serwera może również poprawić rankingi SEO. To było wielokrotnie oficjalnie stwierdzane przez Google i udowodnione przez wiele eksperymentów. Algorytm indeksowania wykorzystuje podstawowe informacje o szybkości ładowania strony zebrane wśród użytkowników. Dlatego optymalizacja czasu ładowania strony zwiększy nie tylko współczynniki konwersji, ale także rankingi wyszukiwania.

Baza danych NoSQL, buforowanie i wstępne renderowanie pomagają utrzymać czas SSU Vue Storefront poniżej 0.2s (w env programistów, bez optymalizacji). OK, chciałem to pokazać;)

Zmiana w kierunku budowania aplikacji JavaScript jest naturalnym krokiem w tworzeniu stron internetowych. Jeśli zależy Ci na zapewnieniu najlepszego doświadczenia użytkownika (zwłaszcza użytkownikom mobilnym), PWA jest tym, czego szukasz. Zbudowaliśmy Vue Storefront pamiętając o wszystkich ograniczeniach, jakie mają wyszukiwarki, a nasze rozwiązanie spełnia wszystkie najlepsze praktyki SEO JS . Dzięki temu aplikacja jest przyjazna zarówno dla użytkownika, jak i wyszukiwarki.

  • PWA działa jak natywna aplikacja i zapewnia lepsze wrażenia użytkownika. Warto rozwijać, jeśli chcesz zwiększyć sprzedaż. Istnieje wiele studiów przypadków, aby dowiedzieć się, jak zacząć Prezentacja Google kończąc na naszym TOP 30 Progressive Web Apps Benchmark Study .
  • Wyszukiwarki nie mogą płynnie przetwarzać aplikacji obsługiwanych przez JavaScript. Jednak możliwe jest zbudowanie aplikacji przyjaznej dla SEO.
  • Renderowanie po stronie serwera jest najlepszym rozwiązaniem do obsługi aplikacji JavaScript dla robotów indeksujących w przyjazny dla SEO sposób.
  • WRS (Web Rendering Service - usługa używana przez Google do renderowania strony przed indeksowaniem) jest rodzajem przeglądarki bezgłowej; to jak bardzo stary - rocznik 2015 - Chrome 41 do pewnego stopnia.
  • Znacznie łatwiej jest utrzymywać znaczniki HTML generowane dynamicznie (SSR) dla optymalizacji SEO niż łagodnie obniżać ograniczenia JS, aby Googlebot mógł poprawnie indeksować aplikację.
  • Powinieneś upewnić się, że twoje skrypty są szybkie. Upewnij się, że serwer nie zwalnia po zwiększeniu obciążenia hosta.

Przeczytaj więcej na temat Blog słoniowy . Trudno znaleźć lepszy przewodnik po indeksowaniu JS.

Artykuł ten napisał Piotr Karwatka we współpracy z Marią Cieślak z Elephate.

Artykuł ten napisał Piotr Karwatka we współpracy z Marią Cieślak z Elephate

Products zamiast / products?
Навигация сайта
Реклама
Панель управления
Календарь новостей
Популярные новости
Информация
Экономика стран www.mp3area.ru © 2005-2016
При копировании материала, ссылка на сайт обязательна.