Как изменить кодировку сайта на utf 8

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

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

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

Несовпадение кодировок сервера и страницы будет причиной появления ошибок. Если они не совпадают, информация декодируется некорректно, так что контент на сайте будет отображаться в виде набора бессвязных букв, иероглифов и символов, в народе называемых «кракозябрами». Такой текст прочитать невозможно, так что пользователь просто уйдет с сайта и найдет другой ресурс. Или останется, если ему не очень важно содержание:

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

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

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

Яндекс четко заявляет:

«Тип используемой на сайте кодировки не влияет на индексирование сайта. Если ваш сервер не передает в заголовке кодировку, робот Яндекса также определит ее самостоятельно».

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

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

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

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

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

UTF-8

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

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

Windows-1251

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

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

Определить кодировку страницы своего или чужого сайта можно через исходный код страницы. Откройте страницу сайта, выберите «Просмотр кода страницы» (сочетание горячих клавиш Ctrl+U» в Google Chrome) и найдите упоминание «charset» внутри тега head.

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

Узнать вид кодирования можно с помощью «Анализа сайта». Сервис проверяет в том числе и техническую сторону ресурса: анализирует серверную информацию, определяет кодировку, проверяет редиректы и другие пункты.

С помощью этого же сервиса можно проверить корректность указанного кодирования. Аудит внутренних страниц «Анализа сайта» проверяет кодировку сервера и сравнивает ее с той, которая указана на внутренней странице. Найденные ошибки Анализ покажет в результатах проверки, и вы сразу узнаете, где нужно исправить.

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

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

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

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

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

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

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

Яндекс советует использовать одинаковую кодировку для страниц и кириллических адресов структуры. К примеру, если робот встретит ссылку 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. Некоторые браузеры могут не распознать указание кодировки, если оно будет ниже.

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

или так:

<meta charset="utf-8">

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

В темах WordPress обычно тег «charset» с кодировкой указан по умолчанию, но лучше проверить.

Кодировка в файле httpd.conf

Инструкции для сервера находятся в файле httpd.conf, обычно его можно найти на пути «/usr/local/apache/conf/».

Если вам нужно сменить кодировку Windows-1251 на UTF-8, замените строчку «AddDefaultCharset windows-1251» на «AddDefaultCharset utf-8».

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

Убедитесь, что сервер не передает HTTP-заголовки с конфликтующими кодировками.

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

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

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

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

Готовые файлы HTML важно сохранять в нужной кодировке сайта. Узнать текущую кодировку файла можно через Notepad++: откройте файл и зайдите в «Encoding». Меняется она там же: чтобы сменить кодировку на UTF-8, выберите «Convert to UTF-8 without BOOM». Нужно выбрать «без BOOM», чтобы не было пустых символов.

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

Выбирайте нужную кодировку сразу при создании базы данных. Распространенный вариант — «UTF-8 general ci».

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

1. Кликните по названию нужной базы в утилите управления БД phpMyAdmin и откройте ее.
2. Кликните на раздел «Операции»:
   
3. Введите нужную кодировку для базы данных MySQL:
   
4. Перейдите на сайт и очистите кэш.

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

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

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

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

Если вы хотите указать Windows-1251, то пишите не «utf-8», а «cp1251» — обозначение для кодировки Windows-1251 у MySQL.

Чтобы установить UTF-8 по умолчанию, откройте на сервере my.cnf и добавьте следующее:

В области [client]:

default-character-set=utf8

В области [mysql]:

default-character-set=utf8

В области [mysqld]:

collation-server = utf8_unicode_ci
init-connect='SET NAMES utf8'

character-set-server = utf8

Вы когда-нибудь сталкивались с проблемами кодировки на сайте?

В данной статье сведен перечень приемов для правильной работы сайта в кодировке UTF-8.

AddDefaultCharset UTF-8
AddCharset utf-8 .css .js .json .rss .xml

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<meta charset="utf-8">

header('Content-type: text/html; charset=utf-8');
setlocale(LC_ALL, 'ru_RU.UTF-8');

mb_internal_encoding('UTF-8');
mb_regex_encoding('UTF-8');
mb_http_input('UTF-8');
mb_http_output('UTF-8');
mb_language('uni');

php_value  mbstring.internal_encoding "UTF-8"
php_value  mbstring.regex_encoding    "UTF-8"
php_value  mbstring.http_input        "UTF-8" 
php_value  mbstring.http_output       "UTF-8" 
php_value  mbstring.language          "uni"

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:

   Она выглядит вот так:

2. Текстовая ссылка:

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   

Когда я только начинал изучать тему разработки сайтов, кракозябры были одной из моих постоянных проблем. Создал HTML-страницу — в браузере кракозябры, установил денвер и попробовал создать сайт на PHP — снова вместо букв кракозябры. Скачал иностранную тему, подключился к базе данных — та же проблема.

На своих сайтах я обычно использую UTF-8 (это такая кодировка текста, она ещё называется юникод), соответственно она будет присутствовать во всех примерах в этой статье.

1. UTF-8 без BOM

Начнём с самой простой проблемы. Вы создали какой-то HTML-файл, открыли его в браузере и получили:

Проблема актуальна в основном для пользователей Windows, на маке я с таким ни разу не сталкивался.

Решение проблемы зависит в основном от того, каким редактором вы пользуетесь. Для пользователей Windows я рекомендую бесплатный офигительный Notepad++.

Значит, открываем файл в Notepad++ и переходим в Кодировки > Преобразовать в UTF-8 без BOM. Вопрос — почему без BOM? Потому что с BOM у вас будут постоянно вставляться пустые символы (на самом деле они не пустые, у них тоже есть своя функция, но нам она в данном случае не нужна) куда не надо, а для PHP это уже критично.

2. Мета тег charset

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

Всё, что нам требуется, это вставить следующий код между тегами <head> сайта. Прежде всего проверьте, возможно этот метатег у вас уже присутствует. Если да, то посмотрите какое у него стоит значение параметра charset.

В темах WordPress обычно этот тег уже имеется по умолчанию и выглядит следующим образом:

<meta charset="<?php bloginfo('charset'); ?>" />

3. .htaccess

Если русские буквы до сих пор отображаются кракозябрами, тогда открываем ваш .htaccess, который лежит в корне сайта и вставляем туда с новой строки это:

4. Заголовки сервера через header()

Ещё один способ определения кодировки. На этот раз через PHP. На WordPress никогда не приходилось им пользоваться.

header('Content-Type: text/html; charset=utf-8');

Важно! Этот код должен вставляться до того, как будет что-либо выведено на странице сайта, иначе — ошибка.

5. Проблемы с последним символом при обрезке строки

На многих сайтах встречаются блоки с популярными записями, последними комментариями, отзывами и так далее. Обычно в таких обзорных блоках выводится часть записи/комментария/отзыва и кнопка «читать далее». Так вот, для того, чтобы вывести первые несколько предложений или первые несколько слов текста, используется функция PHP substr(). Конечно же в основном я имею ввиду англоязычные темы, которых так много в интернете. Даже если у этих тем есть локализация — то есть вроде бы она на русском — переведена админка, переведён практически весь сайт, но при этом мы встречаем такие вот косяки:

Как решить эту проблему?

Легко — всё что нам нужно, это найти функцию substr() в коде и поменять её на mb_substr().

Если после этого у вас полезут ошибки на сайт, то скорее всего multibyte-функции не поддерживаются вашим хостингом, первое, что вам следует сделать, это написать в супорт и спросить, нельзя ли их подключить на ваш аккаунт. Если нет, меняем хостинг, например на тот, которым пользуюсь я.

6. MySQL

У меня не раз бывало такое, что я подключался к MySQL, вытаскивал какие-нибудь данные, и при их выводе на сайте, текст отображался кракозябрами.

Такое может произойти, если кодировка вашего сайта не совпадает с кодировкой базы данных, к которой вы подключаетесь. В WordPress обычно таких проблем не бывает.

Для того, чтобы исправить это, после подключения к БД, делаем следующее:

mysql_query("SET NAMES 'UTF8'");

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