Webové stránky má dnes každá firma, neunikají vám však příležitosti díky nedostatečné technické kvalitě? Tahle šablona je zaměřená hlavně na obsahové weby a e-shopy. Pomůže kodérům na frontendu, webovým vývojářům i designérům projít všemi důležitými kroky.
Doporučujeme projít celý checklist na webu Vzhůru dolů od Martina Michálka. Pro obecnou automatickou kontrolu webu se hodí nástroje:
Ukázka veřejné šablony ve Freelu
Použij tuto šablonu ve svém Freelu
= Obsah a HTML
Správný <meta viewport> ★★★
- „Meta viewport“ zařídí správné zobrazování responzivního webu v mobilních prohlížečích.
- Důležité je nezakazovat zoomování.
Správný <title> a <meta description> ★★★
- Mají vliv na umístění ve vyhledávačích, hlavně .
- Jsou potřeba pro náhled stránky ve výsledcích vyhledávání nebo na sociálních sítích.
Osnova nadpisů je v pořádku ★★☆
- Stromová struktura (outline) nadpisů , atd. má odrážet strukturu dokumentu. Usnadní indexaci vyhledávači a prohlížení stránky zrakově postiženými.
- Prohlédněte si DOM, využijte HTML5 outliner.
Náhledy pro sociální sítě a chaty ★★☆
- Doplňte meta značky pro Facebook Open Graph, Twitter Cards a další. Mají potenciál zvýšit návštěvnost webu, protože vytvářejí hezký náhled webu na sociálních sítích.
- Důležitý je hlavně obrázek.
- Nástroje pro kontrolu: Facebook Debugger, Twitter Validator, MetaTags.io.
Strukturovaná data pro Google ★★☆
- „Rich Snippets“ usnadňují nahrání informací, například o struktuře produktů e-shopu a vylepší náhled webu ve výsledcích vyhledávání.
- Je to podstatné hlavně u e-shopů a webů, které obsahují recenze nebo události.
- Tester Google Structured Data Testing Tool.
Odkazy z webu ven jsou platné ★★☆
- Vyhněte se chybám 404 při procházení vašeho webu.
- Pro kontrolu jednotlivých stránek použijte třeba Dead Link Checker nebo Xenu.
Ikony webu a favikony ★★☆
- Favikony identifikují web v bookmarcích nebo v seznamu aplikací na mobilech i desktopu.
- Generátor: RealFaviconGenerator.net.
Validní HTML ★☆☆
- Hlídejte si validitu kvůli potenciálním chybám v indexaci vyhledávači. Lpí na tom i někteří klienti, tak proč si kazit renomé.
- Nástroje: Český validátor, W3 validátor.
Obsah bez typografických chyb ★☆☆
- Text bez chyb zajistí lepší čitelnost obsahu. Profíci jsou na to citliví. Dohlédněte alespoň na ty nejpodstatnější.
- Nástroj pro odstraňování chyb: Typopo.org.
= Přístupnost
Struktura dokumentu: WAI-ARIA oblasti a HTML5 elementy ★★★
- Správná struktura umožní zrakově postiženým strukturované procházení, což jim šetří čas. Stačí přidat „role“ pro navigaci, obsah a třeba vyhledávání.
Procházení stránky tabulátorem ★★☆
- Zkuste sekvenční procházení stránky tabulátorem a jinými klávesami. Kromě zrakově postižených to ocení i pokročilí uživatelé, využívající klávesnici.
Hlavní obsah a navigace jsou dostupné i bez JavaScriptu ★★☆
- Většina robotů nezvládne indexovat obsah vytvořený JavaScriptem. Googlebot jej do jisté míry zvládá, ale je lepší na to nespoléhat.
- Testujte to vypnutím JavaScriptu v Developer Tools.
Správné typy inputů ve formulářích ★★☆
- a nové typy formulářů usnadňují zadávání obsahu na mobilních zařízeních.
- Je to užitečné naprosto pro všechny uživatele.
Barevný kontrast je dostatečný ★★☆
- Ocení nejen zrakově postižení, ale také majitelé horších displejů. Prakticky každý při horších světelných podmínkách na mobilech.
Multimédia mají textovou alternativu ★★☆
- Obrázkům doplňte smysluplný popisek do atributu alt, používejte značku .
= Design webu
Požadovaná rychlost webu ★★★
- Jděte na PageSpeed.cz, změřte si konkurenci a snažte se být rychlejší než ona.
- Testujte všechny důležité vstupní šablony.
- Sledujte hlavně metriky Web Vitals od uživatelů.
Web je přátelský k mobilním uživatelům ★★★
- Pomůže test Mobile Friendly od Googlu.
Grafika podporuje HD displeje typu Retina ★★★
- Obyčejná grafika nebude na vysokokapacitních displejích vypadat dobře.
- V praxi potřebujete SVG, případně také atribut srcset.
Šablony pro chybové stránky 404 a 50x ★★★
- Navrhněte a implementujte vlastní.
- Výchozí chybovky serverových frameworků nebo serverů návštěvníkovi nepomohou.
= Prohlížeče a kompatibilita
Plné zobrazení napříč prohlížeči a zařízeními ★★★
- Internet Explorer už snad podporovat nemusíte a mezi moderními prohlížeči tolik rozdílů není.
- Pomohou nástroje jako Browserstack.
- Nezapomeňte ošetřit i chytré hodinky.
Tisková verze stránky ★★☆
- Je potřeba hlavně zajistit nezobrazování částí nezajímavých pro tisk jako jsou ovládací prvky webu.
Zobrazení s blokovači reklamy ★★☆
- Testujte se zapnutými blokovači.
- Otestujte web se zapnutým AdBlockem.
Dostupnost hlavního obsahu ve starších prohlížečích ★☆☆
- Záleží to na projektu a cílové skupině.
- Ve starších prohlížečích web nemusí vypadat jako z reklamy, důležitá je ale čitelnost hlavního obsahu a dostupnost navigace.
Stránka je v pořádku bez CSS ★☆☆
- Verze pro čtečky a další kontexty, které nepoužívají vaše CSS.
= Kvalita kódu: dokumentace a testy
Kód dodržuje konvenci ★★☆
- Konvence usnadňuje sdílení nebo předávání kódu.
Kvalita kódu v požadované úrovni ★★☆
- Automatická kontrola častých chyb nebo problematických konstrukcí kódu. Lze využít například ESLint v CSS pak Stylelint.
- Ve všech jazycích autoformátovač Prettier.
Javascriptový kód je pokrytý testy ★★☆
- Javascript není CSS a tak se nějaké ty testy hodí.
Měření runtime chyb v JS kódu ★★☆
- Ujistěte se, že víte o chybách, které uživatelům vrací váš frontendový kód. Zamezte tomu, aby prohlížeč do konzole vypisoval chyby.
- Z možností sledování vybíráme např. Technical Dashboard v Google Analytics nebo Sentry.
Funkční testování ★★☆
- Fungují kritické části webu i když ho necháte běžet?
- Pomůže třeba Selenium nebo nástroje vycházející ze standardu Webdriver.
Kód je v produkční kvalitě ★★☆
- Je minifikovaný a neobsahuje zbytečná data.
README.md ★☆☆
- V tomto souboru je v repozitáři popsána instalace, buildování atd.
= Spuštění webu
Web běží na HTTPS ★★★
- Bez bezpečného protokolu se s vámi už nikdo (myšleno vyhledávače) nebude chtít kamarádit.
Web běží na HTTP/2 ★★★
- HTTP/2 pozitivně ovlivňuje rychlost, zvažte také nejnovější HTTP/3.
Není zakázaná indexace vyhledávači ★★★
- Mrkněte se do robots.txt nebo na .
- Obvykle indexaci při spuštění webu zakazovat nechcete, ale často se na to zapomíná.
Vývojářské soubory nejsou na produkci ★★★
- Hlavně adresáře typu .git/, node_modules/, zapomenutý ZIP s obsahem databáze nebo třeba veřejně přístupný Adminer či phpMyAdmin.
Přesměrování ze starých adres ★★★
- Pokud se mění URL, musíte přesměrovat ze starých na nová.
- Jakmile by stará URL vracela chybu 404, vyhledávače na ta nová nepředají tzv. „link juice“ hodnocení adresy získané z dřívějška.
- Na staré adrese vracejte kód 301 a přesměrujte na novou.
Přidání a konfigurace Google Analytics ★★★
- Obchodní výkonnost webu všechny zajímá, nezapomněli jste nastavit měření?
- Alternativně přidejte kód Google Tag Managera, marketéři si přes potřebné kódy přidají.
Registrace v nástrojích pro webmastery ★★☆
- Pravidelně upozorní na časté chyby z pohledu vyhledávačů.
- Nejdůležitější je Google Search Console: Přidejte tam web hned po spuštění. A pak samozřejmě Seznam Webmaster.
- Pro zahraniční weby také například Bing Webmaster Tools.
Správně nastavené hlavičky ze serveru ★★☆
- REDbot.org vysvětluje nastavení vašeho serveru: gzipování, kešovací hlavičky…
- Hodí se hlavně zkontrolovat na hostingu, který neprovozujete sami.
Správně nastavené bezpečnostní hlavičky ★★☆
- SecurityHeaders.io udělá alespoň základní audit té části serverové hlavičky, kterou můžete usnadňovat různé typy útoků.
- Např. X-Frame-Options nebo Content-Security-Policy.
Přidali jsme robots.txt, humans.txt a security.txt ★★☆
- Roboty, jen pokud potřebujete výslovně změnit něco kolem indexování.
- Lidi hlavně pro radost.
- Security jako kontakt pro hlášení průšvihů, než jsou z nich megaprůšvihy.
Máme sitemap.xml ★★☆
- Usnadňuje indexování vyhledávači. Hlavně pro větší weby nebo weby s komplikovanou strukturou.