Prezentacja na temat Mobilne SEO przedstawiona podczas #7 polskiego SEO HangOutu.

1. Artur Strzelecki
Silesia SEM

2. 1. Identyfikuj użytkowników mobilnych
2. Znajdź popularne słowa kluczowe i strony
3. Czego i jak szukają mobilni
4. Zachowanie strony na urządzeniu mobilnym
5. Technologia mobilnej prezentacji treści

3. Źródło: Google Analytics

4. Źródło: Google Analytics

5. Źródło: Google Analytics

6. Źródło: Narzędzia dla Webmasterów Google

7. Źródło: Narzędzia dla Webmasterów Google

8. Źródło: https://adwords.google.com/select/KeywordToolExternal

9. Źródło: http://www.thinkwithgoogle.com/mobileplanet/en/

10. Źródło: http://www.howtogomo.com/en-gb/d/test-your-site

11. Źródło: https://www.google.com/webmasters/tools/googlebot-fetch

12. Źródło: https://developers.google.com/speed/pagespeed/insights/

13.  Google wspiera optymalizację smartfonów w trzech
konfiguracjach:
◦ Strony który używają responsive web design, np. strony które na
wszystkich urządzeniach mają te same URLe, każdy URL podaje
ten sam HTML dla wszystkich urządzeń a tylko CSS zmienia
sposób wyświetlania. To rekomendowana przez Google
konfiguracja. (Client-side)
◦ Strony które na wszystkich urządzeniach mają te same URLe, ale
każdy URL zawiera inny HTML i CSS, w zależności tego czy user
agent przedstawia się jako desktop czy mobilny. (Server-side)
◦ Strony które mają osobne wersje mobilne i desktopowe.
Źródło: https://developers.google.com/webmasters/smartphone-sites/details

14.  Responsive Web Design - Media Queries z CSS3
◦ Rozwiązanie problemu wielu rozdzielczości
◦ Rozwiązanie problemu scrolla poziomego
Źródło: http://magazine.acreno.pl/rewolucyjny-responsive-webdesign

15.  Wykorzystanie jednego adresu URL dla zawartości
ułatwia interakcję z użytkownikami poprzez
łatwiejszy share (GTF) oraz 2 Googleboty (Googlebot
i Googlebot-Mobile) zawsze trafiają na to samo
 Brak przekierowania użytkownika aby otrzymać
dopasowany rozmiar strony do urządzenia
użytkownika, brak zmian agentów co jest
cloakingiem.
 Zachowuje zasoby serwera i Googlebot. Pośrednio
umożliwia indeksację większej liczby stron w ramach
jednej domeny
 Googlebot-Mobile przedstawia się jako iPhone 
Źródło: https://developers.google.com/webmasters/smartphone-sites/details

16.  Nagłówek Vary HTTP ma dwie użyteczne funkcje:
◦ Komunikuje do serwerów z cache używanych przez ISP, że,
powinny wziąć pod uwagę user agent, decydując czy serwują
stronę z cache czy nie. Bez nagłówka Vary HTTP, serwer może
omyłkowo podać użytkownikom mobilnym stronę z cache’u
wersji desktop i vice versa.
◦ Pomaga Googlebotowi odkryć mobilny kontent szybciej, ważny
nagłówek Vary HTTP jest jednym z sygnałów, który bierze
Google pod uwagę przy indeksowaniu treści mobilnej.
◦ GET /page-1 HTTP/1.1
◦ Host: www.silesiasem.pl
◦ (...)
◦ HTTP/1.1 200 OK
◦ Content-Type: text/html
◦ Vary: User-Agent
◦ Content-Length: 5710
◦ (...)
Źródło: https://developers.google.com/webmasters/smartphone-sites/details

17.  W tej konfiguracji, każdy adres URL dla
desktopowych urządzeń posiada swój odpowiednik
dla urządzeń mobilnych. Powszechna konfiguracja to
strony desktopowe pod adresem domena.pl mają
swoje odpowiedniki pod adresem m.domena.pl.
Google nie faworyzuje żadnego z formatów, tak
długo jak są oba dostępne dla Googlbota i
Googlebot-Mobile.
Źródło: https://developers.google.com/webmasters/smartphone-sites/details

18.  Google rekomenduje używanie dwóch anotacji, aby pomóc
zrozumieć to ustawienie:
1. Na stronie desktopowej, dodaj znacznik link rel="alternate"
wskazujący na odpowiadający mu adres mobilny. Dzięki temu
Googlebot szybciej odnajdzie położenie mobilnej wersji.
2. Na mobilniej stronie dodaj znacznik link rel="canonical"
wskazujący na odpowiadający mu adres desktopowy.
 Google wspiera dwie metody anotacji: w kodzie HTML i pliku
Sitemaps. Annotation w HTML wygląda następująco
◦ Na stronie desktopowej:
 <link rel="alternate" media="only screen and (max-width:
640px)" href="http://m.domena.pl/strona" >
◦ a na mobilnej wersji, anotacja ma postać:
 <link rel="canonical" href="http://www.domena.pl/strona" >
Źródło: https://developers.google.com/webmasters/smartphone-sites/details

19. www.blog.gdaq.pl sprawnymarketing.pl

20. www.silesiasem.pl seo.zgred.pl

21. Responsive Web
Dynamiczny kontent Osobne wersje
Design
 +  +  +
 1 URL dla obu wersji,  1 URL dla obu wersji,  Łatwe we wdrożeniu
bez duplikacji bez duplikacji  Możliwość różnicowania
 Łatwiejsze i tańsze w  Możliwość różnicowania mobilnego kontentu
użytkowaniu mobilnego kontentu  Lepsza koncentracja na
 Brak przekierowań  Łatwiejsze i tańsze w mobile UX
użytkowaniu
 Lepsza koncentracja na
mobile UX
 -  -
 Możliwa potrzeba  -  Ryzyko duplikacji
przebudowy szablonu  Złożoność wdrożenia kontentu
 Mniejsze zróżnicowanie  Wyższe koszty  Podział popularności
mobilnego kontentu utrzymania między adresami URL
 Niższa koncentracja na  Wyższe koszty
mobile UX utrzymania

22. Responsive Web
Dynamiczny kontent Osobne wersje
Design
 Pozwolenie dla robota  Serwer powinien  Postaw mobilną
na pobieranie (css, js, odpowiedzieć innym strukturę na
obrazki) kodem HTML dla tego subdomenie „m”
 Uwaga na elementy, samego URLa w  Użyj przekierowani 301
które nie wyświetlą się zależności od user aby skierować
na urządzeniu agenta. Mobilni mobilnych i boty na
mobilnym (duże obrazy, użytkownicy i boty właściwą wersję
js, video itp) powinni zobaczyć inną,  Dodaj link
 Skorzystaj z CMS lub mobilną wersję strony. rel=„alternate”
Frameworka aby uczynić  Ustaw nagłówek Vary wskazujący do wersji
prostszym wdrożenie HTTP aby przyspieszyć mobilnej oraz link
znalezienie przez bota rel=„canonical”
mobilnej wersji wskazujacy do wersji
desktopowej
 Umieść link do pełnej
wersji
 Utwórz mapę XML
mobilną

23. Jaką wersję wybrać?
Źródło: http://www.stateofsearch.com/mobile-seo-recommendations

24. http://www.silesiasem.pl/mobilne-seo