Když text zvětšíte, obarvíte a uděláte tučně, ještě z něj není nadpis. Opticky to tak může vypadat, ale vyhledávače čtou HTML kód, kam patří pouze zápis <h1> až <h6>.

Nadpisy H1 až H6 určují, jak spolu souvisejí jednotlivé části obsahu. H1 pojmenovává hlavní téma stránky, H2 její hlavní části a H3 podrobnější témata uvnitř těchto částí. Na běžné detailové stránce Shoptetu už hlavní H1 vzniká z názvu produktu, kategorie, článku nebo stránky. Do popisku ji proto znovu nevkládejte. Začněte užitečným úvodem a další obsah podle potřeby rozdělte pomocí H2 a H3.

Zdánlivá drobnost, jenže právě tady se potkává SEO a čitelnost obsahu. Správně zvolené HTML nadpisy pomáhají člověku najít odpověď a technologiím rozpoznat strukturu stránky. Nemusíte se kvůli tomu učit programovat. Stačí přestat vybírat nadpis podle toho, který má zrovna nejhezčí velikost písma.

Jak na nadpisy H1 až H6 z hlediska SEO a HTML pravidel (Autor článku: Tomáš Zahálka)

Co znamenají nadpisy H1 až H6 a k čemu slouží?

Písmeno H pochází z anglického heading, tedy nadpis. HTML rozlišuje úrovně H1 až H6. Číslo označuje místo v hierarchii, nikoliv velikost písma nebo pořadové číslo nadpisu v článku.

Nadpisová struktura organizuje jednu stránku, informační architektura vztahy mezi stránkami. Kategorie, podkategorie, produkty a interní odkazy tvoří širší strukturu e-shopu. H2 uvnitř popisku nevytvoří novou kategorii ani samostatnou vstupní stránku. Tato témata spolu souvisejí, ale přepsáním všech mezititulků na H2 neopravíte špatně navržené menu a strukturu webu tzv. (IA).

Návod jak na nadpisy H1 až H6 hlediska SEO na Shoptetu

Jak vzniká nadpis H1 na Shoptetu?

Na standardním detailu Shoptetu představuje H1 název daného obsahu. U produktu jde o název produktu, u kategorie o její název a u článku nebo informační stránky o příslušný název. U individuálně upravené šablony si vždy ověřte skutečný výstup stránky, protože úpravy mohou chování změnit.

Častou chybu vídáme zkopírováním kompletního článku z AI do editoru. Název příspěvku už stojí nad textem jako H1 a vložený text začne další H1 se stejným názvem. Zákazník tak čte titulek dvakrát a osnova zbytečně obsahuje dvě hlavní témata, přestože jde o totéž. Z textu určeného do popisku duplicitní název odstraňte; nestačí pokaždé jen změnit jeho značku na H2.

Konkrétní H1 si můžete prohlédnout v článku Damano o porcování kuřete. Název článku je v HTML označený jako H1. Samotný text začíná úvodním odstavcem, nikoliv zopakováním názvu v další H1.

Ukázka nadpisu H1 na Shoptetu u klienta Damano

Proč doporučuji pod hlavním nadpisem nejdřív krátký odstavec?

U článků a popisků doporučuji nejprve stručně vysvětlit, co čtenář nebo zákazník dostává. Teprve potom obsah rozdělujte na jednotlivá témata. Článek uvede problém a základní odpověď, kategorie představí nabídku a produktový popis řekne, o jaký výrobek jde a k čemu slouží.

Úvod nemusí být dlouhý, ale má čtenáře uvést do tématu. V článku BUSHCRAFTshopu o šátcích nejdřív vysvětluje, proč má smysl tento doplněk do výbavy zařadit. Na Zeleku zase úvod vymezí problém kvetení a následně představí, čemu se text bude věnovat. Teprve potom přichází obsah s odkazy na kapitoly.

Vadí nadpis na začátku popisku Google Merchant Center?

V Google Merchant Center existuje chyba „Description text too short“ — příliš krátký popis. Ta se často objevuje, pokud místo popisku produktu začnete tvořit obsah obrázkem, logem, nebo krátkým nadpisem. Popisek produktu začínejte textovým popiskem bez ručního nadpisu.

PPC pro Shoptet e-shopy už od 10 000 Kč měsíčně (PPC tým: Tomáš Zahálka)

Jak správně řadit nadpisy H2, H3, H4 a další úrovně?

Každá nižší úroveň rozvíjí téma nadřazeného nadpisu. H2 otevře hlavní kapitolu, H3 její dílčí téma a H4 detail uvnitř H3. Při zanořování se vyhýbejte skoku z H2 rovnou na H4. Návrat z H4 na H2 je naopak v pořádku: ukončujete předchozí větev a začínáte novou kapitolu.

