Как изменить кодировку файла html

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

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

В статье:

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

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

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

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

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

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

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

Кодировка (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 они эквивалентны.

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

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

В темах 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

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

Что такое кодировка страницы или «meta charset«, вообще — для чего нужна кодировка страницы — она помогает браузеру правильно отображать содержимое страницы. Где располагается тег кодировки страницы. Как изменить кодировку страницы.

  • О кодировке вообще и о типах и видах кодировок

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

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

    + Встроенная и наружная кодировка..

    У физически существующего файла может быть и «Встроенная и наружная кодировка».
    О внутренней, как-то мы говорили на примере — txt файла. И аналогично может быть и с файлами html.хзъ

    И наружная кодировка с помощью тега meta:

    <meta charset=»UTF-8″>

    Нажимаем по странице ctrl+U и видим нашу кодировку в самом верху страницы:

    О кодировке вообще и о типах и видах кодировок

    Типы и виды кодировок

    Нас конечно же прежде всего интересуют кодировки, которые завязаны на русском языке.

    1.

    «utf-8» – это универсальная кодировка.

    2.

    «windows-1251» – это кириллица.

    И тут конечно же я должен сказать о собственном опыте, которому уже намечается 10 лет… так вот!

    В самом начале, когда я только начинал, я начинал с кодировки «windows-1251», но с этой кодировкой, постоянно возникали какие-то проблемы, сейчас уже вспомнить будет трудно, но в конце концов, я перешел на «utf-8»

  • Что означает обозначение utf-8

    И конечно же нам требуется пару строк написать о том, что же означает эта самая кодировка «utf-8» :

    И конечно же нам требуется пару строк написать о том, что же означает эта самая кодировка «utf-8» :
    UTF-8 (от англ. Unicode Transformation Format, 8-bit — «формат преобразования Юникода, 8-бит») — распространённый стандарт кодирования текста, позволяющий более компактно хранить и передавать символы Юникода, используя переменное количество байт (от 1 до 4), и обеспечивающий полную обратную совместимость с 7-битной кодировкой ASCII.

    Я думаю, что дальше нет никакого смысла углубляться…

    Нам в принципе нужно, чтобы наши данные отображались на станице корректно…

  • Как определить кодировку страницы?

    В открытом браузере нажимаем сочетание кнопок ctrl + U.

    Должна открыться дополнительная страница с кодом!

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

  • Где находится кодировка страницу?

    Обычно  кодировку ставят на странице в самом начале, вот пример кодировки, здесь кодировка страницы стоит на 4 строке. И имеет вид:

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

    Что означает, что страница сделана в кодировке utf-8.

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

    Это – одна из самых распространённых кодировок.

    Либо кириллическая кодировка:

    <meta  charset=»windows-1251″>

  • Как изменить кодировку страницы html

    Если это простая – физическая(файл) — стандартная страница html, то вам просто её нужно открыть в каком-то редакторе и заменить кодировку на ту, которая вам требуется!

    Как изменить кодировку страниц, если у вас движок!? В каждом движке есть определенная логика. Как в любом скрипте. Как у обычной страницы у движка есть блоки, из которых он собирает эти страницы – вам просто нужно найти тот блок, который и выводит вашу кодировку в браузер…

  • Пример неправильной кодировки.

    Иногда данная кодировка вызывает разные проблемы…

    К примеру некоторые хостинги, просто не поддерживают данную кодировку.

    Вот так будет выглядеть страница с нарушенной кодировкой.

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

  • Почему на странице появляются кракозябры!?

    На самом деле есть несколько причин для возникновения так называемых кракозябр!

    1.

    Неправильная кодировка страницы, ну к примеру, если вы установите кодировку китайскую, а напишите кириллический текст, то что должно произойти!?  Браузер просто сойдет с ума не зная, что вам показать и покажет кракозябры.

    2.

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

    3.

    Сервер не поддерживает данную кодировку!

  • Как изменить неправильную кодировку!?

    Кодировки на странице можно найти в нескольких местах:

    1). Изменение кодировки страниц в тегах «meta»

    Если идет речь о вашей странице на вашем сайте, то нужно открыть вашу страницу в блокноте и изменить кодировку страницы. Если сайт на движке,  то нужно найти основную страницу, в которой прописана кодировка и изменить её на соответствующую!

    Кодировка страницы прописывается в тегах «meta»

    Пример:

    У меня, естественно, самописный движок, поэтому, мы открываем основную страницу, которая отвечает за всё и там есть кодировка страницы :

    1). Изменение кодировки страниц в тегах ‘meta‘

    2.

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

    3.
    Если это проблема сервера, то стоит попробовать  внести изменения в файл — .htaccess внеся в него такую надпись:

    Если это не помогает, то придется поглубже окунуться в эту тему! Если у вас хорошая поддержка на хостинге, как например тот, что у меня! И если я в тупике, то частенько они меня выручали !

    Пояснение

    Речь идёт не об изменении мета-тега кодировки <meta http-equiv="content-type" content="text/html; charset=UTF-8"> или о записи в .htaccess AddDefaultCharset UTF-8

    Эта статья впервые была опубликована в декабре 2012-го на моём сайте. Сейчас я её восстанавливаю из архива.

    Задача

    Нужно физически изменить кодировку нескольких .html файлов. Обычно это делается через «Сохранить как» с указанием нужной нам кодировки. Но есть более простой способ.

    Решение

    Нам понадобится программа HTML Changer (автор: Еманов Алексей).

    Форматы файлов, поддерживаемых программой: .asp, .htm, .html, .inc, .js, .php, .phtml, .rtf, .shtm, .shtml, .txt.

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

    Начинаем

    Сама программа не требует установки. Вы просто распаковываете архив в любое удобное для вас место и запускаете HTMLChanger.exe.

    Начальный интерфейс HTML Changer

    Начальный интерфейс HTML Changer

    Затем вы нажимаете «Добавить папку (или файлы)»:

    Выбираем папку с исходными файлами

    Выбираем папку с исходными файлами

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

    Выбираем папку с исходными файлами

    Выбираем папку с исходными файлами

    Когда вы выбрали нужную папку, нажимаете OK.

    Папки для работы

    Папки для работы

    Затем переходим во вкладку перекодировка и выбираем, из какой в какую кодировку нам нужно перегнать файлы.

    Выбираем кодировки файлов

    Выбираем кодировки файлов

    Возвращаемся на начальную вкладку. Важно убрать выделение с кнопки Поиск/Замена, т.к. если вы не собираетесь ничего заменять в самих файлах, то программа выдаст ошибку.

    Не забываем убрать выделение

    Не забываем убрать выделение

    Жмём обработать и… Всё! Обновлённые файлы лежат на месте старых. А старые файлы сохранены в папке ProjectsBackup (в папке с программой). Вот так вот просто и быстро можно поменять кодировку файлов.


    Теги:
    HTML Changer
    Windows

    Серёжа Сыроежкин

    Серёжа СыроежкинКопирайтер

    1.06.2015

    Изменить кодировку

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

    Кодировка сайта задается с помощью тега meta. Что такое мета-теги и для чего они необходимы мы уже обсуждали в статье Мета-теги. Задается кодировка страницы следующим образом:

    <meta charset="utf-8">

    Эта строка помещается между тегами <head></head>.

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

    <meta http-equiv="Content-Language" content="ru">

    Основные типы кодировок на сайте

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

    • UTF-8 — (Юникод) на данный момент наиболее популярная кодировка для веб-сайтов (8 бит);
    • Windows-1251 — одна из наиболее распространенных кодировок (8 бит);
    • KOI8-R — стандарт для кириллицы в Unix-подобных системах (8 бит).

    Юникод (Unicode) является стандартом кодирования, который позволяет представить символы практически всех языков письменности (в том числе математических, музыкальных и других). Юникод имеет своё проявление в форматах UTF-8, UTF-16 и UTF-32, которые различаются между собой способом хранения данных. Для обеспечения наилучшей совместимости со старыми системами используется 8-битная кодировка.

    Изменение кодировки текста при помощи блокнота

    Чтобы изменить кодировку произвольного текста, можно воспользоваться обычным блокнотом. Допустим, вам необходимо изменить кодировку текста с KOI8 на Windows-1251. Для этого нужно:

    • Перенести нужный текст в стандартный редактор «Блокнот» (Notepad);
    • В меню «Вид» -> «Кодировка» выбрать «Кирилица (Windows)».

    При сохранении файла с помощью блокнота есть возможность выбрать нужную кодировку.

    В конструкторе сайтов «Нубекс» все сайты создаются в кодировке UTF, благодаря чему корректно отображаются различные символы и языки.

    Смотрите также:

    • Текст
    • Код
    • Сервер

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

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

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

    Текст

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

    Блокнот

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

    Сохранение файл с кодировкой UTF-8 в Блокноте

    Notepad++

    1. Открываем страницу в Notepad++.
    2. Выбираем Кодировки → Преобразовать в UTF-8 без BOM.
    3. Сохраняем документ.

    Установка кодировки UTF-8 текста в программе Notepad++

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

    Код

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

    <meta charset="utf-8">
    HTML 4.01:

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

    Сервер

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

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

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

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

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

    • Как изменить кодировку Денвера

    15.08.2014

    This is my page header:

    <!DOCTYPE html> 
    <html> 
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    ...
    

    As you can see the charset is set to utf-8 but Chrome/Firefox does not print the page as utf-8. I guess that is because the server sends this header:

    Content-Type:text/html; charset=ISO-8859-15
    

    How can I overwrite this header from my html page?

    asked May 9, 2012 at 15:35

    PiTheNumber's user avatar

    PiTheNumberPiTheNumber

    22.4k17 gold badges105 silver badges176 bronze badges

    You can’t.

    HTTP headers have priority over meta elements that claim to be equivalent.

    Fix your server settings so it sends the correct content-type.

    answered May 9, 2012 at 15:37

    Quentin's user avatar

    QuentinQuentin

    893k122 gold badges1194 silver badges1315 bronze badges

    You can’t overwrite the charset from your html page. Things to look for:

    1. Your web server may be configured with a default charset. See if you can change it. Be warned: this may be a global setting that would affect all files of a specific Content-Type.

    2. Despite the fact that you’ve literally typed charset=UTF-8 into your html document, your IDE/text editor may still be saving it with a different character encoding. If your using *nix, you can check the file encoding on any file on the command line like this:

      file -I filename.html
      

      If the output of that command reports something other than UTF-8 or us-ascii, you should go back to your IDE/text editor and figure out how to set the character encoding on the files it saves as UTF-8. Your web server may be auto detecting the character encoding and setting headers accordingly.

    answered May 9, 2012 at 15:42

    Asaph's user avatar

    You can change the server header by adding an .htaccess file containing:

    AddDefaultCharset UTF-8
    

    answered May 9, 2012 at 15:53

    PiTheNumber's user avatar

    PiTheNumberPiTheNumber

    22.4k17 gold badges105 silver badges176 bronze badges

    Понравилась статья? Поделить с друзьями:

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

  • Как изменить кодировку таблицы mysql
  • Как изменить кодировку субтитров srt
  • Как изменить кодировку страницы html
  • Как изменить кодировку системы windows 10
  • Как изменить кодировку сервера mysql

  • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии