<meta> Описание мета-тегов

Содержание

Посмотрев HTML код разных сайтов возникает вопрос – зачем в нем так много мета-тегов и для чего они нужны? В данной статье представлены все самые встречающеюся теги с примерами и пояснениями.

Title

Заголовок страницы, оптимальная длина 50-60 символов.

<title>...</title>
Description

Краткое описание страницы длинной 160-180 символов, используется в выводе результатов поиска.

<meta name="description" content="...">
Keywords

Содержит ключевые слова встречающихся на странице. Не более 20-ти слов и 3-х повторов.

<meta name="keywords" content="...">
Кодировка сайта
<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">
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 Не использовать описание из Яндекс.Каталога для сниппета в результатах поиска

Google

nosnippet Запрещает показывать видео или фрагмент текста в результатах поиска
noimageindex Запрещает указывать вашу страницу как источник ссылки для изображения
noodp Не использовать описание из каталога DMOZ
Last-Modified

Альтернативно HTTP-заголовку Last-Modified задает дату последнего изменения для статических страниц. Дата должна указываться в стандарте [RFC850].

<meta http-equiv="last-modified" content="Sat, 12 Nov 2022 09:31:10 GMT">
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 Запрещает кэширование
only-if-cached Указывает на необходимость использования только закешированных данных. Запрос на сервер не должен посылаться.
max-age Задаёт максимальное время (в секундах) в течение которого ресурс будет считаться актуальным. В отличие от Expires, данная инструкция является относительной по отношению ко времени запроса.
must-revalidate Кеш должен проверить статус устаревших ресурсов перед их использованием. Просроченные ресурсы не должны быть использованы.
proxy-revalidate То же самое, что must-revalidate, но применимо только к разделяемым кешам (например, прокси) и игнорируется частными кешами.
no-store Кеш не должен хранить никакую информацию о запросе и ответе 
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate" />
Pragma

Отключает кэширование.

<meta http-equiv="pragma" content="no-cache">
Expires

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

<meta http-equiv="expires" content="0">

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

Если у страницы есть дубликаты с одним содержанием и разными URL, например:

https://example.com/category/jquery

https://example.com/category/jquery?sort=desc

В rel="canonical" указывается адрес, который будет считаться основным и будет использоваться в поисковой выдаче.

<link rel="canonical" href="https://example.com/jquery">
Prev

Указывает URL предыдущий страницы при пагинации.

<link rel="prev" href="https://example.com/jquery">
Next

Указывает URL следующий страницы при пагинации.

<link rel="next" href="https://example.com/jquery?page=3">
Атрибут «Hreflang»

Этот атрибут указывает ссылки на разные языковые версии сайта. Код языка указывается в формате ISO 639-1.

<link rel="alternate" hreflang="ru" href="https://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/">

Описание: Яндекс Google

Атрибут «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">
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.название_приложения">
Google

Значение «Notranslate»

Если страница написана на языке, который не подходит пользователю, Google добавляет ссылку, позволяющую сделать перевод на нужный язык. Значение notranslate отключает эту функцию.

<meta name="google" value="notranslate">

Значение «Nositelinkssearchbox»

Иногда в результатах поиска Google рядом со ссылками на сайт появляется окно поиска по сайту. С помощью данного мета-тега можно отключить показ этого поля.

<meta name="google" content="nositelinkssearchbox">
Chrome-Webstore-Item
Добавление ссылки в Интернет-магазин Chrome.
<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 изображений относительно адреса текущей страницы.

В примере, браузер запросит изображение по адресу:

<head>
 <base href="http://example.com/category/">
</head>
<body>
 <img src="images/logo.png">
</body>
Метатег Viewport

Сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб. Meta-тег viewport может иметь следующие атрибуты, указанные через запятую:

widthШирина области просмотра.
Значение атрибута является целое неотрицательно число от 200 до 10000 пикселей или константа device-width, которая задаёт ширину страницы в соответствии с размером экрана.
Если значение не задано, по умолчанию устанавливается – в мобильном Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.
heightВысота области просмотра.
Значением атрибута является целое неотрицательно число от 233 до 10000 пикселей или константа device-height, которая задаёт высота страницы в соответствии с размером экрана.
initial-scaleНачальный масштаб страницы.
Значением атрибута является число с точкой от 0.1 до 1.0. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».
user-scalableДоступность масштабирования страницы пользователем.
Значение атрибута является логическое «yes» (1) – можно масштабировать или «no» (0) – нельзя масштабировать. По-умолчанию установлено «yes».
minimum-scaleМинимальный масштаб области просмотра.
Значением атрибута является число с точкой от 0.1 до 1.0. В мобильном браузере Safari по умолчанию 0.25. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».
maximum-scaleМаксимальный масштаб области просмотра.
Значением атрибута является число с точкой от 0.1 до 1.0 . В мобильном браузере Safari по умолчанию 1.6. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».

Пример:

<meta name="Viewport" content="width=device-width, initial-scale=1">

Справочник HTML