Блок ‹head› — как его оптимизировать

Блок ‹head› в HTML-коде — это то, что не видно простому обывателю, но при этом для продвижения и развития сайта он имеет большое значение. В этой статье разбираемся, из чего состоит ‹head› и как он влияет на оптимизацию.

В SEO метатеги стоят не на последнем месте при оптимизации контента под поисковое продвижение. Если они созданы правильно, это может улучшить видимость сайта и привести больше органического трафика из поисковых систем.

В блок ‹head› входит несколько важных метатегов, которым надо уделить особое внимание. Разберёмся с этим подробнее.

Из каких элементов состоит ‹head›

Заголовок страницы

В качестве заголовка используется тег title. Он отображается во вкладке браузера. Также поисковые системы могут использовать его для формирования заголовка сниппета который пользователь видит в поисковой выдаче.

Метатеги

Это отдельная группа тегов, узнать их просто — они начинаются со слова meta.

‹meta charset="utf-8"›:

Метатег, указывающий на кодировку символов страницы. Чаще всего используется именно кодировка UTF-8, так как она поддерживает множество языков и символов. Метатег позволяет тексту правильно отображаться.

‹meta name="viewport" content="width=device-width, initial-scale=1.0"›:

С помощью этого тега осуществляется настройка отображения сайта на мобильных устройствах. По сути это своеобразная инструкция для браузера, которая сообщает ему, как корректно масштабировать страницу на экранах разного разрешения.

‹meta name="description" content="Описание вашей страницы"›:

В этот тег заключается краткое описание страницы — description. Оно показывается пользователю в результатах поиска и помогает понять содержание сайта по ссылке.

‹meta name="keywords" content="ключевые слова, для, роботов"›:

В этом теге содержатся ключевые слова и фразы, связанные с содержанием страницы. Однако надо учитывать, что большая часть поисковых систем, в том числе Google, не берут во внимание этот метатег при ранжировании.

‹meta http-equiv="content-language" content="en"›:

Здесь содержится информация о языке, на котором написаны тексты, размещённые на странице.

‹meta name="robots" content="index, follow"›:

Это важный метатег, который показывает роботам, как индексировать страницу. Например, если прописать в нём атрибут nofollow, то роботы не будут выполнять индексацию. А если использовать index — наоборот, краулеры проверят её.

‹meta name="author" content="Имя автора"›:

Полезный метатег для указания авторства. В его можно заключить информацию об авторе представленного контента.

‹meta name="сopyright" content="Имя владельца авторских прав"›:

Тоже связан с авторством. Только этот тег позволяет включить информацию об авторских правах на размещённый контент.

‹meta http-equiv="refresh" content="5;url=new-page.html"›:

Метатег, который используется для автоматического перенаправления на другую страницу. Время перенаправления можно задать. В примере выше оно составляет 5 секунд.

Метатеги для соцсетей

‹meta name="og:title" content="Заголовок для социальных сетей"›:

Этот метатег позволяет понять, как страница будет отображаться на популярных площадках, например, VK. Включает заголовок, описание и изображение.

‹meta name="twitter:card" content="summary"›:

Особый тег Twitter Card определяет, как будет отображаться ссылка на «Твиттере». Можно добавить заголовок, описание и изображение.

Иные элементы

В ‹head› входят и другие элементы, которые также можно использовать для настройки отображения страницы.

‹link›:

Позволяет подключать таблицы стилей (CSS) и фавикон. С помощью этого можно установить связи с дополнительными файлами, определяющими визуальное отображение страницы, а также указать канонический адрес.

‹style›:

Может включать встроенные стилевые правила CSS, которые используются в документе. Его можно использовать, когда есть необходимость определить стили непосредственно на странице.

‹script›:

Нужен для подключения JavaScript-кода, что позволяет создавать динамичные и интерактивные элементы. Скрипты в ‹head› могут быть встроенными или внешними.

‹base›:

Позволяет установить базовый URL для относительных ссылок. Это даёт возможность браузеру правильно распознавать ссылки, если страница находится в разных директориях.

‹noscript›:

Используется, чтобы предоставлять пользователю альтернативное содержание в том случае, если его браузер не поддерживает JavaScript или он отключён.

Оптимизация блока ‹head› для Google

Метатеги и заголовки — одни из ключевых моментов для Google, которые помогают поисковику понять, о чём страница, систематизировать и оценивать контент, а также ранжировать сайт в выдаче. Есть несколько правил взаимодействия Google с заголовком и метатегами:

1. Регистр символов в метатегах Google не учитывается, кроме google-site-verification.
2. Google игнорирует метатеги, которые его роботы не знают.

Также стоит помнить, что чем больше подгружаемых скриптов и стилей используется, тем дольше может быть загрузка страницы, а это тоже не есть хорошо для ранжирования. Если сайт грузится медленно, значит Google будет понижать её в выдаче.

