Блок <head> содержит служебную информацию о странице — её не видно напрямую в контенте, но она критически важна для браузера, поисковых систем и пользователей. Разберём, какие элементы в <head> нужны почти всегда, а какие добавляют только при конкретных задачах.
Обязательные элементы
<meta charset="utf-8">
Это самый важный метатег. Он задаёт кодировку документа. Для веба стандартом считается UTF‑8 — она корректно отображает кириллицу, эмодзи, спецсимволы и символы из разных языков.
Если этот тег не указать, браузер попытается угадать кодировку, и вместо русских букв можно получить «кракозябры». В современных проектах UTF‑8 — единственный разумный выбор.
<meta charset="utf-8">
<title>
Заголовок страницы — это то, что видно во вкладке браузера, в закладках и в результатах поиска. Он обязателен, потому что без него страница технически валидна, но пользователь и поисковик не понимают, о чём она.
Заголовок должен быть кратким, осмысленным и уникальным для каждой страницы. Для статей и товаров хорошо включать название и, при необходимости, бренд.
<title>Как выбрать велосипед — Магазин ВелоМир</title>
Почти всегда нужные (де‑факто стандарт)
<meta name="viewport" content="width=device-width, initial-scale=1">
Этот тег нужен для адаптивности на мобильных устройствах. Без него сайт будет отображаться как уменьшенная десктопная версия, и пользователю придётся масштабировать страницу пальцами.
width=device-width говорит браузеру, что ширина страницы должна совпадать с шириной экрана устройства, а initial-scale=1 задаёт начальный масштаб 1:1.
<meta name="viewport" content="width=device-width, initial-scale=1">
В 99% случаев этот тег ставят на все страницы, даже если сайт не выглядит «мобильным» — он предотвращает проблемы с отображением и масштабированием.
По ситуации: когда и зачем добавлять
SEO и соцсети: description, Open Graph
<meta name="description" content="...">— краткое описание страницы для поисковой выдачи. Оно не влияет напрямую на ранжирование, но сильно влияет на кликабельность. Ставят на все публичные страницы, где важно привлекать трафик из поиска.- Open Graph теги (
og:title,og:description,og:imageи т. д.) нужны, чтобы при публикации ссылки в соцсетях отображались красивые карточки. Добавляют, если страницей будут делиться в Telegram, VK, Facebook и т. п.
Пример:
<meta name="description" content="Рассказываем, как выбрать велосипед по росту, весу и типу дорог."> <meta property="og:title" content="Как выбрать велосипед"> <meta property="og:description" content="Практическое руководство по подбору велосипеда для города, шоссе и бездорожья."> <meta property="og:image" content="https://example.com/images/bike-guide.jpg">
Канонические ссылки: <link rel="canonical" href="...">
Нужен, если у одной и той же страницы есть несколько URL (например, с параметрами, UTM‑метками или дублями). Тег указывает поисковику, какой URL считать основным. Ставят, когда есть риск дублей контента.
<link rel="canonical" href="https://example.com/articles/how-to-choose-bike">
Иконки сайта: <link rel="icon" ...>
Иконка, которая отображается во вкладке браузера и в закладках. Не обязательна для работы сайта, но делает его визуально приятнее и узнаваемее.
<link rel="icon" type="image/png" href="/favicon.png">
Для современных браузеров и ОС часто добавляют несколько иконок под разные размеры и форматы (включая Apple Touch Icon и манифест для PWA), но для базового сайта достаточно одной.
Подключение стилей и скриптов
<link rel="stylesheet" href="style.css">— подключение CSS. Ставится всегда, когда есть стили.<script>и атрибутыasync/defer— для скриптов. Если JS нужен для отображения, иногда его ставят в<head>, но чаще скрипты переносят в конец<body>или используютdefer.
Предзагрузка ресурсов: <link rel="preload" ...>
Используется, чтобы браузер раньше начал загружать критические ресурсы (шрифты, главный баннер). Добавляют только при необходимости оптимизации производительности, когда нужно ускорить отображение ключевых элементов.
<link rel="preload" as="font" href="/fonts/main-bold.woff2" type="font/woff2">
Манифест и настройки PWA: <link rel="manifest" ...>, <meta name="theme-color" ...>
Нужны, если сайт делают как Progressive Web App (чтобы его можно было «установить» на телефон). Для обычных сайтов не требуются.
Специфические случаи
- Для перевода и локализации: атрибуты
langна<html>и иногда<meta http-equiv="Content-Language" content="ru">(второй вариант считается устаревшим, но иногда встречается в легаси‑проектах). - Для печати и специальных режимов: например,
<meta name="robots" content="noindex, nofollow">, если страницу не нужно индексировать (черновики, личные кабинеты, результаты поиска внутри сайта). - CSP (Content Security Policy):
<meta http-equiv="Content-Security-Policy" content="...">. Используется для защиты от XSS. Чаще CSP передают через HTTP‑заголовки, но в некоторых случаях (например, при отсутствии доступа к настройкам сервера) допустимо использовать метатег.
Практические советы для реальных проектов (в том числе с PHP и админками)
Учитывая твои задачи по разработке CMS и админ‑панелей, удобно вынести обязательные метаданные в общий шаблон:
<!DOCTYPE html> <html lang="<?php echo $lang; ?>"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><?php echo htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8'); ?></title> <?php if ($description): ?> <meta name="description" content="<?php echo htmlspecialchars($description, ENT_QUOTES, 'UTF-8'); ?>"> <?php endif; ?> <!-- Стили и скрипты --> <link rel="stylesheet" href="/assets/css/style.css"> </head> <body> <!-- контент --> </body> </html>
Такой подход:
- гарантирует, что обязательные теги будут на всех страницах;
- позволяет добавлять дополнительные метаданные только там, где они нужны;
- защищает от XSS за счёт экранирования переменных.
Частые ошибки
- Несколько
<title>на странице. На одной странице должен быть только один тег<title>. Дублирование приводит к непредсказуемому поведению в браузерах и поисковиках. - Неправильный порядок.
<meta charset>лучше ставить как можно раньше в<head>— желательно первым элементом после открывающего<head>. Это снижает риск проблем с кодировкой до загрузки стилей и скриптов. - Лишние метатеги. Некоторые старые шаблоны содержат десятки метатегов «на всякий случай» (ключевые слова, генераторы CMS и т. п.). Они не приносят пользы и только раздувают код.
- Ошибки в атрибутах. Например, путаница между
nameиproperty, неправильные значенияcontentили опечатки в названиях.
Таким образом, минимальный обязательный набор в <head> — это <meta charset="utf-8">, <title> и почти всегда <meta name="viewport">. Остальные метаданные добавляют под конкретные задачи: SEO, соцсети, производительность, безопасность или PWA. Такой подход делает код чистым, предсказуемым и удобным для поддержки, особенно в проектах с динамической генерацией страниц и админ‑панелями.
Загрузка...