Rozdíl mezi hlavní kapitolou a jejím podtématem dobře vysvětlí část článku Zeleko věnovaná skupinám rostlin. Společná kapitola má H2 a pod ní jsou rozlišené jednotlivé skupiny. V HTML stránky jsou ale jejich názvy při kontrole označené jako H4. Pro plynulou hierarchii bych je změnil na H3.

<h2>U kterých rostlin má podpora květů a plodů význam?</h2>
<p>Úvod ke skupinám rostlin, kterým se tato kapitola věnuje.</p>

<h3>Balkonové a okrasné květiny</h3>
<p>Obsah věnovaný této skupině.</p>

<h3>Plodová zelenina</h3>
<p>Obsah věnovaný této skupině.</p>

<h3>Ovocné stromy, keře a drobné ovoce</h3>
<p>Obsah věnovaný této skupině.</p>

Stejně dobře může článek fungovat s řadou rovnocenných H2 bez dalších podúrovní. V návodu Damano tvoří jednotlivé kroky porcování samostatné H2. Jejich číslování vyjadřuje pořadí práce, nikoliv úroveň HTML nadpisu. Druhý krok proto nemusí být H3 a třetí H4.

Znamenají H4 až H6 méně důležité informace?

Nižší úroveň znamená hlubší členění, nikoliv nedůležitost obsahu. Technický detail pod H4 může být pro správný výběr výrobku zásadní. Do H4 jej ale zařadíte proto, že rozvíjí konkrétní H3, ne proto, že chcete menší písmo. U běžného e-shopového článku nebo popisku zpravidla vystačíte s mělčí osnovou.

Také popisek tabulky nemusí být samostatný nadpis. Jestli jen pojmenovává tabulku, je pro něj v HTML určen prvek caption. Pokud otevírá skutečnou sekci s vysvětlením a tabulkou, může být nadpis namístě.

Ukázka kde ve WYSIWYG editoru na Shoptetu nastavit nadpisy

Co psát do nadpisů, aby pomáhaly čtenářům i SEO?

Nadpis má pojmenovat téma části, která pod ním skutečně následuje. Vycházejte z jazyka zákazníků, klíčových slov a otázek, na které odpovídáte. Nemusí přitom každý nadpis opakovat hlavní frázi článku. Například nadpis H2 „Jaký nůž je nejlepší na porcování kuřete?“ na článku z e-shopu Damano.cz říká čtenáři přesně, jakou odpověď v této části najde a díky tomu to pochopí i vyhledávače a AI nástroje.

• Produktová H1: pojmenujte výrobek, model, materiál, barvu a vlastnosti produktu.
• Kategorie: použijte srozumitelné označení sortimentu, například „Jezírkové bakterie“.
• Poradenský článek: hodí se na konkrétní problém, který má podpořit kategorie a produkty
• Mezititulky: rozdělte téma podle rozhodování zákazníka, parametrů, použití nebo jednotlivých kroků.

Kolik nadpisů má mít článek a jak mají být dlouhé?

U kratšího článku mi jako výchozí osnova často stačí dvě až tři H2 a podle potřeby několik H3. Je to moje pracovní doporučení, nikoliv limit pro indexaci do vyhledávače. Rozsáhlý průvodce potřebuje hlavních oddílů více. Dobře je to vidět na článku BUSHCRAFTshopu, kde samostatné H2 rozlišují různé situace a způsoby použití šátku. Naopak krátký popisek nemusíte rozsekat nadpisem před každou větou. Počet se má přizpůsobit obsahu, ne požadovanému skóre nějakého pseudo SEO auditu.

Pro H1 neexistuje v HTML pevný znakový limit, po jehož překročení by nadpis přestal fungovat. Délku posuzujte podle výstižnosti a čitelnosti, včetně zobrazení na mobilu. Podnadpis má oznámit téma, ne odvyprávět celý odstavec. Název produktu ale uměle nezkracujte, chce to trochu citu.

SEO pro Shoptet e-shopy už od 15 000 Kč měsíčně (SEO tým: Tomáš Zahálka)

Jaký je rozdíl mezi H1 a Title na Shoptetu?

H1 je nadpis viditelný v obsahu stránky, title je samostatný titulek v HTML hlavičce. Title využívá prohlížeč pro záložku a Google jako jeden z podkladů pro název výsledku.

Na Shoptetu často vznikají H1 i title ze stejného názvu, nejde však o jeden společný HTML prvek. Pokud používáte doplněk Základní SEO a v něm proměnnou #TITLE#, u produktů #PRODUCT_NAME#, což doporučuji takto nastavit, tak se vám automaticky do Titlu stránky použije nadpis H1 a máte spousty hodin s nastavování ušetřené. Tedy pokud použijete správný název článku, produktu a kategorie. Jen pozor, individuálně vyplněný Title má před globálním nastavením vždy přednost.