Title

Заголовок title крайне важен для страницы — именно из него поисковик формирует заголовок сниппета, который видит пользователь в поисковой выдаче. Соответственно, заголовок должен максимально соответствовать содержанию, а также, что особенно важно, включать в себя намерения пользователя, то есть — ключевые запросы.

Однако есть подвох или, если нравится — нюанс: Google не всегда формирует сниппет из ваших тегов. Иногда он делает это просто основываясь на… да на чём угодно, этот путь неисповедим. Поэтому, если вы хотите, чтобы пользователь в выдаче видел именно ваш title, важно предугадывать поисковый запрос. То есть тег должен прописываться с учётом собранного семантического ядра и основных запросов для этой страницы.

Содержание title должно быть осмысленным и понятным. Каждый заголовок для каждой отдельной страницы должен быть уникальным. Важно не просто вписать ключ, лишь бы он был, важно сделать тег читабельным и информативным. Для Google объём title ограничивается 50-60 символами, а значит нужно постараться прописать важную информацию максимально лаконично.

Description

Из тега Description Google обычно формирует содержание сниппета. Однако это тоже не всегда так. Если поисковик посчитает ваш тег нерелевантным, он может сформировать текст для сниппета самостоятельно, используя информацию на странице. Важно прописывать description также с учётом семантического ядра. Кроме того, тег должен быть уникальным для каждой страницы, дубли использовать нельзя. В крайнем случае лучше оставить его пустым, но не копировать.

Ограничение на размер тега составляет 150-160 символов. Это связано не с вредностью Google, а с объёмом текста, который помещается в сниппет в выдаче.

Keywords

Поисковик уже давно не использует этот метатег для ранжирования. Есть он или нет — ровном счётом не меняет ничего, Google его просто игнорирует.

Robots

Тег robots используется для определения внешнего вида страницы в результатах поиска. Аналогом этого тега в Google является googlebot. Если robots применим для всех поисковиков, то googlebot — исконно гугловский. Если в этих тегах заданы разные настройки, поисковик будет использовать те, которые устанавливают более строгие ограничения.

Charset

Кодировка указывает набор символов страницы. Этот тег находится в самом верху блока ‹head›. Единственный возможный тип кодировки для документов HTML5 — UTF-8.

Viewport

Метатег, который используется для оптимизации сайта под мобильные устройства. Он задаёт инструкции для браузера, по которым тот обрабатывает страницы и отображает нужный масштаб. Этот тег тоже должен располагаться вверху блока ‹head›. Наличие viewport — одно из основных требований Google, так как оптимизация под мобильные играет большую роль в ранжировании сайтов.

Google-site-verification

Это тег верификации, который позволяет подтвердить права собственности на сайт.

Content-language

Язык контента определяется Google автоматически. Поэтому, что бы вы ни прописали в этом теге, хоть клингонский, поисковик всё равно не будет это учитывать.

Rating

Этот тег используется для фильтрации страниц по возрастному ограничению, например, для контента с рейтингом 18+. Если у пользователя настроен безопасный поиск, то Google не будет показывать ему в выдаче сайты с таким тегом.

Base

Используется для установки базового URL, который будет применяться для всех остальных URL внутри документа. В этот тег обязательно должны включаться атрибуты href или target — сразу оба или один из них.

Canonical

Используется для указания канонической страницы. Это важно для избежания проблем с дублированием контента. Тег помогает поисковой системе понять, какую из страниц считать основной. Но опять же, так как Google у нас сам себе на уме, он может взять и посчитать канонической не ту, которую вы прописали в теге, а ту, которая ему кажется более полезной и релевантной.

Как проверить корректность блока ‹head›

Для проверки корректности заполнения блока можно использовать расширения браузера.

SEO META in 1 CLICK

Работает в браузере Google Chrome. В разделе Summary можно найти информацию о метатегах.

SEO Tool Extension

Тоже расширение для гугловского браузера. Позволяет просматривать заголовки и основные теги.

SEOInfo

Поможет проконтролировать не только блок ‹head›, но и нати проблемы с внутренней оптимизацией сайта.

Если же нужно за раз проверить большой объём страниц, отлично подойдёт инструмент Ahrefs. В отчёте он выдаст результаты по всем проблемам с метатегами, найденным на страницах сайта.

Заключение

Оптимизация блока ‹head› — важная часть работы над развитием и продвижением ресурса. Правильное использование тегов позволяет значительно улучшить позиции сайта в поисковой выдаче, поэтому к вопросу их заполнения надо подходить внимательно. Кроме того, стоит учитывать, что один раз заполнить блок и успокоиться — недостаточно. SEO-специалистам необходимо регулярно следить за изменениями в алгоритмах ранжирования, а также за эволюцией тегов и своевременно обновлять данные.

Изображение от vectorjuice на Freepik