Kotevní odkazy: jak vytvořit odkazy na sekce v HTML a ve vašem CMS a co dělají pro SEO

Rychlý kvíz

Jak získat odkazy z jiných webů?

Otázka 1 z 425%

Má váš web už užitečný obsah?

Velmi máloPár dobrých stránekHodně článků a průvodců

Kotevní odkaz, nazývaný také skokový odkaz nebo kotva odkazu, patří k nejstarším funkcím HTML a u dlouhého obsahu je jednou z nejužitečnějších. Čtenář může přeskočit přímo k odpovědi, kterou hledá, místo aby listoval. Google sám bere odkazy jako klíčový signál o vztazích mezi stránkami a jeho osvědčené postupy pro odkazy zdůrazňují, že odkazy musí být skutečné prvky a s atributem href. Tento návod ukazuje, jak vytvořit kotevní odkazy v čistém HTML a v hlavních CMS, co dělají pro SEO a pro odpovědi AI a jak souvisejí s kotevním textem.

Co je kotevní odkaz?

Kotevní odkaz je hypertextový odkaz, jehož cílem je místo uvnitř stránky. Adresa končí znakem křížku následovaným identifikátorem, takzvaným fragmentem: example.com/guide#step-3. Když na něj někdo klikne, prohlížeč stránku načte (nebo na ní zůstane) a posune se k prvku, jehož id je step-3.

Existují tři běžná použití:

• Navigace na stejné stránce: obsah na začátku článku nebo odkaz „zpět nahoru“.
• Hluboké odkazy z jiné stránky: odkaz z jednoho článku na přesnou část jiného, například na definici v glosáři.
• Sdílení přesné pasáže: poslání kolegovi rovnou k odstavci, který odpovídá na jeho otázku.

Vyhledávače považují example.com/guide a example.com/guide#step-3 za tutéž stránku. Fragment nikdy nevytváří novou URL k indexaci, takže kotevní odkazy nemohou způsobit duplicitní obsah.

Jak vytvořit kotevní odkaz v HTML?

Stačí dva kusy kódu: id u cíle a odkaz, který na něj ukazuje.

1. Přidejte cíli id: <h2 id="pricing">Ceník</h2>. Používejte malá písmena, číslice a pomlčky bez mezer a každé id musí být na stránce jedinečné.
2. Odkažte na něj na stejné stránce: <a href="#pricing">Zobrazit ceník</a>.
3. Odkažte na něj z jiné stránky: <a href="/guide#pricing">Sekce s cenami v průvodci</a>.
4. Otestujte to: klikněte na odkaz a zkontrolujte, že se nadpis zobrazí nahoře na obrazovce a není schovaný pod pevnou hlavičkou (vlastnost CSS scroll-margin-top to opraví).

Starý způsob, <a name="pricing"></a>, prohlížeče stále podporují, ale v HTML5 je zastaralý. Použijte id přímo na nadpisu. Související funkce, textové fragmenty, umožňují zvýraznit pasáž bez jakéhokoli id, se syntaxí #:~:text=, jak ji popisuje MDN. Google tento mechanismus používá, když návštěvníka posune k pasáži citované v některých výňatcích (featured snippets).

Jak přidat kotevní odkazy do WordPressu, Shopify, Webflow nebo Wixu?

Každé hlavní CMS umožňuje nastavit id bez zásahu do šablony. Název pole se u jednotlivých nástrojů liší.

Pokud vaše CMS generuje id automaticky, zkontrolujte je: některé je tvoří z celého textu nadpisu, což vede k dlouhým a nestabilním fragmentům, které se rozbijí, když titulek upravíte.

Pomáhají kotevní odkazy SEO?

Kotevní odkazy jsou především funkce pro uživatele. Jejich přínos pro SEO je nepřímý, ale u dlouhého obsahu je skutečný:

