Мета-описание и ключевые слова [Модуль 10: Метаданные и head]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

В этом блоке мы погрузимся в невидимую, но очень важную часть любой веб-страницы — мета-теги. Это специальные инструкции в коде, которые не видит обычный пользователь, но активно используют браузеры и поисковые роботы. Правильно настроенные мета-теги помогают странице корректно отображаться на разных устройствах и улучшают её видимость в поисковой выдаче. Мы научимся задавать кодировку документа, чтобы текст всегда был читаемым, а также добавлять описание и ключевые слова — визитную карточку вашей страницы для поисковиков. Задания построены так, чтобы ты шаг за шагом освоил синтаксис и назначение основных мета-тегов, от самого простого к более сложным.

Список тем

Добавляем первый мета-тег

id: 37892_meta-tag-name

Любая HTML-страница должна сообщать браузеру свою кодировку, чтобы все символы, особенно кириллица, отображались правильно. Для этого используется специальный тег внутри `<head>`. Вставь пропущенное имя тега.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f0f4f8;
}

h1 {
  font-size: 24px;
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.5;
  color: #555;
}

                     <!DOCTYPE html>
<html>
<head>
  <title>Моя страница</title>
  <input1 charset="UTF-8">
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это моя первая страница с мета-тегом.</p>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Моя страница</title>
  <input1 charset="UTF-8">
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это моя первая страница с мета-тегом.</p>
</body>
</html>

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

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Атрибут для указания кодировки

id: 37892_meta-charset-attribute

Мы добавили тег `<meta>`, но теперь нужно указать, *что* именно мы настраиваем. Для определения кодировки документа используется специальный атрибут. Впиши его имя.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f0f4f8;
}

h1 {
  font-size: 24px;
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.5;
  color: #555;
}

                     <!DOCTYPE html>
<html>
<head>
  <title>Кодировка</title>
  <meta input1="UTF-8">
</head>
<body>
  <h1>Кодировка страницы</h1>
  <p>Правильная кодировка важна.</p>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Кодировка</title>
  <meta input1="UTF-8">
</head>
<body>
  <h1>Кодировка страницы</h1>
  <p>Правильная кодировка важна.</p>
</body>
</html>

Чтобы задать кодировку символов для документа, в теге `<meta>` используется атрибут `charset`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Выбираем правильную кодировку

id: 37892_meta-charset-value

Теперь укажем самое популярное и универсальное значение для кодировки, которое поддерживает почти все символы и языки мира. Впиши это значение в кавычки.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f0f4f8;
}

h1 {
  font-size: 24px;
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.5;
  color: #555;
}

                     <!DOCTYPE html>
<html>
<head>
  <title>Значение кодировки</title>
  <meta charset="input1">
</head>
<body>
  <h1>Кодировка UTF-8</h1>
  <p>Символы: А, Б, В, G, H, I, ❤️</p>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Значение кодировки</title>
  <meta charset="input1">
</head>
<body>
  <h1>Кодировка UTF-8</h1>
  <p>Символы: А, Б, В, G, H, I, ❤️</p>
</body>
</html>

Стандартом для веба является кодировка `UTF-8`. Она обеспечивает корректное отображение большинства языков, включая кириллицу и эмодзи. Впиши `UTF-8`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Мета-описание: атрибут name

id: 37892_meta-description-name

Теперь добавим описание страницы, которое поисковые системы часто показывают в результатах поиска. Для этого используется пара атрибутов: `name` и `content`. Укажи правильное значение для атрибута `name`, чтобы обозначить, что это описание.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f0f4f8;
}

h1 {
  font-size: 24px;
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.5;
  color: #555;
}

                     <!DOCTYPE html>
<html>
<head>
  <title>Описание страницы</title>
  <meta charset="UTF-8">
  <meta name="input1" content="Узнайте все о мета-тегах на нашем тренажере.">
