Dostosowanie strony internetowej do urządzeń mobilnych jako element optymalizacji SEO

Dostosowanie strony internetowej do urządzeń mobilnych jako element optymalizacji SEO

Strona internetowa przyjazna urządzeniom mobilnym jest dziś koniecznością. Coraz więcej osób korzysta bowiem z Internetu nie tylko na komputerach, lecz także na smartfonach czy tabletach. Responsywna strona WWW dopasowuje się do różnych rozdzielczości ekranów urządzeń mobilnych. Dzięki temu witryna zapewnia klientowi dostęp do swojej oferty, jest bardziej funkcjonalna i czytelna. Responsywność jest też bardzo ważna z punktu widzenia SEO. Pozwala robotom Google na poprawne zaindeksowanie strony w wersji desktopowej i mobilnej oraz osiąganie wyższych pozycji w wynikach wyszukiwania.

Co oznacza zgodność z urządzeniami mobilnymi?

Trudno nie zgodzić się ze stwierdzeniem, że urządzenia mobilne zmieniają świat i wpływają na zachowania użytkowników Internetu. Niemal każdy z nas ma codziennie przy sobie smartfon, który już od dawna służy nam nie tylko do komunikacji z ludźmi, ale też do wyszukiwania informacji. We wrześniu 2020 roku liczba internautów wynosiła ogółem 27,7 mln, z czego aż 24,4 mln osób to użytkownicy właśnie urządzeń mobilnych[1] , takich jak smartfony i tablety.1 Z tego właśnie powodu tak ważne jest, by strony internetowe były responsywne, a więc dostosowane do każdego ekranu, niezależnie od jego wielkości.

Strona responsywna prawidłowo wyświetla się na urządzeniach mobilnych, dzięki czemu treść jest czytelna, a strona wygodna, łatwa w obsłudze i funkcjonalna. Jeśli zaś układ witryny nie jest dopasowany do małego ekranu, zniechęca to potencjalnego klienta do zapoznania się z ofertą wskutek czego zazwyczaj porzuca on daną stronę.

Zgodność strony internetowej z urządzeniami mobilnymi jest bardzo istotna nie tylko dla użytkowników, ale oczywiście także dla robotów Google, które taką stronę mogą poprawnie zaindeksować i umieszczać ją wyżej w wynikach wyszukiwania. Strony nieresponsywne, niefunkcjonalne i utrudniające korzystanie z nich użytkownikom mobilnym, często mają problem z osiągnięciem wysokich pozycji, a co za tym idzie, mają mniejszą widoczność dla internautów, co jest szczególnie zauważalne w mobilnych wynikach wyszukiwania.

Czym jest meta viewport?

Meta viewport to znacznik HTML używany do optymalizacji strony internetowej, który określa sposób wyświetlania się danej witryny na urządzeniach mobilnych. Pozwala ustawić m.in. opcje skalowania strony i domyślne przybliżenie. Znacznik ten, podobnie jak inne meta tagi, stosowany jest w sekcji HEAD strony i wygląda następująco:

<meta name="viewport" content="...">

Wartością atrybutu content są konkretne dyrektywy, które można wpisać, oddzielając je przecinkami. To właśnie te dyrektywy określają, jak strona WWW wyświetla się na urządzeniach mobilnych. Pamiętajmy, że ich użycie jest opcjonalne, a część z nich nie jest obsługiwana przez wszystkie urządzenia i przeglądarki.

Te wartości to:

  • initial scale,
  • width, height,
  • minimum-scale, maximum-scale,
  • user-scalable.

Najczęstszym zastosowaniem meta viewport jest taka oto wartość:

<meta name=viewport content="width=device-width, initial-scale=1">

Oznacza to, że strona będzie rozciągnięta na 100% szerokości ekranu oraz nie będzie skalowana (chociaż użytkownik będzie mógł ją przybliżyć lub oddalić).

Wykonaj darmowy audyt strony i popraw jej widoczność w wyszukiwarce. Wykonaj teraz >>

Czym jest mobile first index?

