HTML позволяет указывать метаданные (meta тэги) - дополнительную важную информацию о документе различными способами. Элементы META могут использоваться для включения пар имя / значение, описывающих свойства документа HTML, такие как автор, описание сайта, список ключевых слов (кстати, они больше не нужны), специальные параметры контента и так далее.
Тэг < meta> используется для предоставления такой дополнительной информации. Этот тег является пустым элементом и поэтому не имеет закрывающего тега, но несет информацию в своих атрибутах.
Вы можете включить в документ один или несколько метатегов в зависимости от того, какую информацию вы хотите сохранить в своем документе, но в целом метатеги не влияют на внешний вид документа, поэтому с точки зрения внешнего вида не имеет значения, включаете ли вы их или нет. Тогда становится вопрос: "А для кого я их тогда добавляю?". И это достаточно глубокий вопрос. На самом деле у meta тэгов есть множество назначений. Многие из них вставляют для поисковых роботов, которые осматривают ваш сайт на наличие качественного контента. Некоторые для браузера - например могут сказать, что необходимо перегрузить страницу через определенное время. Бывают и более серьезные вещи: к примеру указание Cookies самого сайта. Но об этой теме мы начнем говорить гораздо позже.
Вы можете добавлять свои meta тэги (< meta>) на веб-страницы, помещая их внутри заголовка документа, который представлен тегами < head> и < /head>. Мета-тег может иметь следующие атрибуты в дополнение к основным атрибутам:
Давайте рассмотрим основной набор meta тэгов, которые могут вам пригодиться на начальном этапе от часто встречаемых - к самым редким:
keywords - необходим для добавления ключевых слов для ваших страниц. Однако многие поисковые системы уже не смотрят на данный meta тэг и анализируют страницу немного по другому, но это совсем уже другая тема.
description - необходим для описания вашего сайта. На данный момент, то что находится в данном meta-тэге будет выводится в поисковой выдаче поисковика.
author - необходим для установки авторства данной страницы.
специальный meta тэг с http-equiv = "Content-Type" - указывает на то, какая кодировка включена на данный момент для данной страницы. По умолчанию веб-серверы и веб-браузеры используют кодировку ISO-8859-1 (Latin1) для обработки веб-страниц. Ниже будет приведен пример установки кодировки UTF-8. Или его сокращенная форма charset="UTF-8".
meta тэг с атрибутом name="viewport" - позволяет вам указать расширение вашего экрана.
meta тэг с атрибутом http-equiv = "refresh" - позволяет вам либо перезагрузить страницу через определенное время. Его также еще используют для того чтобы произвести редирект.
meta тэг с атрибутом http-equiv = "cookie" - позволяет вам установит cookie для сайта
revised - представляет собой информацию когда был последний раз обновлен документ (достаточно редкий meta тэг)
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="author" content="Temp" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content ="5"/>
<meta http-equiv="cookie" content="userid = qwerty;" />
<meta name="revised" content="CodeSchool, 12/12/2020" />
<title>Document</title>
</head>
<body>
<h1>Моя страница</h1>
</body>
</html>