</head>
<body>
  <h1>Мета-описание</h1>
  <p>Эта страница имеет описание для поисковиков.</p>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Описание страницы</title>
  <meta charset="UTF-8">
  <meta name="input1" content="Узнайте все о мета-тегах на нашем тренажере.">
</head>
<body>
  <h1>Мета-описание</h1>
  <p>Эта страница имеет описание для поисковиков.</p>
</body>
</html>

Чтобы указать, что мета-тег содержит описание страницы, атрибуту `name` присваивается значение `description`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Мета-описание: атрибут content

id: 37892_meta-description-content

Мы указали, что это тег описания (`name="description"`), а теперь нужно использовать правильный атрибут, чтобы разместить в нём сам текст описания.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f0f4f8;
}

h1 {
  font-size: 24px;
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.5;
  color: #555;
}

                     <!DOCTYPE html>
<html>
<head>
  <title>Содержимое описания</title>
  <meta charset="UTF-8">
  <meta name="description" input1="Узнайте все о мета-тегах на нашем тренажере.">
</head>
<body>
  <h1>Содержимое мета-описания</h1>
  <p>Эта страница имеет описание для поисковиков.</p>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Содержимое описания</title>
  <meta charset="UTF-8">
  <meta name="description" input1="Узнайте все о мета-тегах на нашем тренажере.">
</head>
<body>
  <h1>Содержимое мета-описания</h1>
  <p>Эта страница имеет описание для поисковиков.</p>
</body>
</html>

Текст описания, ключевые слова или другие данные для мета-тега всегда помещаются в атрибут `content`, что переводится как 'содержимое'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Ключевые слова: атрибут name

id: 37892_meta-keywords-name

Помимо описания, можно указать ключевые слова, по которым страницу могут искать. Синтаксис очень похож на описание. Укажи правильное значение атрибута `name` для ключевых слов.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f0f4f8;
}

h1 {
  font-size: 24px;
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.5;
  color: #555;
}

                     <!DOCTYPE html>
<html>
<head>
  <title>Ключевые слова</title>
  <meta charset="UTF-8">
  <meta name="input1" content="html, тренажер, мета-теги, обучение">
</head>
<body>
  <h1>Ключевые слова</h1>
  <p>Эта страница содержит ключевые слова для поиска.</p>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Ключевые слова</title>
  <meta charset="UTF-8">
  <meta name="input1" content="html, тренажер, мета-теги, обучение">
</head>
<body>
  <h1>Ключевые слова</h1>
  <p>Эта страница содержит ключевые слова для поиска.</p>
</body>
</html>

Для указания ключевых слов используется значение `keywords` в атрибуте `name`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Комплексная задача

id: 37892_meta-complex-task

Пришло время собрать все вместе. В этом коде есть несколько пропусков в разных мета-тегах. Заполни их все, чтобы правильно настроить секцию `<head>`.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f0f4f8;
}

h1 {
  font-size: 24px;
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.5;
  color: #555;
}

                     <!DOCTYPE html>
<html>
<head>
  <title>Комплексная страница</title>
  <input1 charset="UTF-8">
  <meta name="input2" content="Это страница-пример для закрепления знаний о мета-тегах.">
  <meta name="keywords" input3="html, тренажер, обучение, веб-разработка">
</head>
<body>
  <h1>Итоговая проверка</h1>
  <p>Все мета-теги на месте!</p>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Комплексная страница</title>
  <input1 charset="UTF-8">
  <meta name="input2" content="Это страница-пример для закрепления знаний о мета-тегах.">
  <meta name="keywords" input3="html, тренажер, обучение, веб-разработка">
</head>
<body>
  <h1>Итоговая проверка</h1>
  <p>Все мета-теги на месте!</p>
</body>
</html>

Проверь все три пропуска. Первый — это сам тег для метаданных. Второй — тип мета-тега (в данном случае, 'описание'). Третий — атрибут, который содержит текст ключевых слов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку