Тег head в HTML - полное руководство для разработчиков

Главная

База знаний

html

Структура документа

Тег head в HTML - структура настройки и лучшие практики

26 ноября 2025

Автор

Олег Марков

Введение

Тег head в HTML — это "служебная комната" вашей веб-страницы. Пользователь ее не видит, но без нее страница работает хуже, хуже индексируется поисковиками и может неправильно отображаться в браузерах и соцсетях.

Внутри head вы задаете:

кодировку документа;
заголовок вкладки браузера;
подключаете стили и шрифты;
описываете страницу для поисковиков;
настраиваете предпросмотры для соцсетей;
даете подсказки браузеру по кэшированию и загрузке ресурсов.

Смотрите, я покажу вам, как по шагам собрать аккуратный и современный блок head, объясняя, зачем нужен каждый тег и как его применять на практике.

Базовая структура тега head

Начнем с минимального рабочего примера. Так документ HTML обычно выглядит "в скелете":

<!DOCTYPE html>
<html lang="ru">
<head>
  <!-- Указываем кодировку документа -->
  <meta charset="UTF-8">
  <!-- Настраиваем масштабирование на мобильных устройствах -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Заголовок вкладки браузера -->
  <title>Мой первый сайт</title>
</head>
<body>
  <!-- Весь видимый пользователю контент -->
  <h1>Здравствуйте</h1>
</body>
</html>

Здесь вы уже видите три ключевых элемента внутри head:

meta charset — кодировка;
meta viewport — адаптивность;
title — заголовок вкладки.

Теперь давайте разберем по частям, что еще можно (и нужно) размещать внутри head и как это влияет на работу страницы.

Тег `<title>` — заголовок документа

Зачем нужен `<title>`

Тег title:

отображается на вкладке браузера;
используется поисковыми системами как основной заголовок страницы в результатах поиска;
участвует в SEO и в понятности интерфейса для пользователя.

Простой пример:

<head>
  <!-- Заголовок страницы во вкладке браузера и в поисковой выдаче -->
  <title>Интернет-магазин книг — главная страница</title>
</head>

Комментарии здесь показывают, какую роль выполняет заголовок. Старайтесь делать title:

информативным;
уникальным для каждой страницы;
не слишком длинным (обычно до 60–70 символов, чтобы не обрезался в поиске).

Метатеги `<meta>` — невидимая, но важная информация

Тег meta используется для разных целей. Давайте посмотрим на основные типы метатегов, которые чаще всего нужны в head.

Кодировка документа — `meta charset`

Этот тег должен находиться одним из первых внутри head. Он говорит браузеру, как интерпретировать символы в документе.

<head>
  <!-- Устанавливаем кодировку UTF-8 чтобы корректно отображать русский текст -->
  <meta charset="UTF-8">
  <title>Пример страницы</title>
</head>

Почему это важно:

без meta charset русские буквы могут "сломаться" и показаться кракозябрами;
UTF-8 — современный стандарт, который поддерживает большинство языков и символов.

Масштабирование на мобильных устройствах — `meta viewport`

Этот метатег управляет тем, как страница выглядит на телефонах и планшетах.

<head>
  <!-- Настраиваем ширину страницы под ширину экрана устройства и начальный масштаб -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Разберем параметры:

width=device-width — ширина макета равна ширине экрана;
initial-scale=1.0 — начальный масштаб 100 процентов.

Без этого метатега сайт на телефоне будет выглядеть уменьшенной десктопной версией, которую нужно масштабировать пальцами.

Описание страницы — `meta name="description"`

Этот метатег важен для SEO и сниппетов в поисковых системах.

<head>
  <!-- Описание страницы для поисковиков и предпросмотра -->
  <meta name="description" content="Подробный обзор тега head в HTML — структура, основные элементы, примеры и лучшие практики.">
</head>

Рекомендации:

длина примерно 120–160 символов;
конкретное и понятное описание, что есть на странице;
без лишних ключевых слов, написанных ради SEO.

Ключевые слова — `meta name="keywords"` (устарело, но встречается)

Этот метатег почти не используется современными поисковиками, но вы можете встретить его в старых проектах.

<head>
  <!-- Устаревший метатег ключевых слов, современные поисковики его игнорируют -->
  <meta name="keywords" content="html, head, метатеги, обучение, веб-разработка">
</head>

Использовать его специально обычно нет смысла, но знать о нем полезно, чтобы понимать чужой код.

Управление индексацией — `meta name="robots"`

Этот тег дает поисковикам указания по индексации страницы.

<head>
  <!-- Разрешаем индексировать страницу и переходить по ссылкам -->
  <meta name="robots" content="index, follow">
  
  <!-- Пример запрета индексирования и перехода по ссылкам -->
  <!-- <meta name="robots" content="noindex, nofollow"> -->
</head>

Основные значения:

index / noindex — можно ли индексировать страницу;
follow / nofollow — можно ли переходить по ссылкам на странице.

Обычно этот тег опускают, если их устраивает поведение по умолчанию (index, follow). Его добавляют, когда нужно запретить индексацию, например, для админок, черновиков или тестовых страниц.

Подключение таблиц стилей — `<link rel="stylesheet">`

Чаще всего тег link используют для подключения CSS-файлов.

Базовый пример подключения CSS

<head>
  <!-- Подключаем основной файл стилей сайта -->
  <link rel="stylesheet" href="/css/styles.css">
</head>

Что здесь важно:

rel="stylesheet" — указывает, что подключается таблица стилей;
href — путь к файлу стилей.

Старайтесь подключать основные стили в head, чтобы страница не мигала "голой" разметкой без оформления.

Подключение нескольких файлов стилей

<head>
  <!-- Базовые стили -->
  <link rel="stylesheet" href="/css/base.css">
  <!-- Стили для конкретной страницы -->
  <link rel="stylesheet" href="/css/page-article.css">
</head>

Комментарии помогают вам и другим разработчикам понимать структуру подключенных файлов.

Медиазапросы в `link` — стили для разных устройств

Вы можете подключать разные файлы стилей для разных типов устройств.

<head>
  <!-- Стили для экранов (мониторов, телефонов, планшетов) -->
  <link rel="stylesheet" href="/css/screen.css" media="screen">
  
  <!-- Стили для печати страницы -->
  <link rel="stylesheet" href="/css/print.css" media="print">
</head>

Так вы можете, например, сделать упрощенную версию страницы для печати без лишних блоков и фона.

Подключение скриптов в контексте `<head>`

Строго говоря, скрипты чаще подключают в конце body, но знать про подключение из head важно, особенно для:

аналитики;
шрифтов;
инициализации некоторых библиотек.

Скрипты в head с атрибутом `defer`

Давайте разберем практичный пример:

<head>
  <!-- Подключаем JS-файл с атрибутом defer чтобы скрипт загрузился параллельно и выполнился после разбора HTML -->
  <script src="/js/main.js" defer></script>
</head>

Что делает defer:

браузер загружает скрипт параллельно с HTML;
но выполнит его только после того, как разберет весь HTML-документ;
это помогает не блокировать отображение страницы.

Такой способ подключения удобен, когда скрипт зависит от готового DOM.

Когда стоит избегать скриптов в head

Если подключать скрипты без defer или async в head, они могут замедлить загрузку страницы, потому что браузер останавливает разбор HTML до загрузки и выполнения скрипта. Поэтому:

для тяжелых скриптов используйте defer/async;
или переносите их в конец body.

Фавикон и значки для устройств — `<link rel="icon">`

Фавикон — это маленькая иконка, которая отображается:

на вкладке браузера;
в списке закладок;
иногда на домашнем экране мобильного устройства.

Базовое подключение favicon

<head>
  <!-- Основная иконка сайта для вкладки браузера -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>

Формат .ico до сих пор широко используется, но современные браузеры отлично поддерживают и PNG, SVG.

Несколько вариантов иконок

Давайте посмотрим более продвинутый пример:

<head>
  <!-- Иконка в формате PNG 32x32 -->
  <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
  <!-- Иконка в формате PNG 16x16 -->
  <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
  <!-- Иконка для устройств Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
</head>

Комментарии показывают, какие устройства используют какую иконку. Так вы обеспечиваете аккуратное отображение иконок в разных сценариях.

Шрифты и предзагрузка ресурсов — дополнительные теги `<link>`

Тег link также используется для более продвинутых оптимизаций.

Подключение веб-шрифта

Вам может понадобиться подключить шрифт с внешнего сервиса:

<head>
  <!-- Предварительное соединение с сервером шрифтов чтобы ускорить загрузку -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- Подключаем CSS-файл с описанием шрифтов -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
</head>

Обратите внимание:

preconnect помогает браузеру заранее установить соединение и ускорить загрузку;
комментарии показывают, в чем смысл каждого тега.

Предзагрузка критичных ресурсов — `rel="preload"`

Используется для того, чтобы сказать браузеру: "этот ресурс очень важен, загрузи его как можно раньше".

<head>
  <!-- Предзагружаем критичный шрифт чтобы текст отображался быстрее -->
  <link rel="preload" href="/fonts/Inter-regular.woff2" as="font" type="font/woff2" crossorigin>
</head>

Здесь:

as="font" — тип ресурса;
crossorigin — если шрифт или ресурс может требовать CORS-заголовков.

