Как сделать кодировку utf 8

Обновлено: 04.07.2024

На сколько бы это глупо не казалось, но для удачного выставления кодировки необходимо выполнить целых 11(!) правил.
Хочу зарание предупредить, если какая-то из настроек в .htaccess повлечет за собой ошибку 500, это значит, что хостинг запретил менять этот параметр на сервере. В таком случае проверьте тот факт, что у Вас UTF-8 и в случае чего обратитесь к админам хостинга.
И для тех, кто попал на эту страницу с вопросами об Ajax: Ajax работает в кодировке UTF-8.

Правило №1: Указываем в HTML верстке в теге первой строчкой, кроме случаев, где мы будем использовать тег , так как он так же как и кодировка имеет приоритет над расположением, следующий код:


Правило №2: Указываем кодировку для PHP и самого файла, для этого нам необходимо выставить заголовок функцией header(). Выставляем его в самом начале нашего файла (абсолютно в самом начале), сразу после указания уровня вывода ошибок:

Правило №3: Кодировка для подключения к к БД MySQL. Устанавливается после подключения к БД и выбора бд (mysql_connect, mysql_select_db). Если у нас модуль mysql:

или улучшенный модуль mysqli:


Правило №4: Кодировка в .htaccess:


Правило №5: Кодировка для библиотеки mb, начиная с версии php 5.4 можно не указывать, так как по умолчанию будет использоваться именно UTF-8. Ну а пока прописываем её в файле .htaccess:

Либо в самом PHP, что в итоге выполнит одни и те же действия:


Правило №6: При сохранении файлов (обязательно ВСЕХ!) выбрать кодировку UTF-8 without BOM, повторюсь, without BOM - это необходимая настройка, в противном случае Ваш сайт не будет работать как надо. Для тех, кто пользуется удобной программой DreamWeaver:
Modify => Page Properties => Title/Encoding и выставляем "Encoding: UTF-8", после чего нажимаем ReLoad, убираем галочку с BOM "Include Unicode Signature (BOM)". Apply + OK.
Модификации => Свойства страницы => Заголовок/Кодировка и выставляем кодировку UTF-8. Нажимаем "перезагрузить", убрали галочку с Подключить Юникод Сигнатуры (BOM). Применить и OK.

Правило №7: если на данный момент какой-то из текстов был введён на странице или в БД - его необходимо перенабрать. Дело в том, что символ в одной кодировке представляет один набор бит для русских символов, а в другой - другой. Именно поэтому необходимо его либо перенабрать, либо перекодировать. Современные программы имеют возможность перевести текст из одной кодировки в другую. Об этой возможности интересуйтесь в мануалах Ваших программ.

Правило №8: Есть исключение, когда текст приходит к Вам на страницу с другого сайта в другой кодировке. Тогда на PHP есть удобная функция для перевода из одной кодировки в другую:


Правило №9: Для строковых функций strlen, substr, необходимо использовать их аналоги на библиотеке mb_, а именно: mb_strlen, mb_substr, то есть к функции дописываем mb_ .

Правило №10: Для работы с регулярными выражениями необходимо указывать модификатор u . Это обязательный параметр!

Правило №11: Для CSS файлов указывается кодировка так:


В заключение скажу, что символы в кодировке WIN-1251 состоят из 1 байта, то есть 8 бит, а в свою очередь в кодировке UTF-8 символы могут состоять от 1 до 4 байт, всё дело в том, что кодировка UTF-8 позволяет создавать мультиязычные сайты, так как все существующие в мире символы в ней присутствуют.
Ради любопытства русская буква в кодировке UTF-8 занимает 2 байта, именно поэтому за 1 символ функция strlen возвращает длину 2, то есть 2 байта, а mb_strlen возвращает уже правильную длину в 1 символ.

Кракозябры

Каждый вебмастер сталкивался с проблемой неправильного отображения текста на странице:

Это случается по одной из следующих причин: текст имеет кодировку, которая не соответствует указанной в документе или передаваемой сервером; кодировка документа указано неверно; сервер отдаёт документ, указывая неправильную кодировку.

