middle

Что такое мета-теги и для чего они нужны

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

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

Кодировка документа — определяет набор символов. UTF-8 поддерживает кириллицу и все алфавиты:

Пример

<meta charset="UTF-8">

Адаптивность (viewport) — управляет масштабированием на мобильных устройствах:

Пример

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

Описание страницы (SEO) — используется поисковыми системами для сниппета:

Пример

<meta name="description" content="Руководство по подготовке к собеседованию Java Developer">

Ключевые слова — ранее важны для SEO, сейчас большинство поисковиков игнорирует:

Пример

<meta name="keywords" content="Java, Spring, собеседование">

HTTP-equiv мета-теги

Позволяют задать аналоги HTTP-заголовков прямо в HTML:

Мета-тег	Назначение
`<meta http-equiv="X-UA-Compatible" content="IE=edge">`	Совместимость с IE
`<meta http-equiv="refresh" content="30">`	Автообновление через 30 сек
`<meta http-equiv="Content-Security-Policy" content="default-src 'self'">`	Политика безопасности

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

Определяют, как страница отображается при публикации ссылки в VK, Telegram, Facebook:

Пример

<meta property="og:title" content="Вопросы для собеседования Java Developer">
<meta property="og:description" content="Полный список вопросов с ответами">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:url" content="https://example.com/java-interview">
<meta property="og:type" content="article">

Полный пример блока head

Пример

<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="Java Interview">
    <meta property="og:description" content="Подготовка к собеседованию">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
    <title>Java Interview Preparation</title>
</head>

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

Забывают <meta charset="UTF-8"> — кириллица отображается некорректно
Не добавляют viewport — на мобильных устройствах страница выглядит мелкой
Дублируют мета-теги — браузер использует первый найденный
Размещают charset далеко от начала <head> — должен быть в первых 1024 байтах

Как используется в 2026

В Spring Boot мета-теги задаются через Thymeleaf. Content-Security-Policy настраивается через мета-тег или HTTP-заголовок для защиты от XSS-атак. Java-бэкенд может динамически генерировать Open Graph теги для улучшения превью при шеринге ссылок.

На собеседовании: назовите три обязательных мета-тега: charset (кодировка), viewport (мобильные), description (SEO). Упомяните Open Graph для соцсетей. Покажите понимание, что charset должен быть в первых 1024 байтах документа, а viewport обязателен для мобильных устройств.

#security #html #seo #frontend