С preloading стоит быть аккуратнее: не нужно помечать как preload слишком много ресурсов, иначе вы перегрузите сеть.

SEO и социальные сети — Open Graph, Twitter Cards и другие метатеги

В блоке head также задают информацию, которая используется соцсетями и мессенджерами для предпросмотра ссылок.

Open Graph для соцсетей

Стандарт Open Graph используют Facebook, LinkedIn, многие мессенджеры.

<head>
  <!-- Базовые метатеги Open Graph -->
  <meta property="og:title" content="Подробное руководство по тегу head в HTML">
  <meta property="og:description" content="Разбираем структуру head, важные метатеги, подключение стилей и скриптов, SEO и оптимизацию.">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/html-head-guide">
  <meta property="og:image" content="https://example.com/images/head-guide-cover.png">
</head>

Комментарии в коде не обязательны на практике, но пока они помогают вам лучше понимать, какие данные вы задаете:

og:title — заголовок карточки;
og:description — описание;
og:image — картинка предпросмотра;
og:url — канонический URL;
og:type — тип объекта (article, website и так далее).

Twitter Cards

Twitter (X) использует свои метатеги, но они похожи по смыслу:

<head>
  <!-- Настройки предпросмотра для Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Руководство по тегу head в HTML">
  <meta name="twitter:description" content="Узнайте, как правильно настроить head для SEO, соцсетей и быстрой загрузки.">
  <meta name="twitter:image" content="https://example.com/images/head-guide-cover-twitter.png">
</head>

Так вы контролируете, как ваша страница выглядит при публикации ссылки в соцсетях.

Локализация и атрибуты языка

Хотя атрибут lang задается у тега html, в связке с содержимым head он важен для правильной локализации.

<!DOCTYPE html>
<html lang="ru">
<head>
  <!-- Указываем кодировку и язык документа для корректной обработки -->
  <meta charset="UTF-8">
  <title>Пример русскоязычной страницы</title>
</head>
<body>
  <!-- Контент страницы -->
</body>
</html>

Связка lang и meta charset помогает:

экранным читалкам (accessibility);
поисковикам (понимание языка страницы);
автопереводчикам в браузерах.

Современные рекомендации по порядку тегов внутри head

Чтобы ваш head оставался понятным и предсказуемым, придерживайтесь логического порядка.

Один из практичных вариантов:

<head>
  <!-- 1. Базовые настройки документа -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- 2. Заголовок страницы -->
  <title>Тег head в HTML — полное руководство</title>
  
  <!-- 3. SEO и соцсети -->
  <meta name="description" content="Разбираем тег head в HTML — структура, метатеги, подключение ресурсов и лучшие практики.">
  <meta name="robots" content="index, follow">
  <meta property="og:title" content="Тег head в HTML — полное руководство">
  <meta property="og:description" content="Узнайте, как правильно заполнять head в HTML — от базовых метатегов до оптимизации.">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://example.com/images/head-cover.png">
  
  <!-- 4. Иконки -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
  
  <!-- 5. Подключение шрифтов и стилей -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="/css/styles.css">
  
  <!-- 6. Скрипты с defer/async при необходимости -->
  <script src="/js/main.js" defer></script>
</head>

Смотрите, я специально добавил комментарии блоками, чтобы вам было проще визуально группировать теги по назначению. В реальных проектах можно оставить только те комментарии, которые действительно помогают команде.

Частые ошибки при работе с тегом head

Ошибка 1 — отсутcтвие `meta charset` или неправильный порядок

Если meta charset расположен не в начале head или вообще отсутствует, браузер может неверно определить кодировку.

Неправильно:

<head>
  <title>Страница</title>
  <!-- Кодировка задана после других тегов -->
  <meta charset="UTF-8">
</head>

Лучше разместить его первым:

<head>
  <!-- Сначала задаем кодировку -->
  <meta charset="UTF-8">
  <title>Страница</title>
</head>

Ошибка 2 — дублирование тега `<title>`

Два title в одном документе — некорректно. Браузеры и поисковики могут вести себя непредсказуемо.

<head>
  <!-- Плохо - два заголовка -->
  <title>Магазин</title>
  <title>Каталог товаров</title>
</head>

Нужно оставить один и формировать его динамически на стороне сервера или через шаблонизатор.

Ошибка 3 — слишком длинные или "спамные" `meta description` и `title`

Когда в description пытаются запихнуть кучу ключевых слов, это ухудшает качество сниппета и может негативно сказаться на SEO.

Плохой пример:

<meta name="description" content="купить книги, купить книги онлайн, дешевые книги, книги недорого, книги со скидкой, интернет-магазин книг">

Гораздо лучше:

