Vydejme se na známou cestu. Provedete rychlé vyhledávání v Googlu a přečtete si několik výsledků. Pak si všimnete několika webových stránek, které mají odpověď, kterou hledáte.

Ale první a nejslibnější web, který vyberete z nabídky SERP, na vašem oblíbeném mobilním zařízení nefunguje správně. Zavřete ji tedy a podíváte se, jestli další web nemá to, co potřebujete - o nic nejde, že? No, a co kdyby ten vysoce hodnocený web, který jste právě zavřeli, byl váš? Přemýšleli jste někdy o tom, jak často se to stalo s vaším webem? Kolik lidí zavřelo váš web a přispělo tak k vašemu bounce rate?

Kolik uživatelů váš web zavrhlo, protože pro ně nefungoval? Obsah je král, ale jak vidíme zde, není jediným rozhodujícím faktorem. Uživatelský zážitek utváří také zařízení, které obsah zobrazuje. Protože je však většina webových stránek vytvářena na počítači, jejich majitelé často zapomínají na optimalizaci pro ostatní zařízení. Děláte stejnou chybu?

Chytrý telefon má dnes téměř každý a používá ho k vyhledávání na internetu. Nemůžete se soustředit pouze na uživatele stolních počítačů a doufat, že to bude stačit. Pokud chcete zajistit, aby váš web opouštělo méně lidí, udělejte ho přívětivý pro mobilní zařízení.

Uživatelský zážitek utváří i mobilní zařízení, na kterém se vaše webové stránky zobrazují.

Dopřejte svému webu responzivní design vhodný pro mobilní zařízení

Vaše webové stránky vypadají skvěle a na počítači fungují jako po másle; to je fantastické.

Zkoušeli jste je ale otevřít na chytrém telefonu? Pokud není skvěle čitelný, pak máte velký problém. Bohužel to, že je web vhodný pro PC, neznamená, že je automaticky vhodný i pro mobilní zařízení.

A vzhledem k indexu Google mobile-first, pokud váš web není přizpůsoben mobilním zařízením, nemusí nikdy spatřit světlo světa na první stránce výsledků vyhledávání (SERP). Co tedy máte dělat?

Prvním důležitým krokem k tomu, aby byl váš web přívětivý pro mobilní zařízení, je práce na responzivním designu. Pokud je web responzivní, zobrazuje se správně na obrazovkách všech velikostí.

Jak dát svému webu design přizpůsobený mobilním zařízením

Existují dva způsoby, jak svůj web vylepšit do podoby vhodné pro mobilní zařízení. Každé řešení má své kompromisy.

1. Nejrychlejší způsob: Nainstalujte si specializovaný plugin pro mobilní zařízení, jako je WPtouch, který dodá vašemu webu responzivní design během několika minut. Je to nejjednodušší způsob, ale není bez rizika; pluginy jsou náchylné k rozbití a (v extrémních případech) dokonce k hacknutí.

2. Nejspolehlivější a nejbezpečnější způsob: upravte kód svých webových stránek tak, aby obsahoval responzivní řešení.

Jak ručně nakódovat responzivní webové stránky

Pokud chcete vzít věci do vlastních rukou a přeměnit svůj desktopový web na responzivní web vhodný pro mobilní zařízení, budete muset začlenit:

• Viewport.
• Responzivní obrázky.
• Plynulé rozvržení.
• Mediální dotazy.

Naučíme vás veškerý kód, který potřebujete k tomu, aby váš web byl responzivní. Nejdříve si však před provedením změn v kódu nezapomeňte web zálohovat.

Jak nastavit zobrazení na webové stránce

Zobrazení (viewports) pomáhají každému prohlížeči přizpůsobit rozměry webové stránky jeho obrazovce.

Pokud přidáte do kódu HTML svého webu viewport, vaše webové stránky se automaticky přizpůsobí tak, aby se vešly do jakéhokoli mobilního zařízení.

Přidat toto:
Chcete-li na stránce nastavit viewport, přidejte tento řádek kódu HTML do hlavičky:

Jak zajistit, aby se obrázky zobrazovaly responzivně

