Сегодня на «Тостере» заприметил достаточно интересный вопрос, суть которого заключалась в использовании meta-тегов. На самом деле, меня тоже очень интересует этот вопрос, так как в свое время, когда мы верстали первую версию своего скина, мы проводили достаточно масштабное исследование по этому поводу, на основании результатов которого собрали свой рекомендованный список meta-тегов, который по сей день используем во всех своих продуктах. Тем не менее, есть основания утверждать, что этот список если не устарел морально, то уже точно вышел на пенсию. Самое время разобраться, какие meta-теги нужны, а какие должны остаться в эпохе нулевых. В рамках сегодняшнего исследования я буду основываться не на каких-нибудь теоретических публикациях и книгах, а на том, что реально используют наиболее популярные Интернет-ресурсы, которые, понятное дело, глупостей на все свои страницы не установят.

Начнем с совершенно обязательных тегов: «charset» и «title». Зачем они нужны я даже не стану говорить, скажу только о том, что некоторые владельцы сайтов, полагаясь на последние версии веб-браузеров и автоматическое определение кодировки, устраняют декларацию кодировки из meta-тегов. Это совершенно несправедливо по отношению к пользователям, которые по объективным причинам не могут иметь последних версий веб-браузеров, а также по отношению к себе, так как достаточно проверить сайт только в нескольких совершенно чистых браузерах (где прежде не загружалась эта страница) для того, чтобы убедиться в том, что страницы, где используется не только латиница, далеко не всегда отображаются верно. Именно поэтому не стоит верить иностранным сайтам, советующим устранять этот тег как пережиток прошлого.

Вторыми по популярности стали теги, предназначенные для техники «Apple». Как вы знаете, в iPad/iPhone/iPod можно добавить страницу в меню наравне с приложениями, однако для этого необходимо, чтобы на странице была указана некоторая дополнительная информация, в случае отсутствия которой сайт в меню будет выглядеть непрезентабельно и вряд ли останется там после того, как пользователь увидит все это безобразие.

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

Во времена мобильных устройств, достаточно важным стало отображение на маленьких экранах. Использование тега «viewport» на сегодняшний день является крайне рекомендуемым, однако его не стоит просто бездумно ставить, так как это может существенно ухудшить читабельность сайта на экране мобильного устройства. Данный тег, к примеру, устанавливает ширину страницы по ширине экрана устройства:

Это замечательный вариант для адаптивных сайтов, но не лучший для не адаптивных, так как любые элементы страницы, которые в ширине превышают ширину экрана устройства, не будут умещаться на экране и растянут страницу. В данном случае будет оптимально установить ширину страницы по ширине максимального значимого элемента страницы, но элемент при этом не должен быть слишком широким, так как это приведет к тому, что пользователь, увеличивая масштаб страницы, будет вынужден прокручивать страницу по горизонтали дабы дочитать строку.

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

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

Для любителей «Microsoft» тоже есть кое-что. Начнем с режима совместимости для Internet Explorer:

Данный код позволяет устранить для страницы режим совместимости, который, по сути дела, предназначен для совсем уже старинных сайтов. Стоит отметить, что в работе данного тега существуют некоторые особенности, о которых немного подробнее рассказано здесь.

Кроме этого замечательного тега существует также целый ряд Apple-style тегов, обеспечивающих корректное отображение сайта на «плитке» (так в Windows 8+ и Windows Phone называется аналог иконки-закладки сайта на мобильных устройствах производства «Apple»):

Данные теги указывают устройству под управлением ОС Windows откуда нужно брать иконку сайта (обратите внимание, что здесь приветствуется эмблема сайта на прозрачном фоне, которая будет наложена на фон того цвета, который указан первым тегом), каким цветом ее заливать и как наименовать. Чуть попроще, чем у яблочного конкурента.

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

Последнее место в списке займут, пожалуй, ссылки на профили в социальных сетях. Такие есть во многих. «Twitter», например, предлагает целый набор тегов аналогично тому, что уже описывался выше.

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

Обращали ли вы внимание на то, что рядом с некоторыми сайтами в поисковой выдаче «Google» есть ссылки на профили авторов в G+? Для добавления такой функции достаточно зарегистрировать сайт в своем профиле G+, после чего добавить такой meta-тег:

Ссылку с нулями, конечно же, нужно заменить на ссылку на ваш профиль. Аналогичный функционал есть и у «Facebook», но там тег выглядит немного иначе:

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

По сути дела, это и есть наиболее популярный на сегодняшний день набор meta-тегов, который используется на большинстве сайтов из списка наиболее посещаемых. Заметьте, что почти везде пропали «revisit-after», «document-state» и «keywords». Многие пишут, что «keywords» на сегодняшний день вообще стал вредоносным, однако это не доказано практически, впрочем, как и его польза. Существует множество списков тегов, которые повышают приоритет ключевых слов на странице, однако на сегодняшний день поисковые системы стали слишком умными для того, чтобы провести их просто какими-то тегами, поэтому лично я посчитал тег «keywords» анахронизмом, который вскоре будет удален из списка тех meta-тегов, которыми мы пользуемся.