Что такое мета-теги?

Начнем с того, что «мета-теги» или «метатеги» — это теги, содержащие в себе информацию, которая предназначена для браузеров, поисковых систем, программного обеспечения и сервисов, которые так или иначе могут взаимодействовать с вашим веб-приложением (сайтом).

Такие теги могут нести в себе описание страницы (например, ключевые слова и само описание), информацию об авторских правах или самом авторе, указания браузеру на какие-то внешние или внутренние механизмы обработки страницы и даже команды браузеру, а также правила «поведения» для поисковых систем.

Нужно заметить, что правильное написание («мета-теги» или «метатеги») нигде не регламентировано, а следовательно, здесь вы можете шалить как душе угодно. На википедии оперируют метатегами и мета-тегами наравне. Но не будем о грустном мира сего, пойдём дальше.

Сразу же нужно уяснить, что не всякий тег имеет приставку мета. Мета-тегом он будет называться, если находится между тегами <head>...</head> и его содержимое как-то соотносится с тем, что умеет браузер.

Отсюда вытекает следующая проблема — не все браузеры понимают некоторые специфичные мета-теги. Например, мета-тег theme-color, который предназначен для мобильных версий браузера Chrome никак не повлияет на, допустим, сам Chrome, который запущен на десктопе. Иначе говоря, те браузеры, что не могут соотнести мета-тег с функционалом, который в них заложен — просто игнорируют его.

На самом деле так же дела обстоят и с другими тегами. Недавно перешедшая в статус официальной рекомендации спецификация HTML5, содержит в себе реинкарнацию элемента dialog, который до сих пор поддерживается только Chrome и Opera. Однако, это не значит, что в других браузерах этот элемент и его содержимое будет игнорироваться вовсе — он просто будет обычным тегом, например, таким, как <div>. Разумеется, что и доступное для него API (по спецификации) в таком браузере не будет реализовано, хотя в DOM такой элемент будет, и его содержимое будет отображаться на странице.

Как использовать мета-теги?

Так как же использовать мета-теги? — поверьте, очень просто. Достаточно лишь запомнить основные из них и применять тогда, когда это необходимо

<!doctype html>
  <head>
    <meta charset="utf-8">
    <title>Canonium?!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Блог для тех, кто делает сайты — от того, кто делает сайты.">
  </head>
  <body>
    ...
  </body>
</html>

Всё это вы должны уже знать, так как мой блог не рассчитан на обучение с нуля, да и на профессионалов своего дела тоже, так как одним будет не понятно о чём здесь речь, а другим будет скучно. Поэтому не будем вдаваться в подробности, перейдём к сути статьи.

Какие бывают мета-теги?

Вот и настал тот самый момент, когда вы сможете увидеть хоть что-то интересное или не очень интересное... или совсем не интересное... В любом случае, поехали!

В этой части статьи собран джентльменский набор мета-тегов для веб-приложений.

Джентльменский набор

Такие мета-теги есть практически на всех сайтах, они распространены и популярны. Без них жизнеспособность вашего сайта под вопросом.

Кодировка

<meta charset="кодировка">

Этот мета-тег указывает кодировку страницы, чаще всего utf-8.

Описание страницы

<meta name="description" content="описание страницы">

Описание вашего сайта. Максимум 150 символов, поэтому подумайте над его содержимым.

Ключевые слова

<meta name="keywords" content="ключевые слова через запятую">

Ключевые слова, которые отображают всю суть содержимого страницы или сайта. Необходим для SEO. Поговаривают, что количество ключевых слов должно быть не больше 10 штук.

Устарел или устаревает, так как поисковые системы сами в состоянии определить ключевые слова страницы и умеют игнорировать содержимое этого тега, если оно не соотносится с содержимым страницы.

Режим совместимости (отображения)

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Этот мета-тег управляет режимом отрисовки (рендеренга) страницы.

Подробнее можно почитать у Вадима Макеева.

Область просмотра

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

Область просмотра определяет, как веб-страница отображается на мобильном устройстве.

