Метатеги для SEO и индексации [Модуль 10: Метаданные и head]: Тренажер HTML

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

Чтобы ваш сайт не просто существовал в интернете, а его могли найти пользователи через поисковые системы, нужно помочь поисковым роботам понять, о чем ваши страницы. Этот процесс называется SEO (Search Engine Optimization). Основа этого 'общения' с роботами закладывается в `<head>` с помощью специальных метатегов. Они не видны посетителям, но критически важны для индексации. В этой серии заданий мы разберемся, как задать привлекательное описание для поисковой выдачи, как управлять индексацией страниц и как указывать канонические URL, чтобы избежать проблем с дублированием контента. Эти навыки — фундамент технической оптимизации любого сайта.

Список тем

Описание страницы для поисковиков

id: 37898_seo-meta-01

Один из самых важных метатегов для SEO — это описание страницы (description). Этот текст поисковые системы часто используют для формирования сниппета в результатах поиска. Укажите правильное значение для атрибута `name`, чтобы задать описание.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
.snippet {
  border: 1px solid #ccc;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 5px;
}
.snippet-desc {
  color: #555;
}

                     <head>
  <title>Моя страница</title>
  <meta name="input1" content="Здесь находится краткое и привлекательное описание страницы.">
</head>
<body>
  <div class="snippet">
    <p>Так примерно выглядит сниппет в поиске:</p>
    <p class="snippet-desc">Здесь находится краткое и привлекательное описание страницы.</p>
  </div>
</body>

HTML

<head>
  <title>Моя страница</title>
  <meta name="input1" content="Здесь находится краткое и привлекательное описание страницы.">
</head>
<body>
  <div class="snippet">
    <p>Так примерно выглядит сниппет в поиске:</p>
    <p class="snippet-desc">Здесь находится краткое и привлекательное описание страницы.</p>
  </div>
</body>

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

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

Результат

Сообщения

Выполнить

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

Атрибуты для мета-описания

id: 37898_seo-meta-02

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

CSS

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

                     <head>
  <title>Атрибуты описания</title>
  <meta input1="description" input2="Это описание будет видно в результатах поиска.">
</head>
<body>
  <p>Эта информация предназначена для поисковых роботов.</p>
</body>

HTML

<head>
  <title>Атрибуты описания</title>
  <meta input1="description" input2="Это описание будет видно в результатах поиска.">
</head>
<body>
  <p>Эта информация предназначена для поисковых роботов.</p>
</body>

Для указания типа метаданных используется атрибут `name`, а для самого текста описания — атрибут `content`.

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

Результат

Сообщения

Выполнить

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

Ключевые слова (Keywords)

id: 37898_seo-meta-03

Раньше для SEO активно использовался метатег с ключевыми словами. Хотя сегодня его значимость сильно упала, знать о нем полезно для общего развития. Укажите имя этого метатега в атрибуте `name`.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
.note {
  font-style: italic;
  color: #777;
}

                     <head>
  <title>Ключевые слова</title>
  <meta name="description" content="Страница о ключевых словах.">
  <meta name="input1" content="html, seo, keywords">
</head>
<body>
  <p>Мы добавили ключевые слова для страницы.</p>
  <p class="note">Сейчас поисковые системы почти не учитывают этот тег.</p>
</body>

HTML

<head>
  <title>Ключевые слова</title>
  <meta name="description" content="Страница о ключевых словах.">
  <meta name="input1" content="html, seo, keywords">
</head>
<body>
  <p>Мы добавили ключевые слова для страницы.</p>
  <p class="note">Сейчас поисковые системы почти не учитывают этот тег.</p>
</body>

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

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

Результат

Сообщения

Выполнить

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

Управление поисковыми роботами

id: 37898_seo-meta-04

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

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}

                     <head>
  <title>Управление роботами</title>
  <meta name="input1" content="index, follow">
</head>
<body>
  <p>Мы явно разрешили роботам индексировать страницу и переходить по ссылкам.</p>
</body>

HTML

<head>
  <title>Управление роботами</title>
  <meta name="input1" content="index, follow">
</head>
<body>
  <p>Мы явно разрешили роботам индексировать страницу и переходить по ссылкам.</p>
</body>

Для управления поведением поисковых роботов используется метатег с `name="robots"`.

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

Результат

Сообщения

Выполнить

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

Запрет индексации и перехода по ссылкам

id: 37898_seo-meta-05

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

CSS

body { font-family: sans-serif; padding: 15px; background: #fff5f5; }
.secret-info { border: 2px dashed #d9534f; padding: 10px; color: #a94442; }

                     <head>
  <title>Секретная страница</title>
  <meta name="robots" content="input1, input2">
</head>
<body>
  <div class="secret-info">
    <p>Эта информация не должна попасть в поисковики.</p>
  </div>
</body>

HTML

<head>
  <title>Секретная страница</title>
  <meta name="robots" content="input1, input2">
</head>
<body>
  <div class="secret-info">
    <p>Эта информация не должна попасть в поисковики.</p>
  </div>
</body>

Для запрета индексации используется значение `noindex`. Для запрета перехода по ссылкам — `nofollow`. Они перечисляются через запятую: `noindex, nofollow`.

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

Результат

Сообщения

Выполнить

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

Указание автора страницы

id: 37898_seo-meta-06

Вы можете указать автора контента на странице с помощью специального метатега. Это может использоваться поисковиками для связи контента с определенным человеком. Укажите имя этого метатега.

CSS

body { font-family: sans-serif; padding: 15px; }
.author-note { font-size: 14px; color: #888; }

                     <head>
  <title>Автор статьи</title>
  <meta name="input1" content="Иван Петров">
</head>
<body>
  <h1>Лучшая статья в мире</h1>
  <p>Текст статьи...</p>
  <p class="author-note">Автор этой страницы указан в метаданных.</p>
</body>

HTML

<head>
  <title>Автор статьи</title>
  <meta name="input1" content="Иван Петров">
</head>
<body>
  <h1>Лучшая статья в мире</h1>
  <p>Текст статьи...</p>
  <p class="author-note">Автор этой страницы указан в метаданных.</p>
</body>

Для указания автора используется метатег с `name="author"`.

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

Результат

Сообщения

Выполнить

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

Канонический URL для дублей

id: 37898_seo-meta-07

Если одна и та же страница доступна по разным URL, это может навредить SEO. Чтобы указать поисковику 'главную' версию страницы, используется специальный тег `<link>` с каноническим адресом. Укажите правильное значение атрибута `rel`.

CSS

body { font-family: sans-serif; padding: 15px; }

                     <head>
  <title>Дубликаты страниц</title>
  <link input1="canonical" href="https://naytikurs.ru/products/item1">
</head>
<body>
  <p>Эта страница — дубликат, ее основной адрес указан в теге link.</p>
</body>

HTML

<head>
  <title>Дубликаты страниц</title>
  <link input1="canonical" href="https://naytikurs.ru/products/item1">
</head>
<body>
  <p>Эта страница — дубликат, ее основной адрес указан в теге link.</p>
</body>

Чтобы указать канонический (основной) URL, используется тег `<link>` с атрибутом `rel="canonical"`. В атрибуте `href` указывается ссылка на основную версию страницы.

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

Результат

Сообщения

Выполнить

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