• Odkazy „přejít na“ ve výsledcích: u dlouhých a dobře strukturovaných stránek Google někdy pod výsledkem zobrazí odkazy na sekce, což může zvýšit viditelnost a počet prokliků. O tom, kdy je zobrazí, rozhoduje Google.
• Lepší přiřazení pasáží: jasné nadpisy s id pomáhají vyhledávačům a asistentům AI najít přesnou odpověď uvnitř dlouhé stránky, stejná logika, na které stojí featured snippet.
• Zapojení čtenářů: přehled obsahu umožňuje dostat se rovnou k části, kterou čtenář potřebuje, místo aby hledal jinde.
• Přístupnost: přeskakovací odkazy a navigace uvnitř stránky pomáhají uživatelům klávesnice a čteček obrazovky, na což navazují pokyny W3C pro přístupnost.
• Přesné interní odkazy: odkaz na #definition v jiném článku vede čtenáře přesně na danou pasáž a posiluje vaše interní prolinkování.

Co kotevní odkazy nedělají: nepřenášejí stránce další autoritu, protože odkaz na stránka#sekce se počítá jako odkaz na stránku, a nenahrazují kvalitní obsah. Jedno technické varování vychází přímo ze základů SEO pro JavaScript od Googlu: nepoužívejte fragmenty k načítání jiného obsahu stránky, protože Googlebot tyto adresy spolehlivě nezvládne. Fragmenty používejte jen k posunu uvnitř obsahu, který je už na stránce.

Jaký je rozdíl mezi kotevním odkazem a kotevním textem?

Oba pojmy si jsou podobné a často se pletou. Kotevní odkaz říká, kam odkaz vede (na sekci). Kotevní text říká, jak odkaz zní (klikatelná slova). Naše heslo ve glosáři o kotevním textu rozebírá druhé téma podrobně.

Jaké jsou osvědčené postupy pro kotevní odkazy a jejich text?

Každý kotevní odkaz má také kotevní text, takže se uplatní obě sady pravidel současně.

• Krátká, čitelná id: #pricing, #how-to-install, nikoli #section-1 ani dvanáctislovný fragment.
• Popisný text odkazu: Google doporučuje text, který je popisný, přiměřeně stručný a relevantní, a varuje před obecnými formulacemi typu „klikněte zde“.
• Přehled obsahu na dlouhých stránkách: u textů delších zhruba než 1500 slov uveďte nahoře seznam sekcí H2, každou propojenou s jejím id.
• Nadpisy formou otázek: nadpisy formulované jako otázky, které lidé kladou, dělají odkazy na sekce užitečnějšími a snáze citovatelnými.
• Stabilní id: po zveřejnění neměňte id, pokud na něj odkazují jiné stránky nebo weby.
• Kontrola struktury: analyzátor struktury nadpisů ukáže, zda jsou úrovně H2 a H3 v pořádku, dřív než přidáte kotvy.

Kterým chybám se vyhnout?

• Duplicitní id: dva prvky se stejným id způsobí, že odkaz skočí jen na první z nich.
• Skryté cíle: nadpis uvnitř zavřené karty nebo akordeonu nemusí být odkazem dosažitelný.
• Pevné hlavičky zakrývající nadpis: přidejte do CSS vlastnost scroll-margin-top.
• Směrování přes fragmenty: jednostránkové aplikace, které mění obsah adresami #/stranka, Google těžko prochází.
• Přeoptimalizovaný kotevní text: opakování stejného přesného klíčového slova v každém odkazu působí jako manipulace.

Závěr

Kotevní odkaz přesune čtenáře na přesnou sekci stránky pomocí fragmentu #id. Vytvoříte ho tak, že přidáte id nadpisu a odkážete na něj, v HTML nebo v nastavení svého CMS. Přínosy pro SEO jsou nepřímé, ale u dlouhého obsahu konkrétní: přehled obsahu, případné odkazy „přejít na“ v Googlu, jasnější pasáže pro odpovědi AI a lepší interní odkazy, pokud kotevní text zůstane popisný. Pokud nechcete strukturovat každý článek ručně, Sorank, náš software pro SEO a GEO v režimu autopilot, píše strukturované články s otázkovými nadpisy a interními odkazy a publikuje je ve vašem CMS: podívejte se na generátor článků pro blog s AI a vyzkoušejte ho s 3denní bezplatnou zkušební verzí.