Посмотрев HTML код разных сайтов возникает вопрос – зачем в нем так много мета-тегов и для чего они нужны? В данной статье представлены все самые встречающеюся теги с примерами и пояснениями.
Описание страницы
Title
Заголовок страницы, оптимальная длина 50-60 символов.
Description
Краткое описание страницы длинной 160-180 символов, используется в выводе результатов поиска.
Keywords
Содержит ключевые слова встречающихся на странице. Не более 20-ти слов и 3-х повторов.
- Google – не использует.
- Яндекс – под вопросом.
Кодировка сайта
В HTML5 тег сократили:
Application-Name
Название веб-приложения. Можно указать несколько названий для разных языковых локалей.
<meta name="application-name" content="Моё приложение">
<meta name="application-name" lang="en" content="My application">
<meta name="application-name" lang="fr" content="Mon application">
- В Android используется при добавлении сайта на главный экран.
- В Windows 8, 10 при добавлении сайта в панель приложений и плиткой в меню пуск.
Generator
Сообщает, с помощью какой программы был сгенерирован код страницы.
Author
Информация об авторе сайта.
Copyright
Информация о владельце сайта.
Reply-To
Указывает способ связи с автором страницы.
Content-Language
Указывает язык страницы. Используется поисковыми машинами при индексировании.
Help
Предоставляет ссылку на справку или e-mail.
Управление индексацией
Robots
Задает правила индексации для поисковых
Общие значения:
index, follow или all | Разрешено индексировать текст и ссылки на странице |
noindex | Не индексировать текст страницы |
nofollow | Не переходить по ссылкам на странице |
noindex, nofollow или none | Запрещено индексировать текст и переходить по ссылкам |
noarchive | Не показывать ссылку на сохраненную копию в поисковой выдаче |
Яндекс
noyaca | Не использовать описание из Яндекс.Каталога для сниппета в результатах поиска |
nosnippet | Запрещает показывать видео или фрагмент текста в результатах поиска |
noimageindex | Запрещает указывать вашу страницу как источник ссылки для изображения |
noodp | Не использовать описание из каталога DMOZ |
Last-Modified
Альтернативно HTTP-заголовку Last-Modified задает дату последнего изменения для статических страниц.
Document-State
Определяет частоту индексации для поисковых роботов.
static | Индексировать один раз |
dynamic | Индексировать страницу регулярно |
Revisit-After
Указывает как часто обновляется информация на сайте, и как часто поисковая система должна на него заходить.
Управление кэшированием
Cache-Control
Указывает как браузеру кэшировать страницу.
Допустимые значения:public | Кэшируется все |
private | Кэшируется браузером, но не proxy-сервером |
no-cache | Запрещает кэширование |
max-age=0 | Сколько секунд хранить в кэше |
Pragma
Отключает кэширование.
Expires
Дата окончания кэша браузера. Если указать прошедшую дату или 0, то документ не будет кэшироваться.
Canonical - предпочитаемый канонический адрес
Если у страницы есть дубликаты с одним содержанием и разными URL, например:
http://exaple.comcategory/jquery
http://exaple.com/category/jquery?sort=desc
В rel="canonical"
указывается адрес, который будет считаться основным и будет использоваться в поисковой выдаче.
Prev
Указывает URL предыдущий страницы при пагинации.
Next
Указывает URL следующий страницы при пагинации.
Rel Alternate
Атрибут «Hreflang»
Этот атрибут указывает ссылки на разные языковые версии сайта. Код языка указывается в формате ISO 639-1.
Или код языка и региона, регион указывается в формате ISO 3166-1 Alpha 2:
Значение x-default
говорит о том что страница главная и не соответствует какому-либо языку или региону.
Атрибут «Media»
Значение handheld
или only screen and (max-width: 640px)
указывают адрес мобильной версии.
<link rel="alternate" media="handheld" href="http://m.example.com/">
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/">
Атрибут «Type»
application/rss+xml
– ссылка на RSS канал.
application/atom+xml
– фид в формате Atom.
Viewport
Используется для адаптации сайта к мобильным устройствам.
<meta name='viewport' content="width=1024">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
width=1024 | Ширина сайта 1024px и мобильный промаштабирует сайт под разрешение экрана |
width=device-width | Ширина сайта «резиновая» и растягивается на весь экран мобильного |
initial-scale=1 | Соотношение 1:1 между пикселями в CSS и пикселями устройства |
Google-Site-Verification
Подтверждение прав пользователя сервисов Google.
Google-Play-App
Подобно apple-itunes-app
выводит баннер приложения в Андроид.
Значение «Notranslate»
Если страница написана на языке, который не подходит пользователю, Google добавляет ссылку, позволяющую сделать перевод на нужный язык. Значение notranslate
отключает эту функцию.
Значение «Nositelinkssearchbox»
Иногда в результатах поиска Google рядом со ссылками на сайт появляется окно поиска по сайту. С помощью данного мета-тега можно отключить показ этого поля.
Chrome-Webstore-Item
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/xxxxxxxxxxxxx">
Publisher
Google использует для связи между сайтом и его страницей в Google+.
Разное
Search
Указывает на XML файл OpenSearch, который позволяет делать поиск по сайту в браузере не заходя на него.
Подробнее о формате на http://opensearch.org.
<link rel="search" type="application/opensearchdescription+xml" title="Поиск на example.com" href="http://example.com/opensearch.xml">
Referrer
Задает HTTP-заголовок «Referer» который отправится на сервер при переходе по ссылкам.
none | Никогда не передает заголовок |
none-when-downgrade | Заголовок передается только если используется HTTPS |
origin | Передает данные о хостах и поддоменах |
unsafe-url | Передает полный URL |
Refresh
Задаст задержку в секундах, после чего браузер обновит страницу.
Также можно указать другой адрес по которому перейдет браузер после задержки.Skype Toolbar
Мета-тег skype_toolbar
отключает расширение Skype на странице (только старые версии).
CSRF
Свидетельствует о том, что на сайте реализована защита от CSRF-атак.
<meta name="csrf-token" content="gZoOqHdVwfq2QpfkwH6lQE75ivykrHdOS0rVfhiX">
<meta name="csrf-param" content="authenticity_token">
Ссылка на канал в телеграм
Тег Base
Указывает браузеру как обрабатывать относительные URL в ссылках и src изображений относительно адреса текущей страницы.
В примере, браузер запросит изображение по адресу:
http://site.ru/category/images/logo.png