kostyl.dev
HTML & CSS

Мікророзмітка та SEO в HTML

Open Graph, Microdata, JSON-LD та Schema.org — як зробити сайт зрозумілим для пошукових роботів. Google Rich Results для статей, товарів, відео, подій та FAQ.

Мікророзмітка та SEO в HTML

Чому пошуковці не розуміють «звичайний» HTML

Уявіть, що ви шукаєте рецепт борщу. Google показує картку з фото, рейтингом 4.7 ⭐, часом приготування «55 хв» та калорійністю — ще до того, як ви перейшли на сайт. Звідки Google знає, що це рецепт? Що «4.7» — це рейтинг, а не ціна? Що «55 хв» — це приготування, а не доставка?

Відповідь — структуровані дані (Structured Data). Розробник явно описав вміст своєї сторінки машиночитабельною мовою, і Google її зрозумів.

Без структурованих даних пошуковий робот бачить:

"Борщ 4.7 55 хв 312 ккал"

З ними — розуміє:

Рецепт: "Борщ"
Рейтинг: 4.7/5 (87 відгуків)
Час готування: 55 хвилин
Калорійність: 312 ккал на порцію

<meta> для SEO та соцмереж

Базові мета-теги — перший крок до видимості у пошуку.

Стандартні SEO-теги

<head>
    <!-- Кодування — ЗАВЖДИ першим у <head> -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Заголовок: 50–60 символів, унікальний для кожної сторінки -->
    <title>Курс HTML для початківців — TechUA Academy</title>

    <!-- Опис: 120–160 символів. Відображається у видачі. -->
    <meta
        name="description"
        content="Вивчіть HTML з нуля за 4 тижні. Практичні завдання, живі приклади, сертифікат. Старт щопонеділка."
    />

    <!-- Роботи: дозволяємо або забороняємо індексацію -->
    <meta name="robots" content="index, follow" />
    <!-- Для сторінок, які не мають бути в пошуку: -->
    <!-- <meta name="robots" content="noindex, nofollow"> -->

    <!-- Автор сторінки -->
    <meta name="author" content="Іван Коваленко" />

    <!-- Колір панелі браузера на мобільних -->
    <meta name="theme-color" content="#4f46e5" />
    <meta name="theme-color" content="#312e81" media="(prefers-color-scheme: dark)" />
</head>

Open Graph — для соцмереж і месенджерів

Open Graph Protocol (розроблений Facebook) визначає вигляд посилання при поширенні у Facebook, Telegram, WhatsApp, Slack, Discord:

<head>
    <!-- Обов'язкові OG-теги -->
    <meta property="og:title" content="Курс HTML для початківців — TechUA Academy" />
    <meta property="og:description" content="Практичний курс: від першого тега до готового сайту. Старт щопонеділка." />
    <meta property="og:image" content="https://techua.com/images/og-course-html.jpg" />
    <!-- Зображення: рекомендований розмір 1200×630 px, мінімум 600×315 -->
    <meta property="og:url" content="https://techua.com/courses/html" />

    <!-- Тип: website, article, product, video.movie, book, profile -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="TechUA Academy" />
    <meta property="og:locale" content="uk_UA" />

    <!-- Для статті (og:type="article") -->
    <meta property="article:author" content="https://techua.com/authors/ivan" />
    <meta property="article:published_time" content="2024-11-20T09:00:00+02:00" />
    <meta property="article:modified_time" content="2024-11-25T14:30:00+02:00" />
    <meta property="article:section" content="HTML" />
    <meta property="article:tag" content="HTML" />
    <meta property="article:tag" content="Веб-розробка" />
</head>

Twitter Cards

Twitter (X) підтримує власний формат. Якщо OG-теги вже є — Twitter використає їх як резервні:

<head>
    <!-- summary: маленька кнопочка; summary_large_image: велике зображення вгорі -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@TechUA_Academy" />
    <meta name="twitter:creator" content="@ivan_koval" />
    <meta name="twitter:title" content="Курс HTML для початківців — TechUA Academy" />
    <meta name="twitter:description" content="Від першого тега до готового сайту. Практично." />
    <meta name="twitter:image" content="https://techua.com/images/og-course-html.jpg" />
    <meta name="twitter:image:alt" content="Скріншот курсу: код HTML в редакторі та результат у браузері" />
</head>
Перевіряйте OG-теги перед публікацією через opengraph.xyz або metatags.io — вони показують превью у різних соцмережах.

Schema.org: словник для машин

Schema.org — спільно розроблений Google, Microsoft, Yahoo та Яндексом словник для опису будь-яких сутностей: організацій, людей, товарів, подій, рецептів тощо.

Реалізується трьома способами:

JSON-LD

Рекомендовано Google. JSON у тегу <script type="application/ld+json">. Не пов'язаний з HTML-розміткою — легко генерується на сервері.

Microdata

Атрибути itemscope, itemtype, itemprop прямо в HTML-тегах. Розмітка злита з версткою — складніше підтримувати.

RDFa

Атрибути typeof, property у форматі RDF. Використовується рідко, здебільшого у наукових/академічних сайтах.

JSON-LD — Детальний розбір

Синтаксис

Вставляється у <head> або перед </body>. На одній сторінці може бути кілька <script type="application/ld+json">:

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Тип",
        "властивість": "значення"
    }
</script>

Organization — Опис організації

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "TechUA Academy",
        "url": "https://techua.com",
        "logo": {
            "@type": "ImageObject",
            "url": "https://techua.com/logo.png",
            "width": 300,
            "height": 80
        },
        "contactPoint": {
            "@type": "ContactPoint",
            "telephone": "+38-044-123-45-67",
            "contactType": "customer service",
            "areaServed": "UA",
            "availableLanguage": "Ukrainian"
        },
        "sameAs": [
            "https://www.facebook.com/TechUA",
            "https://twitter.com/TechUA_Academy",
            "https://www.youtube.com/@TechUA",
            "https://t.me/TechUA_Academy"
        ]
    }
</script>

Article — Стаття/публікація

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Article",
        "headline": "Семантичний HTML: Кращі практики 2024",
        "description": "Повний гід по семантичним елементам HTML5 для SEO та доступності.",
        "image": [
            "https://techua.com/images/semantic-html-1x1.jpg",
            "https://techua.com/images/semantic-html-4x3.jpg",
            "https://techua.com/images/semantic-html-16x9.jpg"
        ],
        "author": {
            "@type": "Person",
            "name": "Іван Коваленко",
            "url": "https://techua.com/authors/ivan"
        },
        "publisher": {
            "@type": "Organization",
            "name": "TechUA Academy",
            "logo": {
                "@type": "ImageObject",
                "url": "https://techua.com/logo.png"
            }
        },
        "datePublished": "2024-11-20T09:00:00+02:00",
        "dateModified": "2024-11-25T14:00:00+02:00",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https://techua.com/blog/semantic-html"
        }
    }
</script>
Google вимагає, щоб зображення для статті були у мінімум трьох співвідношеннях сторін (1:1, 4:3, 16:9) для відображення у різних форматах видачі.

BreadcrumbList — Хлібні крихти

Відображаються безпосередньо у рядку результатів Google замість URL:

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            {
                "@type": "ListItem",
                "position": 1,
                "name": "Головна",
                "item": "https://techua.com"
            },
            {
                "@type": "ListItem",
                "position": 2,
                "name": "Курси",
                "item": "https://techua.com/courses"
            },
            {
                "@type": "ListItem",
                "position": 3,
                "name": "HTML та CSS",
                "item": "https://techua.com/courses/html-css"
            },
            {
                "@type": "ListItem",
                "position": 4,
                "name": "Урок 6: Семантичний HTML"
            }
        ]
    }
</script>

Google Search Features (Rich Results)

Google використовує структуровані дані для створення розширених результатів — карток з додатковою інформацією прямо у видачі.

