СоХабр закрыт.
С 13.05.2019 изменения постов больше не отслеживаются, и новые посты не сохраняются.
Так вышло, что я очень дотошный кодер. Несколько дней назад мне пришлось изрядно «поковыряться» на форумах в поисках нужной информации. В процессе, я наткнулся на некоторые регулярно повторяющиеся вопросы новичков типа: «Какие обязательные мета-теги должны присутствовать в 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>
<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 указан вообще первым и ничего не сказано про то, что он устарел.
Прошу заметить, что данная интеграция, как и следующая, которую я приведу, действительно, не являются обязательными. Но отталкиваясь от спецификации Yahoo!, которая была сделана много лет назад и до сих пор является действительной, можно сделать вывод, что эта интеграция необходима, чтобы повысить «карму» сайта.
Связано это с тем, что с точки зрения SEO, да и здравого смысла, рейтинг сайта зависит от того, на сколько он «универсальный солдат». Иными словами, зависит он от того, на сколько он удобен для пользователя на разных устройствах, какие дополнительные полезные возможности он в себя включает и т.п. И в это входит адаптация по iOS устройства, интеграция двух протоколов, которые я привел в этой статье, отсутвие атрибута alt в изображениях и много чего другого.
Лично я пользуюсь уже несколько лет данным ресурсом-плагином для браузера, чтобы проверять соответствие сайта этим требованиям. Прошу заметить, что, нами всеми любимый, Хабрахабр и Тостер отвечают, почти на каждой странице (на некоторых страницах это просто невозможно или ненужно) всем пунктам этого чеклиста.
OpenGraph Protocol — это протокол, который изначально был придуман для социальной сети Facebook. Теперь он используется каждой соц. сетью и большинством современных форумов/сайтов. Он содержит в себе информацию о странице, на которую пользователь дает ссылку в сообщении. Думаю, каждый из Вас отправлял ссылки в соц. сетях и видел, как ссылка преобразуется в картинку, под ней добавляется заголовок и описание.
Ссылка на документацию добавлена в комментарий в коде.
Тут у некоторых опытных верстальщиков может вспыхнуть вопрос: «При чем здесь Windows и RSS Канал и какое отношение он может иметь к, например, сайту-визитке?» Но, тут тоже есть своя особенность. Этот протокол нужен для того, чтобы при добавлении сайта в «закладки» в меню Пуск на Windows, туда добавлялось не только название сайта, но и читалась информация с RSS и постоянно обновлялась. Вы можете заметить пример работы протокола, зайдя в меню Пуск на Windows 10 и посмотрев на плитку новостей, которая регулярно обновляется.
Действительно, зачем сайту, который не нуждается в подобном функционале, нужен этот протокол?
Все просто! Это для того е самого плюсика в «карму». Но есть небольшая хитрость. Вам не обязательно действительно создавать RSS канал для сайта. Вы можете просто вставить разметку протокола, а ссылку в последней строке указать несуществующую (ведущую на несуществующий канал вашего сайта).
Надеюсь, эта информация пригодится начинающим верстальщикам. Это основная информация. Если будут возникать какие-то вопросы, то задавайте их в комментариях. Всем удачи!
Шаблонное копирование разметки из проекта в проект- это не всегда хорошая идея. Выше я привел самые необходимые мета-теги, которые помогут идеально соответствовать критериям хорошего сайта, отталкиваясь от спецификации.
Для таких же дотошных кодеров, как я, я оставляю ссылку на хорошую документацию, где указаны все актуальные теги, описаны случаи, в которых их необходимо использовать и просто полезная информация по ним. (Ссылка)
комментарии (15)