Далее везде будет применяться кодировка UTF-8, так как она наиболее универсальная и её рекомендуется использовать повсеместно.

Текст

Первым делом нужно проверить кодировку текста в документе. Рассмотрим как это делается в Блокноте и Notepad++.

Блокнот

  1. Открываем Блокнот: Win+R → notepad ; и копируем в него код страницы.
  2. Кликаем Файл → Сохранить как. или нажимаем Ctrl+S .
  3. В поле Имя файла вводим название документа с расширением.
  4. В поле Тип файла выбираем Все файлы , так как иначе не учтётся введённое расширение и файл сохраниться в формате txt (это зависит от настроек операционной системы).
  5. Ставим кодировку UTF-8 и сохраняем документ.

Notepad++

Нужно выбрать именно Преобразовать в UTF-8 без BOM , а не Кодировать в UTF-8 (без BOM) .

За представление кодировки HTML-документа отвечает элемент с атрибутом charset , который располагается между и : HTML 5: HTML 4.01:

Сервер

На реальном хостинге никто не предоставит возможность изменять конфигурацию сервера своим клиентам, поэтому этот момент пропускаем.

Сохранение файла с расширением .htaccess через Блокнот

Чтобы указать кодировку, с которой сервер должен отдавать HTML-документы, нужно сделать следующее (на примере использования Блокнота): открыть Блокнот: Win+R → notepad ; и написать в нём следующую строку: AddDefaultCharset UTF-8 кликнуть Файл → Сохранить как. или нажать Ctrl+S ; в поле Имя файла ввести .htaccess ; в поле Тип файла выбрать Все файлы и сохранить файл в корень сайта.

Файлы без имени с расширением .htaccess позволяют конфигурировать некоторые опции сервера Apache.

Если всё сделано правильно, то текст на странице должен отобразиться правильно, то есть так, как он представлен в текстовом редакторе.

Бывали ли у вас ситуации, когда на web-странице вместо читабельного текста открывались кракозябры? Я уверен, что бывали или, по крайне мере, вы видели их на других сайтах. Если не видели, посмотрите на пример снизу:

HTML кодировка страницы. В какой кодировке сохранять web-страницу

Что такое HTML кодировка?
HTML кодировка – это таблицы соответствия кодов и символов алфавита. То есть, наш компьютер по кодировке поменяет код на понятные читабельные буквы.

Что такое HTML кодировка?

Популярные кодировки.
На сегодняшний день существуют две самые популярные кодировки в русскоязычном интернете. Это кодировка windows-1251 и utf-8. Частенько веб-мастерам приходится выбирать, в какой кодировке делать им веб-страничку.

В какой кодировке следует сохранять HTML файл?
Большинство веб-мастеров выбирают кодировку utf-8. И это верный выбор, так как в кодировке utf-8 имеются различные знаки ( ↓↑ и т. д.), а также есть масса разнообразных специфических символов. Кстати, основная часть движков, как Joomla, WordPress, Drupal работает на кодировке utf-8.

Поэтому я рекомендую вам сохранять HTML файлы в кодировке utf-8 .

Как задать кодировку UTF-8 для файла?

Чтобы сообщить браузеру, в какой кодировке HTML файл, существует специальный META-тег

В HTML документе это будет выглядеть вот так:

Как задать кодировку windows-1251 для файла?

Чтобы сообщить браузеру, в какой кодировке HTML файл, существует специальный META-тег

В HTML документе это будет выглядеть вот так:

Пример перекодировки файла из windows-1251 в utf-8


Как кодировка влияет на отображение сайта, чем отличается UTF-8 от Windows 1251 и где указать кодировку.

В статье:

Зачем нужна кодировка

Кодировка (Charset) — способ отображения кода на экране, соответствие набора символов набору числовых значений. О ней сообщает строка Content-Type и сервер в header запросе.

На сайте слетела кодировка, пример

Студентка списывала реферат с формулами, а на сайте слетела кодировка. Реальная история

Google рекомендует всегда указывать сведения о кодировке, чтобы текст точно корректно отображался в браузере пользователя.

