Элемент < meta >

Обзор

Метатеги предоставляют метаданные о HTML-документах. Метаданные не отображаются на странице, но машиночитаемы. Они могут использоваться браузерами (как отображать содержимое или перезагружать страницу), поисковыми системами (ключевые слова) или другими веб-службами.

Обязательные атрибуты

Необязательные атрибуты

SEO-оптимизация

Справочные документы

• Ключевые слова страницыКаждая веб-страница должна иметь набор уникальных ключевых слов, описывающих содержимое страницы.
  Используйте описательные и репрезентативные ключевые слова и фразы, которые люди, вероятно, будут искать и которые точно описывают информацию, представленную на странице. Если размеченный контент слишком короткий, поисковые системы могут не считать его релевантным. Кроме того, тег не должен превышать 874 символа.

<meta name="keywords" content="your tags" />

• Описание страницыКаждая веб-страница должна иметь тег description, который не превышает 150 символов и точно отражает содержимое страницы.

<meta name="description" content="150 words" />

• Методы индексации поисковыми системамиrobotterms — это набор значений, разделённых запятыми, обычно со следующими значениями: none, noindex, nofollow, all, index и follow. Убедитесь, что значения атрибутов nofollow и noindex используются правильно.

<meta name="robots" content="index,follow" />
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询。
 -->

• Перенаправление и обновление страницыЧисло в content обозначает время (в секундах), т. е. через сколько секунд обновить. Если добавлен url, произойдёт перенаправление на указанную страницу (поисковые системы могут обнаружить это автоматически, и это легко может быть расценено поисковыми системами как вводящее в заблуждение и привести к санкциям).

<meta http-equiv="refresh" content="0;url=" />

• Другое

<meta name="author" content="author name" /> <!-- 定义网页作者 -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />

Мобильные устройства

• viewportОн позволяет оптимизировать отображение в мобильных браузерах. Если сайт не адаптивен, не используйте initial-scale и не отключайте масштабирование.
  Для большинства устройств с диагональю 4,7–5 дюймов задайте ширину viewport равной 360px; для устройств с диагональю 5,5 дюйма — 400px; для iPhone 6 — 375px; для iPhone 6 Plus — 414px.

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

1. width: width (числовое значение / device-width) (диапазон от 200 до 10,000, по умолчанию 980 пикселей)
2. height: height (числовое значение / device-height) (диапазон от 223 до 10,000)
3. initial-scale: начальный коэффициент масштабирования (диапазон от >0 до 10)
4. minimum-scale: минимальный коэффициент, до которого пользователю разрешено масштабировать
5. maximum-scale: максимальный коэффициент, до которого пользователю разрешено масштабировать
6. user-scalable: может ли пользователь вручную масштабировать (no, yes)
7. minimal-ui: может сворачивать верхнюю и нижнюю строки состояния при загрузке страницы. (Устарело)

Обратите внимание, что многие используют initial-scale=1 на неадаптивных сайтах, из-за чего сайт отображается на 100% ширины, и пользователям приходится вручную перемещать страницу или масштабировать. Если user-scalable=no или maximum-scale=1 используется вместе с initial-scale=1, пользователи не смогут увеличивать/уменьшать масштаб, чтобы увидеть всё содержимое.

• Полноэкранный режим WebAppМаскировка под приложение, для офлайн-приложений.

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

• Скрыть строку состояния / Задать цвет строки состоянияДействует только когда включён полноэкранный режим WebApp. Значение content — default | black | black-translucent.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

• Заголовок после добавления на главный экран

<meta name="apple-mobile-web-app-title" content="标题">

• Игнорировать автоматическое распознавание чисел как телефонных номеров

<meta content="telephone=no" name="format-detection" />

• Игнорировать распознавание адресов электронной почты

<meta content="email=no" name="format-detection" />

• Добавить Smart App BannerСообщает браузеру о приложении, соответствующем этому сайту, и отображает на странице баннер загрузки (как показано ниже).Справочные документы

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

• Другое Справочные документы

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

Связанное с веб-страницей

• Указание кодировки

<meta charset='utf-8' />

• Предпочитать последнюю версию IE и Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

• Управление браузерным движкомМногие китайские браузеры являются двухдвижковыми (WebKit и Trident). Движок WebKit обеспечивает высокоскоростной просмотр, а движок IE обеспечивает совместимость с веб-страницами и старыми сайтами. Сайты с meta-тегом могут управлять тем, какой движок браузер использует для рендеринга.Справочные документы

<meta name="renderer" content="webkit|ie-comp|ie-stand">

Режимы движков по умолчанию у китайских двухдвижковых браузеров следующие:
1. Sogou High-Speed Browser, QQ Browser: движок IE (режим совместимости)
2. 360 Speed Browser, Maxthon Browser: движок WebKit (скоростной режим)

• Запретить браузеру доступ к содержимому страницы из кэша локального компьютераС этой настройкой посетители не смогут просматривать страницы офлайн.

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

• Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

• Адаптация сайтаВ основном используется для соответствия между страницами для ПК и мобильными страницами.

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
 -->

• Объявление о транскодированииПри открытии веб-страницы через Baidu она может быть транскодирована (например, могут быть вставлены рекламные объявления). Чтобы избежать транскодирования, можно добавить следующий meta-тег.

<meta http-equiv="Cache-Control" content="no-siteapp" />

Другие справочные документы

ПОЛНЫЙ СПИСОК HTML META-ТЕГОВ
META-ТЕГИ W3C
МЕТАТЕГИ в HTML5
Мета-теги MDN

Источник: http://segmentfault.com/a/1190000002407912