Mobile first index jest odpowiedzią na rosnący trend korzystania z urządzeń mobilnych. Oznacza on, że wersja mobilna strony internetowej jest kluczowa dla Google i na jej podstawie oceniana jest pozycja w wyszukiwarce. Ma to na celu umożliwić użytkownikom mobilnym znalezienie tego, czego szukają i wygodne korzystać ze strony.

Warto zaznaczyć, że chodzi tutaj o mobile first, a nie mobile only index. Jeśli zatem dana strona nie ma wersji mobilnej, w procesie indeksowania wciąż będzie brana pod uwagę wersja desktopowa. Może mieć to jednak niekorzystny wpływ na jej pozycję w wynikach wyszukiwania. Strona przyjazna dla urządzeń mobilnych może z kolei liczyć na wyższe miejsca w rankingu. Należy dodać, iż od chwili zaimplementowania mobile first index, mobilna wersja strony WWW może wpływać na wyniki w wyszukiwarce, nawet gdy użytkownik będzie wyszukiwał z poziomu komputera.

Według Google strony responsywne, a więc takie, które automatycznie dopasowują się do rozmiaru ekranu i okna przeglądarki są odpowiednio przygotowane na mobile first indexing. To samo dotyczy strony, która ma dwie wersje, mobilną i desktopową, ale są one sobie równe. Jednak w momencie, gdy strona ma osobne treści na urządzenia mobilne i komputery, warto zastosować zalecane przez Google praktyki. Najlepszą praktyką jest sytuacja, w której treści, meta dane, tagi, dane strukturalne czy linki wewnętrzne są na wersji mobilnej i desktopowej identyczne. Mobilny użytkownik powinien znaleźć taki sam content, jak ten, który zobaczyłby na stronie, korzystając z komputera. Nie można jednak wówczas zapomnieć o odpowiednim oznaczeniu strony, po to, by uniknąć duplikacji treści. W tym celu zalecane jest dodanie odpowiednich adnotacji. Do strony na komputery trzeba dodać rel="alternate", który wskazuje właściwy adres URL na urządzenia mobilne. Do strony na urządzenia mobilne zaś rel="canonical", wskazujący odpowiedni adres URL na komputery. Jeśli zaś chodzi o stronę responsywną, to nie musi być ona w żaden sposób oznaczana, ponieważ jest to jedna wersja strony i występuje pod tymi samymi adresami URL zarówno dla użytkowników mobilnych, jak i desktopowych.

Jakie jeszcze działania pod kątem SEO trzeba podjąć, by strona mobilna mogła znaleźć się jak najwyżej w wynikach wyszukiwania? Należy zwrócić uwagę przede wszystkim na prędkość ładowania strony i zadbać, by działała ona szybko i sprawnie, co jest kluczowym aspektem dla wersji mobilnych. Warto oczywiście zadbać także o optymalizację meta title, meta description, nagłówków i treści oraz prowadzić ciągły monitoring strony, by na bieżąco wykrywać ewentualne błędy i wprowadzać niezbędne zmiany zgodne z aktualnymi wymaganiami algorytmów Google.


Przeczytaj także

Czym są ramki w dokumencie HTML?

Czym są ramki w dokumencie HTML?

Ramki (ang. frames), czyli znaczniki, które umożliwiają wczytanie do dokumentu HTML strony internetowej innych stron. Ramki mają swoje zalety i wady. Z jednej strony usprawniają proces wczytywania i nie obciążają strony, z drugiej z ich powodu nie można zapisywać wczytanej strony do zakładek. Dowiedz się więcej o ramkach i sprawdź, czy ramki mają wpływ na SEO.

Artykuł - ikonka Czytaj więcej

Na czym polega SEO? Jak wykonać optymalizację strony internetowej?

Na czym polega SEO? Jak wykonać optymalizację strony internetowej?

Podstawą do zapewnienia wysokiej pozycji strony internetowej w wyszukiwarce jest odpowiednia optymalizacja SEO. Strona WWW powinna być funkcjonalna, przejrzysta i wartościowa dla odwiedzających oraz zgodna z aktualnymi wymaganiami robotów Google. Chcesz, żeby Twoja strona działała sprawnie, wyświetlała się wysoko, miała dużą liczbę wejść i była interesująca dla użytkowników? Dowiedz się, na czym polega SEO i z jakich działań się składa.

Artykuł - ikonka Czytaj więcej