Подробнее можно узнать у Google Developers.

Robots

<meta name="robots" content="index, follow">

Альтернатива robots.txt. Всё тоже самое, только в упрощенном виде и для конкретной страницы.

Подробнее про файл robots.txt и конкретно про мета-тег.

Автор

<meta name="author" content="humans.txt">

На самом деле, вместо humans.txt некоторые пишут своё ФИО, почту и прочее. Однако, я советую писать humans.txt, так как в нём вы можете полностью описать состав вашей команды, конечно, если вы не корпорация, где над сайтом трудится не один десяток человек.

Подробнее про файл humans.txt.

Копирайт

<meta name="copyright" content="информация о вашей фирме">

Всегда можно указать владельца сайта, если владелец не частное лицо, а, например, фирма. Обычно не указывается, так как для этого используется тег author.

Полезные мета-теги

Разумеется, что все мета-теги перечислять очень долго, и я даже почти уверен, что смогу упереться в ограничение поля content, у которого стоит тип TEXT (65К символов), в Anchor CMS. Поэтому дальнейшие мета-теги я приведу списком, который будет разделён на категории, сопровождаемые небольшими комментариями и будет содержать интересные на мой взгляд теги.

Контент

// Основной язык страницы
<meta name="language" content="язык (RU, EN, ES и т.д.)">

// Установка языка
// Не рекомендуется использовать:
// http://www.w3.org/International/questions/qa-http-and-lang.ru.php
<meta http-equiv="Content-Language" content="en">

// Дата последнего обновления содержимого страницы
<meta name="revised" content="дата">

Apple

Оптимизация страниц для мобильных платформ сейчас очень важна, поэтому постарайтесь не забыть про них.

// Название веб-приложения
<meta name="apple-mobile-web-app-title" content="название веб-приложения">

// Полноэкранный режим (минимизация верхнего бара браузера)
<meta name="apple-mobile-web-app-capable" content="yes">

// Устанавливает стиль строки состояния для веб-приложения
<meta name="apple-mobile-web-app-status-bar-style" content="black">

// Управление обнаружением телефонных номеров
<meta name="format-detection" content="telephone=no">

// Иконка для веб-приложения, отображаемая в закладках и на рабочем столе
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon-152x152.png">

// Изображение, которое отображается при открытии закладки с рабочего стола
<link rel="apple-touch-startup-image" href="images/touch/startup.png">

Не путайте link и meta — это разные теги. Тег link не является по сути своей мета-тегом, так как предоставляет информацию браузеру о том, с какими внешними ресурсами связана открытая страница.

Android

Всё тоже самое, но для зелёного лагеря :)

// Название веб-приложения
<meta name="application-name" content="название веб-приложения">

// Полноэкранный режим (минимизация верхнего бара браузера)
<meta name="mobile-web-app-capable" content="yes">

// Цвет заголовка у вкладки
<meta name="theme-color" content="#hex-цвет">

// Иконка для веб-приложения, отображаемая в закладках и на рабочем столе
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

Windows 8

Раз уж речь зашла про мобильные платформы, то будет плохим тоном обойти Windows 8 и его верного спутника Internet Explorer.

// Название веб-приложения
<meta name="application-name" content="название веб-приложения">

// Содержат текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню "Пуск" Windows или на рабочем столе
<meta name="msapplication-tooltip" content="подсказка">

// Определяет пользовательский цвет кнопок Назад и Вперед в окне браузера закрепленного сайта
<meta name="msapplication-navbutton-color" content="#hex-цвет">

// Определяют исходный размер окна закрепленного сайта при первом запуске
<meta name="msapplication-window" content="width=1024;height=768">

// Цвет плитки (тайла)
<meta name="msapplication-TileColor" content="#hex-цвет">

// Изображение для старого типа тайлов
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">

// Изображение для нового типа тайлов (XXxYY) [70x70 | 150x150 | 310x150 | 310x310]
<meta name="msapplication-squareXXxYYlogo" content="images/tile.png">

