Предисловие
Так вышло, что я очень дотошный кодер. Несколько дней назад мне пришлось изрядно «поковыряться» на форумах в поисках нужной информации. В процессе, я наткнулся на некоторые регулярно повторяющиеся вопросы новичков типа: «Какие обязательные мета-теги должны присутствовать в head?» или «В какой последовательности нужно использовать мета-теги?». Каким же было мое удивление, когда достаточно опытные верстальщики, «великие гуру» форумов, давали такие скомканные ответы, как: «Не имеет значения», «Обязательных тегов нет» и т. п.
И когда у меня изрядно «подгорело», я решил написать эту статью, чтобы «открыть глаза юным падаванам».
Вникаем в спецификацию
Следует сразу сказать, что если отталкиваться от спецификации HTML, то обязательных мета-тегов, действительно, нет. Для правильной работы страницы достаточно указать кодировку и написать заголовок.
Но как мы все знаем, на деле, каждый проект (почти каждый) имеет цель- привлечь пользователей/посетителей. Поэтому мы будем рассматривать полезные (я бы даже сказал слово «необходимые»), почти универсальные, мета-теги, которые помогут оптимизировать отображение Вашего сайта, улучшить совместимость и сделать его максимально «дружелюбным» для поисковых систем с точки зрения SEO.
Внимание! Шаблонное копирование мета-тегов из проекта в проект- это неправильно. Но, по моему мнению, это необходимый «минимальный» комплект. Данная статья является моим субъективным мнением, каждый пункт которого отталкивается строго от документаций для веб-мастеров Google и Yandex, а так же, спецификации HTML.
Начинаем
Прежде чем начинать разбираться с тегами, разберемся с последовательностью.
Последовательность, по большому счету, действительно, не важна. Документ будет корректно и быстро открываться при любом порядке написания мета-тегов.
Но нужно учитывать то, что первыми должны идти общие теги, а после них- уникальные для каждой страницы. Это обосновано просто опытом моей работы по доделыванию и переделыванию проектов. Так комфортнее читать код. Также, нужно учитывать то, что .html файл читается последовательно. Поэтому, желательно, кодировку указывать в первую очередь. Также не стоит забывать о простой логике и не разбрасывать теги, приближенные по области применения, по всему head. Например, языковые связки следует держать в одном месте, друг за другом, а заголовок и описание- в другом.
Начнем с 3 обязательных наиболее желательных тегов. Следующие теги указывают кодировку, поддержку максимально доступной версии IE, настройки viewport.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width">
Сначала мы указываем кодировку, чтобы, при чтении документа, браузер понимал, какая кодировка у страницы, чтобы он мог правильно ее читать дальше. Затем, мы указали настройку для поддержки максимально доступной версии IE, т.к. первым делом, после кодировки, нам нужно задать правила для обработки сайта самим браузером. И в самом конце мы задаем настройки viewport'а.
Далее просто приведу всю разметку в теге head, а затем уточню некоторые нюансы.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,width=device-width">
<!--3 meta-тега выше должны быть использованы первыми-->
<!--OpenGraph | http://ogp.me
Для подключения нужно использовать атрибут prefix="og: http://ogp.me/ns#" в теге html.
Шаблон:
<meta property="og:type" content="website">
<meta property="og:url" content="адрес сайта">
<meta property="og:title" content="заголовок">
<meta property="og:description" content="описание">
<meta property="og:image" content="адрес изображения">
-->
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="icon" href="" type="image/x-icon">
<link rel="apple-touch-icon" href="" type="image/png">
<!--Apple iOS | https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--CSS-->
<link href="" rel="stylesheet">
<!--JS-->
<!--Считается хорошим тоном подключать скрипты перед закрывающим тегом body. Но, например, если вы хотите сделать загрузочный экран, то было бы логичнее подключить скрипт сюда.-->
<script src=""></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Custom Windows Start Screen Tile | http://www.buildmypinnedsite.com-->
</head>
Нюансы
Устаревшие типы и теги
Речь и дет о таких мета-тегах, как keywords и таких типах файлов, как image/x-icon.
Большинство людей считают, что, например, тег keywords безсмысленно использовать, так как он уже давно устарел. Или, тип x-icon.
Отвечу раз и навсегда на это. Нужно всегда отталкиваться от документациий для веб-разработчиков, созданными (и регулярно обновляемыми) поисковыми системами. Документацию пишут не дураки. Например, в документации Яндекс до сих пор указано, что «keywords МОЖЕТ использоваться поисковой системой для формирования сниппета», а тип x-icon указан вообще первым и ничего не сказано про то, что он устарел.
OpenGraph
Прошу заметить, что данная интеграция, как и следующая, которую я приведу, действительно, не являются обязательными. Но отталкиваясь от спецификации Yahoo!, которая была сделана много лет назад и до сих пор является действительной, можно сделать вывод, что эта интеграция необходима, чтобы повысить «карму» сайта.
Связано это с тем, что с точки зрения SEO, да и здравого смысла, рейтинг сайта зависит от того, на сколько он «универсальный солдат». Иными словами, зависит он от того, на сколько он удобен для пользователя на разных устройствах, какие дополнительные полезные возможности он в себя включает и т.п. И в это входит адаптация по iOS устройства, интеграция двух протоколов, которые я привел в этой статье, отсутвие атрибута alt в изображениях и много чего другого.
Лично я пользуюсь уже несколько лет данным ресурсом-плагином для браузера, чтобы проверять соответствие сайта этим требованиям. Прошу заметить, что, нами всеми любимый, Хабрахабр и Тостер отвечают, почти на каждой странице (на некоторых страницах это просто невозможно или ненужно) всем пунктам этого чеклиста.
OpenGraph Protocol — это протокол, который изначально был придуман для социальной сети Facebook. Теперь он используется каждой соц. сетью и большинством современных форумов/сайтов. Он содержит в себе информацию о странице, на которую пользователь дает ссылку в сообщении. Думаю, каждый из Вас отправлял ссылки в соц. сетях и видел, как ссылка преобразуется в картинку, под ней добавляется заголовок и описание.
Ссылка на документацию добавлена в комментарий в коде.
Windows
Тут у некоторых опытных верстальщиков может вспыхнуть вопрос: «При чем здесь Windows и RSS Канал и какое отношение он может иметь к, например, сайту-визитке?» Но, тут тоже есть своя особенность. Этот протокол нужен для того, чтобы при добавлении сайта в «закладки» в меню Пуск на Windows, туда добавлялось не только название сайта, но и читалась информация с RSS и постоянно обновлялась. Вы можете заметить пример работы протокола, зайдя в меню Пуск на Windows 10 и посмотрев на плитку новостей, которая регулярно обновляется.
Действительно, зачем сайту, который не нуждается в подобном функционале, нужен этот протокол?
Все просто! Это для того е самого плюсика в «карму». Но есть небольшая хитрость. Вам не обязательно действительно создавать RSS канал для сайта. Вы можете просто вставить разметку протокола, а ссылку в последней строке указать несуществующую (ведущую на несуществующий канал вашего сайта).
Заключение
Надеюсь, эта информация пригодится начинающим верстальщикам. Это основная информация. Если будут возникать какие-то вопросы, то задавайте их в комментариях. Всем удачи!
Бонус
Шаблонное копирование разметки из проекта в проект- это не всегда хорошая идея. Выше я привел самые необходимые мета-теги, которые помогут идеально соответствовать критериям хорошего сайта, отталкиваясь от спецификации.
Для таких же дотошных кодеров, как я, я оставляю ссылку на хорошую документацию, где указаны все актуальные теги, описаны случаи, в которых их необходимо использовать и просто полезная информация по ним. (Ссылка)
Комментарии (15)
Akuma
29.03.2018 19:44+2Ух, жесть. Особенно порадовало «В какой последовательности нужно использовать мета-теги».
На то они и опытные верстальщики, что «Не имеет значения».
P.S. Перенесите последний абзац нверх что-ли, чтоб не пугать людей.
Denai
29.03.2018 21:52Тип image/x-icon устарел в 2003 году после стандартизации типа для ICO. Где иконки для android, почему именно эти для яблочников, где они же для виндофонов? Почему OG обязателен, а твиттер нет?
Pertinax Автор
29.03.2018 23:04Возможно он и устарел, но, по факту, в документации для веб-разработчиков от компании Yandex и Google до сих пор уместен этот тип. Вот тому доказательство (ссылка).
OG универсален. Его достаточно.Denai
29.03.2018 23:12А зачем вообще указывать путь к дефолтным иконкам, если они лежат в корне сайта и называются по умолчанию? Их какие-то браузеры/системы не будут в этом случае подхватывать?
Pertinax Автор
29.03.2018 23:19Мое мнение- не зачем. Но вот, к сожалению, снова упираемся в документацию, спецификацию, выпущенную Yahoo!, которой до сих пор придерживаются современные поисковые системы, и понимаем, что ответом является слово «Так надо». Вообще, немного странную реакцию заметил на статью. Ведь, я отталкиваюсь от информации, собранной за последний год, со свежих источников, из документаций для веб-разработчиков, а так же, от собственного опыта.
Denai
29.03.2018 23:24Опыт должен быть чем-то обоснван, иначе в него верить не хочется. Чем, например, спецификация Yahoo! лучше других? Тема достаточно противоречивая, а вы утверждаете всё так, как будто может быть единое мнение.
Pertinax Автор
29.03.2018 23:30Не совсем так. По факту, тема была достаточно давно противоречивой и таковой остается. Теги, которые я привел, не важно, какой в них тип указывать, использовать keywords или нет, в целом, корректируют отображение сайта и позволяют улучшить SEO. Я подобрал именно необходимые с этой точки зрения теги. Я же не предлагаю исписать 2000 строк. В них нет лишних. Так как, даже тот же самый keywords, может учитываться поисковиками.
stepmex
Может стоит назвать статью «моё видение мета тегов...»
Как и обязательные теги ни разу не обязательные.
Так и вся разметка в шапке далеко не идеальна.
Приведу пример из одного из проектов:
И это ещё не полная!
Pertinax Автор
Доброго времени суток!
Специально, чтобы не поднималась тема «обязательных необязательных» мета-тегов, я в нескольких местах, в статье, уточнил, что эти мета теги являются обязательными лишь с точки зрения SEO. Как я уже сказал, обязательный тег один- это title :)
Здесь собраны теги, котоые позволят просто сделать страницу идеальной с точки зрения спецификации. Никто не говорит о языковых связках и мелкой настройке.
Спасибо за комментарий.
stepmex
Вы уж определитесь:
Ну и доносите тогда верную информацию:
Не правда. Позиция вообще никак не влияет на их работу.
Не нужно.
Не правда.
Pertinax Автор
Знаете, спорить не буду. По поводу title я сказал немного утрированно. Я имел в веду, что для какой-то задачи хватит и только этого тега. Ну еще кодировки, пожалуй.
По поводу позиции. Работать будет в любом случае. Но, например, я заметил, что при большом количестве мета-тегов и медленном соединении с интернетом, тот же самый OG соц. сети загружают медленнее. Модет, довод притяну ый за уши, но, даже отталкиваясь от логиги обработчика в браузере, то, что я написал Выше- это не лишено смысла.
Так же, по поводу Вашего уточнения, что не обяазтельно добавлять prefix дя OG. Я отталкиваюсь от документации протокола. Документацию пишут не для дураков. Я следую всегда этому принципу. В документации на первой же странице присутствует указание о добавлении prefix в html тег.
В любом случае, предлагаю не продолжать спор по той причине, что это лишь рекомендации, которые, действительно, сказываются на «карме» сайта. Статья несет познавательный характер. От того, что коллеги будут придерживаться (или нет) этих рекомендаций, то хуже не станет. Даже, наоборот.
Arik
nazarpc
Страница c одним лишь
<!doctype html><title>Hello</title>идеальная с точки зрения спецификации, если не верите на слово — вставьте в валидатор: https://validator.w3.org/nu/#textareaПроблема в том, что вы сначала пишете
Начнем с 3 обязательных тегов, хотя, как вы убедились в валидаторе по ссылке выше, ни один из этих тэгов обязательным не является. позже вы пишетеэти мета теги являются обязательными лишь с точки зрения SEO, что опять совершенно мимо.Так что указанные вами обязательные (согласно громкому заголовку статьи) мета-тэги обязательными не являются даже близко, а порядок и правда не имеет никакого значения с точки зрения спецификации из практических соображений, как то блокирование отрисовки страницы.
Вердикт — гуру, которых вы упомянули в самом начале, были совершенно правы.