Потрапляє у вкладку «Відео» та отримує Key Moments (таймлайн) у загальному пошуку.

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "VideoObject",
        "name": "Урок 6: Семантичний HTML — TechUA",
        "description": "Розбір всіх семантичних елементів HTML5: header, main, article, section, aside, nav.",
        "thumbnailUrl": "https://techua.com/thumbnails/lesson-6.jpg",
        "uploadDate": "2024-11-10T10:00:00+02:00",
        "duration": "PT44M55S",
        "contentUrl": "https://cdn.techua.com/videos/lesson-6.mp4",
        "embedUrl": "https://www.youtube-nocookie.com/embed/lesson6_id",
        "interactionStatistic": {
            "@type": "InteractionCounter",
            "interactionType": { "@type": "WatchAction" },
            "userInteractionCount": 12500
        },
        "hasPart": [
            {
                "@type": "Clip",
                "name": "Що таке семантика",
                "startOffset": 0,
                "endOffset": 180,
                "url": "https://www.youtube-nocookie.com/embed/lesson6_id?t=0"
            },
            {
                "@type": "Clip",
                "name": "article vs section vs div",
                "startOffset": 480,
                "endOffset": 900,
                "url": "https://www.youtube-nocookie.com/embed/lesson6_id?t=480"
            },
            {
                "@type": "Clip",
                "name": "Практичний приклад: DevТижневик",
                "startOffset": 1800,
                "endOffset": 2695,
                "url": "https://www.youtube-nocookie.com/embed/lesson6_id?t=1800"
            }
        ]
    }
</script>

Microdata — Розмітка в HTML

Microdata вбудовується безпосередньо в теги через атрибути. Корисна коли JSON-LD недоступний або контент генерується старим CMS.

Ключові атрибути

АтрибутДеПризначення
itemscopeБудь-який елементОголошує початок сутності
itemtypeДе itemscopeURL типу зі schema.org
itempropДочірній елементІм'я властивості
itemidДе itemscopeУнікальний URL для сутності

Person — Сторінка автора

<article itemscope itemtype="https://schema.org/Person">
    <header>
        <img itemprop="image" src="/authors/ivan.jpg" alt="Іван Коваленко" width="200" height="200" />
        <h1 itemprop="name">Іван Коваленко</h1>
        <p itemprop="jobTitle">Senior Frontend Developer</p>
    </header>

    <section>
        <p itemprop="description">
            10+ років досвіду у розробці. Спеціаліст з React та TypeScript. Більше 400 студентів пройшли навчання під
            моїм керівництвом.
        </p>
    </section>

    <footer>
        <ul>
            <li>
                <a itemprop="url" href="https://techua.com/authors/ivan">Профіль на TechUA</a>
            </li>
            <li>
                <a itemprop="sameAs" href="https://github.com/ivan-koval" rel="external noopener"> GitHub </a>
            </li>
            <li>
                <a itemprop="sameAs" href="https://www.linkedin.com/in/ivan-koval" rel="external noopener">
                    LinkedIn
                </a>
            </li>
        </ul>
        <p>
            Email:
            <a itemprop="email" href="mailto:ivan@techua.com">ivan@techua.com</a>
        </p>
        <p>
            Телефон:
            <a itemprop="telephone" href="tel:+380671234567">+38 (067) 123-45-67</a>
        </p>
    </footer>
</article>

Product із вкладеними типами

