Summary of HTML Semantics and Metadata Essentials

## Úvod Webová sémantika (Webová sémantika a metadata) se zabývá tím, jak zpřístupnit význam obsahu na webu strojům — vyhledávačům, asistentům, agregátorům i dalším aplikacím. Cílem je, aby počítače „rozuměly“ tomu, co stránky obsahují, a mohly s těmito informacemi efektivně pracovat. > Definice: „Metadata jsou strojově zpracovatelné informace o webových zdrojích nebo jiných objektech; data o datech.“ ## 1. Proč řešit sémantiku a metadata? - Lepší indexovatelnost obsahu vyhledávači (SEO) - Vyšší přístupnost pro asistivní technologie - Sdílení obsahu na sociálních sítích s bohatým náhledem - Možnost strojového zpracování, agregace a integrace dat ### Klíčové výhody - Přehlednější a udržovatelnější kód - Vyšší relevance ve výsledcích vyhledávání - Podpora pro hlasové asistenty a AI ## 2. Základní stavební kameny ### HTML5 sémantika - Strukturní elementy: **header, footer, main, nav, section, article, aside** - Použití: jasně oddělit hlavní obsah, navigaci a pomocné bloky Praktický příklad: <article itemscope itemtype="https://schema.org/Article"> <header> <h1 itemprop="headline">Název článku</h1> <time itemprop="datePublished" datetime="2020-01-01">1. 1. 2020</time> </header> <p itemprop="articleBody">Text článku...</p> </article> > Definice: HTML sémantika jsou elementy a atributy, které vyjadřují význam části obsahu (např. <main> jako hlavní obsah stránky). ### WAI-ARIA - Atributy: **role**, **aria-*** pro zlepšení přístupnosti dynamického obsahu - Použití ve spojení se sémantickými elementy pro asistivní technologie ## 3. Meta elementy v hlavičce - Základní: <meta charset="utf-8"/>, <meta name="viewport" content="width=device-width, initial-scale=1"/> - Popis: <meta name="description" content="Popis stránky"/> - Další: verifikace vlastnictví, ikony, odkazy na mobilní aplikace, generátor stránky ### Sociální sdílení - Open Graph (Facebook): property="og:title", "og:type", "og:url", "og:image" - Twitter/X Cards: name="twitter:card", "twitter:title", "twitter:site", "twitter:creator" Did you know that správně nastavené Open Graph tagy a Twitter Cards výrazně zvyšují míru prokliku při sdílení odkazu na sociálních sítích? ## 4. Formáty pro sémantická data Porovnání běžných formátů: | Formát | Kde se používá | Výhody | Nevýhody | | --- | --- | --- | --- | | JSON-LD | Vkládá se do <script type="application/ld+json"> | Nezasahuje do HTML toku, snadné generování | Potřeba správné JSON struktury | | RDFa | Atributy přímo v HTML (property, typeof, about) | Přímo v kontextu elementu | Může znepřehlednit HTML | | Microdata | itemscope, itemprop | Součást HTML5, přehledné pro jednoduché typy | Omezena na strukturu HTML | | Microformats | class-based (vevent, h-card) | Lidé čtou i strojově jednoduché případy | Omezené slovníky | ### JSON-LD - Doporučené Googlem pro strukturovaná data - Vložen v <script> bez zásahu do zbytku DOM ### RDF a RDF serializace - Resource Description Framework (RDF) – model popisu trojic subjekt–predikát–objekt - Serializace: RDF/XML, Turtle, RDF/JSON, JSON-LD > Definice: RDF je model pro popis zdrojů pomocí trojic (subjekt, predikát, objekt), který umožňuje linkovat data mezi systémy. ## 5. Slovníky a ontologie - Schema.org — široce používaná slovní zásoba pro popis objektů na webu (Article, Organization, Product,...) - Dublin Core — 15 elementů pro popis obecného digitálního objektu (title, creator, date, subject, ...) - Microformats — specializované, jednoduché vocabularies (h-card, h-event) Praktické použití schema.org s microdata: <article itemscope itemtype="https://schema.org/Article"> <h1 itemprop="headline">...</h1> <p itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">Autor</span></p> </article> ## 6. Microdata: atributy - itemscope — inicializuje objekt - itemtype — URI typu (např. https://schema.org/Article) - itemprop — vlastnost objektu - itemid, itemref — identifikátory a reference > Definice: Microdata jsou HTML atributy pro po