[overcod].net / HTML / HTML с нуля: Как прописать мета теги в HTML. Урок №21
96 07.01.2026

HTML с нуля: Как прописать мета теги в HTML. Урок №21


Можно сделать нормальную вёрстку и аккуратный HTML, но без мета тегов сайт будет плохо понятен браузерам, поисковикам и соцсетям. Мета теги задают базовые правила: как читать страницу, как её индексировать и как показывать ссылку.

В этом уроке из серии HTML с нуля — только полезные мета теги. Без лишнего и без устаревшего мусора.

Где прописываются мета теги

Все мета теги размещаются внутри <head>.

<head>
 
</head>

Они не видны на странице, но влияют на:

  • кодировку;

  • SEO;

  • мобильное отображение;

  • соцсети;

  • поведение браузера.

Обязательные мета теги

Кодировка страницы

<meta charset="UTF-8">




Должен быть в каждом HTML-файле (тут).

Viewport (адаптация под мобильные)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Без него сайт на телефоне отображается уменьшенным.

Мета теги для SEO

Description

<meta name="description" content="HTML с нуля. Урок №21. Мета теги в HTML.">

Краткое описание страницы. Может использоваться в сниппете поисковиков.

Рекомендации:

  • 120–160 символов;

  • уникальный для каждой страницы.

Keywords (устарел)

<meta name="keywords" content="html, мета теги, html с нуля">

Поисковики его не учитывают. Использовать не обязательно.

Robots

<meta name="robots" content="index, follow">

Управляет индексацией страницы.

Основные значения:

  • index — индексировать;

  • noindex — не индексировать;

  • follow — переходить по ссылкам;

  • nofollow — не переходить по ссылкам.

Запрет индексации:

<meta name="robots" content="noindex, nofollow">

Перенаправление через meta refresh (не рекомендуется)

<meta http-equiv="refresh" content="5; url=https://www.overcod.net/new-page.html">

Этот тег выполняет автоматическое перенаправление через указанное количество секунд.

Почему не стоит использовать:

  • это не настоящий редирект;

  • поисковики обрабатывают его хуже;

  • нельзя указать HTTP-статус (301 / 302);

  • страница сначала загружается, потом происходит переход.

Где допустимо:

  • временные заглушки;

  • страницы с сообщением «Вы будете перенаправлены…»;

  • тестовые проекты.

Для рабочих сайтов редиректы нужно делать на сервере.

Мета теги для браузера

Author

<meta name="author" content="Stepan">

Информационный тег. На работу сайта не влияет.

Generator

<meta name="generator" content="WordPress">

Чаще добавляется CMS. Можно не указывать.

Theme-color

<meta name="theme-color" content="#ffffff">

Задаёт цвет адресной строки в мобильных браузерах.

Мета теги для соцсетей (Open Graph)

Нужны для корректного отображения ссылки в Facebook, Telegram, Viber и других сервисах.

<meta property="og:title" content="HTML с нуля — мета теги">
<meta property="og:description" content="Практический урок по мета тегам в HTML">
<meta property="og:image" content="https://www.overcod.net/image.jpg">
<meta property="og:url" content="https://www.overcod.net/page.html">
<meta property="og:type" content="website">

Без этих тегов соцсети могут показывать случайный текст и изображение.

Минимальный рабочий <head>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML с нуля — мета теги</title>


<meta name="description" content="HTML с нуля. Урок №21. Мета теги в HTML.">
<meta name="robots" content="index, follow">


<meta property="og:title" content="HTML с нуля — мета теги">
<meta property="og:description" content="Практический урок по мета тегам в HTML">
<meta property="og:image" content="https://www.overcod.net/image.jpg">
<meta property="og:url" content="https://www.overcod.net/page.html">
<meta property="og:type" content="website">
</head>

Этого набора достаточно для большинства сайтов.

Что можно не использовать

Можно спокойно не добавлять:

  • keywords;

  • author;

  • generator;

  • meta refresh для редиректов.

Итог

Мета теги — это база HTML, а не дополнение.

Минимум для любой страницы:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="...">

Если страница должна корректно выглядеть в соцсетях — добавляй Open Graph. Остальное используется по необходимости.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Последние записи в этой категории

Популярные записи