Следует сразу сказать, что если отталкиваться от спецификации 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>
	<!-- 3 meta-тега выше должны быть использованы первыми -->
	<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">

	<!-- OpenGraph | http://ogp.me -->
	<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</title>
	<meta name="description" content="description">
	<meta name="keywords" content="key, words">
	<link rel="icon" href="#" type="image/x-icon">
	<link rel="apple-touch-icon" href="#" type="image/png">

	<!-- Apple iOS -->
	<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]-->
</head>

Можно выделить несколько основных направлений использования мета-тегов:

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

- Author и Copyright

Эти значения, как правило, не используются одновременно. Функция author и copyright - идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».

<meta name="author" content="Orkhan Alyshov">

- Robots

Robots - формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

У «robots» могут быть следующие значения:

  • index - страница должна быть проиндексирована;
  • noindex - страница не индексируется;
  • follow - гиперссылки на странице учитываются;
  • nofollow - гиперссылки на странице не учитываются
  • all - включает значения index и follow, включен по умолчанию;
  • none - включает значения noindex и nofollow.
<meta name="robots" content="noindex, nofollow">