Кодировка страницы html. Решение проблем неправильной кодировкой веб-страницы. Метатеги для поисковых механизмов
При неправильной кодировке весь сайт или его часть отображаются в виде «кряпозяблов», т.е. непонятных символов, делающих текст нечитаемым. Такая ситуация может возникнуть при неверной настройки кодировки веб-сервера или при отсутствии настроек. Рассмотрим возможные варианты и способы устранения проблем
Неправильная кодировка HTML страниц
Создадим тестовый файлик:
Sudo gedit /var/www/html/encoding.html
Скопируем в него:
Откроем этот файл в браузере http://localhost/encoding.html
Как можно видеть, кодировка браузером определена неправильно:
Имеется несколько способов исправить эту ситуацию. Начнём с самого простого - явно указать кодировку для веб-страницы. Это делается метатегом, который должен быть расположен внутри тэга head :
Добавим эту строку к нашему тестовому файлику, чтобы получилось так:
Тестовый файл для проверки кодировки
Как мы можем убедиться на следующем скриншоте, проблема решена:
Если кодировка вашего файла отличается от UTF-8 , то вместо неё поставьте windows-1251 или ту, которая соответствует кодировке веб-страницы. Чтобы научиться определять кодировку файлов, посмотрите .
Это был самый простой способ исправления проблемы с кодировкой - без изменения настроек сервера.
Вернём наш тестовый файл в исходное состояние и продолжим изучение способов указания кодировки.
Если файлы .htaccess включены настройками Apache, то эти файлы можно использовать чтобы указывать кодировку отправляемых веб-сервером страниц. Чтобы включить поддержку файлов .htaccess в конфигурационном файле Apache (/etc/apache2/apache2.conf ) найдите группу строк
И в ней замените
AllowOverride None
AllowOverride All
После этого сервер нужно перезапустить.
Sudo systemctl restart apache2.service
Файл .htaccess должен быть размещён в той же директории, что и сайт. Мой сайт размещён в корневой директории веб-сервера. Если у вас также, то теперь в папке /var/www/html/ создайте файл .htaccess и добавьте в него директиву AddDefaultCharset после которой укажите желаемую кодировку. Примеры
AddDefaultCharset UTF-8
AddDefaultCharset windows-1251
Можно указать кодировку, которая будет применена только к файлам определённого формата:
AddCharset utf-8 .atom .css .js .json .rss .vtt .xml
Набор файлов может быть любым, например:
AddCharset utf-8 .html .css .php .txt .js
Следующий вариант является альтернативным и также позволяет устанавливать кодировку для файлов определённого типа, для него нужно, чтобы был включён mod_headers :
Ещё один вариант, который также можно использовать в файле .htaccess для установки кодировки UTF-8:
IndexOptions +Charset=UTF-8
Если сайт на PHP, то дополнительно может понадобиться продублировать кодировку с php_value default_charset :
AddDefaultCharset windows-1251 php_value default_charset "cp1251"
Можно вместо создания файла.htaccess установить кодировку в конфигурационном файле веб-сервера. Для Apache CentOS/Fedora это файл httpd.conf, а на Debian/Ubuntu это файл apache2.conf. Добавьте следующую строку для установки кодировки и перезапустите веб-сервер, чтобы изменения вступили в силу:
AddDefaultCharset UTF-8
Как установить UTF-8 кодировку в PHP
В PHP скрипте для установки кодировки используется header , например:
Header("Content-Type: charset=utf-8");
Обычно вместе с кодировкой также указывают тип содержимого (в примере вариант для HTML страницы):
Header("Content-Type: text/html; charset=utf-8");
Ещё один вариант для RSS ленты:
Header("Content-type: text/xml; charset=utf-8");
Помните, что функция header должна быть вызвана перед любым выводом в браузер. В противном случае (если вывод в браузер уже был сделан), то уже были отправлены и заголовки. Очевидно, что в этом случае их уже невозможно поменять. Если в браузер было выведено сообщение об ошибке, то заголовки также уже были отправлены и использование header вызовет ошибку. Для проверки, были ли уже отправлены заголовки, используйте headers_sent .
Описанный способ работает только когда PHP скрипт полностью генерирует содержимое страницы. Статические страницы (такие как html) вы должны сохранять в кодировке utf-8. Большинство веб серверов обратят внимание на кодировку файла и добавят соответствующий заголовок. На самом деле, сохранение PHP файла в кодировке utf-8 приведёт к такому же результату.
Неправильная кодировка результатов из базы данных MySQL
Если ваш сайт состоит из статической части (шаблон) и динамической, которая формируется из данных, получаемых из базы данных, то может возникнуть ситуация, когда часть сайта имеет правильную кодировку, а другая часть сайта имеет неправильную. В этом случае бесполезно менять настройки веб-сервера - поскольку всё равно часть страницы будет иметь неправильную кодировку.
Нужно начать с определения кодировки ваших таблиц. Можно посмотреть в phpMyAdmin :
Обратите внимание на столбец «Сравнение », запись «utf8_unicode_ci » означает, что используется кодировка UTF-8 .
Можно подключиться к СУБД MySQL и проверить кодировку таблиц без phpMyAdmin. Для этого:
Mysql -u root -p
Если вы забыли имя базы данных, то выполните команду:
SHOW DATABASES;
Предположим, я хочу посмотреть кодировку для таблиц в базе данных information_schema
USE information_schema;
Если вы забыли имя таблиц, выполните:
SHOW FULL COLUMNS FROM имя_таблицы;
Например:
SHOW FULL COLUMNS FROM GLOBAL_STATUS;
Вы увидите примерно следующее:
Смотрите столбец Collation . В моём случае там utf8_general_ci , это, как и utf8_unicode_ci , кодировка UTF-8 . Кстати, если вы не знаете в чём разница между кодировками utf8_general_ci , utf8_unicode_ci , utf8mb4_general_ci , utf8mb4_unicode_ci , а также какую кодировку выбрать для базы данных MySQL, то посмотрите .
Теперь, когда мы узнали кодировку (в моём случае это UTF-8), то при каждом подключении к СУБД MySQL нужно выполнять последовательно запросы:
SET NAMES UTF8 SET CHARACTER SET UTF8 SET character_set_client = UTF8 SET character_set_connection = UTF8 SET character_set_results = UTF8
В PHP это можно сделать примерно так:
$this->mysqli = new mysqli($server, $username, $password, $basename); if ($this->mysqli->connect_error) { $this->errorHandler_c->logError(1, "Connect Error (" . $this->mysqli->connect_errno . ") " . $this->mysqli->connect_error, $_SERVER ["REQUEST_URI"]); } $this->mysqli->query("SET NAMES UTF8"); $this->mysqli->query("SET CHARACTER SET UTF8"); $this->mysqli->query("SET character_set_client = UTF8"); $this->mysqli->query("SET character_set_connection = UTF8"); $this->mysqli->query("SET character_set_results = UTF8");
Обратите внимание, что UTF8 вам нужно заменить на ту кодировку, которая используется для ваших таблиц.
Изменение кодировки файлов
Если вы решили пойти другим путём и вместо установки новой кодировки изменить кодировку ваших файлов, то посмотрите статью « ». В ней рассказано, как узнать текущую кодировку файлов и как конвертировать файлы в любую кодировку (не только UTF-8).
Как узнать, какую кодировку отправляет сервер
Если вы хотите узнать, какие настройки кодировки имеет веб-сервер (какую кодировку передаёт в заголовках), то воспользуйтесь следующей командой:
Curl URL -s -o /dev/null -D /dev/stdout | grep -E "charset"
В ней вместо URL вставьте реальный адрес проверяемого сайта. Если сайт использует HTTPS, то укажите адрес сайта вместе с протоколом, например
Curl https://softocracy.ru -s -o /dev/null -D /dev/stdout | grep -E "charset"
Какую кодировку выбрать для веб-сайта
Что такое кодировка страницы, вообще - для чего нужна кодировка страницы - она помогает браузеру правильно отображать содержимое страницы. Существует огромное количество кодировок, которое нам знать вообще ни к чему. И естественно, что возможны проблемы с кодировкой страницы.
Наверняка вы видели, когда заходили на какую-то страницу сайта, то на ней были непонятные символы, из которых ничего невозможно было понять - в народе обзываемые "кракозябрами."
Навигация по странице:
- Нас конечно же прежде всего интересуют кодировки, которые завязаны на русском языке.
1.«utf-8» – это универсальная кодировка.
«windows-1251» – это кириллица.
И тут конечно же я должен сказать о собственно опыте, которому уже намечается 10 лет… так вот!
В самом начале, когда я только начинал, я начинал с кодировки «windows-1251», но с этой кодировкой, постоянно возникали какие-то проблемы, сейчас уже вспомнить будет трудно, но в конце концов, я перешел на «utf-8»
И конечно же нам требуется пару строк написать о том, что же собственно означает эта самая кодировка «utf-8»:
UTF-8 (от англ. Unicode Transformation Format, 8-bit - «формат преобразования Юникода, 8-бит») - распространённый стандарт кодирования текста, позволяющий более компактно хранить и передавать символы Юникода, используя переменное количество байт (от 1 до 4), и обеспечивающий полную обратную совместимость с 7-битной кодировкой ASCII.Нам в принципе нужно, чтобы наши данные отображались на станице корректно…
- В открытом браузере нажимаем сочетание кнопок ctrl + U. Должна открыться дополнительная страница с кодом!
- Обычно кодировку ставят на странице в самом начале, вот пример кодировки, здесь кодировка страницы стоит на 4 строке. И имеет вид:
Что означет, что страница сделана в кодировке utf-8.
Это – одна из самых распространённых кодировок.
Либо кириллическая кодировка:
- Если это простая – физическая(файл) - , то вам просто её нужно открыть в каком-то редакторе и заменить кодировку на ту, которая вам требуется!
Как изменить кодировку страниц, если у вас движок!? В каждом движке есть определенная логика. Как в любом скрипте. Как у обычной страницы у движка есть блоки, из которых он собирает эти страницы – вам просто нужно найти тот блок, который и выводит вашу кодировку в браузер… - Иногда данная кодировка вызывает разные проблемы…
К примеру некоторые хостинги, просто не поддерживают данную кодировку.
Вот так будет выглядеть страница с нарушенной кодировкой.
- На самом деле есть несколько причин для возникновения так называемых кракозябр!
1.Неправильная кодировка страницы, ну к примеру, если вы установите кодировку китайскую, а напишите кириллический текст, то что должно произойти!? Браузер просто сойдет с ума не зная, что вам показать и покажет кракозябры.
Неправильная настройка браузера. Либо браузер не может автоматически найти эту строку на странице, которая указывает на кодировку страницы.
3. Сервер не поддерживает данную кодировку!
Типы и виды кодировок
Что означает обозначение utf-8
Как определить кодировку страницы?
Где находится кодировка страницу?
Как изменить кодировку страницы html
Пример неправильной кодировки.
Почему на странице появляются кракозябры!?
Как изменить неправильную кодировку!?
1.Если идет речь о вашей странице на вашем сайте, то нужно открыть вашу страницу в блокноте и изменить кодировку страницы. Если сайт на движке, то нужно найти основную страницу, в которой прописана кодировка и изменить её на соответствующую!
Если браузер неправильно трактует кодировку. То нужно разбираться с браузером.
3.
Если это проблема сервера, то стоит попробовать внести изменения в файл - .htaccess внеся в него такую надпись:
Одной из самых частых проблем, с которой сталкивается начинающий Web-мастер (да и не только начинающие), это проблемы с кодировкой на сайте . Даже у меня постоянно появляется при создании сайтов "абракадабра ". Но, благо, я прекрасно знаю, как эту проблему решить, поэтому всё привожу в порядок в течение нескольких секунд. И в этой статье я постараюсь научить Вас также быстро решать проблемы, связанные с кодировкой на сайте .
Первое, что стоит отметить, это то, что все проблемы с появлением "абракадабры" связаны с несовпадением кодировки документа и кодировки, выставляемой браузером . Допустим, документ в windows-1251 , а браузер почему-то выставляет UTF-8 . А уже источником такого несовпадения могут быть следующие причины.
Первая причина
Неправильно прописан мета-тег content-type . Будьте внимательны, в нём всегда должна находиться та кодировка, в котором написан Ваш документ.
Вторая причина
Вроде бы, мета-тег прописан так, как Вы хотите, и браузер выставляет именно то, что Вы хотите, но почему-то всё равно с кодировкой проблемы. Здесь, почти наверняка, виновато то, что сам документ имеет отличную кодировку. Если Вы работаете в Notepad++ , то внизу справа есть название кодировки текущего документа (например, ANSI ). Если Вы ставите в мета-теге UTF-8 , а сам документ написан в ANSI , то сделайте преобразование в UTF-8 (через меню "Кодировки " и пункт "Преобразовать в UTF-8 без BOM ").
Третья причина
Четвёртая причина
И, наконец, последняя популярная причина - это проблема с кодировкой в базе данных . Во-первых, убедитесь, что все Ваши таблицы и поля написаны в одной кодировке, которая совпадает с кодировкой остального сайта. Если это не помогло, то сразу после подключения в скрипте выполните следующий запрос:
SET NAMES "utf8"
Вместо "utf8 " может стоять другая кодировка. После этого все данные из базы должны выходить в правильной кодировке.
В данной статье я, надеюсь, разобрал, как минимум, 90% проблем, связанных с появлением "абракадабры" на сайте . Теперь Вы должны расправляться с такой популярной и простой проблемой, как неправильная кодировка, в два счёта.
При создании сайта у начинающих веб-мастеров часто появляются вопросы: в какой кодировке делать сайт, чем отличается UTF-8 от windows-1251 и как ее прописывать в META Charset HTML-страницы сайта. Ответы на все эти вопросы в данной статье.
Что такое кодировка сайта и как она работает
Кодировку можно представить в виде таблицы, состоящей из разных букв, цифр и других символов понятных человеку, которые закодированы определенным образом. Когда вы открываете текстовый файл, к которым относятся в том числе HTML-страницы, то компьютер считывает из заголовка файла в какой кодировке он был сохранен и выводит текст в соответствующей кодировке преобразовывая компьютерные данные в вид понятный человеку сопоставляя эти данные с таблицей кодировки. Если информация о кодировке из заголовка файла совпадает с кодировкой в которой сохранены данные в HTML-странице, то пользователь видит привычные ему буквы, цифры и другие символы. Если же есть несовпадение, то в результате пользователю выводится непонятный набор символов, особенно часто это происходит в старых почтовых программах. Если пользователь получил письмо с непонятными крякозябрами, то просто перебирая разные кодировки, обычно получается угадать и выбрать ту, в которой написано письмо, и в результате непонятный набор символов превращается в понятный человеку текст.
То же самое происходит и с HTML-страницами сайта. Если документ был сохранен, например, в кодировке UTF-8, а в самом документе прописан META-тег указывающий что это кодировка windows-1251, то браузер опять же будет сопоставлять сохраненные в файле данные с таблицей указанной ему кодировки и так как символы закодированы по-разному, то браузер выведет вместо привычного текста непонятный набор символов или же часть букв может быть в нормальном виде, а другие буквы или символы могут выводиться, например, в виде знаков вопроса. Все выше сказанное относится в том числе и к отображению имен файлов.
Создавая новый документ в текстовом редакторе лучше сразу убедиться что выбрана нужная кодировка. Современные редакторы позволяют преобразовать текст открытого документа из одной кодировки в другую, а стандартный Блокнот позволяет выбрать кодировку только при сохранении файла.
Самые распространенные кодировки
Из предыдущего пункта вы уже знаете что такое кодировка и почему настолько важно правильно прописать ее в коде страниц сайта. Давайте теперь выясним какую из множества кодировок лучше выбрать для будущего сайта. Поскольку самой распространенной и наиболее понятной в освоении всегда была операционная система Windows, то большинство веб-разработчиков создавали HTML-страницы в кодировке windows-1251 (ANSI), которая использовалась по-умолчанию. Но windows-1251 поддерживает не очень большое количество букв и символов, а разработчики хотят использовать в своих текстах различные стрелочки, сердечки, квадратики и другие символы, в том числе есть необходимость совмещать слова из разных языков в одном документе, поэтому на смену ей уже давно пришла более расширенная UTF-8 и большинство разработчиков используют именно эту кодировку.
Проблемы с кодировкой не только в HTML-странице
Сайт, независимо от того является ли он просто набором статических HTML-документов или сложных динамических скриптов генерирующих страницы на лету, размещается на веб-сервере, который также работает с определенной кодировкой. И если сервер выдает информацию в одной кодировке, а ваши страницы или скрипты сохранены в другой кодировке, то опять же могут быть проблемы с отображением страниц в браузере пользователя. Многие хостинги позволяют менять настройки и выбрать кодировку в соответствии с той, которая используется в файлах сайта, через панель управления или же прописать ее в файле.htaccess, если на хостинге используется популярный веб-сервер Apache.
Практически ни один современный сайт не обходится без использования базы данных MySQL и она также может стать источником проблем с кодировкой. Если файлы сайта сохранены в одной кодировке, а информация в базе данных в другой, то на странице та часть информации, которая выводится из базы данных может отображаться в виде все тех же знаков вопросов или других непонятных символов. Чтобы избежать проблем с кодировкой она должна быть одинаковой для веб-сервера, базы данных MySQL, в скриптах, в HTML-страницах сайта и в META-теге, который прописывается в HTML-коде. Если есть проблемы с отображением текста, то проверяйте на наличие проблемы все выше перечисленное.
META Charset HTML-документа
Чтобы сообщить браузеру и поисковым системам в какой кодировке сохранены страницы сайта в их коде прописывается META Charset.
Для кодировки windows-1251:
Текст страницы
Для кодировки UTF-8:
Текст страницы
Теперь вы знаете что такое кодировка сайта и где искать проблемы если в какой-либо части сайта неправильно отображается текст.
Копирование статьи запрещено.
15.03.2016
Пока нет
Всем привет!
Продолжаем изучать основы HTML. В этом уроке мы разберем, как указать HTML кодировку
для сайта (веб-страницы).
Этот урок очень важен, так как незнание того, как указать кодировку для веб-страницы может привести к тому, что вашу страницу не смогут прочитать. Вы спросите: «Это как так, не смогут?».
Давайте я покажу, как выглядит мой блог с неправильной кодировкой:
Итак, HTML кодировка – это таблицы соответствия кодов и символов алфавита. То есть, наш компьютер по кодировке поменяет код на понятные читабельные буквы .
Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо прописать между тегами
вот такой мета тег:
Обратите внимание, в коде есть слово «имя кодировки». Здесь нужно указать HTML кодировку.
Обычно это utf-8
или windows-1251
.
Кодировка для utf-8 :
Кодировка для windows-1251 :
Если забыть указать браузеру, в какой кодировке сайт или веб-страница, то браузер попытается определить кодировку автоматически, но не всегда у него это выходит правильно. В итог результат будет такой, который я показал на картинке выше.
Переходим к практике.
Как создать HTML документ с
кодировкой utf-8
«Все программы» => «Стандартные» => «Блокнот» :
вот этот мета-тег:
Жмите в блокноте «Файл» => «Сохранит как…» :
Там, где пункт «Кодировка:»
укажите «UTF-8»
.
Жмите «Сохранить»
:
Увеличить изображение?
Как создать HTML документ с кодировкой windows-1251
Открывайте стандартный блокнот. «Все программы» => «Стандартные» => «Блокнот»
.
Далее вставляете в блокнот стандартный код HTML:
Теперь указываем, в какой кодировке сохранена веб-страница. Для этого разместите между тегами
вот этот мета-тег:
Вот так должно получиться (строка №4 ):
Жмите в блокноте «Файл» => «Сохранит как…» :
Там, где пункт «Имя файла»
напишите название веб-страницы на латинице и с расширением «.html»
. Я думю, вы это помните еще с первых уроков.
Там, где пункт «Кодировка:»
укажите «ANSI»
.
Жмите «Сохранить»
:
Вот и все!
Большинство вебмастеров выбирают кодировку UTF-8 . Причины говорить не буду, так как боюсь нагрузить вас информацией, которая на вашем этапе познания HTML еще не нужна.
Для примера в блокнте установите код:
И укажите при сохранении «ANSI» :
Так как это неправильно, результат будет вот таким:
Сохраняйте правильно ваши веб-страници во избежание вот таких результатов
Предыдущая запись
Следующая запись