Meta-теги и SEO
Тема дорожной карты · Frontend разработчик
HTML-мета-теги — это элементы <meta>, размещаемые в секции <head> HTML5-документа и предоставляющие машиночитаемые метаданные, потребляемые браузерами, поисковыми роботами и платформами социальных сетей. Наиболее критичные мета-теги для каждого frontend-разработчика: <meta charset="UTF-8"> для кодировки символов, <meta name="viewport" content="width=device-width, initial-scale=1"> для адаптивной CSS-компоновки на мобильных устройствах, <meta name="description" content="..."> для SEO-сниппетов и Open Graph теги (og:title, og:image, og:description), управляющие отображением страниц при публикации в социальных сетях. Мета-теги также контролируют поведение браузера: <meta http-equiv="X-UA-Compatible"> задаёт режим совместимости с IE, <meta name="robots" content="noindex"> запрещает индексацию страницы поисковыми системами, а <meta name="theme-color"> устанавливает цвет хрома браузера на Android. Корректная настройка мета-тегов — SEO-предусловие, проверяемое Lighthouse, которое напрямую влияет на кликабельность в результатах поисковых систем.
Как это работает
Meta-теги и SEO — семантическая структура страницы. Элементы описывают смысл, не вид: <article> — статья, <button> — кнопка, <nav> — навигация. Браузер строит DOM-дерево из разметки; CSS таргетит его селекторами; JavaScript манипулирует через DOM API. Семантическая разметка критична для SEO, accessibility (screen reader'ы её разбирают), поддерживаемости. Формы — <form>, инпуты (<input>, <select>, <textarea>), сабмит через HTTP без JS.
Когда применять
Используйте семантические HTML-элементы везде, где есть смысл — <button> вместо <div onclick>, <a> вместо роутинга в JS, <input type="email"> для email. Браузеры (и screen reader'ы, и поисковики) получают keyboard navigation, accessibility, SEO бесплатно. <div>/<span> — только как обёртки последнего средства. Запускайте Lighthouse accessibility-аудит регулярно.
Типичные ошибки
Ловушки Meta-теги и SEO: <div onclick> вместо <button> (нет клавиатуры, screen reader, focus management); пропущенный alt на изображениях (screen reader + SEO); инпуты без <label> (невозможно использовать с assistive tech); вложенный <a> в <a> (невалидный HTML, undefined behaviour); h1-h6 для визуального размера, а не иерархии документа. Браузеры много чинят за вас — это прячет баги от тестов, но не от реальных пользователей.