Po 21 kwietnia istnienie lub brak mobilnej wersji danej strony internetowej będzie ważnym czynnikiem rankingowym w mobilnych wynikach wyszukiwania Google.
Od połowy listopada ubiegłego roku Google testował oznaczenia w wynikach wyszukiwania, wyróżniając w ten sposób strony przyjazne dla użytkowników mobilnych.
Wraz z rosnącą popularnością smartfonów i tabletów, zwiększa się także częstotliwość wyszukiwania treści w internecie za pomocą tych urządzeń. Obecnie większość z nas posiada telefon typu smartfon, za pomocą którego codziennie przegląda strony WWW, wyszukuje potrzebne informacje, korzysta z Facebooka lub kontaktuje się ze znajomymi za pośrednictwem innych mediów społecznościowych.
Coraz więcej użytkowników zwraca uwagę na to, czy prezentowane na stronie treści odpowiednio dopasowują się do urządzenia, na którym są wyświetlane. Kiedy użytkownicy oglądają stronę na ekranie telefonu i nie jest ona dostosowana do wymogów urządzeń mobilnych, z pewnością szybko ją opuszczą. Konsekwencją braku dopasowania strony do urządzeń mobilnych jest utrata ruchu – użytkownicy przechodzą na stronę konkurencji. Strony tracą również pozycję w wynikach wyszukiwania na rzecz tych, które posiadają obsługę urządzeń mobilnych.
Czym jest strona responsywna?
Strona responsywna (RWD – Responsive Web Design) jest zaprojektowana w taki sposób, aby wyświetlała się prawidłowo na wszelkich możliwych platformach, dostosowując się do rozdzielczości urządzenia, na którym jest oglądana. W czasie wczytywania strony na danym urządzeniu, sprawdzana jest aktualna rozdzielczość, do której strona dopasowuje się poprzez wyświetlanie odpowiednich wersji grafik oraz innych elementów nawigacyjnych.
Jak sprawdzić czy moja strona jest przyjazna dla urządzeń mobilnych?
Mamy do wyboru 2 metody:
1) Jeśli nasza strona jest podłączona do Narzędzi dla Webmasterów, https://www.google.com/webmasters/tools/ możemy w prosty sposób dowiedzieć się co wg Google jest nie tak z naszą mobilną wersją strony.
Otwieramy pulpit nawigacyjny, przechodzimy do Menu wybierając opcję „Ruch związany z wyszukiwaniem”, a potem do „Obsługa na urządzeniach mobilnych”, gdzie Google wyświetla wszelkie błędy wynikające z braku obsługi urządzeń mobilnych przez naszą stronę.
2) Drugim sposobem na sprawdzenie, czy nasza strona jest przyjazna dla urządzeń mobilnych, jest wykorzystanie narzędzia „Mobile-Friendly”, https://www.google.com/webmasters/tools/mobile-friendly/.
Google udostępnia oprogramowanie, dzięki któremu możemy w prosty i szybki sposób uzyskać odpowiedź na pytanie – czy nasza strona jest przyjazna dla urządzeń mobilnych?
Po wpisaniu adresu swojej strony (włącznie z http:// ) w kilka sekund uzyskujemy informację zwrotną – negatywną lub pozytywną.
Co musimy zrobić, aby nasza strona była „mobilna”?
Bardzo duży procent stron, które istnieją w Internecie, są stworzone z myślą wykorzystania systemu zarządzania treścią CMS (Content Management System), np. Joomla, WordPress, Drupal lub inny – dedykowany system CMS. Spotyka się także strony zakodowane z użyciem wyłącznie HTML, gdzie każda zmiana wymaga edycji kodu strony. Jeżeli nasza strona działa w oparciu o jeden z popularnych systemów CMS, możemy w szybki i posty sposób zakupić nowy szablon (oczywiście zawierający już wersję responsywną) lub zwrócić się do webmastera o zoptymalizowanie naszej strony na potrzeby wersji mobilnej.
Jeżeli nasz system zbudowany jest w oparciu o model MVC ( Model – View – Controler) to sprawa jest prosta. Wystarczy nanieść poprawki w elemencie „Widok” i możemy cieszyć się mobilnym wyglądem strony. Dodanie odpowiedniej treści do pliku .css (wyglądu naszej strony) pozwoli na odpowiednie dostosowanie. Dla przykładu:
@media screen and (min-width: 400px) and (max-width: 640px) {
/* Okno przeglądarki o szerokości pomiędzy 400pxpx a 640px */
}
Atrybut @media w pliku *.css pozwala określić, kiedy będą ładowane style zawarte między klamrami. W powyższym przykładzie określiłem minimalną szerokość ekranu urządzenia na 400px, oraz jego maksymalną szerokość na 640px.
Oznacza to, że wszystkie style zawarte między znacznikami {} atrybutu @media załadują się jedynie dla urządzeń o szerokości ekranu między 400px a 640px. Dla wszystkich innych rozdzielczości będą pomijane.
Zastosowanie w w pliku .css klas odpowiadających za widoczność treści, pozwala łatwo określić które treści mają wyświetlać się dla: urządzeń mobilnych, komputerów lub dla wszystkich urządzeń.
Przykład:
<body>
<div class = „mobile-text”>Tekst widoczny tylko na komórkach!</div>
<div class = „non-mobile”>Tekst niewidoczny na komórkach!</div>
<div class = „text”>Tekst widoczny cały czas!</div>
<body>
Kolejnym krokiem jest umieszczenie odpowiedniej adnotacji dla znaczników zawartych w kodzie strony.
.text { display: block; }
@media screen and (max-width: 640px) {
/* Okno przeglądarki o szerokości pomiędzy 0px a 400px */
.mobile-text{ display: block; }
.non-mobile{ display: none; }
}
@media screen and (min-width: 400px){
/* Okno przeglądarki o szerokości pomiędzy 400px a nieskończoność */
.mobile-text{ display: none; }
.non-mobile{ display: block; }
}
Powyższy kod sprawi, że blok określony klasą .text będzie widoczny cały czas. W zależności od ekranu, na którym będzie wyświetlane okno przeglądarki, zostanie załadowany kod opisujący wyświetlanie nagłówka klasy .mobile-text lub .non-mobile. Dzięki temu treści będą pojawiać się lub znikać w zależności od urządzenia, na którym wyświetlana będzie strona. Efekty swoich zmian w kodzie strony możemy sprawdzić, poprzez przełączenie okna swojej przeglądarki na komputerze z trybu pełnoekranowego do widoku responsywnego. W ten sposób w ciągu 3 minut stworzyliśmy najprostszą stronę responsywną!
Dlaczego warto, aby strona była responsywna?
Żyjemy w czasach, w których technologia rozwija się niemalże z prędkością światła, a firmy prześcigają się w tworzeniu i promocji produktów udoskonalonych o nowe funkcjonalności. To z pewnością czynnik motywujący, by sprostać wymaganiom rynku i zadbać o odpowiednią optymalizację strony. Przyniesie to korzyść w postaci zwiększenia ruchu na stronie poprzez umożliwienie przeglądania jej na urządzeniach mobilnych, a w przyszłości zwiększenie konwersji i ochronę przed bolesnym spadkiem z wysokich pozycji w wynikach wyszukiwania i ustąpieniem miejsca konkurencji.
Główne cechy RWD
• Jeden adres URL.
• Ta sama treść dla wszystkich urządzeń.
• CSS3 Media Queries.
• Elastyczne obrazy.
• Taki sam kod HTML.
• Płynny układ strony.
Korzyści RWD dla SEO
• Optymalizacja przeprowadzana jest jednokrotnie, a „korzystają” wszystkie wersje serwisu.
• Lepsze indeksowanie zawartości przez wyszukiwarki.
• Brak Duplicate Content.
Ograniczenia z punktu widzenia SEO
• Użytkownicy inaczej wpisują zapytania przy pomocy komputerów, a inaczej używając urządzeń mobilnych, przez co trudniej dopasować metadane oraz treści
Podsumowanie
Google rekomenduje stosowanie technologii RWD (Responsive Web Design). Dzięki temu dostosowujemy naszą stronę do standardów, które pozytywnie wpływają na liczbę odwiedzin naszego serwisu. RWD pozwala na zwracanie kodu HTML dynamicznie pod tym samym adresem URL (niezależnie od rodzaju urządzenia). Alternatywnym rozwiązaniem, również przyjaznym z punktu widzenia SEO, jest wersja mobilna serwisu dostępna pod odrębnym adresem URL.
Użytkownicy coraz częściej przeglądają strony WWW przy pomocy smartfonów i tabletów, dlatego każdy webmaster powinien zadbać o prawidłowe wyświetlanie się strony na urządzeniach mobilnych.
Co przyniesie 21 kwietnia 2015? Moim zdaniem Google podejmie zapowiedziane wcześniej działania, w wyniku których w rankingu wyszukiwania spadną serwisy nieprzystosowane do wyświetlenia w wersji mobilnej.
_
Cezary Ciechanowski
