Konfigurace webu z hlediska mobilního SEO: Separátní mobilní web

V tomto článku popisuji, jaké náležitosti by měla splňovat mobilní verze webu.

Jedná se o zvláštní verzi webu, která je přizpůsobená jen smartphonům. Obvykle běží na subdoméně m.example.com. URL adresa mobilní verze však může mít jakoukoliv podobu, např. subdoména mobile.example.com, nebo může být i v podadresáři example.com/mobile/.

V případě tohoto typu konfigurace je dobré v patičce webu vždy odkázat na druhou verzi webu. Tzn. z desktopové verze odkázat na mobilní tak, aby se v případě potřeby mohl uživatel sám dostat na druhou verzi (a naopak).

 

Technické náležitosti separátní mobilní verze

Značky alternate a canonical

Aby nedocházelo k duplicitám a Google správně chápal, že se jedná o mobilní alternativu webu, je potřeba na každou stránku obou verzí přidat značky alternate a canonical. Existují dva způsoby, jak značky přidat:

1. Značky v HTML na každé stránce

  • Značku rel=”alternate” na desktopovou stránku. Tato značka bude odkazovat na mobilní stránku, která je přímo ekvivalentní konkrétní desktopové stránce. Tzn. na stránce www.example.com bude značka vypadat takto:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com" >
  • Značku rel=”canonical” na mobilní stránku. Tato značka bude odkazovat na desktopovou stránku, která koresponduje s tou kterou mobilní stránkou. Tzn. na stránce www.m.example.com bude značka vypadat takto:
<link rel="canonical" href="http://www.example.com/" >

2. Kombinace značek v Sitemap.xml a v HTML

  • Tento způsob umožňuje značku rel=”alternate” vložit do Sitemap.xml desktopové verze. Příklad pro jednu stránku:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com</loc>
<xhtml:link
    rel="alternate"
    media="only screen and (max-width: 640px)"
    href="http://m.example.com/page-1" />
</url>
</urlset>
  • Značka rel=”canonical” v mobilní verzi bude umístěna stejným způsobem, jako v prvním případě, tedy na každé mobilní stránce zvlášť.

Každá mobilní stránka by měla odpovídat jedné stránce desktopové, a naopak. Není možné např. dvě desktopové stránky odkazovat na jednu stránku mobilní.

 

Přesměrování

Dále je u samostatného mobilního webu potřeba správně nastavit automatické přesměrování, aby se příchozímu mobilnímu návštěvníkovi automaticky načetla mobilní verze. Google doporučuje dva různé způsoby přesměrování:

1. Přesměrování přes HTTP

Přesměrování je provedeno na základě User-Agenta v hlavičce HTTP. Je důležité zachovat přesměrování na tu samou adresu, jaká je ve značce rel=”alternate”.

Je doporučováno přesměrování se stavovým kódem 302, lze však použít i přesměrování typu 301.

2. Přesměrování přes JavaScript

Není-li možné využít přesměrování přes HTTP, které je preferováno, pak je možné aplikovat přesměrování přes JavaScript. Opět je potřeba přesměrovat na tutéž adresu, jaká je uvedena v rel=”alternate”. Tato metoda přesměrování má dvě nevýhody. Přesměrování může být pomalejší, protože je potřeba nejprve stáhnout původní stránku a následně analyzovat a spustit přesměrování přes JavaScript. Druhou nevýhodou je, že ne všechny zařízení (prohlížeče) mají povolené spouštění JavaScriptu, a proto v těchto případech nemusí přesměrování fungovat správně.

Přesměrování je potřeba nastavit ke každé stránce zvlášť (ne jen na domovské stránce). V případě, že mobilní verze počtem stránek a obsahem neodpovídá verzi desktopové, mělo by být přesměrování nastaveno tak, aby “spárované” stránky obsahovaly alespoň podobné informace se stejným cílem. Pakliže k desktopové stránce neexistuje žádná mobilní stránka, je doporučováno mobilního uživatele ponechat na stránce pro desktop.

Jsou-li mobilní a desktopové URL adresy zrcadlové, je pro Google jednodušší pochopit, že mobilní stránka je verze desktopové stránky. Mají-li URL adresy tutéž strukturu, jsou tzv. zrcadlové:

Desktopová verze URL: www.example.com/article/

Mobilní verze URL: www.m.example.com/article/

 

Meta tag viewport

Pro tuto konfiguraci je také potřeba přidat meta tag viewport (stejně jako v případě responzivního webu). Ačkoliv jsem nenašla, že by o tom Google ve svých doporučeních pro separátní web psal, jiné zdroje to doporučují. Toto doporučení jsem ověřila tím, že jsem našla mobilní web, který nemá viewport nastavený a provedla jsem test mobilní přívětivosti od Googlu. Jak lze vidět na obrázku, Google daný web označil jako nepoužitelný ve smartphonech, mj. protože nemá nastavený viewport.

chybějící viewport

 

Meta tag viewport obvykle vypadá takto:

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

Hodnota device-width říká, že se stránka přizpůsobí šířce konkrétního zařízení. Hodnota initial-scale=1 prohlížeči říká, že má zachovat měřítko.

nebo takto:

  • <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />

Hodnota minimum-scale=1 říká, že web nelze zmenšit, oproti tomu maximum-scale=1 uvádí, že nelze ani zvětšit. User-scalable=0 zabraňuje uživateli zoomovat stránku. Více o viewportu si můžete přečíst na webu o webdesignu Je čas.

 

Časté problémy a chyby

  • Jak jsem již uvedla výše, je potřeba spárovat vždy jednu stránku desktopovou s jednou stránkou mobilní verze. Mezi časté chyby patří nedodržení tohoto principu. Tvůrci webových stránek často odkazují několik desktopových stránek na jednu mobilní – typicky hlavní stranu mobilní verze. Jedná se o chybné přesměrování, které mate nejen roboty vyhledávačů, ale především i uživatele. Návštěvník očekává, že se dostane na konkrétní stránku s určitým obsahem, místo toho je mu však poskytnuta pouze domovská stránka. Častým důsledkem tohoto jevu je odchod návštěvníka – potenciálního zákazníka z webu.

Jestliže neexistuje mobilní stránka, která je ekvivalentem stránky desktopové, je lepší návštěvníkovi poskytnout alespoň desktopovou verzi žádaného obsahu, než jiný obsah mobilní verze.

Tyto chyby lze nalézt ve Webmasters Tools v části Chyby v procházení – Chytrý telefon.

  • Poměrně běžnou chybou je také špatné prolinkování. V mobilní verzi webu se objevují odkazy na klasickou verzi a naopak. Např. v odkazech do kategorií, obsahových stránek apod. Vzájemné prolinkování v patičce webu není považováno za chybu (jak jsem psala výše, naopak je žádoucí).

 

Na praktický příklad implementace mobilní verze pro stránku Účtování.net se můžete podívat na blogu Tomáše Vojty.

 

Příklady webů se separátní mobilní verzí

Díky implementaci mobilní verze údajně vzrostly mobilní konverze o 70 %.

Zde lze vidět, že nemají správně nastavené rel canonical a rel alternate. Na desktopovém webu označení chybí. Na mobilním webu sice mají rel canonical, ale URL ve značce je vždy totožné s URL dané mobilní stránky.

Zde také nejsou správně implementované značky. Navíc není nastaveno přesměrování, takže se uživatel na mobilní verzi ani nemůže (přirozenou cestou) dostat. Adlo.cz má jinak responzivní design, takže ve finále to až tak nevadí, ale uvádím jej jako příklad nenastaveného přesměrování.

Hlavní výhody a nevýhody této konfigurace si můžete přečíst v mém dalším článku.

 

1 Comment

You can post comments in this post.


  • Dobrý večer, děkuji za hezky zpracovaný návod. Prosím o radu, jakým způsobem nastavit Přesměrování přes HTTP. Snažil jsem se nějaké řešení vygooglit, ale bohužel marně. Děkuji Vám za pomoc.

    Pavel 2 roky ago Reply


Přidejte komentář

Time limit is exhausted. Please reload the CAPTCHA.