Pokud jde o přívětivost pro mobilní zařízení, je důležité, aby návštěvník nemusel rolovat vlevo a vpravo, aby viděl obsah vašich webových stránek. To platí i pro všechny obrázky, zejména infografiky.
Responzivní obrázky by se měly automaticky zmenšovat a zvětšovat, aby se dokonale přizpůsobily šířce obrazovky každého návštěvníka. Chcete tedy použít vlastnost max-width.

Jak přidat maximální šířku, aby byly vaše obrázky responzivní

1. Otevřete soubor stylů (CSS) svého webu.
2. Přidejte "max-width: 100%" pro <img> tag, například takto:
img {
max-width: 100%;
}

Pokud jsou nyní vaše obrázky širší než zobrazovací okno, které jste přidali v předchozím kroku, automaticky se zmenší, aby se vešly do dostupného prostoru.

Jak nainstalovat plynulé rozložení

Pokud máte na webu responzivní rozvržení, prvky stránky se samy přizpůsobí jakékoli obrazovce. Máte-li například fluidní tabulku, změní se její velikost spolu s obrazovkou. Díky tomu uvidíte všechny sloupce, aniž byste museli rolovat doleva nebo doprava - a to i na malé obrazovce mobilního telefonu.

Existuje několik různých metod fluidního rozložení, které můžete vyzkoušet v závislosti na konkrétním webu:

• Flexbox.
• Multicol.
• Mřížka.

Používejte je, pokud je to vhodné.

Kdy použít Flexbox

Tuto metodu použijte, když máte několik různě velkých položek a chcete je umístit do jedné řady. Přidejte do jejich značky HTML vlastnost "display: flex", jako v tomto příkladu:

.items {

display: flex;

}

Kdy použít funkci Multicol

Tato metoda rozdělí obsah do sloupců. Používá vlastnost column-count, například takto:

.container {

column-count: 3;

}

V tomto příkladu získáte tři sloupce.

Kdy použít mřížku

Jak název napovídá, tato metoda vytvoří mřížku, do které se prvky vejdou. Zde je příklad:

.container {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

}

Vlastnost grid-template-columns nastavuje počet sloupců (v tomto příkladu tři) a jejich velikost (1 fr).

Stále si nejste jisti, kterou použít? Zásuvné moduly dokáží automaticky rozpoznat a implementovat nejlepší rozložení pro plynulé zobrazení.

Jak přidat dotazy na média na webové stránky

Další možností, jak přizpůsobit obsah libovolné velikosti obrazovky, jsou dotazy na média. Mají však ještě jednu, mnohem pozoruhodnější výhodu: přizpůsobují váš web specifickým vlastnostem nativním pro různá zařízení.

Například kurzor počítačové myši může přejíždět přes prvky stránky a chytré telefony mají dotykové obrazovky. Pokud tyto funkce zohledníte, můžete přizpůsobit uživatelské prostředí jakémukoli typu zařízení.

Jakmile vše provedete, zkontrolujte, jak dobře to funguje, zobrazením webu na mnoha různých zařízeních.

Zajistěte, aby celý web vypadal dobře na mobilních zařízeních

První krok se týkal technického rámce, díky kterému budou vaše webové stránky dobře vypadat na mobilních zařízeních.

Dobrá zpráva - to byla ta nejtěžší část. Zbývá už jen několik dalších kroků.

S responzivním designem je váš web téměř plně přizpůsoben mobilním zařízením. Co ještě potřebujete k dokončení práce?

• Využijte velký, dobře čitelný text. Obzvláště poutavé by měly být nadpisy a podnadpisy.
• Interaktivní prvky (jako jsou tlačítka a zaškrtávací políčka) udělejte dostatečně velké, aby byly nápadné.
• Vyhněte se používání dlouhých odstavců. Krátké jsou vždy lepší.
• Hojně využívejte prázdný prostor. Zabráníte tak tomu, aby vaše stránky vypadaly stísněně.
• Kolem odkazů a dalších interaktivních prvků nechte trochu místa. Uživatelé tak omylem nestisknou to, co nechtějí.

Neblokujte obsah vyskakovacími okny

Vyskakovací okna ztěžují návštěvníkům získání informací, pro které přišli, a vedou k vysoké míře odchodu, tj. k tomu, že lidé opouštějí váš web hned, jak na něj vstoupí.

