Drodzy Użytkownicy! Znany wszystkim i lubiany przez (prawie) wszystkich wujek Google stara się ze wszystkich sił, abyśmy rok 2015 zapamiętali jako erę rządów smartfonów i tabletów. Wprawdzie w Polsce zapowiadana już od dłuższego czasu “mobilna rewolucja” nie stała się jeszcze faktem, jednakże nie da się ukryć, że rola tych “podręcznych” urządzeń cały czas rośnie (w 2014 r. odpowiadały one za 10% całego ruchu w Internecie). Mobilna “kula śnieżna” zatem nabiera tempa, w związku z czym już teraz warto przygotować swoją stronę internetową - i zarazem cały swój biznes - na te zmiany, które są coraz bardziej widoczne nie tylko na dojrzałych rynkach europejskich, ale także coraz bardziej - na naszym podwórku. Mirosław Małyniak, |
|
Sposoby adaptacji mobilnej witryny internetowej W dzisiejszym SeoKuriera będziemy kontynuować temat mobilnej optymalizacji witryn internetowych. W poprzednim numerze skupiliśmy się na zasadach, dzięki którym serwis staje się przyjazny dla mobilnych Użytkowników, o specyfice wprowadzonego w kwietniu algorytmu mobile - friendly i o sposobach sprawdzenia przygotowania serwisu do obsługiwania właścicieli smartfonów. Tym razem pora przejść do części bardziej praktycznej i omówienia metod adaptowania serwisu pod smartfony, tablety i inne, analogiczne urządzenia. W dokumentacji Google używane są w tym zakresie następujące terminy: “Oddzielne adresy URL”, “dynamiczne serwowanie treści” i “design responsywny”. Sposób 1. Oddzielne adresy URL W skrócie: dla różnych typów urządzeń (mobilnych i stacjonarnych) stosuje się różne adresy URL i różne warianty kodu HTML. W praktyce oznacza to, że jako dopełnienie głównego serwisu tworzona jest jeszcze jedna, samodzielna witryna (zazwyczaj w poddomenie m.nazwaserwisu.pl lub - rzadziej - w strefie domenowej .mobi). Jest ona często znacznie okrojona w porównaniu do wersji głównej - usuwane są treści i funkcjonalności uznane za mniej istotne. Obie wersje są między sobą powiązane linkowami o specjalnych atrybutach, dzięki którym przeglądarka urządzenia mobilnego, a także robot Google określają, jaką wersję w określonym momencie należy wyświetlić. Kluczowe jest, aby oba serwisy powiązać ze sobą maksymalnie dokładnie, aby były one interpretowane jako związane i dopełniające się obiekty. Jak to zrobić? Na podstronach wersji stacjonarnej w kodzie HTML lub w pliku Sitemap.xml do tagu link należy dodać atrybut rel=”alternate” i dwa jego znaczenia: media (rozdzielczość ekranu - ten warunek, przy wypełnieniu którego powinien być wykorzystywany alternatywny URL) i href (sam link do wersji mobilnej serwisu). Z kolei, na podstronach wersji mobilnej do tagu link dodajemy atrybut rel=”canonical” z linkiem kierującym do analogicznej podstrony “stacjonarnej” witryny. Bardziej szczegółowe informacje na temat tej techniki znajdziecie w materiałach Google`a. W artykule znajdziecie przykłady kodów, a także sposoby ustawienia automatycznego przekierowania z pomocą HTTP lub JavaScript. Sposób 2. Design responsywny (Responsive Web Design, RWD) W skrócie: dla różnych typów urządzeń (mobilnych i stacjonarnych) stosuje się jeden URL i wspólny kod HTML. Technika desingu reponsywnego zakłada stworzenie uniwersalnej architektury serwisu, która automatycznie dopasowuje się do dowolnego urządzenia, z którego witryna jest przeglądana. Osiągane jest to za pomocą CSS: w zależności od szerokości ekranu rozmiary detali designu są korygowane (czcionka jest powiększana, obrazki dostosowują swoją wielkość i zmieniają swoje położenie). Co za tym idzie, ten sam serwis z tą samą treścią staje się w równym stopniu wygodny dla przeglądania na dowolnym typie urządzenia: tablecie, smartfonie, notebooku czy projektorze, a w perspektywie - na nowych rodzajach gadżetów, jakie wprowadzą producenci mobilnych urządzeń. Jak to zrobić? Specjaliści Google określają tę technikę jako najbardziej perspektywną i przytaczają w swojej dokumentacji dla webmasterów szereg rekomendacji dotyczących jej realizacji:
Sposób 3. Dynamiczne serwowanie treści W skrócie: dla różnych rodzajów urządzeń (mobilnych i stacjonarnych) używany jest jeden adres URL, ale różne warianty kodu HTML. Tak, jak w poprzednim przypadku, tworzony jest tylko jeden serwis, jednakże dla niego tworzone jest kilka szablonów formatowania dla różnych rodzajów urządzeń. To pozwala na wykorzystanie wszystkich zalet CSS i JavaScript dla zwykłej wersji witryny, a jednocześnie proponować mobilnym Internautom “lekką” wersję strony internetowej (bez komplikujących jego ładowanie skryptów i styli). Krótko proces dynamicznego serwowania treści można opisać w taki sposób: w momencie otworzenia podstrony w serwisie za pomocą smartfona/tabletu/notebooka, itp. przeglądarka wysyła serwerowej (technicznej) części serwisu swojego User - Agenta, zawierającego informację o typie urządzenia, z którego korzysta Internauta. Określiwszy rodzaj sprzętu, serwer w odpowiedzi wysyła optymalny wariant kodu HTML i CSS. W gruncie rzeczy, ta technika łączy w sobie cechy osobnej wersji strony mobilnej i designu responsywnego. Właściwą konfigurację serwisu należy wyświetlać nie tylko przeglądarce urządzenia, ale również trzeba zadbać, aby tak widział ją robot wyszukiwarki. Rekomendowany sposób zakłada wykorzystanie nagłówek HTTP Vary, aby indeksator Google mógł szybko i właściwie znaleść treść zoptymalizowaną dla mobilnych urządzań i wykorzystać go przy tworzeniu mobilnych wyników. Z bardziej szczegółowymi informacjami na ten temat możecie się zapoznać na stronie podręcznika Google dla webmasterów. Jakie rozwiązanie wybrać? Kwestia wyboru techniki dostosowania witryny internetowej do wymagań urządzeń mobilnych musi być w każdym wypadku rozwiązywana indywidualnie: konieczne jest wzięcie pod uwagę poziomu złożoności realizacji konkretnego projektu, koszta na wykonanie danego wariantu, a także na późniejszą obsługę gotowego produktu. Metoda oddzielnych adresów URL zakłada pracę z dwoma różnymi wariantami treści. Jeśli we wzajemnym linkowaniu głównej i mobilnej wersji serwisu pojawią się błędy, może to doprowadzić do pojawienia się problemów z wyświetlaniem ich w mobilnej przeglądarce i z pozycjonowaniem w wynikach mobilnych. Z drugiej jednak strony, plusy również są widoczne - “lekka” wersja kontentu i HTML, przy pomocy którego zapewniane jest szybkie ładowanie plików nawet w przypadku niskiej szybkości mobilnego łącza. Zaletą techniki designu responsywnego jest prostota realizacji - konieczne jest wyłącznie dopracowanie styli. Aby jednak witryna została wykonana jakościowo i dla uniknięcia możliwych niedoróbek w jego działaniu (na przykład powolnego ładowania się podstron z powodu “ciężkich” plików CSS), konieczny jest udział wykwalifikowanego specjalisty, najlepiej posiadającego doświadczenie w danej problematyce. Metoda dynamicznego serwowania treści rozwiązuje problem podwójnego tworzenia treści i wynikających z niego możliwych błędów, a także powolnego ładowania się podstron. Jednakże jego wadami są: pokaźna ilość pracy, jaką należy wykonać przy realizacji, konieczność regularnego sprawdzania i aktualizowania spisu user agentów Użytkowników, a także często pojawiające się problemy przy próbie określenia agenta przez przeglądarkę i wyświetlaniu szablonu HTML (na przykład, na tablecie może wyświetlać się wersja dla smartfona). Wnioski Niezależnie od tego, jaką technikę wybierzesz dla dostowania swojego serwisu do mobilnych urządzeń, ważne jest, aby wykorzystać ją w stopniu maksymalnym - nic tak nie irytuje Użytkowników, jak strony, które wyglądają na niedokończone, lub, co gorsza, wyświetlają się z błędami. Ponadto nie należy zapominać o kluczowych momentach optymalizacji dla wyszukiwarek. Tym tematem zajmiemy się w jednym z kolejnych numerów SeoKuriera. Kierując się radami, zawartymi w nim, będziecie mogli ominąć najbardziej rozpowszechnione błędy i zamienić swoją witrynę maksymalnie przyciągającym zarówno dla Google, jak i dla waszych mobilnych Użytkowników. |
| Nowości w systemie |
| W SeoPilot cały czas staramy się ulepszać nasze usługi. Jeśli masz uwagi lub propozycje dotyczące pracy w systemie czekamy na Twoje propozycje - support@seopilot.pl |
|
Z przyjemnością informujemy, że nasza platforma rozpoczęła współpracę z serwisem monitorowania pozycji w wyszukiwarkach Webpozycja.pl
Z przyjemnością informujemy, że nasz plugin jest obecnie dostępny bezpośrednio na stronie Wordpressa |
