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