Посмотрев HTML код разных сайтов возникает вопрос – зачем в нем так много мета-тегов и для чего они нужны? В данной статье представлены все самые встречающеюся теги с примерами и пояснениями.
Описание страницы
Title
Заголовок страницы, оптимальная длина 50-60 символов.
<title>...</title>Description
Краткое описание страницы длинной 160-180 символов, используется в выводе результатов поиска.
<meta name="description" content="...">Keywords
Содержит ключевые слова встречающихся на странице. Не более 20-ти слов и 3-х повторов.
<meta name="keywords" content="...">- Google – не использует.
- Яндекс – под вопросом.
Кодировка сайта
<meta http-equiv="content-type" content="text/html; charset=utf-8">В HTML5 тег сократили:
<meta charset="utf-8">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
Сообщает, с помощью какой программы был сгенерирован код страницы.
<meta name="generator" content="...">Author
Информация об авторе сайта.
<meta name="author" content="...">Copyright
Информация о владельце сайта.
<meta name="copyright" content="...">Reply-To
Указывает способ связи с автором страницы.
<meta name="reply-to" content="mail@example.com">Content-Language
Указывает язык страницы. Используется поисковыми машинами при индексировании.
<meta http-equiv="content-language" content="ru">Help
Предоставляет ссылку на справку или e-mail.
<link rel="help" href="mailto:help@example.com">Управление индексацией
Robots
Задает правила индексации для поисковых
<meta name="robots" content="index, follow">Общие значения:
| index, follow или all | Разрешено индексировать текст и ссылки на странице |
| noindex | Не индексировать текст страницы |
| nofollow | Не переходить по ссылкам на странице |
| noindex, nofollow или none | Запрещено индексировать текст и переходить по ссылкам |
| noarchive | Не показывать ссылку на сохраненную копию в поисковой выдаче |
Яндекс
| noyaca | Не использовать описание из Яндекс.Каталога для сниппета в результатах поиска |
| nosnippet | Запрещает показывать видео или фрагмент текста в результатах поиска |
| noimageindex | Запрещает указывать вашу страницу как источник ссылки для изображения |
| noodp | Не использовать описание из каталога DMOZ |
Last-Modified
Альтернативно HTTP-заголовку Last-Modified задает дату последнего изменения для статических страниц.
<meta http-equiv="last-modified" content="2017-12-31@08:04:23 +00:00">Document-State
Определяет частоту индексации для поисковых роботов.
<meta name="document-state" content="dynamic">| static | Индексировать один раз |
| dynamic | Индексировать страницу регулярно |
Revisit-After
Указывает как часто обновляется информация на сайте, и как часто поисковая система должна на него заходить.
<meta name="revisit-after" content="5 days">Управление кэшированием
Cache-Control
Указывает как браузеру кэшировать страницу.
<meta http-equiv="cache-control" content="no-cache">| public | Кэшируется все |
| private | Кэшируется браузером, но не proxy-сервером |
| no-cache | Запрещает кэширование |
| max-age=0 | Сколько секунд хранить в кэше |
Pragma
Отключает кэширование.
<meta http-equiv="pragma" content="no-cache">Expires
Дата окончания кэша браузера. Если указать прошедшую дату или 0, то документ не будет кэшироваться.
<meta http-equiv="expires" content="0">Canonical - предпочитаемый канонический адрес
Если у страницы есть дубликаты с одним содержанием и разными URL, например:
http://exaple.comcategory/jquery
http://exaple.com/category/jquery?sort=desc
В rel="canonical" указывается адрес, который будет считаться основным и будет использоваться в поисковой выдаче.
<link rel="canonical" href="http://exaple.com/jquery">Prev
Указывает URL предыдущий страницы при пагинации.
<link rel="prev" href="http://example.com/jquery">Next
Указывает URL следующий страницы при пагинации.
<link rel="next" href="http://example.com/jquery?page=3">Rel Alternate
Атрибут «Hreflang»
Этот атрибут указывает ссылки на разные языковые версии сайта. Код языка указывается в формате ISO 639-1.
<link rel="alternate" hreflang="ru" href="http://ru.example.com/">Или код языка и региона, регион указывается в формате ISO 3166-1 Alpha 2:
<link rel="alternate" hreflang="ru-RU" href="http://ru-ru.example.com/">Значение x-default говорит о том что страница главная и не соответствует какому-либо языку или региону.
<link rel="alternate" hreflang="x-default" href="http://example.com/">Атрибут «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 канал.
<link rel="alternate" type="application/rss+xml" href="http://example.com/rss">application/atom+xml – фид в формате Atom. <link rel="alternate" type="application/atom+xml" href="http://example.com/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.
<meta name="google-site-verification" content="...">Google-Play-App
Подобно apple-itunes-app выводит баннер приложения в Андроид.
<meta name="google-play-app" content="app-id=ru.название_приложения">Значение «Notranslate»
Если страница написана на языке, который не подходит пользователю, Google добавляет ссылку, позволяющую сделать перевод на нужный язык. Значение notranslate отключает эту функцию.
<meta name="google" value="notranslate">Значение «Nositelinkssearchbox»
Иногда в результатах поиска Google рядом со ссылками на сайт появляется окно поиска по сайту. С помощью данного мета-тега можно отключить показ этого поля.
<meta name="google" content="nositelinkssearchbox"> Chrome-Webstore-Item
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/xxxxxxxxxxxxx">Publisher
Google использует для связи между сайтом и его страницей в Google+.
<link rel="publisher" href="https://plus.google.com/xxxxxxxxx">Разное
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» который отправится на сервер при переходе по ссылкам.
<meta name="referrer" content="origin">| none | Никогда не передает заголовок |
| none-when-downgrade | Заголовок передается только если используется HTTPS |
| origin | Передает данные о хостах и поддоменах |
| unsafe-url | Передает полный URL |
Refresh
Задаст задержку в секундах, после чего браузер обновит страницу.
<meta http-equiv="refresh" content="10"><meta http-equiv="refresh" content="10; URL=http://www.name.com/">Skype Toolbar
Мета-тег skype_toolbar отключает расширение Skype на странице (только старые версии).
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible"> CSRF
Свидетельствует о том, что на сайте реализована защита от CSRF-атак.
<meta name="csrf-token" content="gZoOqHdVwfq2QpfkwH6lQE75ivykrHdOS0rVfhiX">
<meta name="csrf-param" content="authenticity_token">Ссылка на канал в телеграм
<meta name="telegram:channel" content="@telegram">Тег Base
Указывает браузеру как обрабатывать относительные URL в ссылках и src изображений относительно адреса текущей страницы.
В примере, браузер запросит изображение по адресу:
http://site.ru/category/images/logo.png
<head>
<base href="http://example.com/category/">
</head>
<body>
<img src="images/logo.png">
</body>
