Przygody w SEO

  1. Dodawanie stron do zakładek
  2. Wyraźne adresy URL dla SPA
  3. Poza odrębnymi adresami URL
  4. Volga, przyjazna SEO biblioteka Vaadin
  5. Różne wykończenia

TL; DR: Vaadin w przeszłości nie był przyjazny dla SEO. Już nie, z nową biblioteką Volga.

Dodawanie stron do zakładek

Zakładki są tak stare jak sama www. Możliwość zapisania adresu URL jest częścią ADN stron internetowych. Jeśli chodzi o aplikacje internetowe, jest to nieco inne. Na przykład w aplikacji internetowej e-commerce, podczas gdy zakładanie określonego produktu do zakładek ma sens, zakładanie konkretnego kroku procesu kasowania nie.

Idąc za przykładem sklepu, oto co dzieje się w tradycyjnym kontekście opartym na serwletach:

  1. Serwlet jest mapowany na konkretny podwykonawca, taki jak / product / *
  2. Po wywołaniu adresu URL / product / really-cool-product wywoływana jest metoda doGet () tego serwletu
  3. Metoda analizuje adres URL, aby przeczytać naprawdę fajną część produktu - która powinna być unikalnym kluczem dla produktu
  4. Deleguje do całego łańcucha komponentów, które ładują produkt z magazynu danych
  5. Przekazuje je do JSP wraz z odpowiednimi danymi produktu
  6. Ta strona JSP generuje kod HTML

Przyjdź SPA. Z definicji obsługują całą zawartość pod tym samym adresem URL. To sprawia, że ​​zakładanie określonych stron aplikacji jest niemożliwe, ponieważ nie ma żadnych stron jako takich. Ogólnie rzecz biorąc, SPA radzą sobie z tym problemem identyfikatory fragmentów . Powyższy adres URL staje się / product # naprawdę fajnym produktem, problem rozwiązany. W Vaadin przekłada się to bezpośrednio na użycie Page.getCurrent (). SetUriFragment () metoda lub Nawigator API .

Niestety, to nie działa w ogóle z indeksującą częścią SEO. Fragmenty nie są dyskryminującymi częściami adresu URL: # naprawdę fajny produkt i # inny-fajny produkt wskazuje na ten sam adres URL, aby boty takie jak Google Bot nie indeksowały obu.

Identyfikator fragmentu działa inaczej niż reszta URI: jego przetwarzanie odbywa się wyłącznie po stronie klienta bez udziału serwera WWW. - Wikipedia

