Метатеги (англ. meta tags) — теги, предназначенные для предоставления структурированных метаданных о веб-странице. Как правило, указываются в заголовке, внутри структуры

<head>

</head>

Элемент meta принимает как минимум четыре атрибута: content, http-equiv, name и scheme. Из них обязателен только атрибут content и исключение тег revisit.


Метатеги разделены на нескольких основных групп. Основные — NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о странице, её авторе, а также — рекомендации для поисковых систем. HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, формируют заголовок страницы и определяют его обработку. Как правило, они управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.

Новая группа метатегов - PROPERTY. Используется для передачи в социальные сети, какую информацию передавать и отображать.

В HTML используется атрибут charset, для указания кодировки документа. Поддерживается всеми современными браузерами.

Группа NAME


Метатег Author и Copyright
Эти теги, как правило, не используются одновременно. Функция тегов — идентификация автора или принадлежности документа. Тег Author содержит имя автора Интернет-страницы, в том случае, если сайт принадлежит какой-либо организации, целесообразнее использовать тег Copyright. Выглядит данный тег следующим образом:

<meta name="author" content="Велимира Лисичкина" />
Кроме этого, теги Author и Copyright могут содержать дополнительный атрибут «lang», позволяющий определить язык, использующийся при указании значения свойства

<meta name="copyright" lang="ru" content="ПБОЮЛ Велимира Лисичкина" />

Метатег Description
Данный тег используется при создании краткого описания страницы, используется поисковыми системами для индексации, а также при создании аннотации в выдаче по запросу. При отсутствии тега поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике.

<meta name="description" content="Метатеги в Википедии" />

Метатег Document-state
Метатег Document-state также имеет значение при индексации страницы в поисковых системах. Тег обладает двумя значениями — Static и Dynamic. Значение «Static» отмечает, что системе нет необходимости индексировать документ в дальнейшем, «Dynamic» позволяет регулярно индексировать Интернет-страницу.

<meta name="document-state" content="Dynamic" />

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

<meta name="generator" content="Macromedia Dreamviewer 4.0" />
В настоящее время практически не используется.

Метатег Keywords
Данный метатег поисковые системы используют для того, чтобы определить релевантность ссылки. При формировании данного тега необходимо использовать только те слова, которые содержатся в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Рекомендованное количество слов в данном теге — не более десяти. Кроме того, выявлено, что разбивка этого тега на несколько строк влияет на оценку ссылки поисковыми машинами.

<meta name="keywords" content="Википедия, Метатег, статья" />

Метатег Resource-type
Тег Resource-type описывает свойство или состояние страницы. Если значения тега отличается от «Document», то поисковые системы его не индексируют. Метатег предназначен для масштабирования document (используется по умолчанию), rating, version, operator, formatter, creation и другие.

<meta name="resource-type" content="document" />

Метатег Revisit
Тег позволяет управлять частотой индексации документа в поисковой системе. Для переиндексации сайта раз в две недели используется тег следующего вида:

<meta name="revisit" content="14" />
Поисковые системы Яндекс и Google игнорируют содержимое этого метатега

Мeтатег Robots
Тег формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем. Значения тега могут быть следующими: Index (страница должна быть проиндексирована), Noindex (документ не индексируется), Follow (гиперссылки на странице отслеживаются), Nofollow (гиперссылки не прослеживаются), All (включает значения index и follow, включен по умолчанию), None (включает значения noindex и nofollow).

Пример 1. Разрешить индексирование страницы и использование размещённых на ней ссылок для последующей индексации.

<meta name="robots" content="index,follow" />сжимает
или равноценный аналог

<meta name="robots" content="all" />

Пример 2. Запретить индексирование страницы, разрешить использование размещённых на ней ссылок для последующей индексации.

<meta name="robots" content="noindex,follow" />

Пример 3. Разрешить индексирование страницы, запретить использование размещённых на ней ссылок для последующей индексации.

<meta name="robots" content="index,nofollow" />

Пример 4. Запретить индексирование страницы и использование размещённых на ней ссылок для последующей индексации.

<meta name="robots" content="noindex,nofollow" />
или равноценный аналог

<meta name="robots" content="none">

Мeтатег Subject
Определяет тематику документа. Практически бесполезен из-за отсутствия четкой и согласованной классификации тем в различных поисковых системах.

Мeтатег url
Тег прекращает индексацию страницы поисковой системой, и перенаправляет робота поисковой машины по указанной ссылке. Тег применяется для отмены индексации «зеркала» и генерируемых страниц.

<meta name="url" content="http://ru.wikipedia.org/" />

Метатег Viewport
Относительно новый тэг  - указывает браузеру на мобильном устройстве, как отображать контент сайта. По умолчанию (при отсутствии тэга) браузер на мобильном устройстве "сжимает" ширину сайта до ширины экрана мобильного устройства. Т.е. если Ваш сайт шириной 960 px, то он будет пропорционально сжат до ширины дисплея телефона - и ничего увидеть нормально не удастся. Т.е. нужно использовать или адаптивный дизайн сайта (когда меняются расположения блоков под меньшую ширину экрана) или запретить браузеру вписывать широкий сайт в узкий экран (появится полоса горизонтальной прокрутки)

<meta name="viewport" content="width=device-width">

Атрибут Возможное значение Описание
width Целое неотрицательное значение
(от 200px — 10,000px)
или константа device-width.
Определяет ширину viewport.
Если ширине не указана, в мобильном Safari устанавливается значение 980px, в Opera — 850px, в Android WebKit — 800px, а в IE — 974px.
height Целое неотрицательное значение
(от 223px до 10,000px)
или константа deviceheight
Определяет высоту viewport. В большинстве случаев на этот атрибут можно не обращать внимание
initial-scale Число с точкой (от 0.1 до 10).
Значение 1.0 — не масштабировать
Определяет начальный масштаб страницы. Чем больше число, тем выше масштаб.
user-scalable no или yes Определяет, может ли пользователь изменять масштаб в окне.
По-умолчанию “yes” в мобильном Safari.
minimum-scale Число с точкой (от 0.1 до 10).
1.0 — не масштабировать
Определяет минимальный масштаб viewport. По-умолчанию “0.25” в мобильном Safari.
maximum-scale Число с точкой (от 0.1 до 10).
1.0 — не масштабировать
Определяет максимальный масштаб viewport. По-умолчанию “1.6” в мобильном Safari.

Представление сайта с использованием/без использования этого тэга
Сайт на большом мониторе


Сайт на мобильном устройстве по умолчанию Сайт на мобильном устройстве с использованием тэга Viewport


Группа HTTP-EQUIV


Мeтатег Content-Language
Тег позволяет указать язык, на котором создан документ. Пример:

<meta http-equiv="content-language" content="ru" />

В HTML5 указание языка упрощено:

<html lang="ru">

Мeтатег Content-Style-Type
Указания языка таблицы стилей, по умолчанию значение — «text/css».

Пример:

<meta http-equiv="Content-Style-Type" content="text/css">
Мeтатег Content-Type[править | править вики-текст]
Определяет тип документа и его кодировку.

Пример:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
В HTML5 указание кодировки упрощено:

<meta charset="UTF-8">

Мeтатег Expires
Метатеги Expires — управляет кэшированием. Если указанная в теге дата прошла, то браузер должен сделать повторный сетевой запрос, а не использовать копию из кэша. Если изначально указать прошедшую дату, то документ не будет кэшироваться. Некоторые поисковые роботы могут отказаться индексировать документ с устаревшей датой. Дата должна указываться в стандарте [RFC850].

Пример:

<meta http-equiv="Expires" content="Wed, 26 Feb 1999 08:21:57 GMT">


Метатег PICS-Label
PICS — (от англ. Platform-Independent Content rating Scheme Label) — указывает уровень доступности сайта (в связи с возможными тематиками sex и violence), однако используется и в других целях.

Мeтатег Pragma
Контроль кэширования при страницах, получаемых путём работы заданного скрипта.

<meta http-equiv="Pragma" content="no-cache">

Мeтатег Refresh
Задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой страницы.

<meta http-equiv="refresh" content="5; url=http://www.example.com/" />
После «url=» кавычек быть не должно!

Мeтатег Set-Cookie
Настройка cookie браузера

Мeтатег Window-target
Определение окна загружаемой страницы.

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

<meta http-equiv="imagetoolbar" content="no" />

Группа PROPERTY

Определяет протокол OPEG GRAPH. Протокол появился в 2007 году благодаря разработчикам Facebook. Open Graph, работает в одном пространстве имён og  и имеет ограниченный набор типов данных. Как добавить тэги meta property на свой сайт - можно посмотреть здесь.

Основные метатэги

Метатэг og:title
Данная конструкция используется социальными сетями для отображения заголовка материала при его размещении в социальной сети. Заголовки для страницы и для социальной сети могут отличаться.

