Любой фронтенд-разработчик работает с мета-тегами каждый день, но при попытке объяснить их простыми словами начинаются сложности. Во всяком случае, у меня. Попробую объяснить как можно понятнее и проще.

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

Эту часть страницы называют “метаданными”.

Метаданные (мета-данные, meta-data) — это информация об информации, описание контента страницы. Эти данные описывают, как должен выглядеть видимый контент, какой набор символов используется на странице и т.д.

Три главных отличия метаданных:

  1. указываются внутри тега <head>
  2. непосредственно невидимы для пользователя (кроме тега <title>)
  3. это информация о контенте

Метаданные принято указывать внутри тега <head>, хотя это не обязательно. Они используются для хранения данных о странице: адресов файлов со стилями, ключевых слов, заголовка страницы.

В большинстве случаев в метаданных нужно указать: заголовок, кодировку (набор символов), подключить js и стили, подключить иконку сайта. Почти всё остальное — опциональные параметры, которые используются значительно реже.

Метаданных может быть любое количество, вот основные из них:

  • title — заголовок страницы, тег <title>;
  • style — стили CSS, хранящиеся в коде документа;
  • link — внешние файлы стилей, иконка и так далее;
  • meta — всё остальное: кодировка или любая информация о странице.

Мета-теги — это хранилище для метаданных на странице, для каждого нужно указать имя и значение. Структура мета-тега <meta> такова:

<meta name="keywords" content="уроки, вёрстка">

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

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

Примеры мета-тегов

<meta name="description" content="Описание страницы">

В description можно хранить краткое описание страницы.

На заре развития HTML метаданные использовались поисковиками для описания страницы в результатах поиска или определения, по каким ключевым словам следует её находить.

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

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

Алгоритм скрыт от желающих, а сам Google так отзывается о ключевых словах и описании, указанных вручную:

В некоторых случаях описание отображается вместе с фрагментом текста в результатах поиска.

А в некоторых — нет.

<title>Название страницы</title>

Технически это не метатег, но <title> принято считать таковым. Его содержание отображается в заголовке вкладки в браузере и в большинстве случаев — в качестве названия страницы в результатах поиска.

<meta name="robots" content="...">
<meta name="googlebot" content="...">

Метатег robots знаком всем поисковым системам, он позволяет контролировать сканирование документа поисковым роботом.

В значении name вы указываете имя поисковика (или robots, если директива должна касаться их всех), а в content — что вы хотите “сказать” роботу.

Вот несколько основных примеров метатегов robots, с которыми умеет работать Google:

  • noindex или none: запрет индексирование страницы;
  • nofollow: запрет роботу переходить по ссылкам с этой страницы;
  • nosnippet: запрет показа любых частей контента страницы в результатах поиска;
  • noarchive: запрет показа ссылки на кэш, сохранённый в поисковике;
  • unavailable_after:[date]: дата и время, когда нужно прекратить индексирование страницы;
  • noimageindex: запрет указывания страницы как источника изображения в результатах поиска.
<meta name="google" content="nositelinkssearchbox">

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

<meta name="google" content="notranslate">

Если язык страницы отличается от страницы браузера и настроек поиска, Google предложит перевести документ. Этот метатег может указать, что перевод не нужен.

<meta name="viewport" content="width=device-width, initial-scale=1">

Что чаще используют

Google собрал статистику использования значений атрибутов http-equiv и name для мета-тегов:

уроки верстки сайтов мета-теги статистика

Кодировка

<meta charset="utf-8">

или

<meta http-equiv="Content-Type" content"=text/html; charset=utf-8">

Кодировка страницы, набор символов, который на ней используется. Чаще всего для кириллической страницы здесь будет utf-8, значительно реже — windows-1251.

Файлы стилей

<link rel="stylesheet" href="style.css" type="text/css">

или

<link rel="stylesheet" href="style.css">

Так мы можем подключить файл стилей к странице. Пока вы можете ничего не знать о стилях, речь о них пойдёт в следующих уроках. В переменной href мы указываем адрес файла со стилями.

Скрипты

<script src="script.js"></script>

или

<script type="text/javascript" src="script.js"></script>

Так мы подключаем JavaScript-скрипты.

Обратите внимание: <link> не требует закрытия, а <script> — требует.

Viewport

<meta name="viewport" content="width=device-width">
Подробно о viewport читайте в следующем уроке.

В итоге

Почти всегда указание мета-тегов — рутинная работа. Но есть хорошие новости: чаще всего мета-теги будут одними и теми же для разных проектов, а “каркас” html-кода страницы вообще стандартен.

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

Вот пример такого шаблона:

<!doctype html>

<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Шаблон страницы</title>
 <link rel="stylesheet" href="css/styles.css">
</head>
<body>
 <script src="js/scripts.js"></script>
</body>
</html>

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

Успехов!

Коменти

Ярослав

Дуже корисна інфа, дякую!

serg

Мы жаждем немедленного продолжения!

Назар Токарь

@serg, будет через пару-тройку дней. А вы уже поделились уроками с друзьями? :)

Игорь

Спасибо за Вашу работу!