Тарифы Услуги Сим-карты

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

Влад Мержевич

Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Метатеги для поисковых механизмов

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

Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Некоторые вебмастера добавляли в раздел keywords ключевые слова, которые не имеют никакого отношения к теме сайта, но зато пользовались определенным успехом среди посетителей поисковиков. Однако, через некоторое время, поисковые системы научились бороться с таким явлением и проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.

Некоторые принципы, относящиеся к метатегам:

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

description

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

Пример 1. Использование Description

description

keywords

Этот метатег был предназначен для описания ключевых слов, встречающихся на странице (пример 2). Но в результате действия людей, желающих попасть в верхние строчки поисковых систем любыми средствами, теперь дискредитирован. Поэтому многие поисковики пропускают этот параметр.

Пример 2. Использование Keywords

keywords

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

Автозагрузка страниц

Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv="refresh" (пример 3).

. Для операционной системы Windows и кириллицы charset обычно принимает значение utf-8 или windows-1251 (пример 4).

Пример 4. Выбор текущей кодировки

Кодировка

Кириллица

Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда указание кодировки может принести определенный вред. Например, веб-сервер автоматически использует перекодирование данных в KOI-8, а браузер, встретив параметр charset=windows-1251 , переводит текст в кодировку Windows. Получается двойное изменение символов, прочитать такой текст не просто. К счастью, подобная проблема уже отходит в прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне сервера.

Первая серьёзная проблема, с которой сталкиваются большинство новичков при , связана с набором символов (англ. character set ). Выражается эта проблема с кодировкой в, так называемых, «кракозябриках», которые мы получаем вместо указанных в HTML-файле символов. В данной статье я хочу остановиться на проблеме с кодировкой подробнее, постараться расставить всё по полочкам и дать варианты решения.

  • Что такое кодировка?
  • Кодировка файла (редактирование в Notepad++)
  • Кодировка отображения (просмотр в браузере)
  • Как указать кодировку HTML-страницы? (метатег charset)
  • Всё ещё есть проблема с кодировкой? (header charset в php)

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

Условно говоря, каждый символ (знак) состоит из кода и картинки . Здесь код - это уникальный идентификатор символа в наборе символов, который определяется выбранной кодировкой , а картинка - это визуальное представление символа, которое содержится в файле шрифта в соответствующей коду символа ячейке.

Другими словами, кодировка (англ. charset ) - это набор взаимосвязей кодов символов с их визуальными представлениями в шрифте.

Кодировка файла

HTML-страница представляет собой обычный текстовый файл, кодировка которого выбирается при его создании и/или сохранении на запоминающее устройство (жёсткий диск, флэшка и т.д.) .

В случае с Notepad++, кодировка нового документа задаётся в настройках текстового редактора. Выбираем в меню: Опции > Настройки… - и переходим на вкладку «Новый документ ». Здесь нас интересует секция «Кодировка ». По умолчанию, выбрана кодировка ANSI .

Напомню, что это кодировка, в которой будет храниться HTML-файл.

Впрочем, Вы всегда можете преобразовать кодировку HTML-страницы, используя соответствующие функции текстового редактора. Например, в Notepad++ для этого кликните пункт меню «Кодировки » и выберите нужное преобразование.

В данном случае файл был в кодировке ANSI и я преобразовал его в UTF-8 (без BOM) . О том, что такое этот BOM Вы можете прочитать в моей статье: PHP: как удалить BOM в WordPress - проследовав по .

Кодировка отображения

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

Например, если Вы сохранили HTML-страницу в кодировке ANSI и откроете её в браузере, вместо русских символов Вы можем получить, так называемые, «кракозябрики».

В данном случае нам надо убедиться, что кодировка файла совпадает с кодировкой отображения файла в браузере. Для этого в Firefox кликните иконку меню, а потом пункт «Кодировка ». Если такого у Вас нет, кликните пункт «Изменить » и добавьте элемент «Кодировка » в меню.

Как вы видите, браузер отображает файл в кодировке «Юникод » (например, UTF-8 ) , в то время как файл был сохранён в кодировке ANSI (например, Windows-1251 ) . Выбрав нужную кодировку, мы получим нужный нам результат.

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

В данном случае я изменил кодировку отображения ANSI на UTF-8 (без BOM) .

Как указать кодировку HTML-страницы?

И так, мы уже разобрались с тем, что такое кодировка и в чём состоит отличие кодировки файла и кодировки отображения. Теперь нам нужно решить проблему с кодировкой, которая заключается в неправильной интерпретации браузером (или любым другим клиентом) кодировки HTML-страницы.

Почему возникают проблемы с кодировкой? Определить кодировку HTML-страницы не просто, а зачастую и не возможно, т.к. у того же браузера нет информации о ней или она указана неправильно.

Для того чтобы указать кодировку HTML-страницы используется специальный метатег. В HTML5 он имеет следующий урезанный вид:

