SEO Meta-теги: полное руководство по заголовкам, описаниям и Open Graph

Meta-теги — это первое впечатление, которое ваш сайт производит в поисковых системах и социальных сетях. Они сообщают поисковым системам, о чём ваша страница, и контролируют, как ваш контент отображается при распространении в интернете. Несмотря на свою простоту, Meta-теги остаются одним из наиболее контролируемых вами SEO-элементов. Это руководство охватывает каждый важный Meta-тег с практическими стратегиями оптимизации для каждого из них.

Title-тег: самый важный Meta-элемент

Title-тег — самый важный элемент SEO на странице. Он отображается как кликабельный заголовок в результатах поиска, название вкладки в браузере и имя закладки по умолчанию. Хорошо оптимизированный title-тег может значительно повысить ваш CTR и рейтинг в поиске.

Лучшие практики для Title-тегов

• Длина: держите заголовки в пределах 50-60 символов. Google обрезает заголовки примерно на 600 пикселях, что обычно означает 55-60 символов в зависимости от ширины букв.
• Основное ключевое слово в начале: помещайте самое важное ключевое слово в начало заголовка. Поисковые системы придают больший вес словам, появляющимся раньше.
• Название бренда: включайте название бренда в конце, разделяя вертикальной чертой или тире. Например: «Как сжимать изображения для веба | ToolHub».
• Уникальность для каждой страницы: каждая страница должна иметь уникальный заголовок, точно описывающий её конкретное содержание. Повторяющиеся заголовки путают поисковые системы и размывают сигналы релевантности.
• Избегайте переполнения ключевыми словами: не вставляйте несколько вариантов одного ключевого слова в заголовок. Пишите естественно для людей, включая целевое ключевое слово.

Meta Description: ваш рекламный текст в поисковой выдаче

Meta description — это краткое описание содержимого страницы, отображаемое под заголовком в результатах поиска. Хотя Google заявил, что meta description не является прямым фактором ранжирования, они существенно влияют на CTR, что косвенно влияет на рейтинг.

Написание эффективных Meta Description

• Длина: стремитесь к 150-160 символам. Google обрезает описания примерно на 920 пикселях на десктопе и 680 пикселях на мобильных устройствах.
• Включайте целевые ключевые слова: Google выделяет жирным совпадающие поисковые запросы в описании, делая ваш результат более заметным.
• Добавляйте призыв к действию: фразы типа «Узнайте как», «Откройте для себя» или «Начните» побуждают пользователей кликать.
• Соответствуйте поисковому намерению: ваше описание должно соответствовать тому, что ищет пользователь. Информационные запросы требуют иных описаний, чем транзакционные.
• Избегайте дублирования: каждая страница требует уникального описания. Google может игнорировать общие или повторяющиеся описания и генерировать собственные сниппеты из содержимого страницы.

Open Graph-теги: контроль превью в социальных сетях

Open Graph (OG) теги были созданы Facebook и теперь используются LinkedIn, Discord, Slack и большинством социальных платформ для определения внешнего вида вашего контента при распространении. Без OG-тегов платформы угадывают, какие заголовок, описание и изображение использовать, и часто ошибаются.

Основные Open Graph-теги

Лучшие практики для OG-изображений

• Используйте изображения размером не менее 1200 x 630 пикселей для оптимального отображения на всех платформах
• Размещайте важный контент в центре, так как разные платформы обрезают изображения по-разному
• Используйте соотношение сторон 1.91:1 для согласованного отображения в Facebook, LinkedIn и Twitter
• Держите размер файла менее 5 МБ для быстрой загрузки превью
• Включайте логотип бренда и заголовок страницы в изображение для максимальной узнаваемости

Twitter Card-теги

Twitter использует собственные Card-теги в дополнение к Open Graph. Хотя Twitter использует OG-теги как резервный вариант при отсутствии Card-тегов, явное определение обоих обеспечивает согласованное отображение на всех платформах.

• twitter:card: тип карточки. Используйте «summary» для маленького изображения или «summary_large_image» для большого изображения.
• twitter:title: заголовок контента (до 70 символов).
• twitter:description: описание контента (до 200 символов).
• twitter:image: URL изображения для отображения.

Другие важные Meta-теги

Canonical-тег

Canonical-тег (link rel="canonical") сообщает поисковым системам, какая версия URL является предпочтительной, когда несколько URL предоставляют одинаковый контент. Это предотвращает проблемы с дублированием контента и консолидирует ссылочный вес. Всегда используйте абсолютные URL в canonical-тегах.

Robots Meta-тег

Robots meta-тег контролирует, как поисковые системы сканируют и индексируют вашу страницу. Распространённые директивы включают «index, follow» (по умолчанию), «noindex, follow» (не индексировать, но следовать по ссылкам) и «noindex, nofollow» (полностью исключить). Используйте noindex для слабых страниц, страниц благодарности и контента, который вы не хотите видеть в результатах поиска.

Viewport Meta-тег

Viewport-тег критически важен для мобильного адаптивного дизайна. Используйте meta name="viewport" content="width=device-width, initial-scale=1.0" на каждой странице. Без него мобильные браузеры отображают страницы с шириной рабочего стола и уменьшают масштаб, что приводит к мелкому тексту и плохому пользовательскому опыту.

Кодировка и язык

Всегда объявляйте кодировку символов с помощью meta charset="UTF-8" и язык страницы с помощью атрибута lang на элементе html. Эти объявления помогают браузерам правильно отображать текст, а поисковым системам — понимать язык вашего контента.

Meta-теги, которых следует избегать

Некоторые Meta-теги устарели или неэффективны, и их больше не следует использовать:

• meta keywords: Google не использует этот тег как фактор ранжирования с 2009 года. Он тратит трафик и может раскрыть вашу стратегию ключевых слов конкурентам.
• meta revisit-after: поисковые системы определяют частоту сканирования на основе собственных алгоритмов, а не этого тега.
• meta author: это не имеет SEO-ценности. Используйте структурированные данные для указания авторства.

Проверка ваших Meta-тегов

После внедрения Meta-тегов проверьте их с помощью следующих инструментов:

• Facebook Sharing Debugger: проверяет Open Graph-теги и показывает, как контент будет выглядеть при распространении в Facebook.
• Twitter Card Validator: предварительный просмотр отображения контента в Twitter Cards.
• Google Rich Results Test: проверяет структурированные данные и предварительно просматривает возможное отображение страницы в результатах поиска.
• Генератор Meta-тегов: используйте наш генератор Meta-тегов для создания правильно отформатированных тегов и предпросмотра их отображения.