Jak stworzyć stronę SEO Friendly Infinite Scrolling

endless scroll

To modne. Spoko. To modne. To jest nieskończone przewijanie strony!

Podobnie jak w przypadku każdego nowego trendu projektowego, SEO muszą dowiedzieć się, jak ta opcja projektowania stron internetowych pasuje do wielkiego schematu SEO. Osobiście wolałbym mieć świetnie wyglądającą witrynę z zabójczym SEO niż modną witrynę z so-so SEO.

Jeśli uważasz, że nieskończona przewijana strona jest najlepszą opcją projektu dla Twojej witryny, ale chcesz również zachować świetne SEO, Czytaj dalej. Pokażę Ci dokładnie, jak możesz osiągnąć oba te cele:

Co to jest nieskończona przewijana strona?

Na wypadek, gdybyś nie znał “nieskończonej przewijanej strony”, pozwól, że ci to wyjaśnię. Gdy podzielę się kilkoma przykładami (poniżej), od razu zdasz sobie sprawę, “o, tak, widziałem to wcześniej.”

Nieskończone przewijanie jest dokładnie tym, co opisuje ten termin-funkcją, która pozwala użytkownikowi na przewijanie strony bez dotarcia do jej końca. Kiedy przewijasz w dół, w kierunku “dołu” strony, po prostu ładuje więcej treści, zapewniając stale rosnącą i pozornie niekończącą się ilość materiału.

Zazwyczaj jest zaimplementowany w JavaScript, który asynchronicznie ładuje świeżą zawartość, wyzwalaną przez użytkownika przewijającego poza punkt strony. Aby utrzymać idealny czas ładowania, nowa zawartość rozpoczyna ładowanie tła, zanim użytkownik osiągnie punkt przewijania “Załaduj więcej”.

Teraz, gdy już wiesz, co to jest, spójrzmy na kilka przykładów.

Jakie są przykłady nieskończonego przewijania stron?

Rzućmy okiem na niektóre z najpopularniejszych nieskończonych przewijanych stron w Internecie.

Jeśli odwiedzisz mój profil na Twitterze – lub jakikolwiek profil na Twitterze-otrzymasz natychmiastowe poczucie nieskończonego przewijania. Przewijaj dalej, a strona będzie się rozszerzać.

twitter

Prawdopodobnie doświadczyłeś tego na Facebooku. Właśnie dlatego nigdy nie przestajesz patrzeć na Facebooka.

facebook

I, gdy jesteśmy na temat jakości wiru czasu witryn społecznościowych, nie zapominajmy o nieskończonym przewijaniu na Pintereście.

pinterest

Google, pomimo swojej odporności na nieskończone przewijanie wyników wyszukiwania na swojej głównej stronie wyszukiwania, używa nieskończonego przewijania do wyszukiwania obrazów.

penguins

Ale co ze stronami Nie-społecznościowymi? Czy nieskończony zwój ma miejsce wśród Nie-twitterów lub nie-facebooków świata sieci? Absolutnie tak. W końcu to tam przetestowane i/lub sprawdzone zostaną prawdziwe zalety SEO nieskończonego przewijania.

Mashable, strona z wiadomościami, ma nieskończony zwój.

mashable

Francuska agencja designu, Departament Créatif, wykorzystuje mashup Grafiki bohaterów, nieskończonego przewijania, elementów paralaksy i innych bardzo imponujących technik projektowania.

design agency

Axara, strona marki modowej, używa nieskończonego zwoju z pewnym sukcesem:

axara

Nieskończone przewijanie ma pewne zauważalne zalety pod względem doświadczenia użytkownika i zaangażowania. Ale są też problemy. Problem, który mnie najbardziej interesuje, dotyczy SEO.

Jaki jest problem SEO z nieskończonym przewijaniem stron?

Jednym słowem problem SEO z infinite scroll jest JavaScript, co jest najpopularniejszym sposobem jego realizacji. Wyszukiwarki, w szczególności Google, nie wydają się pomyślnie indeksować większości JavaScript:

Google może uruchomić JavaScript, aby znaleźć zawartość, ale Google ma ograniczenia dotyczące tego, co może zrobić i co może zrozumieć. Najlepsza praktyka pozostaje taka sama: umieść zawartość, którą chcesz indeksować i indeksować w podstawowym HTML. Na przykład użyj kart jQuery, aby umieścić zawartość w jednym pliku zamiast kart AJAX, które rozkładają zawartość na kilka plików. Krótko mówiąc, Ułatw Google dostęp do Twoich treści.

Google, poprzez swoje zalecenia dla webmasterów, czyni to również:

Jeśli wyszukane funkcje, takie jak JavaScript, pliki cookie, identyfikatory sesji, ramki, DHTML lub Flash uniemożliwiają Wyświetlanie całej witryny w przeglądarce tekstowej, pająki wyszukiwarek mogą mieć problemy z indeksowaniem witryny.

Możesz mieć pewność, że zawartość HTML w kodzie źródłowym będzie indeksowana przez Google, ale każda kolejna zawartość ładowana asynchronicznie za pomocą JavaScript będzie nie być indeksowane. Pełzacze to nie ludzie. Niekoniecznie “przewijają” w emulacji zachowań ludzkiego użytkownika.

Jak to naprawić?

Na szczęście istnieje sposób na nieskończone przewijanie stron z indeksowaniem/przeszukiwaniem.

Dostępnych jest kilka metod, ale Google oficjalnie zaleca tylko jedną metodę.

Podstawową ideą jest to. Musisz utworzyć nieskończoną stronę przewijania oraz seria innych stron, które idą w parze z nieskończonymi stronami przewijania. W ten sposób ty (lub twój CMS) rozwijasz nieskończony scroll z paginacją.

