Hack Frontend Community

Основные метатеги в HTML

Что такое метатеги?

Метатеги (<meta>) — это теги, размещаемые внутри <head>, которые не отображаются на странице, но дают браузеру, поисковым системам и соцсетям информацию о странице.

Основные метатеги

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

<meta charset="UTF-8" />
  • Обязательный тег — задаёт кодировку документа.
  • Без него могут быть проблемы с отображением символов.

Адаптивная вёрстка (viewport)

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  • Делает страницу адаптивной на мобильных устройствах.
  • Без него сайт будет выглядеть «сжатым».

SEO-теги

<meta name="description" content="Краткое описание страницы для поисковиков" />
<meta name="keywords" content="html, метатеги, frontend, seo" />
<meta name="robots" content="index, follow" />
  • description — краткое описание для поисковиков
  • keywords — ключевые слова (редко используется в современных поисковиках)
  • robots — поведение бота: index, noindex, follow, nofollow

Автор и язык

<meta name="author" content="Hack Frontend" />
<meta http-equiv="Content-Language" content="ru" />
  • author — автор страницы
  • Content-Language — язык страницы

Open Graph (OG) — для соцсетей

<meta property="og:title" content="Заголовок страницы" />
<meta property="og:description" content="Описание страницы" />
<meta property="og:image" content="https://site.com/image.png" />
<meta property="og:url" content="https://site.com" />

Используется соцсетями (Facebook, LinkedIn) для отображения превью страницы.

Twitter Card

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Заголовок" />
<meta name="twitter:description" content="Описание" />
<meta name="twitter:image" content="https://site.com/image.png" />

Аналог OG, но для Twitter.

Безопасность и политика

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
<meta name="referrer" content="no-referrer" />

Важно:

Не злоупотребляйте keywords — современные поисковые системы их игнорируют. А вот description и OG-теги по-прежнему играют роль в SEO и соцсетях.