[overcod].net / HTML / HTML з нуля: Як прописати мета теги в HTML. Урок №21
134 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. Решта використовується за потреби.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Останні записи у цій категорії

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