\n\n\n \n\n\n```\n\n### Использование в Next.js / React\n\n```javascript\n// В Next.js используется компонент Head\nimport Head from 'next/head';\n\nexport default function Page() {\n return (\n <>\n \n \n \n \n \n Название страницы\n \n
Контент
\n \n );\n}\n```\n\nИли с Metadata API (Next.js 13+):\n\n```javascript\nexport const metadata = {\n title: 'Название страницы',\n description: 'Описание страницы',\n openGraph: {\n title: 'Заголовок для соцсетей',\n description: 'Описание для соцсетей',\n images: ['/og-image.jpg'],\n },\n robots: {\n index: true,\n follow: true,\n },\n};\n```\n\n### Почему это важно?\n\n1. **SEO** - правильные meta теги улучшают ранжирование в поисковых системах\n2. **Соцсети** - улучшают внешний вид при шеринге ссылок\n3. **Мобильность** - viewport тег критичен для адаптивного дизайна\n4. **Безопасность** - CSP и другие теги помогают защитить приложение\n5. **Пользовательский опыт** - правильная кодировка и настройки браузера\n\n### Вывод\n\nMeta теги - это важная часть HTML документа, которая не видна пользователям, но критична для SEO, социальных сетей и функциональности браузера. Каждый фронтенд разработчик должен понимать основные meta теги и знать, когда и как их использовать для оптимизации своих веб-приложений.","dateCreated":"2026-04-02T21:49:22.845140","upvoteCount":0,"author":{"@type":"Person","name":"claude-haiku-4.5"}}}}
PrepBro
← Назад к вопросам

Что такое meta тег?

1.0 Junior🔥 191 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Meta теги в HTML

Meta теги - это HTML элементы, которые содержат метаинформацию о странице. Они размещаются в секции <head> документа и не отображаются на самой странице. Meta теги используются для предоставления информации браузерам, поисковым системам, социальным сетям и другим инструментам.

Общая структура

<meta name="attribute" content="value" />
<meta property="og:attribute" content="value" />
<meta http-equiv="attribute" content="value" />

Основные типы и примеры

1. Кодировка документа

<meta charset="UTF-8" />

Указывает кодировку символов страницы. UTF-8 - это стандарт для всех современных веб-приложений.

2. Viewport (адаптивный дизайн)

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

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

  • width=device-width - ширина вьюпорта равна ширине устройства
  • initial-scale=1.0 - начальный масштаб страницы
  • maximum-scale=5.0 - максимум, на который пользователь может приблизить
  • user-scalable=yes/no - разрешить ли пользователю масштабировать

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

3. Описание страницы

<meta name="description" content="Это краткое описание страницы для поисковых систем и социальных сетей" />

Утилизируется:

  • Поисковыми системами (Google, Yandex) в сниппетах результатов
  • Социальными сетями если не установлены Open Graph теги
  • Рекомендуемая длина: 150-160 символов

4. Ключевые слова

<meta name="keywords" content="React, JavaScript, Frontend, Веб-разработка" />

Описывает тему страницы. Заметим, что современные поисковые системы (Google) игнорируют этот тег, так как он часто был объектом спама. Однако он всё ещё полезен для документирования.

5. Open Graph теги (для социальных сетей)

<meta property="og:title" content="Название для соцсетей" />
<meta property="og:description" content="Описание при шеринге в соцсетях" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

Эти теги контролируют, как выглядит ссылка при шеринге в Facebook, VK, Telegram и других платформах:

  • Заголовок
  • Описание
  • Превью-изображение
  • Тип контента (website, article, video и т.д.)

6. Twitter Card теги

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

Теги специфичные для Twitter/X. Типы карточек:

  • summary - текст + маленькое изображение
  • summary_large_image - текст + большое изображение
  • player - встраиваемый видеоплеер

7. Author и Copyright

<meta name="author" content="Иван Петров" />
<meta name="copyright" content="Copyright 2024, My Company" />

Описывают автора и права на контент.

8. Robots (для поисковых систем)

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

Инструкции для поисковых ботов:

  • index - позволить индексировать страницу
  • noindex - не индексировать
  • follow - переходить по ссылкам
  • nofollow - не переходить по ссылкам
  • nosnippet - не показывать описание в результатах
  • noimageindex - не индексировать изображения
<!-- Примеры -->
<meta name="robots" content="index, follow" /> <!-- Разрешить всё -->
<meta name="robots" content="noindex, nofollow" /> <!-- Запретить всё -->

9. Язык страницы

<html lang="ru">
  <head>
    <meta name="language" content="Russian" />
  </head>
</html>

Указывает язык контента для браузеров и поисковых систем.

10. HTTP-EQUIV теги (управление браузером)

<!-- Редирект через N секунд -->
<meta http-equiv="refresh" content="5; url=https://example.com" />

<!-- Установка режима совместимости IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'" />

11. Favicon

Технически favicon не meta тег, но часто размещается рядом:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Реальный пример полной HEAD секции

<!DOCTYPE html>
<html lang="ru">
<head>
  <!-- Кодировка -->
  <meta charset="UTF-8" />
  
  <!-- Viewport для мобильных -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <!-- Основная информация -->
  <title>Подготовка к IT собеседованиям - PrepBro</title>
  <meta name="description" content="Платформа для подготовки к IT собеседованиям. Вопросы, ответы, интервью, профессии." />
  <meta name="keywords" content="собеседование, IT, работа, интервью, подготовка" />
  <meta name="author" content="PrepBro Team" />
  
  <!-- Open Graph для соцсетей -->
  <meta property="og:title" content="Подготовка к IT собеседованиям" />
  <meta property="og:description" content="Лучший способ подготовиться к интервью" />
  <meta property="og:image" content="https://prepbro.ru/og-image.jpg" />
  <meta property="og:url" content="https://prepbro.ru" />
  <meta property="og:type" content="website" />
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="PrepBro - Подготовка к собеседованиям" />
  <meta name="twitter:description" content="Успешная подготовка к IT интервью" />
  
  <!-- Robots -->
  <meta name="robots" content="index, follow" />
  
  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" />
  
  <!-- Стили и скрипты -->
  <link rel="stylesheet" href="/styles.css" />
  <script src="/script.js" defer></script>
</head>
<body>
  <!-- Контент -->
</body>
</html>

Использование в Next.js / React

// В Next.js используется компонент Head
import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Описание страницы" />
        <meta property="og:title" content="Заголовок" />
        <title>Название страницы</title>
      </Head>
      <main>Контент</main>
    </>
  );
}

Или с Metadata API (Next.js 13+):

export const metadata = {
  title: 'Название страницы',
  description: 'Описание страницы',
  openGraph: {
    title: 'Заголовок для соцсетей',
    description: 'Описание для соцсетей',
    images: ['/og-image.jpg'],
  },
  robots: {
    index: true,
    follow: true,
  },
};

Почему это важно?

  1. SEO - правильные meta теги улучшают ранжирование в поисковых системах
  2. Соцсети - улучшают внешний вид при шеринге ссылок
  3. Мобильность - viewport тег критичен для адаптивного дизайна
  4. Безопасность - CSP и другие теги помогают защитить приложение
  5. Пользовательский опыт - правильная кодировка и настройки браузера

Вывод

Meta теги - это важная часть HTML документа, которая не видна пользователям, но критична для SEO, социальных сетей и функциональности браузера. Каждый фронтенд разработчик должен понимать основные meta теги и знать, когда и как их использовать для оптимизации своих веб-приложений.

Что такое meta тег? | PrepBro