<meta name="description" content="Интернет-магазин книг с быстрой доставкой — классика, нон-фикшн и современные бестселлеры.">

Практический пример хорошо оформленного `<head>`

Теперь давайте соберем все вместе и посмотрим на пример "живого" head для небольшой статьи.

<!DOCTYPE html>
<html lang="ru">
<head>
  <!-- 1. Базовые настройки -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- 2. Заголовок -->
  <title>Тег head в HTML — как правильно оформить заголовок страницы</title>
  
  <!-- 3. SEO -->
  <meta name="description" content="Узнайте, какие теги нужно добавить в head HTML-документа, чтобы страница корректно отображалась, быстро загружалась и хорошо индексировалась.">
  <meta name="robots" content="index, follow">
  
  <!-- 4. Open Graph для соцсетей -->
  <meta property="og:title" content="Тег head в HTML — практическое руководство">
  <meta property="og:description" content="Смотрите, я покажу вам, как заполнить head — от метатегов до фавиконок и шрифтов.">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/articles/html-head">
  <meta property="og:image" content="https://example.com/images/html-head-cover.png">
  
  <!-- 5. Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Тег head в HTML — подробное объяснение">
  <meta name="twitter:description" content="Разбираем структуру head, основные теги и лучшие практики на понятных примерах.">
  <meta name="twitter:image" content="https://example.com/images/html-head-cover-twitter.png">
  
  <!-- 6. Иконки -->
  <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
  
  <!-- 7. Шрифты и стили -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
  <link rel="stylesheet" href="/css/main.css">
  
  <!-- 8. Скрипты -->
  <script src="/js/main.js" defer></script>
</head>
<body>
  <!-- Контент статьи -->
</body>
</html>

Здесь я разместил комментарии так, чтобы вы могли по ним "прочитать" структуру head как разделы: базовые настройки, SEO, соцсети, иконки, стили, скрипты.

Заключение

Тег head в HTML — это место, где вы настраиваете поведение всей страницы, ее представление в браузерах, поисковиках и соцсетях. Хотя пользователь напрямую не видит ничего из содержимого head, именно здесь задаются:

кодировка и базовые параметры документа;
заголовок вкладки и описания для поисковых систем;
подключаются CSS, шрифты и важные ресурсы;
настраиваются фавиконки и иконки для устройств;
описывается предпросмотр для соцсетей и мессенджеров;
указываются подсказки для поисковых роботов.

Если вы строите структуру head последовательно, группируете теги по назначению и следите за корректностью значений, страница начинает:

быстрее загружаться;
лучше индексироваться;
ровнее отображаться в разных браузерах и на разных устройствах.

Дальше вы можете постепенно усложнять содержимое head под задачи проекта — добавлять новые метатеги, экспериментировать с оптимизацией загрузки и более тонкими настройками для конкретных платформ.

Частозадаваемые технические вопросы по теме и ответы

Вопрос 1. Можно ли использовать несколько `meta viewport` в одном документе

Использовать несколько meta viewport не рекомендуется. Браузеры могут выбрать первый или последний тег непредсказуемо. Оставьте только один, самый нужный. Проверьте шаблоны и компоненты, чтобы не дублировать этот метатег при подключении разных частей страницы.

Вопрос 2. Как правильно подключать CSS если используется сборщик типа Webpack или Vite

В таких случаях стили часто подключаются автоматически через сгенерированный HTML-шаблон или через JS. Убедитесь, что итоговый HTML все равно содержит link rel="stylesheet" внутри head. Проверьте финальный index.html в папке сборки и убедитесь, что порядок тегов не нарушен.

Вопрос 3. Что делать если Open Graph метатеги не обновляются при смене контента

Соцсети часто кэшируют данные по URL. После изменения og-тегов:

Обновите страницу на сервере.
Воспользуйтесь инструментами отладки типа Facebook Sharing Debugger или Twitter Card Validator.
Запустите "обновление" для конкретного URL. Это очистит кеш и подтянет новые значения.

Вопрос 4. Можно ли динамически менять содержимое head с помощью JavaScript

Да, можно. Для этого:

Получите элементы через document.querySelector.
Измените атрибуты, например content у meta или textContent у title.
Учитывайте, что поисковые роботы обычно анализируют исходный HTML, а не результат работы скриптов, поэтому для SEO-важных метатегов лучше формировать head на сервере.

Вопрос 5. Как добавить разные фавиконки для светлой и темной темы

Для этого:

Подготовьте две иконки под разные темы.
Используйте link с атрибутом media и prefers-color-scheme.
Пример
<link rel="icon" href="/icons/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/icons/favicon-dark.png" media="(prefers-color-scheme: dark)">
Браузер сам выберет нужную иконку в зависимости от темы системы.