Některé druhy vyskakovacích oken jsou docela důležité. Většina webových stránek musí používat soubory cookie a ta vaše pravděpodobně není výjimkou. A nařízení GDPR stanovilo povinnost požádat uživatele o souhlas s použitím jejich údajů, takže se použití vyskakovacího okna nevyhnete ani v tomto případě.

Uživatelé však nenavštěvují vaše stránky proto, aby se dívali na vyskakovací okna. Když je celá stránka zablokována žádostí o souhlas s použitím souborů cookie, návštěvníci se do vaší situace možná nebudou chtít vžít. Naopak je to zaručeně obtěžuje a mohou dokonce odejít, aniž by si váš web vůbec prohlédli.

Co dělat místo toho

Uživatelé jsou k vyskakovacím oknům tolerantnější, pokud pokrývají jen malou část obrazovky. A pokud je lze snadno zavřít a odmítnout, je to ještě lepší.

Opravte technické chyby na svých webových stránkách

Na malé obrazovce snadno odhalíte i ten nejmenší zádrhel, včetně obávaných chyb 404.

Stránka 404 s vtipným designem vám sice může dobře posloužit, ale chyba je pořád chyba; naruší uživatelský zážitek. Je lepší je jako faktor zcela odstranit.

Jak odhalit technické chyby vašeho webu

Jaké další chyby mohou mobilnímu uživateli zkazit den? Jmenujme alespoň některé:

• Nefunkční odkazy.
• Nefunkční obrázky.
• Nežádoucí přesměrování stránek.
• Chybné CSS a Javascript.
• Problémy se serverem (např. časový limit brány).

Všechny tyto problémy pošlou uživatele pryč, pokud s nimi něco neuděláte.

Chcete-li začít, najděte na svých stránkách všechny technické chyby. Proskenujte je pomocí vhodného nástroje a o nejrychleji opravte všechny nalezené chyby.

Poté si zvykněte pravidelně kontrolovat své stránky (stačí jednou týdně) a včas se věnujte chybám. Funkční stránky jsou základem SEO.

Zajistěte, aby se vaše stránky načítaly rychle

Navštívíte své stránky a jejich načítání trvá příliš dlouho. Ale ne!

Nefunguje internet? Ne? Bohužel se nyní může stát, že se váš uživatel rozhodne, že vaše webové stránky nikdy nebudou fungovat, a už se na ně nikdy nevrátí.

Proto je důležité udělat vše, co je ve vašich silách, aby se vaše stránky vždy načítaly rychle.

Jak zajistit, aby se vaše webové stránky načítaly rychleji

Postupujte podle těchto šesti tipů, aby se vaše webové stránky načítaly rychleji:

• Optimalizujte obrázky. Minimalizujte velikost jejich souborů úpravou jejich výšky a šířky, uložte je ve správném formátu a komprimujte je.
• Povolte kompresi (pokud ji ještě nemáte povolenou). Mezi nejoblíbenější metody patří komprese GZIP.
• Používejte ukládání do mezipaměti prohlížeče. Najděte soubor .htaccess své domény a nastavte časy vypršení platnosti prvků stránky.
• Použijte líné načítání. Stejně jako komprese je často již aktivní. Pokud ji nemáte, můžete do značek HTML prvků, které chcete líně načíst, vložit atribut loading="lazy". Nebo prostě použijte zásuvný modul, jako je Smush.
• Optimalizujte kód svých stránek. Pokud máte dostatečné znalosti jazyka HTML, Javascriptu a dalších jazyků tvořících vaše stránky, můžete se pokusit kód ořezat. Dejte si pozor, abyste nic neporušili.
• Slučujte prvky tam, kde je to vhodné. Máte-li například dva obrázky hned vedle sebe, sloučením do jednoho obrázku přispějete k rychlejšímu načítání stránky.

Zkontrolujte aktuální rychlost načítání pomocí nástroje WebCEO pro optimalizaci rychlosti. Upozorní vás na problémy související s rychlostí, které vás právě teď trápí.

Optimalizujte své webové stránky pro místní a hlasové vyhledávání

Chytré telefony se snadno přenášejí, což z nich dělá ideální nástroj pro online prohlížení na ulici.

Potřebuje uživatel najít něco v okolí? Jejich cíl je vzdálen jen jednu otázku.

