Технические

Что такое мета-тег charset и почему без него текст превращается в кракозябры

Обычно причина того, что апострофы, ударения и спецсимволы превращаются в бессмыслицу, — это одна отсутствующая строка кода.

Что это

Каждая буква, цифра и символ в компьютере в конечном счёте хранится в виде чисел — «кодировка символов» (или «charset») — это просто согласованная система, определяющая, какое число какому символу соответствует. UTF-8 — это стандартная, практически универсальная кодировка, используемая в современном вебе повсеместно: она способна отобразить практически любой символ на любом языке, от обычных английских букв до эмодзи и символов с ударениями вроде é или ñ.

Мета-тег charset — это одна строка в коде страницы, которая сообщает браузеру: «читай текст этой страницы по системе UTF-8». Без неё браузеру приходится угадывать, какая система использовалась, и именно неверная догадка приводит к тому, что апострофы и кавычки превращаются в странные наборы символов вроде ’.

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

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

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

Как это исправить

  1. Добавьте <meta charset="UTF-8"> самой первой строкой внутри раздела <head> вашей страницы — чтобы браузеры применили её корректно, она должна идти раньше остальных тегов.
  2. Если вы используете конструктор сайтов или CMS (WordPress, Squarespace, Wix, Webflow), эта строка почти всегда уже правильно задана в шаблоне сайта — проблема с искажённым текстом чаще возникает из-за контента, вставленного из другой программы (например, Microsoft Word), которая несёт собственную скрытую кодировку.
  3. Если причина именно во вставке из Word или другого текстового редактора, попробуйте вставлять текст как «обычный текст» (plain text), а затем заново применить жирный шрифт или курсив уже в самом редакторе сайта.
  4. После внесения изменений перезагрузите нужную страницу и проверьте, что апострофы, кавычки и буквы с ударениями теперь отображаются правильно.
  5. Повторно запустите проверку Launch Readiness, чтобы убедиться, что тег charset теперь обнаруживается.

Проверьте, есть ли эта проблема на вашем сайте

Launch Readiness проверяет ваш сайт на эту и ещё ~50 проблем перед запуском за несколько секунд — бесплатно, без регистрации.

Запустить бесплатную проверку