Z roku na rok rośnie udział zapytań zadawanych z mobilków oraz konsekwentnie przybywa użytkowników smartfonów, podczas gdy w świecie użytkowników komputerów stacjonarnych panuje stagnacja. Nic się nie dzieje, nuda. Złe dialogi, w ogóle brak dialogów – jak w Polskim filmie ;) Nie dziwi więc fakt, że Google przymierza się do ustawienia w 2017 roku urządzeń mobilnych w centrum algorytmu swojej wyszukiwarki, o czym możemy poczytać chociażby w serwisie o enigmatycznej nazwie „Zegarek Wyszukiwarki”, czyli Search Engine Watch.
Wersja mobilna oraz ogólne dostosowanie do urządzeń przenośnych i małych rozdzielczości, od zmiany w algo o potocznej nazwie Mobilegeddon (kwiecień 2015) jest oficjalnie tzw. mitycznym czynnikiem rankującym w Google. Okazało się także (styczeń 2017 – pisaliśmy o tym tutej oraz o, tutej tyż), że będzie podstawą oceny Twojej strony w kontekście rankingów, zarówno dla wersji mobilnej… jak i desktopowej witryny – dlatego już jakiś czas temu świat zaakceptował ten stan rzeczy i każdy wie że przyszłość jest w smartfonach, deskach do krojenia z wyświetlaczem i wszystkim, co ma rozdzielczość mniejszą niż laptop oraz można z tego nadawać poza domem. Czas zatem, żeby spojrzeć na techniczne SEO z perspektywy mobilnej!
Co to jest SEO techniczne?
Na początek trochę scholi: Techniczne SEO dostarcza Google i innym wyszukiwarkom informacji których potrzebują, żeby zrozumieć prawdziwy cel zawartości Twojej strony.
Techniczne SEO przygląda się kwestiom technicznym i kodowaniu, które to elementy wpływają na szybkość, poprawność oraz zakres indeksowania/trawienia Twojej witryny (Crawl Budget) przez roboty wyszukiwarki. To podstawa piramidy działań z dziedziny Marketingu Zintegrowanego w sieci i absolutny fundament dobrego „pozycjonowania”.
Teraz do rzeczy – wyodrębnijmy z tego tytułową część mobilną i lecimy z gęstym. No to myk:
Wersja mobilna, responsywna czy aplikacja?
Obecnie istnieją 3 konfiguracje, które rozpoznaje i uznaje wyszukiwarka Google: strona responsywna, dynamiczne serwowanie treści i odrębne adresy URL, czyli stara dobra wersja mobilna. Google rekomenduje mimo wszystko stosowanie wersji responsywnych, które odróżnia od pozostałych dwóch konfiguracji to, że dla urządzeń mobilnych i wersji desktopowych URLe oraz HTML strony pozostają takie same, ale to nie znaczy że nie można osiągnąć sukcesu na pozostałych rozwiązaniach. Wszak wersja mobilna, jako prekursor tego nurtu również świetnie sobie radzi w SERP i w pewnych aspektach ma przewagę.
1. Strona responsywna
Wersja responsywna wykorzystuje zapytania do arkusza styli CSS, aby umożliwić wyświetlenie strony w odpowiedzi na rozmiar ekranu, poprzez zmianę treści w zależności od urządzenia. Innymi słowy jak sobie zmniejszasz rozdzielczość okna przeglądarki – to serwisik się automatycznie skaluje, wszystko się ustawia kolumnowo, czcionki się dostosowują, menu takoż – i masz 2 in 1.
Mocne strony:
- Pojedynczy adres URL jest lepszy dla użytkowników i sprawia, że treść można łatwiej udostępniać i w nią klikać.
- Roboty crawlujące Google i inne potrzebują tylko raz zaindeksować podstronę, dzięki czemu zwiększają się budżet i efektywność indeksowania witryny.
- Nie ma konieczności stosowania przekierowań, żeby przenieść boty na właściwą wersję strony. Pomaga to zredukować liczbę błędów, które mogą pojawić się przy tworzeniu przekierowań w obrębie witryny.
- Jedna zmiana treści, to zmiana dla wszystkich urządzeń
- Brak zjawiska duplikacji treści
Słabe strony:
- Jeśli psuje się wersja desktopowa witryny, pada również wersja mobilna.
- Nie można jej zastosować dla tzw. feature phones i tabletów, w takim stopniu jak pozostałe dwie konfiguracje.
2. Dynamiczne serwowanie treści
Dynamiczne serwowanie treści wykorzystuje rozpoznawanie aplikacji klienckiej, aby dostarczyć alternatywny kod HTML i CSS zgodnie z aplikacjami klienckimi, które tego kodu wymagają. Innymi słowy jeśli próbujesz wyświetlić witrynę np. na smartfonie, zostaniesz poinformowany/przekierowany do aplikacji.
Mocne strony:
- Unikalne doświadczenie dla każdego urządzenia z osobna.
- Przekierowania nie są potrzebne.
- Rozwiązanie to świadczy o pewnym poziomie/rozmiarze serwisu i firmy
Słabe strony:
- Przekierowania aplikacji klienckich są podatne na błędy.
- Boty wykorzystują do indeksowania różne aplikacji klienckie, co zużywa budżet indeksowania i może obniżyć efektywność indeksowania. Fajnie opisane w tym arcie SEW.
- Praco i czasochłonne rozwiązanie, które wymaga nieco szerszej wiedzy.
3. Osobne adresy URL, czyli wersja mobilna
W tej konfiguracji dla każdego URLa wersji desktopowej strony istnieje jego odpowiednik dla wersji mobilnej – czy to z przedrostkiem katalogu np. ../m/ czy też w subdomenie. Pozwala to na zastosowanie zawartości dostosowanej do urządzeń mobilnych i tylko pod nie stworzonej. Podobnie jak w dynamicznym serwowaniu treści, wykrywanie aplikacji klienckich jest wykorzystywane do przekierowywania mobilnych użytkowników trafiających na wersje desktopowe – czyli jeśli otwierasz swój sajt na kompie to lądujesz na wersji desktopowej. Jeśli zaś ze swojej Nokii 3310 – to automatycznie otworzy się wersja mobilna.
Mocne strony:
- Treść dostosowana do urządzeń mobilnych, bez zbędnej grafiki i wypełniaczy
- Lekka, szybko ładująca się zawartość
- Łatwe wdrożenie konfiguracji
- Możliwość zastosowania indywidualnej i drobiazgowej optymalizacji dedykowanej do mobile.
Słabe strony:
- Przekierowania aplikacji klienckich są podatne na błędy.
- Marnotrawstwo zasobów indeksowania.
- Zmiana na stronie desktopowej musi być wykonana osobno na stronie mobilnej.
- Częsty problem z duplikacją treści.
3 obszary technicznego SEO dla wersji mobilnych stron, na których warto się skupić.
Jeśli już sobie rozkminiłeś które rozwiązanie mobile będzie dla Ciebie najlepsze (obstawiam że wybrałeś responsywność, bo przecież to masz wbudowane w Twój fancy szablon wordpressowy, który właśnie zakupiłeś na Themeforest ;) to poznaj wszystkie obszary, które są kluczowe dla Twojego mobilnego-technicznego SEO.
1. Szybkość witryny (Page Speed)
Na mobilkach internety jakby wolniejsze, żadna to nowość. W ogóle cały narzędź nieco mniejszy i nie tak doposażony jak Twój gejmingowy laptop z MediaMarkt :) Tu każdy kilobajt się liczy, szybkość może być dla Ciebie determinantem kluczowym. Trzeba o nią zadbać! Ale w jaki sposób możesz poprawić szybkość ładowania strony internetowej i zwiększyć wygodę użytkowania witryny? Jeśli jeszcze nie zadałeś sobie tego pytania, najwyższy czas to zrobić. Zacznijmy od testu (gdzie w ogóle jesteś). Najlepiej skorzystać z narzędzia Google „Page Speed Insights„.
To kluczowy pierwszy etap w budowaniu pozytywnego odbioru Twojej strony przez użytkownika – chcesz, żeby był epicki i nie podniósł Ci tylko współczynnika odrzuceń. Dlatego łap cztery sposoby na przyspieszenie witryny:
Przyspieszone strony mobilne (AMP)
Mimo tego, że AMP nie są czynnikiem rankingującym, a głównie ukłonem w stronę użytkowników, z uwagi na ustanowienie wersji mobilnych priorytetowymi w kontekście indeksowania w 2017 roku, AMP mogą stać się obszarem wartym uwagi.
AMP działają używając języka kodowania AMP HTML, który ogranicza kod po to, aby zwiększyć szybkość ładowania strony i jej niezawodność. Może to wspomóc ładowanie strony w ciągu 3 sekund, jeśli Twoja witryna nie może wykonać tego w inny sposób.
Jeśli Twoja strona stoi na silniku WordPress, nie ma problemu z implementacją AMP. Polecamy ten plugin, dzięki któremu w prosty sposób uda Ci się uruchomić AMP Google’a na swojej stronie WordPressowej: https://wordpress.org/plugins/amp/
Proste i minimalistyczne szablony
Kiedy w grę wchodzi projekt witryny, warto pamiętać o zasadzie numer 1: mniej znaczy więcej, czy najprostsze rozwiązania sprawdzają się najlepiej. Upewnij się, że korzystasz z prostych szablonów.
Dodatkowe elementy szablonu, takie jak wtyczki, widgety i kody śledzenia, wymagają dodatkowego czasu ładowania, który skumulowany może powodować zbyt duże opóźnienia w ładowaniu podstron Twojej witryny.
Normalny czas ładowania strony wynosi do 3 sekund. Powyżej tego czasu oznacza już, że Twoja strona ładuje się zbyt długo, dlatego upewnij się, że Twój szablon zawiera tylko najpotrzebniejsze elementy.
Jednym z prostych sposobów zredukowania czasu ładowania strony jest zastosowanie kompresji Gzip i bezstratnej kompresji dla wszystkich zdjęć. Ponadwymiarowe zdjęcia mogą być przyczyną poważnego spowolnienia Twojej strony . Jeśli posiadasz jakieś skrypty JS – postaraj się przenieść je do sekcji footer. W ten sposób będą ładowały się w tle, dopiero po załadowaniu całego body i reszty widzialnych elementów.
Optymalizacja obrazów ma tu także ogromne znaczenie – staraj się nie przekraczać 100kb o ile to możliwe, a jeśli masz już coś publikować, przewal to wcześniej przez jeden z darmowych skryptów do tego służących. My możemy polecić ten.
Brak łańcuchów przekierowań
W żadnym wypadku nie powinieneś posiadać łańcuchów przekierowań, czyli sytuacji, w których np. zasób A przekierowuje na ten sam zasób A – ale z dopiskiem www, po czym przekierowuje na zasób B – a potem może jeszcze i na C. Takie pętle mogą zwiększyć czas ładowania strony przy każdym przekierowaniu w łańcuchu. Dlatego też ważne jest, aby wszelkie przekierowania były wykonywane w jednym kroku zamiast w wielu krokach.
W przypadku błędów 404 musisz przejrzeć adresy, które nie wyświetlają się poprawnie i rozwiązać ich problem używając przekierowania 301 (w jednym kroku), albo upewnić się, że używasz dedykowanej, przyjaznej dla użytkownika strony błędu 404, która nie tylko rozbawi odwiedzającego, ale przede wszystkim zapewni go, że może bez przeszkód kontynuować podróż po Twojej stronie. Dzięki temu użytkownik nie odpłynie z Twojej witryny bez realizacji celu. Z problemami tego typu poradzisz sobie korzystając ze starego, dobrego ScreamingFroga oraz wielu dostępnych „out there” narzędzi online do odpytywania nagłówków http.
Pamięć podręczna przeglądarki
Za każdym razem, gdy przeglądarka otwiera Twoją stronę, musi pobrać pliki witryny, aby poprawnie ją wyświetlić – w tym HTML, obrazy, CSS i JS.
Pamięć podręczna przeglądarki gromadzi automatycznie zasoby witryn internetowych (na lokalnym komputerze) od pierwszej wizyty użytkownika na Twojej stronie. Dzięki temu przeglądarka przywraca pierwszą zapamiętaną wersję strony i gdy odwiedzasz podstrony witryny ładują się one szybciej – korzystają na tym użytkownicy, którzy powracają na Twoją stronę.
Wykorzystanie cachowania w przeglądarce jest proste i możesz je zastosować ustawiając w nagłówku HTTP czas wygaśnięcia plików (albo skorzystaj z jednej z 12613912 wtyczek jeśli masz WordPressa). W przypadku większości plików możesz wybierać jak często chcesz, żeby były aktualizowane – zależy jak Ty sam będziesz zmieniał te treści.
2. Architektura strony
Struktura witryny jest kolejnym, bardzo ważnym elementem technicznego SEO dla wersji mobilnych – użytkownicy korzystający z urządzeń mobilnych chcą z łatwością poruszać się po stronach i docierać do interesujących treści –statystycznie – w mniej niż trzy kliknięcia. Oto kilka prostych sposobów na upewnienie się, że wszystkie strony są istotne i łatwo dostępne.
Podążanie za okruszkami, czyli breadcrumbs
Okruszki przedstawiają jasno hierarchię witryny i wskazują użytkownikowi gdzie w danym momencie się znajduje. Dzięki temu użytkownik może zredukować liczbę swoich kliknięć/akcji, żeby dotrzeć do uprzednio odwiedzonych stron lub innych sekcji. Może też szybko zorientować się gdzie obecnie wylądował w drzewie Twoich podstron.
Okruszki powinny być używane jako druga nawigacja, dodatek do Twojej głównej nawigacji. Okruszki zalecane są dużym witrynom i stronom e-commerce, których hierarchia i struktura mogą być skomplikowane, a także mylące dla użytkowników oraz botów wyszukiwarek. Breadcrumbs żyje w symbiozie z mikroformatami (niczym podgrzybek i brzoza lub sosna i maślak), dlatego zawsze trzeba je otagować danymi strukturalnymi, co opisane jest zgrzebnie tutaj: http://schema.org/breadcrumb
Nadawanie mocy linkami wewnętrznymi (linkjuice)
Uporządkowana treść pomaga robotom wyszukiwarki poprawnie interpretować Twoją witrynę i zwiększa rankingi słów kluczowych dla strony. Linki wewnętrzne w treści ułatwiają użytkownikom znajdywanie treści ukierunkowanych na istotne dla nich pojęcia związane ze słowami kluczowymi. Może to poprawić widoczność starszych artykułów, które są tematycznie powiązane z ostatnio opublikowanymi – z resztą przykład wewnętrznego linkowania znajdziesz chociażby w czytanym właśnie artykule :)
Dodatkowo, korzystanie ze skategoryzowanych linków wewnętrznych pomoże użytkownikom przeprawiać się gładko przez tematycznie powiązane ze sobą źródła na Twojej stronie i odkrywać inne powiązane z nimi tematy.
Brak zbędnych bajerów i wodotrysków
Fajnie że testujesz sobie najnowszą karuzelę zdjęć i super wypasiony skrypt do fikcyjnej rozmowy z konsultantem online – ja nie mówię że są złe – ale zastanów się czy potrzebujesz ich na wersji mobilnej/responsywnej? Być może lepiej będzie jeśli obierzesz swoją witrynę ze zbędnych gadżetów i postawisz na prostotę przekazu, wszak jeśli ktoś szuka autoholowania, apteki dyżurnej albo najbliższego kebaba, to raczej nie będzie w nastroju na podziwianie kunsztu Twoich pluginów WordPressowych ;)
3. Znaczniki danych strukturalnych (mikrodane i mikroformaty)
Dane strukturalne zgodne ze Schema.org pomagają informować Google o tym, jak ma interpretować typ zasobu, którym jest dana strona, patrząc przez pryzmat jej treści i optymalizacji.
Fragmenty rozszerzone dostarczają dodatkowych znaczników danych strukturalnych, które zapewniają więcej informacji opisujących witrynę w SERPach (jak np. te, wspomniane wcześniej przy Breadcrumbs). Pozwala to użytkownikom ocenić czy dana strona jest warta odwiedzenia, zwiększa CTR i jest doceniane przez roboty crawlujące. Fragmenty stwarzają możliwość poinformowania użytkowników o takich elementach jak np. ocena artykułu lub liczba zamieszczonych opinii.
Google posiada dwa narzędzia dla danych strukturalnych:
1. jedno służy jako pomoc w implementacji znaczników danych strukturalnych: https://www.google.com/webmasters/markup-helper/u/1/?hl=pl,
2. a drugie do testowania danych strukturalnych: https://search.google.com/structured-data/testing-tool/u/0/.
Podsumowując: mobile jest ważne (szok, niedowierzanie) – ale tylko wtedy, jak jest zoptymalizowany.
Jak widzisz – to bardzo obszerny temat, a ja skupiłem się tylko na absolutnych podstawach i kilku głównych obszarach, które w optymalizacji stron pod urządzenia mobilne powinny być priorytetowe. Nie ma co oczekiwać zmian w obecnych zadaniach technicznego SEO, ale oczywistym jest, że skoro urządzenia mobilne będą w krótce pierwszoplanowe w spodziewanych aktualizacjach algorytmu wyszukiwarki, możemy spodziewać się zmian w czynnikach rankingujących witryny.
Kiedy w grę wchodzi wybór konfiguracji mobilnej, sprowadza się to do Twojego budżetu i urządzeń, na których użytkownicy odwiedzają Twoją stronę. Jeśli szukasz prostego i niedrogiego rozwiązania, responsywny projekt sprawdzi się idealnie.
Jeśli jednak masz nieco więcej pieniędzy do wydania na wersję mobilną, zaufanego speca na podorędziu i chcesz pokazać użytkownikom że jesteś PRO – sięgnij po pozostałe dwie konfiguracje.
Warto również rozważyć to, na jakich urządzeniach Twoja strona jest przeglądana. Czy Twoja grupa docelowa używa częściej komputera stacjonarnego/laptopa niż urządzeń mobilnych? Jeśli tak, również responsywny projekt będzie najlepszym rozwiązaniem, ponieważ komputery te nie będą miały problemu ze zrozumieniem układu mobilnego.
Jeśli użytkownicy są podzieleni lub większość z nich odwiedza Twoją stronę na urządzeniu mobilnym, zastanów się nad pozostałymi dwiema opcjami – dzięki temu użytkownicy szybciej będą docierać do pożądanych informacji.
A oto prawda, dla której powstał ten wpis:
Jeśli masz jakiekolwiek pytania dotyczące technicznego SEO, dawaj w komcie i pomożemy :)
