Любой фронтенд-разработчик работает с мета-тегами каждый день, но при попытке объяснить их простыми словами начинаются сложности. Во всяком случае, у меня. Попробую объяснить как можно понятнее и проще.
Из предыдущих уроков вы можете помнить, что любая информация на html-странице находится внутри тегов. Часть информации мы хотим видеть в браузере, но кроме них есть и те данные, которые в браузере никогда не отображаются, тем не менее, непосредственно влияют на то, что мы увидим.
Эту часть страницы называют “метаданными”.
Метаданные (мета-данные, meta-data) — это информация об информации, описание контента страницы. Эти данные описывают, как должен выглядеть видимый контент, какой набор символов используется на странице и т.д.
Три главных отличия метаданных:
- указываются внутри тега
<head>
- непосредственно невидимы для пользователя (кроме тега
<title>
) - это информация о контенте
Метаданные принято указывать внутри тега <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, будет через пару-тройку дней. А вы уже поделились уроками с друзьями? :)
Спасибо за Вашу работу!