Метатеги используются для хранения информации предназначенной для браузеров
и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам
для получения описания сайта, ключевых слов и других данных.
Метатеги для поисковых механизмов
Среди разработчиков сайтов существует мнение, что правильно написанные
метатеги позволяют подняться к верхним строчкам поисковых серверов.
На самом деле это не так, на одних метатегах высоко не поднимешься,
но и неудачно выполненное содержимое метатегов может ухудшить рейтинг
сайта.
Два метатега предназначены специально для поисковых серверов: description
(описание) и keywords (ключевые слова). Некоторые
вебмастера добавляли в раздел keywords ключевые
слова, которые не имеют никакого отношения к теме сайта, но зато пользовались
определенным успехом среди посетителей поисковиков. Однако, через некоторое
время, поисковые системы научились бороться с таким явлением и проверяют содержимое
веб-страницы на соответствие заявленным ключевым словам.
Некоторые принципы, относящиеся к метатегам:
- не включайте ключевые слова, которые не содержатся на ваших страницах;
- не повторяйте ключевые слова;
- используйте метатеги по их прямому назначению;
- делайте описание и список ключевых слов различными для каждой страницы
сайта с учетом содержимого.
description
Большинство поисковых серверов отображают содержимое поля description
(пример 1) при выводе результатов поиска.
Если этого тега нет на странице, то поисковый движок просто перечислит первые
встречающиеся слова на странице, которые, как правило, оказываются не очень-то
и в тему.
Пример 1. Использование Description
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>description</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Сайт об HTML и создании сайтов">
</head>
<body>
<p>...</p>
</body>
</html>keywords
Этот метатег был предназначен для описания ключевых слов, встречающихся на
странице (пример 2). Но в результате действия людей, желающих попасть в
верхние строчки поисковых систем любыми средствами, теперь дискредитирован.
Поэтому многие поисковики пропускают этот параметр.
Пример 2. Использование Keywords
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>keywords</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="HTML, META, метатег, тег, поисковая система">
</head>
<body>
<p>...</p>
</body>
</html>Ключевые слова можно перечислять через пробел или запятую. Поисковые системы
сами приведут запись к виду, который они используют.
Автозагрузка страниц
Чтобы автоматически загружать новый документ через определенный промежуток
времени используется инструкция http-equiv=»refresh»
(пример 3).
Пример 3. Автозагрузка страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Автозагрузка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="refresh" content="5; URL=http://www.htmlbook.ru">
</head>
<body>
<p>...</p>
</body>
</html>Браузер поймет эту запись, как ожидать 5 секунд, а затем загрузить новую страницу,
указанную в параметре URL, в данном случае это переход на сайт htmlbook.ru.
Этот метатег позволяет создавать перенаправление (редирект) на другой сайт.
Если URL не указан, произойдет автоматическое обновление текущей страницы через
количество секунд, заданных в атрибуте content.
Кодировка
Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы,
необходимо установить параметр <meta http-equiv=»Content-Type»
content=»text/html; charset=имя кодировки»>. Для операционной системы
Windows и кириллицы charset обычно принимает
значение utf-8 или windows-1251 (пример 4).
Пример 4. Выбор текущей кодировки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Кодировка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<p>Кириллица</p>
</body>
</html>Если указание кодировки отсутствует, браузер пытается сам определить, какой
тип символов используется в документе и выбирает необходимую кодировку автоматически.
Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях
предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда
указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда
указание кодировки может принести определенный вред. Например, веб-сервер автоматически
использует перекодирование данных в KOI-8, а браузер, встретив параметр charset=windows-1251,
переводит текст в кодировку Windows. Получается двойное изменение символов,
прочитать такой текст не просто. К счастью, подобная проблема уже отходит в
прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне
сервера.
Как кодировка влияет на отображение сайта, чем отличается UTF-8 от Windows 1251 и где указать кодировку. Материал обновлен 25.04.2025.
В статье:
-
Зачем нужна кодировка
-
Виды кодировок
-
Как определить кодировку на сайте
-
Если кодировка не отображается
-
Где указать кодировку сайта
-
Последние изменения в законах РФ о кодировке
Разбираем, на что влияет кодировка, нужно ли указывать ее самостоятельно, и почему могут появиться так называемые «кракозябры» на сайте.
Зачем нужна кодировка
Кодировка (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:
- Откройте панель управления хостингом.
- Перейдите в корневую папку сайта.
- В файле .htaccess добавьте в самое начало код:
- для указания кодировки UTF-8 — AddDefaultCharset UTF-8;
- для указания кодировки Windows-1251 — AddDefaultCharset WINDOWS-1251.
- Перейдите на сайт и очистите кэш браузера.
Кодировка документа
Готовые файлы HTML важно сохранять в нужной кодировке сайта. Узнать текущую кодировку файла можно через Notepad++: откройте файл и зайдите в «Encoding». Меняется она там же: чтобы сменить кодировку на UTF-8, выберите «Convert to UTF-8 without BOOM». Нужно выбрать «без BOOM», чтобы не было пустых символов.
Кодировка Базы данных
Выбирайте нужную кодировку сразу при создании базы данных. Распространенный вариант — «UTF-8 general ci».
Где менять кодировку у БД:
- Кликните по названию нужной базы в утилите управления БД phpMyAdmin и откройте ее.
- Кликните на раздел «Операции»:
- Введите нужную кодировку для базы данных MySQL:
- Перейдите на сайт и очистите кэш.
Для всех таблиц, колонок, файлов, сервера и вообще всего, что связано с сайтом, должна быть одна кодировка.
С новой БД проще, но если вы меняете кодировку у существующей базы, то у созданных таблиц и колонок заданы свои кодировки, которые тоже нужно поменять.
Проблема может не решиться, если все дело в кодировке подключения к базе данных. Что делать:
- Подключитесь к серверу с правами mysql root пользователя:
mysql -u root -p - Выберите нужную базу:
USE имя_базы; - Выполните запрос:
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Последние изменения в законах РФ о кодировке
- Ужесточение требований к веб-доступности государственных сайтов. С 1 сентября 2024 года вступили в силу новые требования к веб-доступности для государственных сайтов, приближенные к стандартам WCAG. Например, разработчики обязаны обеспечивать доступность контента для пользователей с нарушениями зрения, что может потребовать дополнительных усилий при выборе и настройке кодировки.
- Разработка Цифрового кодекса. Минцифры России планирует представить первую версию Цифрового кодекса в середине 2025 года. Этот кодекс объединит существующие нормативные акты в сфере цифровизации и может повлиять на стандарты и требования к веб-разработке, включая аспекты, связанные с кодировкой сайтов.
В прошлой заметке мы с вами научились задавать кодировку текста для веб-страниц. Но, просто задать кодировку текста с помощью программы редактора кода, еще не достаточно. Для того, чтобы все заработало, нужно дополнительно сообщить браузеру, какую кодировку мы выставили для HTML-страницы.
Для этого нужно использовать специальный обязательный элемент, который называется meta и задать ему атрибут charset со значением кодировки, которую вы выставили.
Если вы не создадите этот элемент, то браузер будет пытаться определить кодировку текста автоматически и создаст этот элемент сам. Не факт, что это у него получиться правильно.
Поэтому указывать кодировку документа с помощью элемента meta — это очень важное действие, которое нужно сделать при создании любой HTML-страницы.
Элемент meta должен располагаться внутри элемента <head>.
В качестве значения атрибута charset необходимо указать название кодировки.
Пример указания кодировки Юникод(UTF-8)
<meta charset="utf-8">
Пример указания кодировки Windows-1251.
<meta charset="windows-1251">
Вот, как может выглядеть полный код html-страницы:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Документ без названия</title> </head> <body> Текст </body> </html>
Внесите это изменение в вашу HTML-страницу и проверьте, что она успешно открывается в браузере.
1) Разместите в комментариях скриншот на вашу тестовую страницу, которая отображается в какой-нибудь нестандартной кодировке.
2) Сможете сделать так, чтобы кодировка у веб-страницы была выставлена как meta charset=»UTF-8″, но на странице все равно показывались бы кракозябры?
- Комментарии
- Отзывы
Опубликовано: 29.09.2010 Последняя правка: 08.12.2015
Метатеги и их типы
Итак, в этом уроке вы, наконец, узнаете, что такое метатеги и для чего они используются при создании сайтов. Метатеги — это специальные инструкции, которые помогают браузерам и поисковикам правильно отображать и индексировать содержимое HTML-страниц. Их существует превеликое множество, и постоянно появляются новые и новые метатеги, которые придумывают производители браузеров, поисковых машин, HTML-редакторов и т.д. Но большинство из них очень специфично и крайне редко используется. Я вам расскажу только о самых основных.
Для создания метатегов используется тег <META>, он не имеет закрывающего тега и может располагаться только в «шапке» HTML-документа (<HEAD>), но зато в любом количестве. У <META> есть три атрибута — это атрибуты http-equiv и name, из которых в каждом метатеге используется только какой-то один, и обязательный атрибут content. Значениями этих атрибутов могут быть совершенно разные слова, словосочетания или иные словесно-буквенно-числовые конструкции. Проще говоря, именно от этих значений зависят действия метатегов, и именно они придумываются производителями для самых разных нужд.
Метатег Content-Type или кодировка HTML-страницы
C метатегом Content-Type вы знакомы с самого начала этого учебника, он занимается тем, что сообщает браузерам кодировку страницы, чтобы они правильно ее отобразили. Общий синтаксис этого метатега следующий:
<meta http-equiv="Content-Type" content="text/html; charset=кодировка">Что такое кодировка? Кодировка — это символьный набор, в котором создана HTML-страница. то есть это набор символов, которые браузер может отобразить в том виде, в котором они указаны в HTML-коде. В зависимости от языка, на котором создается сайт, используется та или иная кодировка. Если используемая кодировка не поддерживает какие-либо символы, то браузер покажет вместо них непонятные закорючки, называемые в народе «кракозябрами». Это же может произойти, если страница создана в одной кодировке, а в метатеге Content-Type указывается другая, так как, еще раз, метатег не меняет кодировку HTML-страницы, а только сообщает браузеру о ней.
Тем не менее, если кодировка не поддерживает какой-то требуемый символ, то всегда можно воспользоваться спецсимволами HTML (мнемониками), которые понимают все популярные браузеры вне зависимости от кодировки страницы.
Ребята, подчеркиваю еще раз — этот тег не изменяет кодировку, он только говорит браузеру о ней. Чтобы изменить кодировку страницы, надо произвести соответствующие действия в настройках HTML-редактора. Например в «Notepad++» надо нажать «Кодировки» → «Преобразовать в…» и выбрать нужную. А если вы хотите, чтобы все создаваемые страницы сразу были в новой кодировке, то выберете: «Опции» → «Настройки» → «Новый документ». Ну и, естественно, надо не забыть поменять кодировку в метатеге.
Кодировок существует очень много, в рунете самое большое распространение получили три из них:
Кодировка Windows-1251
Кодировка «Windows-1251» содержит латинские буквы, буквы русского и родственного ему языков, а также используемые в них знаки препинания и пунктуации, в том числе и знаки английского языка.
Кодировка KOI8-R
Кодировка «KOI8-R» еще одна кодировка предназначенная для отображения кириллических символов. Она имеет несколько отличий от «Windows-1251» и не так распространена, но подробное сравнение этих кодировок не является темой данного учебника.
Кодировка UTF-8
Кодировка «UTF-8» является самой универсальной, так как она поддерживает символы практически всех языков мира, а также многие специфические знаки, например нотную грамоту. Поэтому, если страница имеет кодировку UTF-8, то можно отказаться от использования большинства спецсимволов HTML и писать символы сразу в готовом виде.
Если вы выбираете «UTF-8», то используйте вариант без метки BOM, иначе ваши страницы могут некорректно отображаться.
Метатег Description или описание HTML-страницы
Метатег Description применяется для описания содержимого HTML-страницы. Это описание используется поисковиками при выдаче результата запроса и показывается сразу под заголовком HTML-страницы, который находится в теге <TITLE>…</TITLE>. Общий синтаксис такой:
<meta name="description" content="Описание HTML-страницы.">Описание должно быть осмысленным и не превышать 200 символов (с пробелами), так как поисковики показывают только эти первые 200, а некоторые и того меньше.
Пример отображения заголовка страницы и ее описания.
Метатег Keywords или ключевые слова
Метатег Keywords используется для перечня ключевых слов, по которым поисковики оценивают соответствие запроса этому перечню. Слова пишутся через запятую и, желательно, не более десяти, так как при увеличении количества, падает «вес» каждого слова. И конечно все ключевые слова должны попадаться в тексте страницы, ну или хотя бы большая их часть. Общий синтаксис метатега такой:
<meta name="keywords" content="слово1,слово2,слово3,...">Метатег Refresh или перенаправление на другую страницу
Иногда требуется, чтобы при попадании на определенную страницу сайта, через какой-то промежуток времени произошло автоматическое перенаправление (редирект) пользователя на другую страницу. В этом может помочь метатег Refresh, записывается он так:
<meta http-equiv="refresh" content="число;адрес новой страницы">Число — это количество секунд через которые должно произойти автоматическое перенаправление, ну а адрес — он и есть адрес, полный или относительный путь страницы, на которую будет редирект. Например:
<meta http-equiv="refresh" content="3;https://seodon.ru/html/metatags.php">В некоторых браузерах по умолчанию отключена возможность автоматического перенаправления на другую страницу при помощи метатега Refresh. Поэтому вместо него часто используются скрипты.
Резюме
Ну что ж, девочки и мальчики, вот вы и изучили учебник по HTML для начинающих, в котором я описал все основные возможности языка HTML. Надеюсь те полтора месяца, которые я провел за его написанием, не пропали даром, и вы действительно чему-то научились. Если в процессе обучения какие-то моменты учебника вам показались излишне сложными или непонятными, то буду рад выслушать ваши рекомендации по улучшению. Да, и не забывайте про справочник по тегам HTML, там еще много чего интересного есть, например <MARQUEE> или <PRE>, но теперь вы и сами в состоянии с ними разобраться, с чем вас и поздравляю! 
И еще. В этом учебнике, чтобы избежать использования устаревших атрибутов HTML, мы с вами активно употребляли атрибут style, который служит для подключения стилей (CSS). Но и его повсеместное применение не является оптимальным, то есть он лучше, чем устаревшие атрибуты, но хуже, чем полный переход на CSS. Ну, думаю, вы догадываетесь, куда я клоню, да-да совершенно верно, учебник CSS ждет вас. Кстати он довольно легкий, а если учесть, что вы уже кое-что знаете из CSS, то для вас его освоение станет еще проще. В общем, удачи вам!