<section itemscope itemtype="https://schema.org/Product">
    <h2 itemprop="name">MacBook Pro 14" M3 Pro</h2>

    <figure>
        <img
            itemprop="image"
            src="/products/macbook-14.jpg"
            alt="MacBook Pro 14 — срібний, вид спереду"
            width="600"
            height="450"
        />
    </figure>

    <p itemprop="description">
        Ноутбук Apple MacBook Pro 14" з процесором M3 Pro, 18 ГБ унифікованої пам'яті та 512 ГБ SSD.
    </p>

    <!-- Вкладений тип: AggregateRating -->
    <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
        <p>
            Рейтинг:
            <span itemprop="ratingValue">4.8</span> /
            <span itemprop="bestRating">5</span>
            (<span itemprop="reviewCount">43</span> відгуки)
        </p>
    </div>

    <!-- Вкладений тип: Offer -->
    <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
        <p>
            Ціна:
            <span itemprop="price" content="89999">89 999</span>
            <span itemprop="priceCurrency" content="UAH">грн</span>
        </p>
        <link itemprop="availability" href="https://schema.org/InStock" />
        <p>Є в наявності</p>
        <button type="button">Додати до кошика</button>
    </div>
</section>

canonical, hreflang та пагінація

Технічне SEO через <link> у <head>:

<head>
    <!-- Canonical: яка з дублікатів сторінок є «головною» -->
    <!-- Захищає від duplicate content penalty -->
    <link rel="canonical" href="https://techua.com/courses/html-css" />

    <!-- hreflang: мовні версії сторінки -->
    <link rel="alternate" hreflang="uk" href="https://techua.com/uk/courses/html-css" />
    <link rel="alternate" hreflang="en" href="https://techua.com/en/courses/html-css" />
    <!-- x-default: версія за замовчуванням для інших мов/регіонів -->
    <link rel="alternate" hreflang="x-default" href="https://techua.com/courses/html-css" />

    <!-- Пагінація: для правильної індексації сторінок блогу -->
    <link rel="prev" href="https://techua.com/blog?page=3" />
    <link rel="next" href="https://techua.com/blog?page=5" />
</head>
Помилка з canonical — одна з найпоширеніших SEO-проблем. Якщо сторінка доступна через HTTP та HTTPS, www та без www, з / та без — Google вважає їх дублікатами. canonical вирішує цю проблему.

robots.txt та <meta name="robots">

Два рівні контролю над індексацією:

<!-- У <head> кожної сторінки -->

<!-- Повний доступ (за замовчуванням) -->
<meta name="robots" content="index, follow" />

<!-- Не індексувати, але переходити по посиланнях -->
<meta name="robots" content="noindex, follow" />

<!-- Індексувати, але не переходити по посиланнях -->
<meta name="robots" content="index, nofollow" />

<!-- Повна заборона -->
<meta name="robots" content="noindex, nofollow" />

<!-- Специфічно для Googlebot -->
<meta name="googlebot" content="noindex, nofollow" />

<!-- Не показувати сніппет (опис) у видачі -->
<meta name="robots" content="nosnippet" />

<!-- Не показувати кешовану версію -->
<meta name="robots" content="noarchive" />

<!-- Максимальна довжина сніппету — 150 символів -->
<meta name="robots" content="max-snippet:150" />

<!-- Поєднання директив -->
<meta name="robots" content="index, follow, max-snippet:160, max-image-preview:large" />

Інструменти перевірки

Google Rich Results Test

search.google.com/test/rich-results — перевіряє JSON-LD та Microdata. Показує, які Rich Results активовані і де помилки.

Schema Markup Validator

validator.schema.org — офіційний валідатор Schema.org. Підтримує всі типи та формати розмітки.

Google Search Console

search.google.com/search-console — після публікації: показує, скільки сторінок проіндексовано та які помилки виявлено.

Open Graph Inspector

opengraph.xyz та metatags.io — превью посилання в різних соцмережах та месенджерах.

Практичні завдання

Комплексний приклад від А до Я

Тема: Сторінка курсу «Web Start» від TechUA Academy — повна SEO-оптимізація.

