Code School

Meta тэги в HTML

Основы meta тэгов

HTML позволяет указывать метаданные (meta тэги) - дополнительную важную информацию о документе различными способами. Элементы META могут использоваться для включения пар имя / значение, описывающих свойства документа HTML, такие как автор, описание сайта, список ключевых слов (кстати, они больше не нужны), специальные параметры контента и так далее.

Тэг < meta> используется для предоставления такой дополнительной информации. Этот тег является пустым элементом и поэтому не имеет закрывающего тега, но несет информацию в своих атрибутах.

Вы можете включить в документ один или несколько метатегов в зависимости от того, какую информацию вы хотите сохранить в своем документе, но в целом метатеги не влияют на внешний вид документа, поэтому с точки зрения внешнего вида не имеет значения, включаете ли вы их или нет. Тогда становится вопрос: "А для кого я их тогда добавляю?". И это достаточно глубокий вопрос. На самом деле у meta тэгов есть множество назначений. Многие из них вставляют для поисковых роботов, которые осматривают ваш сайт на наличие качественного контента. Некоторые для браузера - например могут сказать, что необходимо перегрузить страницу через определенное время. Бывают и более серьезные вещи: к примеру указание Cookies самого сайта. Но об этой теме мы начнем говорить гораздо позже.

Как добавить meta тэги?

Вы можете добавлять свои meta тэги (< meta>) на веб-страницы, помещая их внутри заголовка документа, который представлен тегами < head> и < /head>. Мета-тег может иметь следующие атрибуты в дополнение к основным атрибутам:

  1. name - имя вашего свойства. Это может быть что угодно, к примеру description, keywords, authors или другие
  2. content - содержит то, что вы хотите присвоить вашему свойству
  3. scheme - задает схему для интерпритации вашего значения
  4. http-Equiv - используется для заголовкой HTTP-ответа. Например может использоваться для обновления страницы или установки cookies. Значение включают тип содержимого, срок действия, обновление и установку cookie.

Основные Meta тэги

Давайте рассмотрим основной набор meta тэгов, которые могут вам пригодиться на начальном этапе от часто встречаемых - к самым редким:

  1. keywords - необходим для добавления ключевых слов для ваших страниц. Однако многие поисковые системы уже не смотрят на данный meta тэг и анализируют страницу немного по другому, но это совсем уже другая тема.

  2. description - необходим для описания вашего сайта. На данный момент, то что находится в данном meta-тэге будет выводится в поисковой выдаче поисковика.

  3. author - необходим для установки авторства данной страницы.

  4. специальный meta тэг с http-equiv = "Content-Type" - указывает на то, какая кодировка включена на данный момент для данной страницы. По умолчанию веб-серверы и веб-браузеры используют кодировку ISO-8859-1 (Latin1) для обработки веб-страниц. Ниже будет приведен пример установки кодировки UTF-8. Или его сокращенная форма charset="UTF-8".

  5. meta тэг с атрибутом name="viewport" - позволяет вам указать расширение вашего экрана.

  6. meta тэг с атрибутом http-equiv = "refresh" - позволяет вам либо перезагрузить страницу через определенное время. Его также еще используют для того чтобы произвести редирект.

  7. meta тэг с атрибутом http-equiv = "cookie" - позволяет вам установит cookie для сайта

  8. 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>