Вместо текста на странице появились кракозябры. Или сайт отображается нормально в одном браузере, но ломается в другом. Или поисковик показывает в сниппете неправильные символы. Причина почти всегда в кодировке и meta charset. Разберём, почему это происходит и как исправить.
Что такое meta charset и зачем он нужен
Meta charset — это тег в head, который сообщает браузеру, в какой кодировке сохранена страница. Без него браузер может неправильно интерпретировать символы, и вместо текста появятся кракозябры.
Типичный корректный тег:
<meta charset="utf-8">
UTF-8 — стандартная кодировка для современного веба. Она поддерживает большинство языков и символов. Если сайт использует другую кодировку (например, Windows-1251), это нужно явно указать.
Проблемы возникают, когда:
— meta charset отсутствует;
— указана неверная кодировка;
— кодировка в meta не совпадает с кодировкой файла;
— тег стоит не в начале head;
— кодировка меняется на уровне сервера.
Причина 1: meta charset отсутствует
Если тег отсутствует, браузер пытается определить кодировку автоматически. Это может сработать, а может привести к кракозябрам.
Что проверить:
— есть ли meta charset в head;
— в каком месте head он находится;
— совпадает ли кодировка с файлом.
Решение — добавить meta charset="utf-8" в head, желательно в самом начале.
Причина 2: неверная кодировка
Если указана неверная кодировка, браузер интерпретирует символы неправильно. Например, файл сохранён в UTF-8, а meta charset указывает Windows-1251.
Что проверить:
— в какой кодировке сохранён файл;
— какая кодировка указана в meta charset;
— совпадают ли они;
— какая кодировка отдаётся в HTTP-заголовке Content-Type.
Для проверки используйте проверка meta charset — инструмент покажет, какая кодировка указана и совпадает ли она с фактической.
Причина 3: тег стоит не в начале head
Meta charset должен находиться в начале head, до других тегов. Если он стоит позже, браузер может начать парсинг с неправильной кодировкой.
Что проверить:
— где находится meta charset;
— есть ли перед ним другие теги;
— не добавляется ли он через JavaScript.
Решение — разместить meta charset в самом начале head, до title и других тегов.
Причина 4: кодировка меняется на уровне сервера
Иногда сервер отдаёт заголовок Content-Type с другой кодировкой, чем указано в meta charset. Браузер может использовать заголовок вместо meta.
Что проверить:
— заголовок Content-Type;
— совпадает ли кодировка в заголовке с meta charset;
— не переопределяет ли сервер кодировку.
Решение — привести кодировку в заголовке и в meta charset к одному значению.
Причина 5: кодировка файла не совпадает
Даже если meta charset указан правильно, файл может быть сохранён в другой кодировке. Например, meta charset="utf-8", а файл сохранён в Windows-1251.
Что проверить:
— в какой кодировке сохранён файл;
— совпадает ли она с meta charset;
— нет ли BOM-символа в начале файла.
Решение — пересохранить файл в правильной кодировке или изменить meta charset.
Как найти причину
Пошаговая диагностика:
— проверьте наличие meta charset;
— проверьте, какая кодировка указана;
— проверьте, в какой кодировке сохранён файл;
— проверьте заголовок Content-Type;
— проверьте, где находится тег в head;
— проверьте, нет ли BOM-символа.
Как исправить
План действий:
— добавить meta charset="utf-8" в начало head;
— убедиться, что файл сохранён в UTF-8;
— привести заголовок Content-Type к той же кодировке;
— убрать BOM-символ, если он есть;
— проверить результат в разных браузерах.
Как проверить результат
Чек-лист:
— meta charset указан;
— кодировка совпадает с файлом;
— заголовок Content-Type совпадает;
— нет кракозябр;
— текст отображается корректно в разных браузерах;
— поисковик показывает корректный сниппет.
Если нужно проверить сразу несколько параметров — charset, заголовки, HTML — логично перейти к SEO-аудиту.
Частые ошибки
— отсутствие meta charset;
— неверная кодировка;
— тег не в начале head;
— несовпадение кодировки файла и meta charset;
— несовпадение с Content-Type;
— BOM-символ в начале файла.
FAQ
Почему на сайте появились кракозябры?
Скорее всего, meta charset отсутствует или указан неправильно, либо кодировка файла не совпадает с указанной.
Какую кодировку использовать?
UTF-8. Это стандарт для современного веба, поддерживает большинство языков и символов.
Где должен находиться meta charset?
В начале head, до title и других тегов. Это позволяет браузеру правильно интерпретировать символы с самого начала.
Может ли Content-Type переопределять meta charset?
Да. Если заголовок Content-Type указывает другую кодировку, браузер может использовать его вместо meta charset.
Что такое BOM-символ?
Это специальный символ в начале файла, который указывает кодировку. Иногда он мешает отображению. Лучше сохранять файлы без BOM.
Влияет ли кодировка на SEO?
Да. Если поисковик неправильно интерпретирует текст, страница может хуже ранжироваться, а сниппет будет содержать кракозябры.
Почему сайт отображается нормально в одном браузере, но не в другом?
Разные браузеры по-разному определяют кодировку, если она не указана. Явное указание meta charset решает проблему.
Нужно ли указывать кодировку в HTTP-заголовке?
Да, это помогает браузеру и поисковику правильно интерпретировать страницу. Кодировка в заголовке и в meta charset должна совпадать.
Как проверить кодировку страницы?
Используйте инструмент проверки meta charset. Он покажет, какая кодировка указана и совпадает ли она с фактической.
Что делать, если кракозябры только в поисковой выдаче?
Проверьте, правильно ли указана кодировка, и запросите переобход. Поисковик может кэшировать старую версию страницы.