В данном случае указана кодировка UTF-8 (Юникод) .

В более старых версиях HTML этот метатег имеет следующий вид:

Этот метатег создаёт HTTP-заголовок Content-Type , в котором указывается тип документа text/html и его кодировка Windows-1251 (ANSI) .

Лично я рекомендую использовать именно этот вариант, т.к. с ним будет меньше всего проблем. Главное чтобы такой метатег присутствовал в секции HEAD , и указанная в нём кодировка соответствовала кодировке файла. В большинстве случаев этого будет достаточно.

Всё ещё есть проблема с кодировкой?

В некоторых случаях указать метатег с кодировкой HTML-страницы будет недостаточно. Такая проблема может быть вызвана настройками самого сервера, на котором находится файл HTML-страницы. Дело в том, что сервер способен выдавать свой HTTP-заголовок Content-Type , который будет, условно говоря, иметь приоритет перед метатегом.

В данном случае эту проблему можно решить путём внесения изменений в настройки сервера. Я не буду вдаваться в детали данного вопроса и порекомендую лишь отключать всю эту перекодировку через файл .htaccess , например:

CharsetDisable Off

Также можно производить изменения HTTP-заголовка Content-Type и программными средствами. В том же PHP для этого используется функция header() , например:

header("Content-Type: text/html; charset=UTF-8");

Обращаю Ваше внимание на то, что указание HTTP-заголовков должно идти до вывода какой-то информации на экран, в противном случае Вы получите сообщение об ошибке.

Одной из самых частых проблем, с которой сталкивается начинающий Web-мастер (да и не только начинающие), это проблемы с кодировкой на сайте . Даже у меня постоянно появляется при создании сайтов "абракадабра ". Но, благо, я прекрасно знаю, как эту проблему решить, поэтому всё привожу в порядок в течение нескольких секунд. И в этой статье я постараюсь научить Вас также быстро решать проблемы, связанные с кодировкой на сайте .

Первое, что стоит отметить, это то, что все проблемы с появлением "абракадабры" связаны с несовпадением кодировки документа и кодировки, выставляемой браузером . Допустим, документ в windows-1251 , а браузер почему-то выставляет UTF-8 . А уже источником такого несовпадения могут быть следующие причины.

Первая причина

Неправильно прописан мета-тег content-type . Будьте внимательны, в нём всегда должна находиться та кодировка, в котором написан Ваш документ.

Вторая причина

Вроде бы, мета-тег прописан так, как Вы хотите, и браузер выставляет именно то, что Вы хотите, но почему-то всё равно с кодировкой проблемы. Здесь, почти наверняка, виновато то, что сам документ имеет отличную кодировку. Если Вы работаете в Notepad++ , то внизу справа есть название кодировки текущего документа (например, ANSI ). Если Вы ставите в мета-теге UTF-8 , а сам документ написан в ANSI , то сделайте преобразование в UTF-8 (через меню "Кодировки " и пункт "Преобразовать в UTF-8 без BOM ").

Третья причина

Четвёртая причина

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

SET NAMES "utf8"

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

В данной статье я, надеюсь, разобрал, как минимум, 90% проблем, связанных с появлением "абракадабры" на сайте . Теперь Вы должны расправляться с такой популярной и простой проблемой, как неправильная кодировка, в два счёта.

Задаём набор символов

Мета-тег

Нужно добавить на каждую страницу (или в шаблон шапки) специальный мета-тег, сообщающий браузеру о том, какой набор символов ему использовать для отображения текстов. Тег этот стандартный и выглядит обычно так:

charset=UTF-8 » />

charset=»utf-8″ /> (вариант для HTML 5)

Надо вставить его в раздел — лучше в самое начало, сразу после открывающего :

Мета-тег кодировки

Через.htaccess (если ничего не помогает)

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

Для этого в нём нужно прописать такую строчку:

AddDefaultCharset utf-8

Вот и всё. Если вы примените последовательно 3 этих способа задания кодировки на своём проекте, то вероятность того, что всё будет отображено как надо , близка к 100 %.

Как «увидеть», что скрывается за непонятными символами на сайте?

Если вы зашли на веб-страницу, видите «кракозябры» и хотите увидеть нормальный текст, то тут только два пути:

  • сообщить сайтовладельцу, чтобы всё настроил как следует
  • попытаться угадать кодировку самостоятельно. Делается это стандартными средствами браузеров. В Chrome, например, нужно в меню щёлкнуть «Инструменты => Кодировка» и из огромного списка выбрать подходящий набор символов (т.е. угадать).

К счастью, практически все современные веб-проекты делаются в кодировке UTF-8, которая является «универсальной» для разных алфавитов и поэтому всё менее и менее вероятно увидеть эти непонятные символы в Интернет.

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

UTF-8 (от англ. Unicode Transformation Format ) - в настоящее время распространённая кодировка, реализующая представление Юникода, совместимое с 8-битным кодированием текста.

