Comerto / Tvorba webových stránek a internetových obchodů / Reference webových stránek / Nový web sladěný s e-shopem a připravený na SEO

Nový web sladěný s e-shopem a připravený na SEO

Pro Procházka MP jsme zajistili funkční i grafický soulad mezi katalogovým webem a prodávajícím e-shopem, přičemž zvláštní pozornost jsme věnovali chystání na SEO

Pro: Procházka MP

Realizace: 2023

www.prochazka-mp.cz

O klientovi

Procházka MP je už od roku 1994 dodavatel a prodejce manipulační, zdvihací a kolejové techniky – jeřáby, kladkostroje, zvedací stoly a plošiny, posunovací zařízení i paletové vozíky. Ať už tedy potřebujete hýbat s těžkými břemeny v horizontálním nebo vertikálním směru, Procházka MP pro vás bude mít vhodné řešení. Vedle toho poskytuje také servis této techniky, provádí jejich revize a pomáhá s řádným zaškolením.

Více o klientovi na www.prochazka-mp.cz

Zadání klienta

Řešit optimalizaci pro vyhledávače, do toho spravovat PPC kampaně, a přivádět zákazníky na pokulhávající, pomalý a nefukční web, bývá v jistém ohledu špatné a zároveň omezující pro byznys. Procházka MP si tohle uvědomovala, když s námi měli navázat takovou spolupráci, a proto jsme se dohodli nejprve na vytvoření nového webu s propojeným e-shopem na Shoptetu, kterému následovalo SEO a správa PPC.

Přesto se zaměření původně zamýšlených projektů odrazilo v některých cílech nastíněných klientem – na jedné straně stál požadavek na větší viditelnost v organickém vyhledávání, na druhé straně zas zlepšení prodejů a konverznosti nabízeného zboží a služeb. Dalším důležitým bodem bylo sjednocení nového webu s e-shopem, a to jak graficky, tak i funkčně.

Vedle toho měli v té době problém s Wordpressem a jeho administrací, kterou chtěli vyměnit za jiné a funkčnější řešení. Nakonec jistou dávku pozornosti si přáli vynaložit i na technickou stránku webu, což mělo vyřešit responzivitu a správné zobrazování pro libovolná zařízení, pomalé načítání obsahu nebo špatnou dohledatelnost (dokonce až neviditelnost) ve výsledcích vyhledávání.

Jak web vypadá

Mobilní verze stránek

Výsledné řešení

Celý web jsme od samého počátku tvořili s představou, že designujeme řešení, které bude jednoduché na správu, připravené na komplexní SEO a zároveň bude vypadat dobře i za pár let, až bude web naplněný skvělým obsahem. Abychom se postarali o všechny tyto vlastnosti, rozdělili jsme práci do čtyř etap:

Příprava a fáze objevování
Fáze definování a prototypování
Fáze vývoje a implementace řešení
Testování a dodání řešení

1. Rešerše a objevování problémů a kontextu

V první řadě jsme se zaměřili na klienta a jeho uživatele. Oni sami totiž nejlépe vědí, co na novém webu chtějí a hlavně co od něj očekávají. Proto jsme se s klientem spojili, abychom zjistili co nejvíce info. Prostřednictvím rozhovorů a jednoduchých formulářů jsme probrali témata, která se bezprostředně dotýkají klienta a která jsou nezbytnou podmínkou k designování užitečného nového webu, např.:

nabízené či prioritní služby a produkty,
současný stav byznysu,
identifikace konkurence a klientových výhod,
převažující způsoby a styly komunikace se zákazníky apod.

Zkrátka jsme se snažili zjistit veškeré dostupné info o Procházka MP, a tím se naladit i na společnou vlnu.

Díky této přípravné fázi jsme získali významné informace, na které jsme mohli během celého vývoje webu myslet a odkazovat na ně, tím i zprostředkovaně zjednodušit a zrychlit designový proces.

2. Definování řešení a navrhování

Ve druhém kroku jsme se přesunuli k hmatatelnějším výsledkům, kdy jsme klientovi mohli ukázat první zárodky naší práce.

Jednou z počátečních činností ve fázi prototypování je nastínění základní struktury webu čili navigačního schéma. Už právě zde jsme využili informace z předešlého dotazování. Navrhnuli jsme navigační menu o 7 položkách (mezi nimi např. produktová stránka, stránka s referencemi, stránka O nás, stránka Kontakty), přičemž každou z nich jsme rozpracovali tak, aby bylo jasné, co přesně na uvedené stránce bude a jakou bude mít hierarchii. Vznikl nám tak přehledný a detailní hierarchický strom.

Důležitou složkou našich webů jsou tzv. bloky či elementy, které si lze představit jako ucelené a samostatné součástky, které mohou mít právě jedno místo, ale stejně tak se mohou zobrazovat i na vícero místech webu. Proto jsme si načrtnuli veškeré tyto komponenty, které budeme posléze potřebovat. Přišli jsme třeba s:

katalogem produktů,
seznamem referencí,
výpisem dokumentů ke stažení,
seznamem novinek a blogových článku.

Spojením těchto modulů, výše zmíněného wireframu a vlastních znalostí a zkušeností jsme nakonec dospecifikovali typologii všech stránek, přiblížili jednotlivé funkce, které se na nich objeví a opatřili je nástinem budoucího obsahu. Takové zadání jsme poté předali grafikovi.

Díky předešlé přípravě se nám společně s grafikem podařilo vytvořit takový grafický návrh domovské stránky (homepage), který klient bez výhrad schválil. U jediného prvku jsme nebyli s to rozhodnout – zda sekce O nás a Naše služby poskládat vedle sebe do sloupců, nebo pod sebe s fotkou na levém okraji. A tak jsme majitelům Procházka MP dali na výběr zvolit takové řešení, které jim nejvíce sedí.

Jakmile byl jasný vítěz, vrhnuli jsme se na grafiky ostatních podstránek webu. Po stejné odpovědi jako v předešlém případě – schváleno bez výhrad – jsme se pustili do další etapy.

3. Vývoj a implementace řešení

Ve třetí fázi přechází práce z rukou designérů a grafiků ke kodérům a programátorům.

Naši kodéři nejprve převzali grafiku a nařezali ji tak, aby ji mohli implementovat do nově vznikajícího webu. Postupně se nakódovaly:

homepage,
stránky s katalogem produktů a jejich detailů,
stránky s výpisem referencí a jejich popisem,
blogová a novinková stránka,
O nás + Kontakty.

Jakmile byla grafika nasazená na testovacím webu a nahozená na náš vlastní redakční systém, programátoři doplnili moduly. Moduly umí výrazně usnadnit práci s redakčním systémem, protože se vytvářejí na míru konkrétním klientům tak, aby skutečně editovali jen to, co je pro ně důležité a smysluplné (zpravidla import produktů, služeb, úprava popisků, cen apod.). Díky tomu zajišťujeme, aby byla administrace co nejjednoduší, co nejrychlejší a co nejméně zatěžující pro ty, kteří se budou o web starat.

Třeba v tomto konkrétním případě si prostřednictvím jednoduchého uživatelského prostředí může klient bez problému přidat nový produkt, popsat ho, doplnit fotkou a zvěřejnit. V jiném případě zase může vytvořit referenci, opatřit ji krátkým popiskem a několika fotkami a opět publikovat.

Jednou z velkých otázek bylo klientem avizované napojení na e-shop, které mělo mít charakter, jako by se jednalo stále o jeden a ten samý web. Toho jsme docílili a) primárně sjednocením grafického vizuálu prezentačního webu a internetového obchodu, b) sekundárně pak propojením produktů (kterou jsou ihned k zakoupení) prostřednictvím feedu z Shoptetu, platformy pro tvorbu e-shopů. Nové produkty, které si klient přidá právě na e-shop, se buď po manuálním spuštění nebo automaticky do 24 hodin synchronizují a objeví i na novém webu.

Samozřejmou součástí řešení je zajištění responzivity, bez které se moderní internetové prezentace neobejdou. Web jsme proto upravili tak, aby správně zobrazoval na jakémkoliv zařízení (počítač, telefon i tablet) i v jakémkoliv prohlížeči (Chrome, Firefox, Safari, Edge).

4. Testování a dodání řešení

V poslední fázi jsme nakódovaný web vrátili těm, kteří se o něj starali v samých počátcích a kteří navrhnuli jeho design, aby ho podrobili testování. Důležitá je kontrola funkčnosti, která odhaluje veškeré chyby a nedostatky jakéhokoliv typu, ať už technického, grafického nebo funkčního. Zde jsme narazili např.:

na nefungující proklik na zavolání na telefon,
na nevhodně se zobrazující texty v novinkách,
nebo na pomatenou subnavigaci v detailech produktu.

Dále jsme se zaměřili na základní nastavení těch částí webu, které přímo pomáhají optimalizaci pro vyhledávače a které představují jeden ze zásadních požadavků klienta do budoucna. Řadí se sem:

správné nastavení souboru robots.txt,
vygenerování odpovídající sitemap.xml,
nastavení přesměrování (301) a chybných kódů (404),
kontrola on-page SEO faktorů (správné generování hierarchie nadpisů, automatická tvorba meta title a meta description, automatické doplňování titlů a altů k obrázkům nebo správně se zobrazující drobečková navigace),
kontrola technického SEO (validace kódu a webu podle W3C standardů, minifikace obrázků, kontrola responzivity).

Po posledním testu a konečném schválení ze strany Procházka MP jsme nakonec web spustili, předali klientovi a ještě narychlo provedli několik posledních úprav, které se dají dělat až na ostrém webu (jměnovitě např. kontrola broken linků nebo aktivace analytických nástrojů Google Analytics a Google Search Console).

A nyní? Teď už nezbývá nic jiného, než se pustit do plnění dlouhodobých cílu v optimalizaci pro vyhledávače a správě PPC kampaní tak, jak bylo zamýšleno od počátku.