Кодировка влияет на SEO?

Разберемся, как кодировка на сайте влияет на индексацию в Яндекс и Google.

Позиция Google такая же. Поисковики не рассматривают Charset как фактор ранжирования или сигнал для индексирования, тем не менее, она косвенно влияет на трафик и позиции.

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

Некорректно указана кодировка на сайте

Пример страницы со слетевшей кодировкой

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

Виды кодировок

Существует довольно много видов, но сейчас распространены два:

Unicode Transformation Format — универсальный стандарт кодирования, который работает с символами почти всех языков мира. Символы могут занимать от 1 до 4 байт, такое кодирование позволяет создавать мультиязычные сайты.

Есть несколько вариантов — UTF-8, 16, 32, но чаще используют восьмибитное.

Windows-1251

Этот вид занимает второе место по популярности после UTF-8. Windows-1251 — кодирование для кириллицы, созданное на базе кодировок, использовавшихся в русификаторах операционной системы Windows. В ней есть все символы, которые используются в русской типографике, кроме значка ударения. Символы занимают 1 байт.

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

Как определить кодировку на сайте

На странице сайта используется кодировка UTF-8:

Как посмотреть, какая кодировка на сайте

Указание кодировки в коде страницы

Как определить кодировку на сайте

Фрагмент анализа серверной информации сайта

Проверка кодировки на сайте

Отчет о технических данных

Проверить корректность кодировки онлайн

Кодировка сервера и страницы

Проверить кодировку еще можно через сервис Validator.w3, о котором писали в статье о проверке валидации кода. Нужная надпись находится внизу страницы.

Сервис для проверки кодировки на сайте

Кодировка сайта в валидаторе

Если валидатор не обнаружит Charset, он покажет ошибку:

Некорректная кодировка, пример

Ошибка указания кодировки

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

Если кодировка не отображается

Главное правило — для всех файлов, скриптов, баз данных сайта и сервера должна быть указана одна кодировка. Ошибка может возникнуть, если вы случайно указали на сайте разные виды кодировки.

Яндекс советует использовать одинаковую кодировку для страниц и кириллических адресов структуры. К примеру, если робот встретит ссылку href="/корзина" на странице с кодировкой UTF-8, он сохранит ее в этом же UTF-8, так что страница должна быть доступна по адресу "/%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D0%B0".

Где указать кодировку сайта

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

  • кодировка в мета-теге;
  • кодировка в .htaccess;
  • кодировка документа;
  • кодировка в базе данных MySQL.

Кодировка в мета-теге

Добавьте указание кодировки в head файла шаблона сайта.

При создании документа HTML укажите тег meta в начале в блоке head. Некоторые браузеры могут не распознать указание кодировки, если оно будет ниже.

Мета-тег может выглядеть так:

В HTML5 они эквивалентны.

Где указывать кодировку на сайте

Тег кодировки в HTML

Осторожнее: если вы измените в файле кодировку по умолчанию, то она изменится для всех проектов на этом сервере.

Кодировка в .htaccess

Добавьте кодировку в файл .htaccess:

  1. Откройте панель управления хостингом.
  2. Перейдите в корневую папку сайта.
  3. В файле .htaccess добавьте в самое начало код:
    1. для указания кодировки UTF-8 — AddDefaultCharset UTF-8;
    2. для указания кодировки Windows-1251 — AddDefaultCharset WINDOWS-1251.

    Кодировка документа

    Кодировка Базы данных

    Где менять кодировку у БД:

    С новой БД проще, но если вы меняете кодировку у существующей базы, то у созданных таблиц и колонок заданы свои кодировки, которые тоже нужно поменять.

    Для всех таблиц, колонок, файлов, сервера и вообще всего, что связано с сайтом, должна быть одна кодировка.

    Проблема может не решиться, если все дело в кодировке подключения к базе данных. Что делать:

    1. Подключитесь к серверу с правами mysql root пользователя:
      mysql -u root -p
    2. Выберите нужную базу:
      USE имя_базы;
    3. Выполните запрос:
      SET NAMES 'utf8’;

    Читайте также: