Какие метатеги использовать, тег meta - его основные значения

27.07.18 ИТ / HTML 2709

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

Метатеги, как правило, указываются в заголовке документа, в теге head. Тег meta имеет пять основных атрибутов:

• charset - служит для задания кодировки документа;
• content - служит для задания содержимого метатега, принимает значения в зависимости от другого указанного атрибута;
• http-equiv - как видно из названия, служит для указания эквивалентов заголовков протокола HTTP прямо на странице, то есть позволяет модифицировать HTTP заголовки на стороне клиента;
• name - служит для предоставления информации общего назначения;
• scheme - служит для указания информации о схеме документа, малоиспользуемый атрибут.

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

<meta charset="utf-8">

С атрибутом content все понятно, он используется для задания содержимого для других атрибутов. Рассмотрим следующий атрибут - http-equiv. Возможных значений атрибута довольно много:

• cache-control - для управления кэшированием. Возможные значения: public, private, no-store, no-cache и другие;
• content-language - для указания языка страницы, в HTML5 заменено на указание языка в теге html при помощи атрибута lang="ru";
• content-style-type - для переназначения языка таблицы стилей;
• content-type - для указания MIME-типа документа, кодовой таблицы и других технических параметров текста;
• expires - управление кэшированием страницы;
• pics-label - для указания стандартизированной метки, характеризующей содержимое сайта;
• pragma - для контроля кэширования на страницах, создаваемых динамически;
• refresh - для указания браузеру сделать автоматический переход на другой адрес через указанное количество секунд;
• set-cookie – для установки значений cookie в браузере, в строке content можно указать значения через точку с запятой в виде ключ=значение. Возможные ключи: name, expires, domain, path, secure;
• window-target – для указания окна для текущей страницы, возможные значения: _blank, _parent, _self, _top и другие;
• cleartype - позволяет активировать технологию ClearType сглаживания шрифтов, работает в Mobile IE;
• x-ua-compatible – для браузеров IE. Указав нужное значение, можно отключить режим совместимости и задействовать последнею версию движка.

• author – автор статьи;
• copyright – копирайт, можно указать название компании и т.д.;
• description – описание страницы, важно для поисковых систем. Оптимальная длина – от 70 до 140 символов;
• document-state – указывает периодичность изменения контента на странице. Возможные значения: static, dynamic;
• generator – указывает, на какой системе работает сайт, лучше убрать и не писать этот тег в целях безопасности сайта;
• keywords – ключевые слова, через запятую. В последнее время не так важны для продвижения;
• resource-type - описывает свойство или состояние страницы. Возможные значения: document, rating, version, operator, formatter, creation;
• revisit - позволяет сообщить поисковым роботам о желательном сроке реиндексации документа в поисковой системе.;
• robots - управляет индексацией страницы, позволяет указать инструкции для поисковых роботов;
• subject - определяет тематику документа;
• url - прекращает индексацию страницы поисковиком и перенаправляет робота по указанной ссылке;
• viewport – указывает данные для настройки области просмотра, сообщает поисковикам и браузерам о наличии мобильной адаптации страницы сайта.

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

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3">
<meta name="description" content="Описание страницы, рекомендуемый размер - от 70 до 140 символов, а максимально обрабатываемый - 400">

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

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