Базовая анатомия HTML-документа
Основные элементы структуры
Чтобы веб-страница корректно отображалась во всех браузерах и соответствовала современным стандартам, каждый HTML-документ должен иметь правильную базовую структуру. Она задаёт «каркас» страницы и помогает как браузерам, так и поисковым системам лучше понимать содержимое.
Для начала рассмотрим пример базового HTML-документа:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
<meta name="description" content="Описание страницы">
<link rel="canonical" href="https://example.com/page">
</head>
<body>
<!-- Основной контент -->
</body>
</html>
Ключевые элементы HTML-документа
Есть несколько элементов, которые обязательно должны присутствовать в разметке. Они обеспечивают корректную работу страницы, помогают браузерам распознавать содержимое и соответствуют стандартам HTML5:
- <!DOCTYPE html> — определяет тип документа как HTML5.
- <html lang=«ru»> — корневой элемент с указанием языка для геотаргетинга и доступности.
- <meta charset=«utf-8»> — задаёт кодировку UTF-8 для корректного отображения символов.
Содержимое блока <head> и мета-данные
Блок <head> — это «служебная» часть HTML-документа. Он содержит информацию, которая не видна пользователю на странице, но необходима браузерам, поисковым системам и социальным сетям для правильной обработки и отображения сайта.
<title> — заголовок страницы
Title — самый важный элемент для SEO. Он отображается в поисковой выдаче как заголовок сниппета и показывается во вкладке браузера:
<title>Ключевые слова — Название бренда</title>
Требования к Title:
- Длина 50-60 символов.
- Уникальность на каждой странице.
- Содержит важные ключевые слова, релевантные содержанию.
- Соответствие содержанию страницы.
<meta name=»description»> — мета-описание
Этот тег формирует описание страницы в сниппете поисковой выдачи. Он не влияет напрямую на ранжирование, но может повысить CTR — показатель кликабельности — проще говоря, это процент людей, которые увидели вашу страницу в поиске и кликнули на неё.
<meta name="description" content="Краткое описание страницы до 160 символов с ключевыми словами">
Правила составления:
- Длина 150-160 символов
- Включение призыва к действию (например: «Узнайте подробнее»)
- Уникаленость для каждой страницы
- Соответствие контенту
<link rel=»canonical»> — каноническая ссылка
Сanonical помогает избежать проблем с дублирующимся контентом.
Что такое дублирующийся контент? Представьте, что один и тот же товар на вашем сайте можно открыть по разным адресам:
- https://site.ru/product?id=123
- https://site.ru/product/123
- https://www.site.ru/product/123
Для пользователя разницы нет — товар один и тот же. Но поисковик может подумать, что это разные страницы с одинаковым содержанием. В итоге страницы конкурируют друг с другом за позиции в поиске и снижается рейтинг сайта.
Канонический тег указывает поисковым системам, какой из этих URL считать «основным» (каноническим):
<link rel="canonical" href="https://example.com/canonical-page">
<meta name=»robots»> — управление индексацией
С помощью этого тега можно управлять поведением поисковых ботов: разрешить или запретить индексацию и обход ссылок.
<meta name="robots"
content="index, follow">
- index, follow — по умолчанию разрешает индексацию и следование за ссылками.
- noindex, nofollow — запрещает оба действия.
<meta name=»viewport»> — адаптивность для мобильных устройств
Без этого тега сайт может некорректно отображаться на смартфонах и планшетах. Он сообщает браузеру, как адаптировать страницу под размер экрана.
<meta name="viewport"
content="width=device-width, initial-scale=1">
- width=device-width — ширина страницы равна ширине устройства.
- initial-scale=1 — начальный масштаб страницы.
Семантическая верстка
Семантическая вёрстка — это написание HTML с использованием тегов, которые отражают смысл контента. Вместо универсальных контейнеров <div> и <span>, применяются специальные элементы вроде <header>, <main>, <article>, которые помогают браузерам и поисковым системам понять структуру страницы.
Семантическая разметка обеспечивает:
- Лучшее понимание структуры поисковыми роботами
- Улучшенную доступность для людей с ограниченными возможностями
- Более четкую навигацию для пользователей
- Повышение релевантности в поисковых системах
Основные семантические теги
| Тег | Назначение |
| <header> | Шапка сайта или раздела (логотип, меню, заголовок). |
| <nav> | Навигационное меню с ссылками для перехода между разделами. |
| <main> | Основной контент страницы (уникален для каждой страницы). |
| <article> | Независимый блок информации (отдельная статья, пост, карточка товара). |
| <section> | Тематический раздел внутри страницы. |
| <aside> | Боковая информация (сайдбар, советы, реклама). |
| <footer> | Подвал сайта или раздела (контакты, копирайт, ссылки). |
| <h1>–<h6> | Заголовки от основного до подзаголовков. |
| <p> | Абзац текста. |
| <a> | Гиперссылка для перехода на другие страницы или сайты. |
| <img> | Добавление изображения на страницу. Атрибут alt обязателен — он описывает картинку для SEO и доступности. |
| <figure> | Блок для изображения с подписью. |
| <figcaption> | Подпись к изображению внутри <figure>. |
| <ul>, <ol>, <li> | Списки: ненумерованные (ul), нумерованные (ol) и их элементы (li). |
| <strong>, <em> | Выделение текста: сильное (<strong>) и акцентное (<em>). |
Иерархия заголовков H1-H6
Заголовки в HTML (<h1>–<h6>) создают логическую структуру контента. Они помогают: пользователям быстро ориентироваться на странице и поисковым системам понимать, как разделён текст на смысловые блоки.
Главное — думать о заголовках как о оглавлении книги: <h1> — это название книги, <h2> — главы, <h3> — разделы внутри глав и так далее.
Пример правильной структуры заголовков:
<h1>Лучшие рецепты для детей</h1>
<h2>Завтраки</h2>
<h3>Блины с вареньем</h3>
<h4>Ингредиенты</h4>
<h4>Пошаговый рецепт</h4>
<h3>Овсяная каша с фруктами</h3>
<h2>Обеды</h2>
<h3>Суп с фрикадельками</h3>
<h2>Ужины</h2>
<h3>Макароны с сыром</h3>
Основные правила:
- Один H1 на страницу — главный заголовок должен быть единственным
- Соблюдение иерархии — не пропускайте уровни (H1 → H2 → H3)
- Включение ключевых слов — естественное размещение в заголовках
- Читабельность — заголовки должны быть понятными пользователям
Форматирование основного контента
HTML позволяет оформлять текст с помощью специальных тегов. Это помогает сделать контент читаемым, структурированным и доступным как для пользователей, так и для поисковых систем.
Эти теги можно условно разделить на две группы:
- семантические, которые не только визуально выделяют текст, но и сообщают браузерам и поисковикам о его важности или роли (например, акцент на ключевых словах или цитатах)
- визуальные, которые меняют лишь внешний вид текста, не добавляя смысловой нагрузки. Можно использовать CSS вместо тегов.
| Тег | Назначение |
| Семантические теги | |
| <p> | Абзац текста. |
| <strong> | Сильное выделение текста (жирный), подчёркивающее важность. |
| <em> | Курсив с акцентом, используется для выделения ключевых слов или уточнений. |
| <blockquote> | Цитата из другого источника, обычно выделяется отступами. |
| <q> | Короткая встроенная цитата с автоматическими кавычками. |
| <code> | Выделение кода или команд моноширинным шрифтом. |
| <pre> | Сохраняет пробелы и переносы строк для заранее отформатированного текста. |
| Визуальные теги (только оформление) | |
| <b> | Жирный текст без семантического акцента. |
| <i> | Курсив без акцента (например, для названий книг или иностранных слов). |
| <mark> | Подсветка текста (маркер). |
| <br> | Перенос строки внутри абзаца (только для кратких разрывов, не для создания отступов). |
Работа с изображениями
Изображения делают сайт привлекательным, но важно оформлять их правильно. Корректное использование тегов и атрибутов помогает:
- ускорить загрузку страницы,
- улучшить SEO,
- сделать сайт доступным для пользователей с ограничениями.
Пример разметки изображения
<img
src="images/pasta.webp"
alt="Паста с томатным соусом и базиликом"
title="Рецепт пасты с томатами и базиликом"
loading="lazy"
>
Основные атрибуты для изображений
| Атрибут | Назначение |
| alt | Альтернативный текст, описывающий изображение. Показывается, если картинка не загрузилась. Помогает поисковикам понять содержимое и улучшает доступность для людей с ограничениями. |
| title | Всплывающая подсказка при наведении курсора на изображение. Может содержать дополнительную информацию или ключевые слова, но не является обязательным для SEO. |
| loading=»lazy» | Откладывает загрузку изображения до момента, когда оно попадёт в зону видимости. Ускоряет первую загрузку страницы. |
Современные рекомендации по работе с изображениями
- Используйте современные форматы
WebP и AVIF обеспечивают лучшее сжатие без потери качества по сравнению с JPEG и PNG. - Оптимизируйте размеры файлов
Сжимайте изображения до разумных размеров перед загрузкой на сайт. - Применяйте ленивую загрузку
Добавляйте loading=»lazy», чтобы браузер не загружал картинки сразу — это ускоряет отображение страницы.
Внутренняя перелинковка и навигация
Внутренняя перелинковка — это система ссылок внутри сайта, которая соединяет страницы между собой. Она помогает:
- пользователям быстро находить нужный раздел,
- поисковым системам лучше понимать структуру сайта и быстрее индексировать новые страницы,
- распределять ссылочный вес между страницами для улучшения SEO.
Семантическая навигация
Для организации основного меню сайта рекомендуется использовать семантический тег <nav>. Он обозначает блок с основными ссылками для перемещения по разделам. Это помогает поисковикам и программам чтения с экрана понять, где находится навигация.
Пример семантической навигации
<nav>
<ul>
<li><a href="/" title="Главная страница">Главная</a></li>
<li><a href="/catalog" title="Каталог товаров">Каталог</a></li>
<li><a href="/contacts" title="Контакты">Контакты</a></li>
</ul>
</nav>
Хлебные крошки (BreadcrumbList)
Хлебные крошки — это второстепенный навигационный элемент, который показывает пользователю путь к текущей странице. Он помогает:
- улучшить юзабилити (особенно на многоуровневых сайтах),
- поисковикам строить красивый путь в выдаче Google.
Пример разметки хлебных крошек (Schema.org)
<nav aria-label="breadcrumb">
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/" itemprop="item">
<span itemprop="name">Главная</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/catalog" itemprop="item">
<span itemprop="name">Каталог</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span itemprop="name">Ноутбуки</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>
Анкорные тексты
Анкор — это текст ссылки, по которому пользователи кликают. Хорошо подобранные анкоры:
- описывают, что находится на целевой странице (не «кликните здесь», а «Посмотреть каталог ноутбуков»),
- могут содержать ключевые слова, но без переспама,
- разнообразны по формулировкам, чтобы избежать однообразия ссылок.
Микроразметка
Микроразметка — это способ добавить в HTML специальные атрибуты, которые помогают поисковым системам и социальным сетям лучше понять содержимое страницы.
Когда вы используете микроразметку, поисковики не просто «видят» текст и картинки на сайте, а понимают: где заголовок статьи, где цена товара, где рейтинг и отзывы, где дата мероприятия.
Это позволяет формировать в поисковой выдаче расширенные сниппеты: блоки с рейтингами, ценами, картинками, FAQ и др., которые делают сайт заметнее и повышают кликабельность.
Schema.org
Schema.org — это крупнейший стандарт микроразметки, поддерживаемый Google, Яндекс и другими поисковыми системами. С его помощью можно описать практически любой тип контента: от новостей и блогов до товаров и мероприятий.
| Тип | Где применяется | Что даёт в поиске |
| Article | Новости, блоги, статьи | Заголовок, автор, дата публикации |
| Product | Страницы товаров в интернет-магазинах | Цена, наличие, рейтинг |
| Recipe | Кулинарные сайты | Фото блюда, время приготовления, калории |
| Event | Афиши, концерты, мероприятия | Дата, место, цена билета |
| BreadcrumbList | Любой сайт с вложенными страницами | Хлебные крошки в выдаче |
| FAQPage | Страницы с часто задаваемыми вопросами | Раскрывающиеся блоки с вопросами и ответами |
| Organization | О компании или организации | Название, логотип, контактные данные |
| Person | Биографии, профили авторов | Фото, имя, должность |
| VideoObject | Страницы с видео | Превью, продолжительность, дата публикации |
Пример: Микроразметка товара для показа товара с ценой и рейтингом (Schema.org)
<div itemscope itemtype="https://schema.org/Product">
<h1 itemprop="name">iPhone 16 (Айфон 16) купить в Минске</h1>
<p itemprop="description">
Каталог Onliner — удобный способ купить Apple iPhone 16. Характеристики, фото, отзывы, сравнение ценовых предложений в Минске
</p>
<img itemprop="image" src="https://catalog.onliner.by/images/iphone16pro128dt.jpg" alt="iPhone 16">
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<meta itemprop="priceCurrency" content="BYN" />
<meta itemprop="price" content="2499.00" />
<link itemprop="availability" href="https://schema.org/InStock" />
<link itemprop="url" href="https://catalog.onliner.by/mobile/apple/iphone16pro128dt" />
<p>BYN <span itemprop="price">2,499.00</span> · In stock</p>
</div>
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="4.9" />
<meta itemprop="reviewCount" content="15" />
<p>Рейтинг: 4.9/5 ⭐ (15 отзывов)</p>
</div>
<div itemprop="brand" itemscope itemtype="https://schema.org/Brand">
<meta itemprop="name" content="Apple" />
</div>
</div>
JSON-LD (Linked Data)
JSON-LD (JavaScript Object Notation for Linked Data) — это современный формат микроразметки, который позволяет описывать данные о странице в отдельном JSON-блоке.
По сути, JSON-LD — это та же самая Schema.org, только в другом формате. В классическом Schema.org данные «вшиты» в HTML-теги через атрибуты itemscope, itemtype, itemprop, а В JSON-LD эти же данные описываются в отдельном блоке <script> в формате JSON.
Важно: Google рекомендует использовать JSON-LD вместо классической вёрстки Schema.org с атрибутами внутри HTML. Такой подход делает код чище, удобнее для поддержки и понятнее для поисковых систем.
Пример JSON-LD разметки организации
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "iPhone 16 (Айфон 16) купить в Минске",
"description": "Каталог Onliner — удобный способ купить Apple iPhone 16. Характеристики, фото, отзывы, сравнение ценовых предложений в Минске",
"image": "https://site.ru/images/iphone-16-pro.jpg",
"offers": {
"@type": "Offer",
"priceCurrency": "BYN",
"price": "2,499.00",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2025-12-31",
"url": "https://catalog.onliner.by/apple/iphone-16-pro"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"reviewCount": "15"
},
"brand": {
"@type": "Brand",
"name": "Apple"
}
}
</script>
Open Graph
Open Graph (OG) — это стандарт микроразметки от Facebook. Он управляет тем, как будет выглядеть страница, если её ссылка опубликована в социальных сетях или мессенджерах (VK, Telegram, WhatsApp и др.).
Когда вы делитесь ссылкой на сайт, и там сразу подгружается:
- картинка превью,
- заголовок,
- описание,
- URL — это всё задаётся через Open Graph.
Пример Open Graph разметки
<meta property="og:title"
content="iPhone 16 Pro (Айфон 16 Про) купить в Минске">
<meta property="og:description"
content="Каталог Onliner — удобный способ купить Apple iPhone 16. Характеристики, фото, отзывы, сравнение ценовых предложений в Минске">
<meta property="og:image"
content="https://catalog.onliner.by/images/iphone16pro128dt.jpg">
<meta property="og:url"
content="https://catalog.onliner.by/mobile/apple/iphone16pro128dt">
<meta property="og:type"
content="product">
<meta property="og:site_name"
content="Каталог Onliner">
<meta property="product:brand"
content="Apple">
(1 оценок, среднее: 5,00 из 5)
Загрузка...