HTML, zkratka pro HyperText Markup Language, je textovým značkovacím jazykem používaným pro tvorbu webových stránek a popis strukturovaných dokumentů. Jak bude taková webová stránka vypadat, tedy jak ji prohlížeč zobrazí uživateli na jeho klientském počítači, určují tzv. HTML tagy (značky) a prvky – základní stavební kameny celého HTML.
HTML se často chybně označuje jako programovací jazyk, ale do této skupiny skutečně nepatří. Neumožňuje totiž vytvářet dynamické funkce, resp. webové aplikace. Jak bylo zmíněno výše, řadíme jej mezi značkovací jazyky.
Co to jsou HTML tagy a HTML prvky
HTML tagem rozumíme slovo nebo také pouze písmeno uzavřené špičatými závorkami, které používáme k tvorbě HTML kódu, např. <a>. To v praxi znamená, že HTML tagy určují smysl a vzhled webové stránky.
Ve většině případů se HTML tagy objevují ve dvojicích – jako počáteční a koncové značky. Ty pak označujeme jako párové tagy. Počáteční a koncový tag se od sebe liší pouze tak, že koncový tag obsahuje navíc lomítko, např. </a>. Tato dvojice tagů společně s obsahem umístěným mezi nimi tvoří tzv. HTML prvek (nebo také HTML element).
HTML prvky mohou obsahovat také tzv. atributy, které ovlivňují jejich vlastnosti nebo vzhled a nacházejí se v počáteční značce. Např. u tagu <a> pro hypertextový odkaz se používá atribut href, který určuje, na jakou adresu URL daný odkaz vede. Koncová značka zůstává beze změny.
Jako nepárové tagy pak označujeme takové značky, které mají pouze jednu část, a to tu počáteční. Nejsou příliš časté, ale také se s nimi setkáte. Jako příklad lze jmenovat tag pro obrázek <img> nebo <br> pro zalomení řádku.
Dokument HTML se zpravidla skládá z hlavičky a těla, zjednodušeně vypadá nějak takto:
<html> <head> <title>Moje první stránka</title> </head> <body> <p>Toto je moje první webová stránka.</p> </body> </html>
Na příkladu vidíte, že všechny použité tagy, ze kterých je tento dokument poskládán, tedy <html>,<title>,<head>,<body> a <p> jsou v tomto případě párové.
HTML tagy a SEO
Přestože se HTML tagy skrývají v pozadí webové stránky a běžní uživatelé je nevyhledávají, mohou být velmi užitečné v oblasti SEO. Proč? Protože je tu někdo, kdo je čte za účelem získání klíčových informací – správně, vyhledávače.
Specifické HTML prvky totiž zvýrazňují ty části vašeho obsahu, které jsou pro vyhledávače relevantní. HTML tagy tedy pomáhají robotům vyhledávačů určit, o jakém tématu vaše webová stránka pojednává, aby ji vyhledávače mohly později zobrazit na stránce výsledků vyhledávání jako odpověď na určitý vyhledávací dotaz. Pojďme se tedy nyní podívat, které HTML tagy mají z hlediska SEO pro váš web největší smysl.
Title: Optimalizujte titulky
Titulek stránky, který se pod tagem title skrývá, je jedním z nejdůležitějších SEO faktorů. Zobrazuje se v SERPu společně s meta descriptionem a pomáhá vyhledávačům správně pochopit obsah stránky. Title by měl proto obsahovat relevantní klíčová slova, ale měl by být také dostatečně atraktivní pro uživatele. Jedině tak je přesvědčíte, aby vstoupili právě na vaši stránku a vy jste tak získali vytouženou návštěvnost. Optimalizace titulků se vám proto rozhodně vyplatí.
Meta description: Nezapomeňte na relevantní popisek
Meta tag description se stejně jako title zobrazuje ve výsledcích vyhledávání. Je jedinečným a stručným shrnutím obsahu stránky, z něhož čerpají vyhledávače i uživatelé. Přestože není hodnoticím faktorem, který hraje roli v algoritmu vyhledávačů, dobře napsaný meta description vám pomůže přesvědčit uživatele, aby se na vaši stránku proklikli. A to je přesně to, co potřebujete.
Nadpisy: Struktura textu je základ
Tagy nadpisů se používají ke strukturování obsahu vaší webové stránky tak, aby se snadno četl vyhledávačům i uživatelům. Uživatelé obvykle tráví na stránce pouze několik sekund a pokud během nich nenajdou to, co hledají, tak stránku opouštějí. Pomocí nadpisů jim nabídnete záchytné body a snadněji je tak zaujmete.
Existuje 6 úrovní nadpisů, které se značí jako H1–H6. H1 je nejdůležitější, resp. název webové stránky, H6 je pak nejméně důležitý nadpis. V běžné praxi potřebujete jít jen zřídkakdy pod úroveň H3, aby text nebyl s tolika úrovněmi nadpisů matoucí.
Alternativní text: Co je na obrázku?
Cílem alternativního textu je pomoci návštěvníkům i vyhledávačům pochopit, co se nachází na daném obrázku. To je potřeba především u zrakově handicapovaných uživatelů nebo právě u vyhledávačů, které ani nemají jinou možnost, jak identifikovat, co obrázek znázorňuje.
Strukturovaná data: Buďte v SERPu vidět
Strukturovaná data pomáhají vyhledávačům lépe pochopit obsah vaší webové stránky a tím také mohou pomoci lepšímu zobrazování vaší stránky v SERPu. Úryvky na stránce s výsledky vyhledávání se pak zobrazují obohacené například o hodnocení ve formě hvězdiček nebo další funkce. Není prokázáno, že mají strukturovaná data vliv na lepší pozice v SERPu, ale pro uživatele vypadají daleko atraktivněji. Zvyšují tak šanci, že se právě na váš web návštěvníci prokliknou.
Robots: Nastavte robotům pravidla
Meta tag robots umožňuje majitelům webových stránek nastavit určitá pravidla pro procházení a indexování svých stránek. Můžete například robotům zakázat procházet nebo indexovat některé stránky – dokumenty, duplicitní stránky a cokoliv dalšího, co nechcete, aby se zobrazovalo ve vyhledávání. K nastavení pravidel se používají různé parametry, jako například nofollow nebo noindex.
Canonical: Nebojte se duplicitního obsahu
Kanonizace je velmi užitečná, máte-li obavu z duplicitního obsahu. Pokud existuje více verzí jedné stránky, tag canonical určuje, která z verzí je tou hlavní, tj. originální verzí. Tím také říká vyhledávačům, kterou stránku mají zobrazovat v SERPu a zabraňuje tak potížím s duplicitním obsahem.
Pokud kanonický odkaz vede na stránku, na které se nachází, nazýváme jej jako self-referencing canonical.
Nofollow: Linkbuilding efektivně
Atribut nofollow jsme zmínili v souvislosti s meta tagem robots, ale užitečný je i při budování odkazů. Prostřednictvím nofollow řeknete vyhledávačům, aby nenásledovaly odchozí odkaz a ignorovaly jej. To se používá ve chvíli, kdy chcete odkázat na externí stránku, ale nechcete jí předat hodnocení, resp. sílu vlastní stránky.
Podrobnou definici a souvislost HTML tagu se SEO naleznete v obsáhlém článku HTML tagy: definice a souvislost se SEO.
Autor: SEOPRAKTICKY.CZ
Použité zdroje
- What are HTML tags? – Code Institute Global. [online]. Dostupné z: https://codeinstitute.net/global/blog/what-are-html-tags/
- The Best Guide to HTML Tags. Simplilearn | Online Courses – Bootcamp & Certification Platform [online]. Copyright © 2009 [cit. 11.04.2023]. Dostupné z: https://www.simplilearn.com/tutorials/html-tutorial/html-tags
- What Is HTML? Hypertext Markup Language Basics Explained. Hostinger Tutorials. Dostupné z: https://www.hostinger.com/tutorials/what-is-html
- What is the Difference between HTML Elements and Tags? – Scaler Topics. [online]. Dostupné z: https://www.scaler.com/topics/difference-between-html-elements-and-tags/
- Základy HTML, jak na HTML. Jak psát web, návod na html stránky [online]. Copyright © se do zdroje zadávají jako posloupnost znaků [cit. 11.04.2023]. Dostupné z: https://www.jakpsatweb.cz/zaklady-html.html
- 8 of the Most Important HTML Tags for SEO | Social Media Today. Social Media News | Social Media Today [online]. Copyright © 2023 [cit. 11.04.2023]. Dostupné z: https://www.socialmediatoday.com/news/8-of-the-most-important-html-tags-for-seo/574987/
- The 15 Most Important HTML Tags You Need to Know for SEO. GreenGeeks® | Fast, Secure and Eco-friendly Hosting [online]. Copyright © 2008 [cit. 11.04.2023]. Dostupné z: https://www.greengeeks.com/blog/html-tags-for-seo/
- Canonical | SEOPRAKTICKY.cz. Dělám SEO! ⭐ Reálné výsledky optimalizace stránek | SEOPRAKTICKY.cz [online]. Copyright © Moz, Inc. All rights reserved. [cit. 11.04.2023]. Dostupné z: https://www.seoprakticky.cz/slovnik-pojmu/canonical/
- HTML Attributes. W3Schools Online Web Tutorials [online]. Dostupné z: https://www.w3schools.com/html/html_attributes.asp