<!DOCTYPE html>
<html lang="uk">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="theme-color" content="#4f46e5" />

        <!-- Базові SEO -->
        <title>Курс «Web Start»: HTML та CSS з нуля — TechUA Academy</title>
        <meta
            name="description"
            content="Опануйте HTML і CSS за 8 тижнів. Практичні проєкти, живий код-ревю, сертифікат. Наступна група — 2 грудня."
        />
        <meta name="author" content="TechUA Academy" />
        <meta name="robots" content="index, follow, max-snippet:160, max-image-preview:large" />

        <!-- Canonical та мовні версії -->
        <link rel="canonical" href="https://techua.com/courses/web-start" />
        <link rel="alternate" hreflang="uk" href="https://techua.com/uk/courses/web-start" />
        <link rel="alternate" hreflang="en" href="https://techua.com/en/courses/web-start" />
        <link rel="alternate" hreflang="x-default" href="https://techua.com/courses/web-start" />

        <!-- Open Graph -->
        <meta property="og:title" content="Курс «Web Start»: HTML та CSS з нуля" />
        <meta property="og:description" content="8 тижнів практики. Від першого тега до готового сайту." />
        <meta property="og:image" content="https://techua.com/img/webstart-og.jpg" />
        <meta property="og:url" content="https://techua.com/courses/web-start" />
        <meta property="og:type" content="product" />
        <meta property="og:site_name" content="TechUA Academy" />
        <meta property="og:locale" content="uk_UA" />

        <!-- Twitter Card -->
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@TechUA_Academy" />
        <meta name="twitter:title" content="Курс «Web Start»: HTML та CSS з нуля" />
        <meta name="twitter:description" content="8 тижнів практики. Від першого тега до готового сайту." />
        <meta name="twitter:image" content="https://techua.com/img/webstart-og.jpg" />

        <!-- JSON-LD: BreadcrumbList -->
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "BreadcrumbList",
                "itemListElement": [
                    { "@type": "ListItem", "position": 1, "name": "Головна", "item": "https://techua.com" },
                    { "@type": "ListItem", "position": 2, "name": "Курси", "item": "https://techua.com/courses" },
                    { "@type": "ListItem", "position": 3, "name": "Web Start" }
                ]
            }
        </script>

        <!-- JSON-LD: Course + Product (з рейтингом та офером) -->
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": ["Course", "Product"],
                "name": "Web Start: HTML та CSS з нуля",
                "description": "Практичний 8-тижневий курс для початківців. Реальні проєкти та код-ревю.",
                "image": [
                    "https://techua.com/img/webstart-1x1.jpg",
                    "https://techua.com/img/webstart-4x3.jpg",
                    "https://techua.com/img/webstart-16x9.jpg"
                ],
                "provider": {
                    "@type": "Organization",
                    "name": "TechUA Academy",
                    "sameAs": "https://techua.com"
                },
                "hasCourseInstance": {
                    "@type": "CourseInstance",
                    "courseMode": "online",
                    "startDate": "2024-12-02",
                    "instructor": { "@type": "Person", "name": "Іван Коваленко" },
                    "offers": {
                        "@type": "Offer",
                        "price": "8500",
                        "priceCurrency": "UAH",
                        "availability": "https://schema.org/InStock",
                        "validFrom": "2024-11-01"
                    }
                },
                "aggregateRating": {
                    "@type": "AggregateRating",
                    "ratingValue": "4.9",
                    "ratingCount": "230",
                    "reviewCount": "112",
                    "bestRating": "5"
                }
            }
        </script>

        <!-- JSON-LD: FAQPage -->
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "FAQPage",
                "mainEntity": [
                    {
                        "@type": "Question",
                        "name": "Чи потрібні попередні знання?",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "Ні. Курс розрахований на абсолютних початківців. Потрібен лише ноутбук і браузер."
                        }
                    },
                    {
                        "@type": "Question",
                        "name": "Скільки часу на день потрібно виділяти?",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "2–3 години на навчання та 1–2 години на практику. Всі уроки записані, дивіться у зручний час."
                        }
                    },
                    {
                        "@type": "Question",
                        "name": "Коли стартує наступна група?",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "2 грудня 2024 року. Реєстрація відкрита до 30 листопада."
                        }
                    }
                ]
            }
        </script>

        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
        <link rel="preload" href="/img/webstart-hero.avif" as="image" fetchpriority="high" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="stylesheet" href="/styles/main.css" />
    </head>
    <body>
        <a href="#main-content" class="skip-link">Перейти до вмісту</a>

        <header>
            <a href="/">
                <img src="/logo.svg" alt="TechUA Academy — на головну" width="160" height="50" />
            </a>
            <nav aria-label="Головне меню">
                <ul>
                    <li><a href="/courses">Курси</a></li>
                    <li><a href="/blog">Блог</a></li>
                    <li><a href="/about">Про нас</a></li>
                </ul>
            </nav>
        </header>

        <main id="main-content">
            <!-- Хлібні крихти (також у JSON-LD вище) -->
            <nav aria-label="Розташування на сайті">
                <ol>
                    <li><a href="/">Головна</a></li>
                    <li><a href="/courses">Курси</a></li>
                    <li aria-current="page">Web Start</li>
                </ol>
            </nav>

            <!-- Головна секція — Microdata для Product -->
            <article itemscope itemtype="https://schema.org/Product">
                <header>
                    <h1 itemprop="name">Web Start: HTML та CSS з нуля</h1>

                    <figure>
                        <picture>
                            <source srcset="/img/webstart-hero.avif" type="image/avif" />
                            <source srcset="/img/webstart-hero.webp" type="image/webp" />
                            <img
                                itemprop="image"
                                src="/img/webstart-hero.jpg"
                                alt="Студент пише HTML-код, на екрані браузер показує результат"
                                width="1280"
                                height="720"
                                fetchpriority="high"
                            />
                        </picture>
                    </figure>

                    <p itemprop="description">
                        Практичний 8-тижневий курс для тих, хто починає шлях у веб-розробці. Ви створите 3 реальних
                        проєкти та можете стартувати кар'єру.
                    </p>

                    <!-- AggregateRating через Microdata -->
                    <div
                        itemprop="aggregateRating"
                        itemscope
                        itemtype="https://schema.org/AggregateRating"
                        aria-label="Рейтинг курсу"
                    >
                        <span itemprop="ratingValue">4.9</span> /
                        <span itemprop="bestRating">5</span>
                        (<span itemprop="reviewCount">112</span> відгуків)
                    </div>
                </header>

                <section aria-labelledby="details-heading">
                    <h2 id="details-heading">Деталі курсу</h2>
                    <dl>
                        <dt>Тривалість</dt>
                        <dd><time datetime="P8W">8 тижнів</time></dd>
                        <dt>Формат</dt>
                        <dd>Онлайн, записані уроки + живі Q&amp;A</dd>
                        <dt>Старт</dt>
                        <dd><time datetime="2024-12-02">2 грудня 2024</time></dd>
                        <dt>Сертифікат</dt>
                        <dd>Так, після захисту фінального проєкту</dd>
                    </dl>
                </section>

                <!-- Offer через Microdata -->
                <section
                    itemprop="offers"
                    itemscope
                    itemtype="https://schema.org/Offer"
                    aria-labelledby="price-heading"
                >
                    <h2 id="price-heading">Вартість</h2>
                    <link itemprop="availability" href="https://schema.org/InStock" />
                    <p>
                        <strong>
                            <span itemprop="price" content="8500">8 500</span>
                            <span itemprop="priceCurrency" content="UAH">грн</span>
                        </strong>
                    </p>
                    <p>або 4 × 2 125 грн (розстрочка)</p>
                    <a href="/courses/web-start/enroll" itemprop="url">
                        <button type="button">Записатися на курс</button>
                    </a>
                </section>

                <!-- Інструктор через вкладений Microdata -->
                <section aria-labelledby="instructor-heading" itemscope itemtype="https://schema.org/Person">
                    <h2 id="instructor-heading">Ваш інструктор</h2>
                    <figure>
                        <img itemprop="image" src="/authors/ivan.jpg" alt="Іван Коваленко" width="120" height="120" />
                        <figcaption>
                            <strong itemprop="name">Іван Коваленко</strong>,
                            <span itemprop="jobTitle">Senior Frontend Developer</span>
                        </figcaption>
                    </figure>
                    <p itemprop="description">
                        10+ років у веб-розробці. 400+ випускників. Автор курсів на TechUA, спікер JSFrontend та WebConf
                        Ukraine.
                    </p>
                    <link itemprop="url" href="https://techua.com/authors/ivan" />
                </section>

                <!-- FAQ — і для людей, і для Google (JSON-LD вище) -->
                <section aria-labelledby="faq-heading">
                    <h2 id="faq-heading">Часті запитання</h2>

                    <details>
                        <summary>Чи потрібні попередні знання?</summary>
                        <p>Ні. Курс розрахований на абсолютних початківців.</p>
                    </details>
                    <details>
                        <summary>Скільки часу на день потрібно виділяти?</summary>
                        <p>2–3 години на навчання та 1–2 години на практику.</p>
                    </details>
                    <details>
                        <summary>Коли стартує наступна група?</summary>
                        <p>
                            <time datetime="2024-12-02">2 грудня 2024</time>. Реєстрація відкрита до
                            <time datetime="2024-11-30">30 листопада</time>.
                        </p>
                    </details>
                </section>
            </article>
        </main>

        <footer>
            <address>
                TechUA Academy:
                <a href="mailto:info@techua.com">info@techua.com</a>
            </address>
            <nav aria-label="Підвал">
                <ul>
                    <li><a href="/privacy">Конфіденційність</a></li>
                    <li><a href="/sitemap.xml">Карта сайту</a></li>
                </ul>
            </nav>
            <p>
                <small>&copy; <time datetime="2024">2024</time> TechUA Academy</small>
            </p>
        </footer>
    </body>