<meta property="og:title" content="Заголовок">

Метатэг og:image
Один из самых нужных тэгов. Определяет, какая именно картинка будет передаваться в социальную сеть. Обычно, на странице много картинок - как относящихся к материалу, так и являющихся частью элементов управления (кнопки меню и т.д.). Данный тэг позволяет явно указать, какую именно картинку нужно передать.

<meta property="og:image" content="URL-адрес изображения">

Метатэг og:dicription
Аналог основного метатэга discription. Описание страницы. Рекомендуемый объем описания от 150 до 1000 символов. title og:description может отличаться от описания для поисковых систем. В случае его отсутствия в социальной сети отображается...гм...может отображаться все что угодно, обычно социальная сеть берет информацию из meta name discription - но не всегда.

<meta property="og:description" content="Описание страницы">

Метатэг og:url
Канонический URL-адрес объекта, который будет использоваться в качестве его постоянного ID. Т.е. ссылка на страницу, которая будет указана в социальной сети.

<meta property="og:url" content="Канонический путь к странице">

Метатэг og:url
Указание типа страницы для корректного отображения в социальной сети.
Стандарт предлагает следующие типы - указывается в "Наименование типа":
  • Article — статья
  • Book — книга
  • Profile – профиль пользователя
  • Website – веб-сайт
  • song – музыкальный трек
  • album – музыкальный альбом
  • playlist — плейлист
  • radio_station – радиостанция
  • movie — видеомтериал
  • episode — видеоэпизод
  • tv_show – ТВ-шоу
  • other – другой видеоматериал
<meta property="og:type" content="Наименование типа">

Значение метатегов

Метаданные о веб-странице изначально предназначались в том числе для того, чтобы помочь поисковым машинам отнести веб-страницу к той или иной категории. В 90-е годы метатеги активно использовались в целях раскрутки своего сайта, в том числе предоставляя ложные или избыточные метаданные. В последнее время поисковыми системами было предпринято множество мер по пресечению таких манипуляций: например, из факторов ранжирования был исключён тег keywords, принципы построения правильных основных тегов «title», «description» также поменялись.

В связи с тем, что метатеги несут чисто служебную функцию, и, кроме того, значительно увеличивают размер гипертекстового документа, начинающие Web-дизайнеры зачастую предпочитают их игнорировать. Кроме того, метатеги группы HTTP-EQUIV достаточно сложны в использовании, так как задают жесткие параметры форматирования страницы. Тем не менее, метатеги делают более успешной индексацию Интернет-страницы в поисковых системах.
  • Для чего нужен сайт в интернете (2786)

     Создание сайта (как для фирмы, так и для торговой марки) представляет одно из направлений рекламной политики: - легко запоминающееся имя вида www.имя.ru - удобные ящики электронной почты вида название@имя.ru - размещение на сайте каталога продукции- информация о видах профессионального обучения- независимость...

  • Выбор хостинга (872)

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

  • Сервер доменных имен DNS (831)

    DNS – что это за «зверь» такой? DNS – это Domain Name Server, т.е сервер доменных имен. На этом сервере лежат служебные записи, в которых указано:- на каком сервере лежат файлы сайта (хостинг) - какой используется почтовый сервер- другие полезные настройки для работы сайта В целом обеспечение технической работы сайта состоит из 4-х частей: 1. Регистратор доменного имени, т.е....

  • Как создать домен 3-го уровня (519)

    Что такое домен третьего уровня?Домен первого уровня .ru -  национальный домен верхнего уровня для России. Домен второго уровня seotable.ru - открывается наш сайтДомен третьего уровня subdomen.seotable.ru - открывается мини-сайт на PHP, смотреть здесьДомен третьего уровня может быть использован...

  • Файл favicon.ico (500)

    Фавикон - это маленькая иконка рядом с названием сайта (точнее title) в браузере.Вот, например, сайт http://cancerchallenge.ru/ про онкологию. Мы видимКак там оказалась медицинская картинка, как она туда попала? Это такой специальный файл favicon.ico для хранения иконки сайта.Что бы браузер ее показал, необходимо:1. Формат файла ICO2. Расположение...

  • Основные метатэги (389)

    Метатеги (англ. meta tags) — теги, предназначенные для предоставления структурированных метаданных о веб-странице. Как правило, указываются в заголовке, внутри структуры <head></head>Элемент meta принимает как минимум четыре атрибута: content, http-equiv, name и scheme. Из них обязателен только атрибут content и...