Nieskończona strona przewijania jest dzielona na strony komponentów:

page split

Oto dokładny proces:

Krok # 1: Określ, jak podzielić swoje treści

Podsumuj całą zawartość, którą chcesz nieskończenie przewijać, i podziel ją na kawałki.

Nie ma magicznej długości dla tych kawałków. Po prostu chcesz mieć pewność, że użytkownicy mogą znaleźć to, czego szukają, przy rozsądnej ilości przewijania.

Zgodnie z najlepszymi praktykami, chcesz również upewnić się, że te strony mają optymalny czas ładowania i nie powielają zawartości innych stron.

Krok # 2: Utwórz strukturę adresu URL, która mieści nieskończone przewijanie

Nawet jeśli tworzysz nieskończony przewijanie, nadal musisz przemyśleć strukturę adresu URL. Ta struktura URL powinna być w stanie zachować sekwencyjny charakter wymagany dla nieskończonej strony przewijania.

Pamiętaj, że paginujesz swój nieskończony proces przewijania, więc każda sekcja treści będzie unikalną stroną z unikalnym adresem URL. Użyj ludzkiego języka dla adresów URL, ponieważ działa najlepiej zarówno dla użytkowników, jak i robotów indeksujących.

Standardowy i typowy adres URL działa świetnie: “example.com/awesome-design”.

Jeśli, aby dostosować się do usprawnionej konfiguracji, dodasz paginację lub identyfikatory, to również działa. Google stwierdza, że dopuszczalne są następujące wzorce:

  • example.com/fun-items?lastid=567
  • example.com/fun-items#1

Podczas tworzenia struktury adresów URL należy unikać dwóch rzeczy:

  1. Nie używaj parametrów URL opartych na czasie względnym. Korzystanie z funkcji opartych na czasie dodaje złożoność chronologiczną, która zmniejszy wartość SEO strony. Na przykład Google zaleca unikanie tej konkretnej struktury adresów URL:” example.com/category/page.php?name=fun-items&days-ago=3 “ze względu na sekcję” days-ago=3 ” w adresie URL.
  2. Nie używaj języka kodowego w adresie URL. Unikanie kodu mumbo jumbo pomaga zachować ulepszone wrażenia użytkownika. Oto przykład Google rzeczy, których nie powinieneś mieć w adresie URL:” example.com/awesome-design/radius=5&lat=40.71&long=-73.40. “w tym przykładzie należy unikać używania wszystkiego po słowie” design.”

Krok # 3: każda strona powinna zawierać rel= “next”I rel= “prev” w tagu < head>

Dodanie tych kodów paginacji do nagłówka zapewni Google Indeksowanie zawartości każdej strony. Te atrybuty rel informują Google o relacji między adresami URL, zwiększając prawdopodobieństwo indeksowania, indeksowania i zwracania tych stron kolejno.

W praktyce atrybucja rel zachowuje sekwencyjną indeksowalność witryny, jednocześnie zapewniając, że cała zawartość ma własną indeksowaną i unikalną stronę.

Zapoznaj się ze stronicowaną treścią i dowiedz się, jak korzystać z atrybutów rel na różne sposoby.

Krok # 4: Użyj pushState na nieskończonej stronie przewijania

PushState jest metodą HTML5, która dyktuje proces ładowania. PushState pobierze z obiektu state (cokolwiek serializowanego) i adresu URL, aby załadować nową zawartość w kolejności określonej przez paginację.

Zasadniczo pushState mówi przeglądarce, co ma się załadować i wyświetlić. W ten sposób Twitter implementuje swój nieskończony przewijanie.

Alternatywnie można użyć metody replaceState do modyfikowania wpisu historii lub reagowania na zachowanie przewijania użytkownika. ReplaceState reaguje na akcje przewijania lub pozwala użytkownikowi przewijać do tyłu i przeglądać strony załadowane w historii paginacji.

Krok # 5: Użyj najlepszych praktyk SEO na każdej stronie

Oczywiście będziesz chciał przetestować nieskończoną przewijaną stronę i upewnić się, że każda strona ładuje się dokładnie i we właściwym czasie. Następnie, idąc dalej, po prostu wykorzystaj swoją wiedzę SEO, aby stworzyć najlepszą i najczystszą treść.

Pod tym względem nieskończone przewijanie nie różni się od zwykłego biznesu SEO. Po zaimplementowaniu odpowiednich nieskończonych funkcji przewijania stron, możesz tworzyć zabójcze treści, które są zoptymalizowane zgodnie z Twoimi potrzebami.

Wniosek

Nieskończone przewijanie to tylko jedna z wielu opcji projektowania, które might popraw interakcję z użytkownikiem i jego retencję. Jednak nie jest to optymalne dla każdej strony internetowej. Wszystko zależy od tego, co próbujesz osiągnąć za pomocą określonej strony.

Jak stwierdziła Nielsen Norman Group:

Endless scrolling…is nie jest to dobry wybór dla stron internetowych, które obsługują zadania wyszukiwania zorientowane na cel. Takie zorientowane na cel zadania wyszukiwania obejmują działania konwersji punktów końcowych. Gdy użytkownicy przewijają stronę bez końca, może wprowadzić nowy współczynnik odrzuceń, który zniekształca metryki i minimalizuje szansę na CRO.

Nieskończone przewijanie, jak już wiesz, can praca dla SEO. Ale to nie znaczy, że jest to najlepsze dla konkretnej witryny.

Total
0
Shares
Dodaj komentarz
Related Posts