Урок · HTML

Мета-теги: как представить страницу браузеру и поиску

Редакция PraktumОбновлено 24 октября 202617 минут на урок с практикойУровень: новичок

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

Зачем этот урок сейчас

Страница может быть отличной, но в поиске показываться как «Главная» с обрезанным случайным текстом, а в Telegram — серой ссылкой без картинки. Мета-теги — это то, как страница представляется до того, как её открыли. Их пишут один раз в шаблоне и проверяют на каждой новой странице.

Минимальный набор

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Формы HTML: поля, подписи и отправка | Praktum</title>
  <meta name="description" content="Как собрать форму в HTML: label, name, типы полей, обязательные поля и отправка. Примеры кода и задание.">
  <link rel="canonical" href="https://praktum.ru/html/formy/">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>

charset ставят первым — без него русский текст может превратиться в «кракозябры». viewport нужен для телефонов. title и description показываются в поиске. lang у тега html помогает переводчикам, скринридерам и переносам строк.

Title: заголовок страницы

title виден во вкладке браузера, в закладках и чаще всего как заголовок результата в поиске. Он должен отличать страницу от остальных: «Формы HTML: поля, подписи и отправка | Praktum», а не «Урок» или «Главная».

Description: обещание пользы

<meta name="description" content="Справочник по тегу a: href, target, rel, download, mailto и tel. Таблица атрибутов, сравнение с button и задание с решением.">

Description — короткое описание для сниппета в выдаче. Поисковик может показать его, а может собрать текст со страницы, если описание не подходит к запросу. Пиши 140–160 символов: что человек узнает и что получит (пример, таблицу, задание). Не перечисляй ключевые слова — это не помогает позициям и отталкивает читателя. Яндекс использует description в сниппете чаще, чем Google.

Canonical: один адрес у страницы

<link rel="canonical" href="https://praktum.ru/html/formy/">

Одна страница может открываться по нескольким адресам: со слэшем и без, с www и без, с метками ?utm_source=…. Canonical говорит поисковику, какой адрес основной, чтобы он не считал копии разными страницами. Адрес пишут полностью, с протоколом. Canonical не заменяет редирект: основное зеркало сайта лучше закрепить на сервере.

Robots: управление индексацией

<meta name="robots" content="index, follow, max-image-preview:large">
<!-- страница поиска по сайту, черновик, личный кабинет -->
<meta name="robots" content="noindex, follow">

noindex просит не показывать страницу в поиске, nofollow — не переходить по её ссылкам. По умолчанию всё разрешено, поэтому тег нужен в основном для запретов. max-image-preview:large разрешает Google показывать крупные картинки. Важно: robots не защищает данные — закрытые страницы закрывают паролем, а не мета-тегом.

Open Graph: превью ссылки

<meta property="og:type" content="article">
<meta property="og:title" content="Формы HTML: поля, подписи и отправка">
<meta property="og:description" content="Как собрать форму, которая работает без JavaScript.">
<meta property="og:url" content="https://praktum.ru/html/formy/">
<meta property="og:image" content="https://praktum.ru/assets/og/html-formy.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Praktum — Формы HTML">
<meta name="twitter:card" content="summary_large_image">

Когда ссылкой делятся в Telegram, ВКонтакте или Slack, мессенджер берёт заголовок, описание и картинку из Open Graph. Картинка 1200×630 пикселей, адрес абсолютный и открывается без авторизации. Своя картинка для каждой страницы заметно повышает кликабельность репостов. twitter:card включает крупную картинку там, где читают теги Twitter.

Другие полезные теги

Структурированные данные (JSON-LD) описывают страницу машинным языком: «это статья, вот автор, дата, вопросы и ответы». Поисковики используют их для расширенных сниппетов, а ИИ-ассистенты — чтобы понять, что на странице. Это уже следующий шаг после базовых мета-тегов.

Как проверить мета-теги

• Открой исходный код страницы (Ctrl+U) — мета-теги должны быть в HTML, а не добавляться скриптом.
• Проверь, что title и description не повторяются у соседних страниц.
• Canonical ведёт на опубликованный адрес страницы, а не на главную.
• Превью ссылки проверь, отправив её себе в мессенджер.
• В Яндекс.Вебмастере и Google Search Console видны страницы с дублями title и description.

title или h1

Частые ошибки

• Один title на все страницы сайта.
• Description не совпадает с содержанием или состоит из ключевых слов.
• Относительный адрес в canonical или og:image.
• noindex на странице, которую люди должны находить в поиске.
• Нет meta viewport, и на телефоне страница мелкая.

Доступность

Title — первое, что слышит человек со скринридером при открытии страницы, поэтому он должен называть страницу точно. lang у html включает правильное произношение. Не запрещай масштабирование в viewport (user-scalable=no) — людям со слабым зрением нужно увеличивать текст.

Поддержка браузерами

charset, viewport, title, description, canonical и robots понимают все браузеры и поисковики. Open Graph читают все популярные мессенджеры и соцсети; каждая платформа может кешировать превью — после изменения картинки обнови его в их инструментах отладки.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Контакты веб-студии «Линия»: адрес, телефон и почта</title>
<meta name="description" content="Как связаться с веб-студией «Линия»: телефон, почта и адрес офиса в Казани. Отвечаем на заявки в течение рабочего дня.">
<link rel="canonical" href="https://liniya.example/contacts/">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<meta property="og:type" content="website">
<meta property="og:title" content="Контакты веб-студии «Линия»">
<meta property="og:description" content="Телефон, почта и адрес офиса в Казани.">
<meta property="og:url" content="https://liniya.example/contacts/">
<meta property="og:image" content="https://liniya.example/og/contacts.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">