Не терять головы: всё о блоке <head> и его оптимизации
Aloha, друзья! В этой статье мы подробно рассмотрим, что представляет собой блок <head>, какие элементы внутри него могут быть использованы и как они влияют на продвижение сайта в поисковых системах.
Блок <head> в HTML-коде ー невидимая, но важная для поисковых систем и браузеров составляющая любой веб-страницы. Хотя он не показывается напрямую на странице, этот элементиграет существенную роль в оптимизациии правильном отображении её содержания.
В контексте SEO, метатеги играют заметную роль в оптимизации контента для поисковых систем. Правильно оптимизированные метатеги могут улучшить видимость сайта в поисковых результатах, привлекая больше органического трафика.
Заголовок страницы
<title>: Этот тег устанавливает заголовок веб-страницы, который отображается во вкладке браузера и может использоваться поисковыми системами для формирования заголовка сниппета.
Метатеги
Метатег – это тег, который начинается со слова meta. Давайте рассмотрим основные виды метатегов.
<meta charset="utf-8">:
Этот метатег указывает кодировку символов страницы. UTF-8 является наиболее распространенной кодировкой, обеспечивающей поддержку различных языков и символов. Он гарантирует правильное отображение текста на странице.
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
Этот метатег определяет настройки отображения страницы на мобильных устройствах. Он указывает браузеру, как корректно масштабировать страницу на разных экранах.
<meta name="description" content="Описание вашей страницы">:
Метатег описания используется для предоставления краткого описания содержания страницы. Это описание часто отображается в результатах поиска и помогает пользователям понять, о чем идет речь на странице.
<meta name="keywords" content="ключевые слова, для, роботов">:
Этот метатег содержит список ключевых слов или фраз, связанных с содержанием страницы. Однако большинство поисковых систем, включая Google, не учитывают этот метатег в ранжировании.
<meta http-equiv="content-language" content="en">:
Этот метатег содержит информацию о языке, на котором написан контент
на странице.
<meta name="robots" content="index, follow">:
Метатег "robots" указывает поисковым роботам, как индексировать страницу. Например, "index" разрешает индексацию, а "nofollow" предотвращает индексацию ссылок на странице.
<meta name="author" content="Имя автора">:
Этот метатег предоставляет информацию об авторе страницы. Это может быть полезно для указания авторства контента.
<meta name="сopyright" content="Имя владельца авторских прав">:
Этот метатег предоставляет информацию о владельце авторских прав для материала, размещённого на странице.
<meta http-equiv="refresh" content="5;url=new-page.html">:
Метатег перенаправления используется для автоматического перенаправления на другую страницу через указанное время (здесь 5 секунд).
Метатеги для социальных сетей
<meta name="og:title" content="Заголовок для социальных сетей">:
Метатег Open Graph (OG) используется для определения, как содержание страницы будет отображаться на социальных платформах, таких как Facebook. Он включает заголовок, описание и изображение страницы.
<meta name="twitter:card" content="summary">:
Этот метатег указывает Twitter Card, который определяет способ отображения ссылки на Twitter. "Summary" позволяет отображать заголовок, описание и изображение.
Другие элементы
В блоке <head> HTML-документа помимо заголовка и метатегов входят и другие элементы, которые не видны на веб-странице, но выполняют важные функции. Вот список элементов, которые могут находиться внутри блока <head>:
<link>:
Этот тег используется для подключения внешних ресурсов, таких как таблицы стилей (CSS) и иконки (фавикон). Он позволяет устанавливать связи с дополнительными файлами, которые влияют на визуальное оформление и поведение страницы, а так же указать канонический адрес страницы.
<style>:
Элемент <style> может содержать встроенные стилевые правила CSS, которые применяются к текущей странице. Это полезно, когда требуется определить стили непосредственно на странице.
<script>:
Тег <script> используется для подключения JavaScript-кода к странице. JavaScript позволяет создавать интерактивные и динамические элементы на странице. Скрипты в блоке <head> могут быть внешними или встроенными.
<base>:
Элемент <base> используется для установки базового URL-адреса для относительных ссылок на странице. Это помогает браузеру правильно интерпретировать ссылки, если страница находится в разных директориях.
<noscript>:
Элемент <noscript> используется для предоставления альтернативного содержания, которое будет отображено в случае, если браузер пользователя
не поддерживает JavaScript или если JavaScript отключен.
Оптимизация заголовков, метатегов и других элементов внутри блока head для Google
Заголовки и метатеги как правило рассматриваются seo-специалистами в контексте взаимодействия с Google.
Это ключевые элементы, которые помогают поисковой системе оценить контент, качественно ранжировать поисковую выдачу и создать релевантный сниппет. В этом разделе мы рассмотрим особенности взаимодействия Google с заголовком страницы (title), метатегами и элементом base.
Два основных правила такого взаимодействия:
● Регистр символов в метатегах Google не учитывается. (за исключением google-site-verification).
● Метатеги, которые неизвестны роботам Google, будут проигнорированы.
Кроме того следует помнить, что большой объем подгружаемых скриптов и стилей может существенно замедлить загрузку страницы, что негативно скажется на позиции этой страницы в выдаче.
Заголовок (title):
Основное преимущество тега title заключается в том, что из него Google по умолчанию формирует заголовок сниппета. Однако, стоит помнить, что заголовок сниппета должен соответствовать не только содержанию страницы, но и интенту – поисковому намерению пользователя, выраженному в поисковом запросе.
В некоторых случаях Google формирует заголовок сниппета, исходя из собственного чувства прекрасного (тег H1, просто релевантный текст взятый со страницы). Поэтому, если мы хотим, чтобы title оказался в заголовке сниппета, нам необходимо предсказать поисковый запрос пользователя, то есть прописывать этот тег в соответствии с той частью семантического ядра, с которой работает текущая страница.
Заголовки должны быть уникальными для каждой страницы сайта. Содержимое title должно быть осмысленным текстом, ориентированным на пользователя, а не нагромождением ключевых слов. С помощью упоминания в теге title можно задать название сайта в поисковой выдаче Google, однако для этой цели проще использовать микроразметку.
Содержимое тега title не должно превышать 50-60 символов. В качестве разделителя внутри тега title не должно использоваться подчёркивание.
Title обязательно должен быть закрыт.
Описание (description):
Основное преимущество метатега description заключается в том, что из него Google по умолчанию формирует содержимое сниппета. Но так как оно должно быть релевантно поисковому запросу, то, как и в случае с заголовком, может быть взято со страницы. Рекомендация здесь точно такая же: прописывать этот тег в соответствии с той частью семантического ядра, с которой работает текущая страница.
Метатег description должен быть уникальным для каждой страницы (или совсем отсутствовать для не слишком важных страниц). Дубли недопустимы.
«Для важных страниц имеет смысл зайти и убедиться, что у вас есть уникальное, сделанное вручную, с любовью описание метатега Description», –
«Если вы хороший SEO-специалист, который обращает внимание на конверсию, а не только на позицию по ключевым фразам, то вам, возможно, стоит уделить некоторое внимание тестированию различных метаописаний, которые могут привести к увеличению кликов и, возможно, большему количеству конверсий»
Содержимое метатега description должно быть в пределах 150-160 символов. Это не магия, это ограничение размера сниппета в поиске.
Ключевые слова (keywords)
Google уже давно не использует метатег keywords для ранжирования.
Если быть конкретнее, метатег keywords не является ни положительным, ни отрицательным фактором ранжирования, Google его просто не замечает.
«Вы можете использовать метатег keywords, если вы хотите использовать его для чего-то. Это не вызывает никаких проблем с поиском Google. Обычно он достаточно мал, чтобы не изменять общий размер страницы. Поэтому нет веской причины удалять их со страницы»
Информация для роботов (robots):
«Метатег robots может указывать, как должна выглядеть конкретная страница, показываться в поиске или не показываться вообще. Этот метатег необходим только в том случае, если вы хотите изменить внешний вид страницы по умолчанию в результатах поиска. Например, если вы хотите ограничить размер сниппета, тогда вы можете использовать метатег robots max snippets»
Аналогом метатега robots для Google является метатег googlebot. Если robots используется для всех поисковых системах, то googlebot только для Google.
Когда в метатегах страницы заданы разные настройки для атрибутов robots и googlebot, Google использует те настройки, которые устанавливают наиболее строгие ограничения. По умолчанию используются значения index, follow, поэтому отдельно их указывать не требуется.
Кодировка (charset):
Метатег, который указывает набор символов страницы. Он должен располагаться в самом верху блока head (согласно спецификации
meta-элементы, объявляющие кодировку символов, должны полностью располагаться в пределах первых 1024 байт документа).
Для документов HTML5 единственная допустимая кодировка UTF-8, поэтому метатег должен выглядеть следующим образом:
Оптимизация для мобильных устройств (viewport):
Метатег viewport предоставляет браузеру детальные инструкции относительно того, как должны обрабатываться размеры веб-страницы и какой масштаб следует использовать. Этот тег играет ключевую роль в обеспечении оптимального отображения веб-содержимого на различных устройствах.
Он должен располагаться в верхней части блока head (в идеале сразу после meta charset).
Метатег viewport может иметь следующие атрибуты, перечисленные через запятую:
● width;
● height;
● initial-scale (начальный масштаб страницы, от 0.1 до 1.0);
● user-scalable (возможность масштабирования пользователем, 0 - нет, 1 - да);
● orientation (управление ориентацией);
● minimum-scale (минимальный масштаб);
● maximum-scale (максимальный масштаб).
Наличие метатега viewport – одно из четырёх основных требований Google (наряду с размером шрифта, расстоянием между интерактивными элементами и шириной контента) в разрезе удобства для мобильных устройств.
Показатель был введён в 2016 году. На сегодняшний день отчёт
«Удобство просмотра на мобильных устройствах» можно увидеть в Search Console, с 1 декабря 2023 года поддержка этого отчёта будет прекращена. При этом сам фактор удобства для мобильных устройств продолжает оказывать существенное влияние на ранжирование сайта.
«То, что у вас есть метатег viewport, не означает, что мы увидим это как мобильную версию и мы не будем искать другие доступные версии. В частности, если у вас есть отдельные мобильные URL-адреса, мы рекомендуем, иметь связь между двумя версиями», – «Это одно. И еще одна вещь, которую я настоятельно рекомендую, — это настроить перенаправления, чтобы пользователи настольных компьютеров заходили на мобильный сайт, они перенаправляются на сайт для настольных компьютеров.
И когда пользователи мобильных устройств переходят на ваш сайт для настольных компьютеров, они перенаправляются на мобильный сайт. И с обоими этими механизмами, вы действительно даете нам понять, что это не мобильная версия, а это версия для ПК. И мы можем соединить их, чтобы правильно использовать их для индексации, но вы даете нам четкое определение, что это за версии. И с этим четким определением не имеет значения, есть ли у вас метатег viewport или десктопная версия также пригодна для использования на мобильных устройствах или нет».
Верификация (google-site-verification):
Этот метатег используется, чтобы подтвердить свои права собственности на сайт в Google Search Console. В видео ниже Дэниэл Вайсберг рассказывает, как это быстро и эффективно можно сделать.
Язык (content-language):
Определение основного языка страницы для Google происходит путем анализа текстов, размещённых на ней. Таким образом, Google игнорирует информацию, содержащуюся в языковых тегах, и полагается исключительно на содержание текста для определения языка страницы.
«Нет метатега, который вам нужно использовать, чтобы сообщить поисковым системам о выборе языка, но атрибут HTML lang рекомендуется использовать для программ чтения с экрана»
Автор (author):
Мета-тег author активно использовался Google для привязки контента страницы к странице его автора в социальной сети Google+. С закрытием этой социальной сети Google не использует метатег author.
Контент для взрослых (rating):
Если пользователь предпочитает не встречаться с контентом для взрослых в поисковой системе Google, у него есть возможность активировать
безопасный поиск.
Этот режим является специальным инструментом, который фильтрует неприемлемый контент, чтобы он не попадал в результаты поиска. Пользователь может активировать этот режим, чтобы обеспечить себе и своим близким приемлемые результаты выдачи.
Если у вас на сайте есть следующий контент:
● материалы сексуального характера, в том числе порнография;
● нагота;
● фотореалистичные изображения секс-игрушек;
● материалы, связанные с поиском сексуальных партнеров и эскорт-услугами;
● сцены насилия или жестокости;
● ссылки на страницы, на которых опубликованы материалы сексуального характера;
то на страницы, где он размещён необходимо добавить следующий метатег:
Без такой маркировки поисковые алгоритмы Google могут сделать предположение, что все страницы на веб-сайте ориентированы на взрослую аудиторию, даже если это не соответствует действительности.
В результате сайт может быть исключен из выдачи.
Базовый URL-адрес (base):
В HTML тег <base> применяется для установки абсолютного (базового) URL, который будет применяться ко всем относительным URL-адресам внутри документа. Он также определяет, как следует обрабатывать открытие ссылок в документе, открывать в новом окне или текущем окне браузера.
Тег <base> в обязательном порядке должен содержать один или оба атрибута href или target.
Google одинаково относится к абсолютным и относительным адресам, то есть не видит между ними никакой разницы. Единственное, чего стоит избегать – неправильной настройки директивы base. Если ссылки ведут на 404 страницу – это считается ошибкой.
Каноническая страница (canonical):
Тег canonical – это HTML–элемент, который используется для указания канонической (основной) версии страницы на веб-сайте. Он помогает поисковым системам понимать, какая страница должна считаться основной
и предотвращает проблемы с дублированием контента.
Однако не всегда Google в качестве основной страницы выбирает ту, которая указана веб-мастером в теге canonical.
«Мы выбираем канонический URL, следуя двум общим правилам.
Во-первых, предпочтение сайта.
И, во-вторых, какой URL полезнее для пользователя.
Когда дело доходит до предпочтений сайта, мы рассматриваем ряд вещей, которые включают ссылку на каноническую страницу, редиректы, внутренние ссылки, а также ссылку из файла sitemap.
Мы также предпочитаем URL-адреса HTTPS URL-адресам HTTP и стараемся выбрать более красивые адреса, когда можем»,
Оптимизация метатегов для Baidu
Не будем углубляться в китайское SEO, просто упомянем три главных особенности этой замечательной страны.
Китайский язык: Учтите, что Baidu – китайская поисковая система, поэтому метатеги и содержание вашей страницы должны быть на китайском языке.
Заголовок и Описание: Создайте качественные заголовки и описания на китайском языке с использованием упрощенной китайской письменности, чтобы привлечь китайскую аудиторию.
Избегайте цензуры: Избегайте использования чувствительных слов или информации, которая может подвергнуться цензуре в Китае.
Особенности метатегов для социальных сетей (Open Graph, Twitter Cards)
Один из способов привлечения посетителей на сайт ー ссылки в социальных сетях. Пользователи, посещающие веб-сайт, могут распространять информацию о нём, делясь у себя вашим контентом. Этот механизм помогает привлекать новых посетителей, так как друзья и подписчики пользователей, сделавших репост, могут проявить интерес к вашему сайту.
Однако, для этого публикация с репостом должна быть привлекательной. Но без специальной разметки социальная сеть не знает, какую картинку подтягивать с вашего сайта и репост получается некрасивым. Метатеги для социальных сетей предоставляют уникальную возможность настроить
то, как ваш контент будет выглядеть, когда пользователи делятся им на социальных платформах.
Этот протокол разработан Facebook и используется многими социальными сетями, чтобы определить, как ваш контент будет выглядеть при публикации ссылки в ленте.
Open Graph используют Facebook, Pinterest, X
(при условии, что не обнаружены теги Twitter Cards), LinkedIn, Telegram, Viber, Slack и другие социальные сети и мессенджеры.
Теги Open Graph не понимают <base> и должны включать абсолютные
URL-адреса.
Основные метаданные Open Graph
● og:title – название объекта;
● og:type – тип объекта;
● og:image – URL-адрес изображения;
● og:url – канонический URL-адрес объекта (постоянный идентификатор).
Дополнительные метаданные Open Graph
● og:audio – URL-адрес аудиофайла, дополняющего объект;
● og:description – краткое описание объекта;
● og:determiner – слово, которое появляется перед названием объекта в предложении (a, an, the, " ", auto);
● og:locale – языковой стандарт (по умолчанию en_US);
● og:locale:alternate – другие языки, на которых доступна эта страница;
● og:site_name – если объект является частью более крупного веб-сайта, имя которого должно отображаться;
● og:video – URL-адрес видеофайла, дополняющего объект.
Для каждой социальной сети существуют определенные требования к размеру изображений. Идеально было бы создавать отдельное изображение с соответствующими размерами для каждой из этих социальных сетей.
Например, если вы планируете опубликовать статью на сайте и затем сделать репост в нескольких социальных сетях, вам следует подготовить специальное изображение для каждой из них. Для того чтобы гарантировать, что каждая социальная сеть загрузит именно то изображение, которое вы предпочли, вам нужно использовать соответствующие теги в разметке Open Graph:
● fb:image для Facebook
● twitter:image для Twitter
При репосте в Facebook, социальная сеть учтет только тег fb:image, игнорируя остальные. Аналогично поступят и другие социальные сети, учитывая только соответствующие им теги. Это позволяет точно контролировать, какие изображения будут отображаться при публикации в разных социальных сетях.
CMS и Open Graph
Основные cms разработали плагины для добавления Open Graph.
Их можно подобрать по следующим ссылкам:
● WordPress;
● Joomla;
● Drupal;
● Magento.
Мир социальных медиа становится все более визуальным и интерактивным,
и протокол Open Graph неожиданно оказался важным инструментом для быстрого создания потрясающих публикаций.
С его помощью вы можете управлять тем, как ваш контент выглядит на Facebook, Twitter и других платформах. Используя этот протокол, вы создаете ключ к тому, чтобы ваш контент выделялся в море информации, привлекая внимание и вовлекая аудиторию.
Twitter Cards
Twitter Cards – это инструмент, разработанный Twitter (теперь X), который позволяет пользователям делать более информативные и привлекательные твиты. Путем включения специальных метатегов в код своей веб-страницы и ассоциирования ее с определенным типом карточки, пользователи могут прикрепить мультимедийное содержимое к своим твитам. Это позволяет им представлять свой контент в более привлекательной форме, что может увеличить его видимость и распространение на X.
Twitter Cards предоставляют различные типы, каждый из которых предназначен для разного типа контента. Основные типы Twitter Cards включают в себя:
Summary Card: Этот тип предоставляет базовую информацию о странице, включая заголовок, краткое описание и изображение. Это обеспечивает пользователей дополнительной информацией перед переходом на страницу.
Summary Card with Large Image: Этот тип также предоставляет основную информацию, но с большим изображением, делая твит более наглядным и привлекательным.
App Card: Этот тип предназначен для продвижения мобильных приложений и включает информацию о приложении, такую как название, иконка и описание.
Player Card: Player Card позволяет встраивать медиа-контент, такой как видео и аудио, прямо в твиты.
Использование Twitter Cards предоставляет ряд преимуществ и возможностей для владельцев веб-сайтов и брендов:
● Увеличение визуальной привлекательности: Twitter Cards позволяют более красочно и информативно представлять контент, что привлекает внимание пользователей.
● Увеличение CTR: Благодаря более информативному и заметному отображению твитов, содержащих Twitter Cards, увеличивается вероятность того, что пользователи кликнут на ссылку.
● Увеличение вовлеченности: Twitter Cards помогают создать более интересные и вовлекающие твиты, что может привести к большей активности аудитории.
● Аналитика: Twitter предоставляет аналитические данные о том, какие
Twitter Cards работают наилучшим образом, что помогает оптимизировать стратегию использования.
В целом, Twitter Cards представляют собой мощный инструмент для улучшения присутствия и взаимодействия на Twitter, делая твиты более привлекательными и информативными для пользователей.
Проверка корректности блока head с помощью инструментов для веб-разработчиков
Для проверки корректности заголовка и метатегов конкретной страницы проще всего использовать браузерные расширения. Вот три примера
таких расширений, которые довольно просто найти
в интернет-магазине Google Chrome.
SEO META in 1 CLICK – расширение, предназначенное для работы в браузере Google Chrome. Содержит информацию о метатегах в разделе Summary.
SEO Tool Extension
SEO Tool Extension ещё одно многофункциональное SEO расширение для Google Chrome, позволяющее просматривать заголовок и основные метатеги.
SEOInfo
Данный плагин также поможет определить, существуют ли проблемы с внутренней оптимизацией сайта. Аналогично плагину SEO META in 1 CLICK он предоставляет информацию о метатегах, структурированных данных и канонических страницах.
В том случае, если необходима массовая проверка страниц, стоит использовать такие сервисы как Ahrefs. В разделе «аудит сайта» сервис регулярно отображает главные проблемы с метатегами на всех обнаруженных страницах сайта.
Заключение
Оптимизация тегов в блоке <head> в HTML-коде – это неотъемлемая часть стратегии поисковой оптимизации, которая играет ключевую роль в повышении видимости сайта в поисковых результатах.
Для SEO-специалистов, работающих над улучшением ранжирования и привлечением органической аудитории, правильное использование тегов в блоке <head> становится важным фактором успеха.
Такие метатеги, как title и description, несомненно, имеют критическое значение. Они служат воротами для пользователей и поисковых систем, предоставляя краткую информацию о содержании страницы. Эти метатеги должны быть информативными, привлекательными и оптимизированными под ключевые слова, чтобы максимизировать CTR и привлечь целевую аудиторию.
Метатеги Open Graph и Twitter Cards, с другой стороны, расширяют эту концепцию на социальные сети. Они позволяют контролировать, как ваш контент отображается при его публикации на платформах, таких как Facebook и Twitter. Правильно настроенные метатеги Open Graph и Twitter Cards могут значительно улучшить представление вашего контента в социальных сетях и повысить шансы на вовлечение аудитории.
Канонические страницы, с помощью элемента rel=canonical, помогают устранить проблемы с дублированием контента, указывая на основную версию страницы. Это снижает риск ухудшения ранжирования из-за дублирования и обеспечивает четкость в индексации поисковых систем.
Важно помнить, что правильная работа с тегами в блоке <head> – это не разовое действие, а непрерывный процесс. SEO-специалисты должны следить за изменениями в алгоритмах поисковых систем, а также за эволюцией самих тегов и метаданных. Это позволит сайту сохранять конкурентоспособность и эффективность в долгосрочной перспективе.
Добавлю: невалидность кода в случае тегов области head может сказаться на том, что гуглобот чего-то не увидит на странице. То, что должно быть в head - должно быть только там. То, чего там быть не должно - не должно. Встретив в этой области какой-нибудь iframe или другой несоответствующий элемент, гуглобот считает, что область head завершена.
Не такая уж редкая проблема в последнее время - люди втыкают рекламные контейнеры не туда и не так.
Отличное экспертное дополнение!