Přejmenování kategorie proto může změnit také její automaticky generovaný title. Před úpravou se podívejte do SEO nastavení. Pokud je titulek vyplněný ručně, samotnou změnou názvu se naopak Title nebude automaticky aktualizovat a naopak může být v rozporu s vaším nadpisem H1.

Meta tagy – Základní SEO – Proměnné pro Title čerpající z H1

Jak vybrat nadpis v editoru Shoptetu?

V textovém editoru zvolte formát nadpisu. Klikněte do příslušného řádku a v nabídce formátů vyberte Nadpis 2, Nadpis 3 nebo další odpovídající úroveň, kterou potřebujete.

Nevyrábějte nadpis jen zvětšením odstavce, kurzívou a ručním obarvením. A nevybírejte H4 pouze proto, že H2 působí moc velká. Nejdřív zvolte úroveň podle významu, potom řešte vzhled.

Jak upravit nadpisy pomocí CSS?

CSS neboli kaskádové styly určují vzhled nadpisů napříč webem. Kodér může nastavit velikost, barvu, font písma, řádkování i mezery. Styly lze cílit na články, kategorie nebo konkrétní obsahový blok. Není proto nutné ručně přebarvovat každý nadpis v každém článku.

Shoptet podporuje připojení vlastního CSS souboru, který lze nahrát přes FTP. Samotné nahrání však nestačí: soubor je potřeba také načíst odkazem v HTML hlavičce.

Doporučuji vizuálně sestupnou a jednotnou hierarchii. H2 bývá výraznější než H3 a hlavní H1 má být snadno rozpoznatelná. S UX designérem hlídejte čitelnost, kontrast a mobilní zobrazení. Každý nadpis jiným fontem a barvou může vypadat roztomile, ale e-shop nejsou omalovánky.

UX designér, který z malých Shoptet e-shopů vytváří jedničky na trhu — Lukáš Dubina

Jak vytvořit obsah článku s kotvami na H2 a H3?

Kotva umožní čtenáři přeskočit přímo na vybranou část článku. Pod krátký úvod, případně úvodní obrázek, můžete přidat seznam „Co v článku najdete“. Já běžně vybírám H2 a podle potřeby důležité H3.

Cílový nadpis dostane jedinečný atribut id a odkaz použije stejnou hodnotu za znakem #.

Fungování kotvy si můžete rovnou vyzkoušet na BUSHCRAFTshop.cz v části o ochraně před chladem. Cílová H2 má atribut id="chlad" a položka obsahu odkazuje na #chlad. Zjednodušená ukázka zachovává tento skutečný nadpis a jeho identifikátor:

<p><strong>Co v článku najdete:</strong></p>
<ul>
  <li><a href="#chlad">Ochrana před chladem</a></li>
</ul>

<h2 id="chlad">Jak chránit krk a hlavu ve větru a chladu?</h2>
<p>Obsah věnovaný této situaci.</p>

Ukázka kotev pro nadpisy klienta Damano u článku: Jak připravit sýrové prkénko?

Jak nadpisovou strukturu zkontrolovat před publikací?

Každý článek, kategorie či popisek produktu si důkladně před publikací projděte a odkontrolujte, zda máte smysluplně vymyšlenou architekturu podnadpisů. Pokud vám individuální úprava Shoptet šablony způsobuje, že nadpis H2 je vizuálně menší než nadpis H4, kontaktujte svého UX specialistu.

• Hlavní téma: je jasné, o jaký produkt, kategorii nebo článek jde?
• Duplicitní název: nezůstala v popisku další H1 z kopírovaného textu?
• Úvod: dozví se zákazník něco užitečného, nebo jen znovu čte název?
• Logika osnovy: patří H3 pod předchozí H2 a nevybíráte úroveň podle velikosti písma?
• Skutečné nadpisy: nejsou to jen obarvené odstavce nebo obrázky s textem?
• Prázdné značky: nezůstaly v kódu prázdné nadpisy používané jako mezery?
• Title: odpovídá názvu a víte, jestli se generuje automaticky, nebo je vyplněný ručně?
• Kotvy: vedou na správná místa a neopakují se jejich id?
• Vzhled: jsou nadpisy čitelné a jednotné také na mobilu?

Marketingové konzultace a audity pro Shoptet e-shopy už od 5 000 Kč (Autor: Tomáš Zahálka)

Nadpisy mají čtenáře vést a upoutat pozornost!

Začněte jedním jasným tématem a obsah rozdělte podle toho, co zákazník potřebuje zjistit. Název nechte šabloně, v popisku pracujte hlavně s H2 a H3 a vzhled svěřte společným stylům. Když si člověk přečte jen nadpisy, měl by alespoň přibližně poznat, co mu obsah nabídne. Pokud z nich vyčte jen „Úvod“, „Informace“, „Další informace“ a „Závěr“, máte prostor na zlepšení a optimalizaci.

Tak nezahálejte, používejte nadpisy H1 až H6 logicky a ať i vám e-shopy rostou – Celý seriál zde.