Метатеги (англ. meta tags) — теги, предназначенные для предоставления структурированных метаданных о веб-странице.
Как правило, указываются в заголовке HEAD, внутри структуры страницы HTML
<html> <head> </head> <body> </body> </html>
Элемент 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татег Canonical
Указывает поисковым машинам, что данная страница является основной для показа пользователю. Актуально для разных CMS, которые генерируют одинаковые по содержанию страницы с разными адресами.
<link rel=“canonical” href=“https://site.com/sample-page/” />
Вот статья про дубли страниц в WordPress
Мeтатег Set-Cookie
Настройка cookie браузера
Мeтатег Window-target
Определение окна загружаемой страницы.
Метатег Imagetoolbar
Отключает Панели управления изображениями. Обычно используют при выводе баннеров, фона картинки, карты изображения и др., когда вывод данной панели нежелателен.
<meta http-equiv="imagetoolbar" content="no" />
Ниже краткое описание метатэгов социальных сетей
Метатэги социальных сетей (группа PROPERTY)
Протокол OPEG GRAPH от Facebook.
Протокол появился в 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=”Наименование типа”>
Сеть LinkedIn
LinkedIn поддерживает oEmbed — открытый формат, созданный с целью упрощения внедрения содержимого одной веб-страницы в другую.
Вот тут статья подробнее
oEmbed. Делаешь веб-сервис? — Делай и oEmbed
В LinkedIn, если вы используете общий доступ к веб-сайту или кнопке “Поделиться”, открытые графические теги на странице будут выполнены, как описано здесь:
https://developer.linkedin.com/documents/setting-display-tags-shares
При отсутствии oEmbed используются метатэги OpenGraph
Свой набор метатэгов.
<meta name="twitter:card" content="summary"/> <!-- Тип окна --> <meta name="twitter:site" content="Название сайта"/> <meta name="twitter:title" content="Название страницы"> <meta name="twitter:description" content="Описание"/> <meta name="twitter:creator" content="автор"/> <meta name="twitter:image:src" content="https://website.com/image250X250.png"/> <meta name="twitter:domain" content="website.com"/>
Может также использовать формат oEmbed
Значение метатегов
Метаданные о веб-странице изначально предназначались в том числе для того, чтобы помочь поисковым машинам отнести веб-страницу к той или иной категории. В 90-е годы метатеги активно использовались в целях раскрутки своего сайта, в том числе предоставляя ложные или избыточные метаданные. В последнее время поисковыми системами было предпринято множество мер по пресечению таких манипуляций: например, из факторов ранжирования был исключён тег keywords, принципы построения правильных основных тегов «title», «description» также поменялись.
В связи с тем, что метатеги несут чисто служебную функцию, и, кроме того, значительно увеличивают размер гипертекстового документа, начинающие Web-дизайнеры зачастую предпочитают их игнорировать. Кроме того, метатеги группы HTTP-EQUIV достаточно сложны в использовании, так как задают жесткие параметры форматирования страницы. Тем не менее, метатеги делают более успешной индексацию Интернет-страницы в поисковых системах.
Подпишитесь в VKontakte - нажмите кнопку | ||
Подпишитесь в Telegram - нажмите кнопку | ||
Наша группа ODNOKLASSNIKI |
Вы можете сохранить ссылку на эту страницу себе на компьютер в виде htm файла
Запрос на размещение Вашего рекламного поста (тема и email будут добавлены автоматически в письмо)
В Вашем браузере должна быть настроена обработка ссылок mailto
site_post@bk.ru
или просто скопируйте адрес e-mail
Почитать в разделе
ЗАЧЕМ НУЖЕН САЙТ?

(Читать полностью...)
- Всего статей в разделе: 5
- Показано статей в списке: 4
- Сортировка: название по алфавиту
Выбор хостинга

(Читать полностью...)
Как создать домен 3-го уровня

(Читать полностью...)
Сервер доменных имен DNS

(Читать полностью...)
Файл favicon.ico

(Читать полностью...)