Open Graph и Twitter

Мета-теги для организации разметки Open Graph. Что это такое и с чем это едят, можно узнать на web-koshka.ru.

К вашему сожалению, привожу список тегов без описания, так как всё это написано и собрано в документации к протоколу и присутствует у Яндекса на русском языке.

Заинтересованным в продвижении своего веб-приложения обязательно к просмотру и изучению, так как на основе Open Graph строится «карточка» сайта при, допустим, нажатии на кнопку социальных сетей (если не задано специальными тегами самих сетей).

// Обязательные поля
<meta property="og:title" content="The Rock">
<meta property="og:type" content="movie">
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/">
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg">
<meta property="og:site_name" content="IMDb">
<meta property="og:description" content="A group of U.S. Marines, under command of...">

// Месторасположение
<!-- см. комментарий в конце статьи от Дениса Семенова -->

// Видео
<meta property="og:video" content="http://example.com/awesome.swf">
<meta property="og:video:height" content="640">
<meta property="og:video:width" content="385">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video" content="http://example.com/html5.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video" content="http://example.com/fallback.vid">
<meta property="og:video:type" content="text/html">

// Аудио
<meta property="og:audio" content="http://example.com/amazing.mp3">
<meta property="og:audio:title" content="Amazing Song">
<meta property="og:audio:artist" content="Amazing Band">
<meta property="og:audio:album" content="Amazing Album">
<meta property="og:audio:type" content="application/mp3">

К счастью или к сожалению, Twiter пошел своей дорогой и создал свои карточки. У Facebook есть дополнительные мета-теги.

Супер-пупер-гипер-мега-ультра-сверх-листинг

Для самостоятельных, независимых и отверженных людей предоставляю ссылку на список всех валидных HTML5 мета-тегов — клац. Все мета-теги приведены с описаниями и ссылками на соответствующие спецификации. Правда, всё это на английском языке, но это мелочи.

Пользовательские мета-теги

Помимо тех мета-тегов, которые можно увидеть в супер-пупер-гипер-мега-ультра-сверх-листинге, никто не запрещает писать свои мета-теги, необходимые для каких-то личных нужд.

Например, так поступают некоторые сервисы, предоставляющие какие-то услуги:

<meta name="google-analytics" content="1-AHFKALJ">
<meta name="disqus" content="abcdefg">
<meta name="uservoice" content="asdfasdf">
<meta name="mixpanel" content="asdfasdf">

Заключение

Эта небольшая статья основана на найденном мной ещё в том году листинге мета-тегов от Lance Pollard, когда мне самому стала интересна эта тема. Поэтому не удивляйтесь, что раздел с мета-тегами Open Graph полностью скопирован оттуда.

По поводу того, стоит ли применять те или иные теги — решать вам. Как бы то ни было, в любом случае, набор мета-тегов для вашего сайта (веб-приложения) будет индивидуальным и строиться на тематике сайта, его возможностях и прочих аспектах.

Например, для интернет-магазина и блога, как мне кажется, просто необходимы кнопки по типу «рассказать друзьям», а отсюда вытекает необходимость работы с мета-тегами Open Graph или настройками этих кнопок для удовлетворительного отображения карточки товара или записи в ленте социальной сети. Для магазина (интернет-магазина) также пригодятся мета-теги месторасположения и контактной информации, которая вроде как может отображаться при поиске и на карте (поиск этой информации целиком и полностью на вас).

Другим примером может послужить веб-приложение, по типу Github, которое использует протокол Open Graph и карточки Twitter, иконки для мобильных платформ, оформление плиток (тайлов) для Windows 8.x и даже свои собственные мета-теги.

Поэтому старайтесь относиться с умом к использованию мета-тегов на страницах вашего проекта. Да, лишние мета-теги не помешают ему, но и не прибавят ему веса для поисковых систем. Не будем рассуждать тут о SEO и прочих шалостях, так как я в этом не особо силён, если не сказать, что практически вообще не бум-бум :)

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