Что на самом деле должно находиться в Head вашего документа

Dec 17, 2025 · 4 min read

Что на самом деле должно находиться в Head вашего документа

Элемент <head> — одна из самых неправильно понимаемых частей HTML. Разработчики либо набивают его всеми meta-тегами, которые когда-либо видели, либо оставляют почти пустым. Ни один из этих подходов не идёт на пользу ни вашим пользователям, ни вашему сайту.

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

Ключевые выводы

Секция head документа служит координационным слоем, который сообщает браузерам, поисковым системам и сервисам, как интерпретировать вашу страницу до загрузки видимого контента.
Обязательные элементы включают charset, viewport, title и meta description — их отсутствие вызывает реальные проблемы.
Подсказки для ресурсов, такие как preconnect, dns-prefetch и preload, могут улучшить производительность, но должны использоваться осознанно.
Многие распространённые элементы head, такие как meta-тег keywords, не приносят современной пользы и должны быть удалены.

Head как координационный слой

Думайте о секции head документа как о координационном слое. Она сообщает браузерам, поисковым системам и другим сервисам, как интерпретировать, отображать и приоритизировать вашу страницу до загрузки любого видимого контента.

Head выполняет три основные функции:

Метаданные документа — кодировка, заголовок, описание
Поведение браузера — viewport, цветовая схема, подсказки для рендеринга
Решения о ранней загрузке — подсказки для ресурсов, критические активы, предварительные подключения

Всё в вашем head должно служить одной из этих целей. Если нет — вероятно, это должно быть где-то в другом месте или вообще нигде.

Обязательные элементы Head

Эти элементы должны присутствовать практически в каждом HTML-документе. Их отсутствие вызывает реальные проблемы.

Кодировка символов и Viewport

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Размещайте их первыми. Объявление charset должно появляться очень рано в документе, чтобы браузер мог правильно парсить контент. Meta-тег viewport обеспечивает корректное отображение на мобильных устройствах. Без него браузеры предполагают десктопную ширину макета и масштабируют страницу вниз.

Заголовок документа

<title>Заголовок страницы | Название сайта</title>

Заголовок отображается во вкладках браузера, закладках и результатах поиска. Делайте его описательным и короче 60 символов. Это обязательно как для юзабилити, так и для SEO.

Meta Description

<meta name="description" content="Краткое резюме содержания страницы.">

Поисковые системы часто отображают это в результатах. Пишите для людей — 150-160 символов, которые точно описывают страницу.

Ситуационный контент Head

Эти элементы важны в конкретных контекстах. Включайте их, когда это релевантно, и пропускайте, когда нет.

Подсказки для ресурсов для производительности фронтенда

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

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="preload" href="critical.css" as="style">

Preconnect устанавливает ранние соединения с источниками, которые вам скоро понадобятся. Используйте его для провайдеров шрифтов или API-эндпоинтов.

DNS-prefetch заранее разрешает доменные имена. Он легче, чем preconnect, и полезен для сторонних ресурсов.

Preload немедленно загружает критические ресурсы. Используйте его экономно — предварительная загрузка слишком многого сводит на нет цель.

Канонические URL и языковые альтернативы

<link rel="canonical" href="https://example.com/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">

Канонические URL предотвращают проблемы дублирующегося контента. Теги hreflang помогают поисковым системам предоставлять правильную языковую версию.

Метаданные темы и цветовой схемы

<meta name="theme-color" content="#ffffff">
<meta name="color-scheme" content="light dark">

Theme color влияет на UI браузера на мобильных устройствах. Color scheme подсказывает браузерам применять соответствующие стили по умолчанию до загрузки вашего CSS.

Open Graph и метаданные для социальных сетей

<meta property="og:title" content="Заголовок страницы">
<meta property="og:image" content="https://example.com/image.jpg">

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

Часто неправильно понимаемые или чрезмерно используемые элементы

Некоторый контент head сохраняется через карго-культовое копирование, несмотря на ограниченную современную полезность.

Meta-тег keywords — поисковые системы игнорируют его. Удалите его.

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

Избыточные значения viewport — user-scalable=no и maximum-scale=1 вредят доступности. Избегайте их, если у вас нет веской причины.

Meta-теги generator — они раскрывают версию вашей CMS или фреймворка. Они не приносят пользы пользователю и могут создавать проблемы безопасности.

Порядок имеет значение

Метаданные в head документа должны следовать логической последовательности:

Charset и viewport (обязательно первыми)
Заголовки безопасности (CSP, если доставляется через meta)
Title и description
Preconnect и подсказки для ресурсов
Таблицы стилей
Метаданные для социальных сетей
Структурированные данные

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

Практическая базовая версия

Вот минимальный, современный HTML head, который охватывает основы:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Описательный заголовок страницы</title>
  <meta name="description" content="Чёткое, точное резюме страницы.">
  <link rel="canonical" href="https://example.com/page">
  <link rel="stylesheet" href="styles.css">
</head>

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

Заключение

Лучшие практики HTML head сводятся к осознанности. Каждый элемент должен заслужить своё место. Когда вы относитесь к head как к координационному слою, а не как к свалке, вы получаете более быстрые страницы, более чистую разметку и меньше сюрпризов.

Часто задаваемые вопросы

Браузерам необходимо знать кодировку символов до того, как они начнут парсить содержимое документа. Если объявление charset появляется слишком поздно, браузер может уже неправильно интерпретировать символы, что приведёт к ошибкам кодировки и искажённому тексту, который невозможно исправить без перезагрузки страницы.

Только если ваши страницы, вероятно, будут распространяться на социальных платформах. Теги Open Graph контролируют, как ваш контент отображается при публикации на Facebook, LinkedIn и подобных сервисах. Для внутренних страниц, админ-панелей или контента, который вряд ли будет распространяться, эти теги добавляют ненужные байты без какой-либо пользы.

Preconnect выполняет полную настройку соединения, включая DNS-запрос, TCP-рукопожатие и TLS-переговоры. DNS-prefetch только разрешает доменное имя в IP-адрес. Используйте preconnect для критических сторонних источников, которые вы точно будете использовать. Используйте dns-prefetch для ресурсов, которые могут понадобиться, но менее определённы.

Да, вы можете использовать meta-тег с http-equiv, установленным в Content-Security-Policy. Однако CSP на основе meta имеет ограничения. Он не может использовать определённые директивы, такие как frame-ancestors или report-uri. Для полной функциональности CSP доставляйте его через HTTP-заголовки.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.