Przez pewien czas Google zalecał stosowanie specjalnych adresów URL w stylu „hashbang” (widok #! My-indexable), takich jak to, z czego korzysta Nawigator w Vaadin i specjalnie obsługiwane materiały SEO dla tych widoków, ale było to trudne rozwiązanie i podejście jest teraz zaniechany przez Google także.

Wyraźne adresy URL dla SPA

Wracając do pierwszego, wymagane są ścieżki zarówno produkt / produkt / naprawdę-fajny produkt / produkt / inny-fajny produkt. Ten problem nie dotyczy wyłącznie Vaadin, ale jest wspólny dla wszystkich ram SPA i serwerów. Wymagane jest:

  1. Aby klient zmienił adres URL przeglądarki bez pełnego przeładowania strony
  2. Aby serwer obsługiwał ścieżki

W JavaScript odpowiedź brzmi: użyj Historia API . Zakładam, że wszyscy znają następujący fragment:

window.back (); window.go (-1);

To jednak absolutnie nie jest standardem. Należy to zastąpić następującym:

window.history.back (); window.history.go (-1);

Obiekt historii implementuje API historii. Jego obsługiwane przez wszystkie nowoczesne przeglądarki . W szczególności interfejs API umożliwia dodawanie wpisów w historii przeglądarki za pomocą metodypushState () bez faktycznego ładowania stron.

Załóżmy, że http://mozilla.org/foo.html wykonuje następujący JavaScript: var stateObj = {foo: "bar"}; history.pushState (stateObj, „strona 2”, „bar.html”); Spowoduje to, że pasek adresu URL wyświetli http://mozilla.org/bar.html, ale nie spowoduje, że przeglądarka załaduje bar.html, a nawet sprawdzi, czy bar.html istnieje. - Sieć deweloperów Mozilla

Zauważ, że katalog Vaadin zawiera biblioteka otoki historii wokół interfejsu API po stronie klienta. Zapewnia sposób zarządzania obiektem historii z kodu Vaadin po stronie serwera.

Po stronie serwera ścieżki muszą być obsługiwane. W aplikacjach Vaadin pełne adresy URL są dostępne w metodach UI.init (), z serwletów lub np. Z BootstrapListeners. Dodatek Historia obsługuje również API Nawigatora i Obiekty widoku z pełną ścieżką bez adresów URL w stylu hashbang.

Poza odrębnymi adresami URL

Odrębne adresy URL to tylko wyłaniająca się część góry lodowej dotycząca SEO.

Chcemy mieć dedykowane meta nagłówki dla każdego dedykowanego adresu URL, takie jak <title> i <meta name = "description">. Co więcej, media społecznościowe mają własne dedykowane nagłówki meta, np .:

Volga, przyjazna SEO biblioteka Vaadin

Wykonanie powyższych kroków od podstaw w projekcie Vaadin zdecydowanie nie jest trywialne. Radujcie się, bo przychodzi Wołga , gotowa do użycia biblioteka, która obsługuje najważniejsze rzeczy.

Aby go użyć, po prostu dodaj ten fragment do swojego POM:

<zależność> <groupId> org.vaadin </groupId> <artifactId> volga </artifactId> <wersja> 0.1 </version> </dependency>

Ważna część API to:

org.vaadin.volga.VolgaDetails Zawiera zestaw nagłówków metadanych org.vaadin.volga.VolgaServlet Ustawia VolgaDetails dla ścieżki głównej i udostępnia powiązania między ścieżką a innymi obiektami VolgaDetails. W ten sposób każda konkretna ścieżka może zostać ustawiona na własne dane VolgaDetails. org.vaadin.volga.Volga Przechowuje wcześniej zdefiniowane odwzorowania org.vaadin.volga.VolgaUI Obsługuje początkową konfigurację org.vaadin.volga.SeoBootstrapListener Wypełnia nagłówki metadanych strony z obiektu VolgaDetails

Aby uzyskać więcej informacji, sprawdź ten przykładowy projekt na Github. Jest on wdrażany online i tutaj są wyświetlane wyniki wyszukiwania Google, które dowodzą, że działa.

To działa również na Twitterze:

Różne wykończenia

Istnieje również kilka innych sztuczek, które należy rozważyć, aby pomóc robotom indeksować aplikacje Vaadin.

  • Użyj pliku robots.txt
  • Użyj pliku sitemap.xml
  • Użyj podstawowych łączy, aby poruszać się między widokami (patrz PushStateLink w Historia )
  • Używaj dobrze sformatowanego HTML, np. Używaj odpowiednich elementów <h1> zamiast tylko stylizować większe nagłówki (patrz Nagłówek i RichText w Virityna )

Zauważ, że GWT nie obsługuje domyślnie niczego istotnego dla GoogleBota. ZA łata jest dostępny w Wołdze, ale zostanie naprawiony w samym Vaadin wkrótce

Nie czekaj i dostosuj odpowiednie części aplikacji do SEO Wołga teraz!

AUTOR Nicolas Frankel

Nicolas Fränkel jest architektem oprogramowania z 15-letnim doświadczeniem w doradztwie dla wielu różnych klientów w szerokim zakresie kontekstów (takich jak telekomunikacja, bankowość, ubezpieczenia, duży handel detaliczny i sektor publiczny). Zwykle działa na technologiach Java / Java EE i Spring, ale ma węższe zainteresowania, takie jak jakość oprogramowania, procesy tworzenia i bogate aplikacje internetowe. Obecnie pracuje dla lidera dostawcy rozwiązań e-commerce. Podwójnie jako nauczyciel na uniwersytetach iw szkołach wyższych, trener i trójka jako autor książek.