A protože otázka bude pravděpodobně obsahovat slovo "kde", musí na ni být vaše webové stránky připraveny. K tomu slouží optimalizace pro místní vyhledávání - a v kombinaci s mobilním SEO se zároveň stává překvapivě efektivní pro hlasové vyhledávání!

Stačí udělat tyto věci:

• Používejte v obsahu klíčová slova a fráze související s lokalitou. Obvykle obsahují slova jako kde, nejbližší, nejbližší, blízko mě nebo v "názvu vaší lokality". Například: myčka aut blízko mě.
• Mějte na svých stránkách stránku s nejčastějšími dotazy. Odpovědi na otázky formulujte stručně a přímo k věci.
• Na úvodní stránce webu uveďte název, adresu a telefonní číslo své firmy. Ještě lépe je umístěte do zápatí.
• Vytvořte si výpis na firemním profilu Google a vyplňte jej co nejvíce informacemi. To je nezbytné, pokud se chcete zobrazit v Mapách Google.
• Sbírejte pozitivní hodnocení zákazníků - čím více, tím lépe.

V ideálním případě byste měli návštěvníka zaujmout hned, jakmile uvidí vaše webové stránky. Na malé obrazovce toho však mohou vidět jen málo. Co tedy uděláte?

Postarejte se o to, aby "nad záhybem" vašeho webu (to, co uživatelé uvidí při prvním načtení) bylo to nejlepší.

Jaké věci tam musíte umístit?

• Popisný, poutavý nadpis.
• Navigační menu.
• Vyhledávací panel.
• Výzva k akci.

Ale to jsou jen základy.

Zde je několik nápadů na úrovni odborníků:

• Interaktivní prvek (například panoramatická fotografie, 3D model nebo jednoduchá hra). Funguje i obyčejné video.
• Plovoucí CTA, která vždy zůstane na obrazovce bez ohledu na to, jak daleko dolů se posunete.

Udělejte výsledky vyhledávání atraktivní

Jak se říká, nejlepší místo pro ukrytí tajemství je na druhé stránce Googlu.

To však platí pouze pro verzi pro počítače.

Mobilní Google přichází s nekonečným posouváním, které místo 10 výsledků prezentuje 40 nejlepších, než najdete tlačítko "Zobrazit více".

Ať už je však nejlepších 10, nebo ne, na vaše výsledky vyhledávání nikdy nikdo neklikne, pokud nebudou vyčnívat.

A stejně jako u čehokoli jiného musíte dobře vyniknout. Jak tuto zásadu uplatníte na výsledky vyhledávání?

Jak zajistit, aby výsledky vyhledávání vynikly

Existují tři skvělé způsoby, jak učinit výsledky vyhledávání pro budoucího návštěvníka zajímavějšími:

• Používejte ta nejlepší klíčová slova. Nejen z hlediska objemu vyhledávání - používejte klíčová slova, která lépe než ostatní vystihují záměr uživatelů při hledání. Abyste zjistili, která klíčová slova to jsou, musíte se vžít do situace uživatelů. Nebo se prostě zeptejte uživatelů, které znáte, na jejich vyhledávací preference.
• Používejte poutavé názvy a popisy. Klíčová slova jsou jednou hlavní složkou; druhou složkou jsou silná slova, která v uživatelích vzbuzují emoce. Víte, které emoce jsou pro váš obsah vhodné?
• Přidejte strukturovaná data. Označte prvky své stránky a vytvořte ohromně klikatelné rich snippety.

Před lety viděl Google potenciál v mobilních zařízeních - a jak se ukázalo, měl naprostou pravdu.

Vyhledávací gigant do přívětivosti pro mobilní zařízení výrazně investoval a není pochyb: internet je díky tomu mnohem lepší. Online obsah se stal mnohem přehlednějším a jednodušším na používání.

Odpovídají však vaše stránky zlatému standardu? Dostávají vaši uživatelé stejně skvělý zážitek na všech svých zařízeních?

Pokud máte byť jen stín pochybností, je načase využít všechny nástroje, které máte k dispozici, abyste se ujistili, že váš web splňuje požadavky. Začněte zvyšovat své pozice ve vyhledávání a zapojení uživatelů pomocí responzivních webových stránek ještě dnes!

Zdroj: marketingland.com, facebook.com, cpcstrategy.com

Autor: Vlastimil Malík

Foto zdroj: pixabay.com