</html>

Що демонструє цей приклад:

🔍 SEO

canonical, hreflang (uk/en/x-default), robots з директивами max-snippet та max-image-preview. preload для критичного зображення.

📱 Соцмережі

Повний набір og:* тегів для Facebook/Telegram. Twitter Card summary_large_image.

🗂️ JSON-LD

BreadcrumbList, Course + Product (комбінований тип з @type масивом), FAQPage з 3 питаннями.

⚛️ Microdata

Product із вкладеними AggregateRating та Offer, Person для інструктора — прямо в HTML-тегах.

Підсумок. Від HTML до SEO-готового документа

Ви пройшли повний шлях вивчення HTML — від базової структури документа до технологій, що роблять ваш сайт зрозумілим для пошукових роботів і привабливим для користувачів будь-де.

Структура та текст

Ви знаєте анатомію HTML-документа, теги форматування тексту та семантику заголовків.

Посилання та медіа

Адаптивні зображення з srcset, відеоплеєр, <picture> для art direction.

Форми та взаємодія

Всі типи <input>, валідація, доступність та autocomplete для UX.

Семантика та структура

article, section, nav, dialog — сторінки, які розуміють і люди, і роботи.

Мультимедіа

<video> з субтитрами, <canvas>, <template>, inline SVG та правильні <script>.

SEO та мікророзмітка

Open Graph, JSON-LD, Microdata — Google Rich Results та карти в соцмережах.

Наступний крок — CSS: каскадні таблиці стилів, де ви навчитеся наповнити вашу бездоганну HTML-структуру красою та анімаціями.

Корисні посилання

Мультимедіа та розширені елементи HTML

Повний розбір мультимедійних елементів HTML за специфікацією WHATWG: <video>, <audio>, <track>, <iframe>, <canvas>, <svg>, <embed>, <object>, <template>, <slot>, <script>, <noscript>, <link>, <meta>. Доступність, безпека та найкращі практики.

Вступ до CSS. Селектори та специфічність

Глибоке занурення у CSS: три способи підключення стилів, анатомія CSS-правила, типи селекторів (тегові, класи, ID, атрибутні), комбінатори, псевдокласи, псевдоелементи, каскад та специфічність.

Copyright © 2026