Windows-1251 (или cp1251 ) - набор символов и кодировка, являющаяся стандартной 8-битной кодировкой для всех русских версий Microsoft Windows.

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

Мы считаем, что использование UTF-8 предпочтительнее, но решать что выбрать - это дело разработчика проекта. А для облегчения этого выбора используйте сравнительную таблицу особенностей обеих кодировок.

Свойство UTF-8 Windows 1251
Общего характера
Многоязычность Кодировка позволяет использовать разные языки как в публичной, так и в административной части сайта.
  • Смена кодировки действующего крупного сайта с Windows-1251 на UTF-8 может вызвать серьёзные дополнительные трудовые и финансовые издержки.
  • Русский и английский без проблем работают с Windows-1251, если точно не будет потребности в других языках, то и нет потребности в UTF-8.
Большое число символов. Возможность использования спецсимволов. Есть. Но надо учитывать возможности браузеров. Штатно нет. Есть возможность замены спецсимволов на "костыли", например, © на &cорy; или × (знак умножения) на &timеs;. Однако это повышает требования к уровню подготовки контент-менеджера и создаёт проблемы при переносе данных из другой базы данных. Кроме того, в Bitrix Framework есть поля, которые не используют визуальный редактор, например, название страницы или название элемента инфоблока. Это также усложняет поддержку проекта силами низкоквалифицированных сотрудников.
Скорость работы
  • При работе сайта идет подмена всех функций работы со строками на mb_* . Это значит, что весь текст будет перекодироваться в кодировку сайта.
  • utf strlen зависит от длины строки, соответственно обычный strlen работает в 3 раза быстрее мультибайтового: 0.0004 против 0.0013 на тысяче итераций. По замерам на это выливается в 10-15% разницу в скорости работы реального сайта.
Минимизация объема проекта. Проект на UTF-8 будет заведомо "тяжелее", в силу того что строки в этой кодировке занимают в два раза больше места, чем строки в однобайтной Windows-1251. Размер сайта и базы данных будет в 1,2 - 1,5 раз больше.
Поддержка большинством js-фреймворков Поддерживается без проблем. Сложности в реализации.
Поддержка MS SQL По техническим причинам, данные в MS SQL должны храниться и хранятся в Windows-1251. Требуется дополнительная настройка. Нет проблем.
Импорт CSV Excel не сохраняет в UTF-8. Требуется пересохранение созданного файла в этой кодировке с помощью другого редактора. Нет проблем.
Импорт из 1С Сайты на UTF-8 работают без проблем при интеграции через SOAP с такими системами как, например, 1С.
Вебвизор Яндекс.Метрики Вебвизор корректно записывает действия посетителей. Возможны ошибки в записи.
Связанные с Bitrix Framework
Возможность сделать сайты в разной кодировке по системе многосайтовости. Невозможно. Все сайты на одном ядре должны быть в одной кодировке.
Поддержка на различных хостингах При работе с Bitrix Framework необходимо подключение опции php mbstring.func_overload в значении большем или равном 2 . Это . Работает на любых хостингах.
Размещение продуктов на виртуальной машине BitrixVM . По умолчанию. Требует дополнительных действий по настройке.
Корректное отображение пунктов меню сайта При использовании данной кодировки такая проблема возможна. Решается пересохранением каждого файла в UTF-8. (Если быть точным, то рекомендуется проверить кодировку всех файлов, а не только файлов меню и, при необходимости, перекодировать и их.)
Импорт исходников в IDE, например, в eclipse pdt При выставленном в настройках проекта UTF-8, в коде ядра Bitrix Framework портятся комментарии. Нет проблем.
Разные мелочи
Взаимодействие с WordPress (блог-клиенты, trackback и ping"и) Есть Нет
Редактирование файлов по FTP через FAR FAR поддерживает UTF только с версии 2.0. Возможно
Поддержка большинством редакторов Требуется редактор, который поддерживает кодировку UTF-8 без BOM . Нет проблем.

Как перевести сайт с кодировки win1251 в UTF-8

Общий порядок действий:

    1. Перекодировать всю базу данных в UTF-8 (вероятнее всего придётся обращаться за помощью к администратору сервера).

    2. Перекодировать все файлы сайта в UTF-8 (можно сделать своими силами).

    3. В файл /bitrix/php_interface/dbconn.php добавить строки:

define("BX_UTF", true);

4. В файл /.htaccess добавить строки:

Php_value mbstring.func_overload 2 php_value mbstring.internal_encoding UTF-8

Перекодировать все файлы сайта в UTF-8 (второй пункт) можно выполнив команду через SSH в корневой папке сайта:

Find . -name "*.php" -type f -exec iconv -fcp1251 -tutf8 -o /tmp/tmp_file {} \; -exec mv /tmp/tmp_file {} \;