Мета-теги 2 мин чтения

Кодировка страницы (charset)

Одна строка в начале документа, без которой русский текст превращается в «кракозябры».

Кодировка определяет, как последовательность байтов превращается в буквы. Если браузер угадает неправильно, вместо «Привет» посетитель увидит пÑÐ¸Ð²ÐµÑ или Ïðèâåò.

Правильное объявление — первой строкой в <head>:

<head>
    <meta charset="utf-8">
    <title>…</title>
</head>

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

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

Поисковик тоже читает мусор. Некорректно распознанный текст ломает индексацию: страница попадает в базу с нечитаемым содержимым, ключевые слова не находятся, Title в выдаче выглядит набором символов.

Есть требование к расположению. Объявление должно уместиться в первые 1024 байта документа — иначе браузер начнёт разбирать страницу раньше, чем узнает кодировку, и потом перезапустит разбор. Ставьте <meta charset> сразу после открывающего <head>, до <title> и до всех скриптов.

Какую кодировку выбирать

UTF-8 — и никаких вариантов. Это стандарт, он вмещает все языки сразу, эмодзи и типографские символы. Устаревшие windows-1251 и koi8-r встречаются на старых сайтах и создают проблемы при любом обмене данными: формы, выгрузки, API.

Как задать правильно

Кодировка объявляется в двух местах, и они должны совпадать:

1. В HTML:

<meta charset="utf-8">

2. В HTTP-заголовке — он приоритетнее мета-тега:

Content-Type: text/html; charset=utf-8

Настройка в nginx:

charset utf-8;

3. Сами файлы должны быть сохранены в UTF-8, желательно без BOM. В редакторе кодировка отображается в строке состояния; VS Code позволяет переоткрыть и пересохранить файл в нужной кодировке.

Отдельно проверьте кодировку соединения с базой данных: сайт в UTF-8, а база в cp1251 — классическая причина, когда часть текста нормальная, а данные из базы отображаются мусором.

Как проверить

  • Пункт аудита «Кодировка (charset)».
  • Вручную:
curl -I https://example.ru/ | grep -i content-type
  • В браузере: F12Network → первый запрос → HeadersContent-Type.

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

А что с этим на вашем сайте?

Аудит «Кверху» проверяет этот пункт вместе с остальными пятьюдесятью и показывает конкретику: какие страницы затронуты и что именно исправить. Первая полная проверка проекта — бесплатно.

Проверить сайт бесплатно