HTML-документ head Элемент используется для предоставления информации о веб-странице веб-браузерам и поисковым системам, а также для связывания внешних ресурсов со страницей. Он не содержит контента, видимого на веб-странице, но это не значит, что он не важен. Правильная веб-страница headструктура имеет решающее значение для поисковой оптимизации и доступности веб-сайта.
Базовая структура HTML-документа
HTML-документы состоят из двух основных частей:
- The bodyэто место, где размещается видимое содержимое веб-страницы. Содержимое тела организовано с помощью большого разнообразия семантических элементов , таких как header, main, а также footerэлементы.
- The headставится перед bodyи включает информацию о веб-странице и инструкции для веб-браузеров и поисковых роботов.
В нашем Руководстве по HTML-документам мы объясняем, как структурировать bodyэлемент и другие семантические теги, используемые для идентификации и группировки содержимого веб-страницы. В этом руководстве мы рассмотрим headэлемент и информацию, которую необходимо включить в заголовок HTML-документа, чтобы обеспечить наилучшее взаимодействие с пользователем и достичь максимально возможного рейтинга в поисковых системах .
Несколько слов о системах управления контентом и конструкторах сайтов
Большинство современных веб-сайтов построены на системе управления контентом (CMS) или конструкторе веб-сайтов той или иной разновидности. Если ваш веб-сайт создан с помощью одного из этих современных инструментов, то содержимое страницы headбудет сгенерирован автоматически вашей CMS или конструктором сайтов. В таком случае, что вы можете почерпнуть из этого урока?
Лучше понимая, что должно быть в headHTML-страниц вашего веб-сайта вы сможете оценить, действительно ли там есть соответствующие элементы. Кроме того, по крайней мере, вы сможете лучше понять, что происходит на headэлемент.
Если вы обнаружите, что на вашем веб-сайте отсутствуют элементы head, если вы используете общепринятую CMS или конструктор веб-сайтов, по всей вероятности, есть надежные плагины, которые вы можете использовать для добавления и настройки элементов в документе. head.
Необязательный <head>Элемент
Начиная с HTML5 , headэлемент на самом деле является необязательным . Это не означает, что документы HTML5 не имеют head. Это означает, что в HTML5 любые элементы, которые появляются до открытия bodyтеги автоматически группируются в документе head.
Некоторые разработчики по-прежнему предпочитают использовать headэлемент, так как он обеспечивает логический контейнер для всех элементов, обсуждаемых в остальной части этого документа. Однако, если вы предпочитаете немного упростить свой HTML, не стесняйтесь опускать headтеги. Просто не забудьте сгруппировать все следующие элементы в начале документа, прежде чем переходить к любому содержимому веб-страницы. Как только вы попадете в содержимое веб-страницы, некоторые из этих тегов больше не будут работать должным образом.
Страница <title>
Один элемент в каждом HTML-документе headдолжен содержать страницу title. Страница titleиспользуется в качестве имени веб-страницы, когда она появляется на странице результатов поисковой системы (SERP). titleтакже используется в качестве метки для окна или вкладки браузера, где загружается веб-страница. Синтаксис заголовка очень прост:
<title>Insert Title Here | Follow it with the Website Name if you Wish</title>
Для веб-страниц, отличных от домашней страницы, обычно указывается имя страницы, за которым следует разделитель и название веб-сайта. Важно не забыть включить закрытие titleярлык. В противном случае некоторые веб-браузеры могут игнорировать остальную часть содержимого веб-страницы.
Определение <link>на внешний ресурс
Другим элементом, который используется практически на каждом современном веб-сайте, является linkэлемент. Этот элемент используется для создания и определения связи между веб-страницей и внешним ресурсом или другой веб-страницей. Ссылочные элементы можно использовать для получения множества различных ресурсов:
- Таблицы стилей для определения визуального представления веб-страницы.
- Файл значка или favicon, который будет использоваться в строке заголовка браузера или при добавлении веб-страницы в закладки.
- Ресурсы атрибуции, такие как информация об авторстве и авторских правах.
- И многое другое.
Вот несколько наиболее распространенных способов linkэлемент используется в современной веб-разработке.
<link>: для загрузки таблиц стилей
Представление веб-страницы или правила стиля, написанные во внешнем файле CSS , должны быть связаны с веб-страницей с linkэлемент для уведомления браузера о том, какие таблицы стилей следует загрузить. Следующий синтаксис используется для linkвнешняя таблица стилей в HTML-документ:
<link href="../file_path/file_name.css" rel="stylesheet" title="Style Sheet Name">
В нашем учебнике по CSS более подробно рассматривается связывание внешних таблиц стилей и обзор основных стилей CSS.
<link>: Чтобы добавить фавикон
Откройте веб-страницу в веб-браузере и посмотрите на вкладку в верхней части браузера. Видите маленький значок рядом с названием веб-страницы? Этот маленький значок называется фавикон ( сокращение от любимого значка ). Если у вас есть общая учетная запись хостинга, и вы не заменили значок по умолчанию, вы, вероятно, увидите значок вашего веб-хостинга, отображаемый рядом с названием вашей веб-страницы.
В прошлом создать значок значка было так же просто, как создать любое изображение размером 16 x 16 пикселей и преобразовать его в формат значка .ico с помощью одного из многих бесплатных веб- сайтов для создания значка или графической программы, такой как Gimp или Adobe Illustrator. Однако из-за большого разнообразия устройств, которые сегодня могут использоваться для доступа к вашему сайту, создание фавикона теперь является гораздо более сложным процессом.
Обычно рекомендуется создать изображение размером 196 x 196 пикселей, а затем сохранить его в трех разных размерах:
- 32 x 32 пикселя в формате .ico для IE9 и более ранних версий (используйте либо один из онлайн-генераторов значков, связанных с ранее, либо графическую программу, такую как Gimp или Adobe Illustrator, чтобы сохранить файл в формате .ico ).
- Сенсорные значки смартфона размером 180 x 180 пикселей в формате .png (на случай, если кто-то закрепит ваш сайт в закладках на своем смартфоне).
- 196 x 196 пикселей в формате .png для современных браузеров.
С этими тремя изображениями, загруженными в корневую папку вашего веб-сайта, используйте следующее linkсинтаксис, чтобы связать их с вашим сайтом.
<!-- For IE 9 and below ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="path/to/apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+, Edge, and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">
Для получения полной информации о том, почему именно этот набор linkэлементы рекомендуется прочитать полное объяснение на StackOverflow .
Канонические и базовые URL-адреса
Еще одна задача, которую можно выполнить в документе headзаключается в том, чтобы сообщить поисковым роботам и браузерам что-то об отношении текущей веб-страницы к общей структуре веб-сайта.
- Когда на веб-страницу можно попасть, используя несколько URL-адресов, linkЭлемент можно использовать, чтобы сообщить поисковым роботам, какая версия страницы является канонической или предпочтительной формулировкой URL, а какая должна быть проиндексирована поисковыми системами.
- При переходе на веб-страницу с использованием неожиданной структуры URL-адреса baseЭлемент может использоваться, чтобы сообщить веб-браузеру URL-адрес, который будет использоваться в качестве основы для любых относительных ссылок на странице.
Идентификация канонического URL
Если вы используете современную систему управления контентом для своего веб-сайта, в зависимости от CMS некоторые страницы могут быть доступны с использованием более чем одной структуры URL. Например, если у вас есть сообщение, классифицированное по нескольким категориям, вы можете получить доступ к странице, используя несколько URL-адресов, таких как:
- Post Position in Category 1: http://example.com/category-1/post/
- Позиция публикации в категории 2 http://example.com/category-2/post/ :
- Постоянная ссылка публикации http://example.com/post/ :
Если все три версии могут быть найдены поисковым роботом, все три версии будут проиндексированы. Однако, поскольку контент, проиндексированный на всех трех страницах, идентичен, поисковые роботы могут помечать страницы как спам и наказывать их позицию, когда они появляются в поисковой выдаче.
Другая распространенная проблема заключается в том, что ваш сайт доступен по всем следующим URL-адресам:
- http://www.example.com/ _
- http://www.example.com/index.html
- http://example.com/ _
- http://example.com/index.html
Хотите верьте, хотите нет, но с точки зрения поискового робота это четыре разных веб-сайта. Поэтому очень важно выбрать тот, который вы хотите сделать каноническим , и сообщить поисковым роботам, что вы выбрали.
Ответ заключается в использовании linkэлемент, сообщающий поисковым роботам, какую версию страницы индексировать. Используя наш первый пример выше, вы, вероятно, захотите использовать постоянную ссылку в качестве канонического URL-адреса. Чтобы сообщить поисковым роботам, что они предпочитают именно эту версию страницы, к элементу head для каждого другого экземпляра страницы будет добавлен следующий HTML-код:
<link rel="canonical" href="http://example.com/post/" />
Чтобы узнать больше о том, как поисковые системы интерпретируют канонические ULR, ознакомьтесь с этой темой в справке Google Seach Console .
Если ваш веб-сайт работает на CMS, и эта CMS создает повторяющиеся URL-адреса (некоторые делают, некоторые нет), важно, чтобы вы нашли плагин или расширения, которые могут решить проблему, добавив правильный rel="canonical"правила динамически или путем устранения дублирующегося содержимого.
Установка базового URL
Если вы используете относительные URL-адреса для связи между страницами вашего веб-сайта, но структура веб-сайта допускает дублирование контента, вы можете использовать baseэлемент, сообщающий веб-браузерам URL-адрес, который следует использовать в качестве основы для относительных URL-адресов. Например, предположим, что у вас есть страница, которая существует в двух местах:
- Местоположение категории товаров http://example.com/product-category/product/ :
- Постоянная ссылка на продукт http://example.com/product/ :
Теперь предположим, что вы используете относительные URL-адреса для ссылок на другие страницы продуктов, например: <a href="../related-product/">Check out this other product!</a>. В зависимости от того, на какой версии страницы находится зритель, эта ссылка может указывать в двух разных направлениях:
- Ссылка из местоположения категории продуктов http://example.com/product-category/related-product/ :
- Ссылка из постоянной ссылки продукта http://example.com/related-product/ :
Если связанный продукт находится в другой категории продуктов, первая ссылка не будет работать. Как решить эту проблему? Просто добавьте baseURL-адрес заголовка вашей страницы с использованием следующего синтаксиса:
<base href="http://example.com">
Когда вы используете относительный URL-адрес на странице с этим baseэлемент на странице headбудет использоваться базовый URL, а не URL текущей страницы. Теперь вы можете создавать относительные URL-адреса, используя этот URL-адрес в качестве основы, независимо от страницы, на которой находится ссылка.
Альтернативные URL
Если у вас есть веб-страница, которая частично или полностью доступна на нескольких языках, linkЭлемент в сочетании с тремя дополнительными атрибутами может использоваться для информирования поисковых роботов об альтернативных версиях веб-страницы.
Например, предположим, что основная версия вашего веб-сайта на английском языке, но вы также поддерживаете версии своего веб-сайта на испанском, французском и немецком языках. Вы можете использовать следующий код, чтобы сообщить поисковым роботам об отношениях между этими разными веб-страницами:
<link rel="alternate" hreflang="x-default" href="http://www.example.com/">
<link rel="alternate" hreflang="es" href="http://es.example.com/">
<link rel="alternate" hreflang="fr" href="http://fr.example.com/">
<link rel="alterante" hreflang="de" href="http://de.example.com/">
Для нашего примера мы предположили, что веб-сайт будет структурирован таким образом, что каждая переведенная страница существует как поддомен основного домена, а код языка используется для создания поддомена. Однако можно использовать любую другую структуру. Например, вы можете так же http://www.example.com/espanol/ легко вместо http://es.example.com/ . использовать
Коды языков, используемые для идентификации языка в hreflangатрибут должен быть представлен в формате ISO 639-1 . Вы также можете использовать этот же синтаксис для создания локализованных версий веб-страницы на том же языке, добавив код региона в формате ISO 31661 Alpha 2 после кода языка и разделив коды региона и языка дефисом.
При объединении кодов региона и языка всегда сначала указывайте код языка , а затем код страны, разделяя два кода дефисом.
Например, предположим, что мы хотели создать несколько переводов для посетителей из одной и той же страны, например, испанский и английский переводы одной и той же страницы для посетителей из США, а также третью страницу, ориентированную на англоговорящих из Великобритании. Мы могли бы сделать это с помощью следующего синтаксиса:
<!--The first links identifies the default domain-->
<link rel="alternate" hreflang="x-default" href="http://example.com/">
<!--This link identifies a spanish version for visitors in the USA-->
<link rel="alternate" hreflang="es-us" href="http://www.example.com/es/">
<!--This link identifies an english version for visitors from the UK-->
<link rel="alternate" hreflang="en-gb" href="http://www.example.co.uk/">
Если ваша веб-страница существует на нескольких языках, важно использовать эту технику, чтобы сообщать веб-браузерам и поисковым роботам об альтернативных версиях веб-сайта. Несоблюдение этого требования может негативно сказаться на вашем рейтинге в поисковых системах, поскольку поисковые роботы находят различные версии, но наказывают ваш сайт за дублирующийся контент.
Отдавайте должное там, где это необходимо
The linkЭлемент также может использоваться для предоставления веб-браузеру информации об авторе и лицензировании, применимом к содержимому веб-страницы. rel attribute and the values author and license are used to embed this information in the document head.
Вот пример того, как мы можем идентифицировать автора страницы и предоставить информацию об авторских правах, используя linkэлемент.
<link rel="author" href="https://plus.google.com/+ExampleProfile">
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">
Что первое linkэлемент сообщает поисковым роботам, что дополнительная информация об авторе доступна по адресу href="http://www.example.com". Эта ссылка может указывать на веб-сайт автора, профиль в социальной сети или адрес электронной почты (хотя это не рекомендуется). Вплоть до конца августа 2014 года с помощью этого метода обычно связывались с профилем автора в Google+. Это было из-за чего-то под названием Авторство Google , которое с тех пор было прекращено.
Второй элемент сообщает поисковым роботам, что страница на href="https://creativecommons.org/licenses/by/4.0/"содержит условия авторского права, применимые к этой странице. Это может сыграть свою роль, поскольку некоторые поисковые системы предлагают расширенные возможности поиска, которые фильтруют результаты на основе прав использования, применяемых к странице. Пока это linkможет использоваться для ссылки на страницу авторских прав на вашем собственном веб-сайте, чтобы поисковые системы правильно интерпретировали лицензирование, важно указать ссылку на лицензию, которую поисковые системы распознают, например, на одну из лицензий Creative Commons .
Добавление сценариев
Языки сценариев, или какой JavaScript является бесспорным лидером рынка , обычно загружаются на страницу. headэлемент с помощью scriptярлык. JavaScript можно использовать для самых разных вещей, включая:
- И многое, многое другое.
Основной синтаксис для scriptтег выглядит так:
<script src="../path/to/javascript_file.js">
//The src attribute above identifies an JavaScipt file.
//However, JavaScript can also be added between the opening
//and closing <script> tags.
</script>
В нашем учебном пособии по JavaScript подробно рассматривается встраивание JavaScript, а также общие задачи, выполняемые с помощью этого популярного языка программирования.
<meta>Данные
Метаданные — это данные о данных. Это информация, которая осмысленно описывает некоторую другую информацию. metaТег используется в документе HTML для предоставления метаданных высокого уровня о веб-странице: информации, которая описывает веб-страницу осмысленным образом, который может быть понят поисковыми роботами и браузерами.
Какие метаданные мы можем предоставить поисковым роботам и браузерам с metaярлык?
- Описание страницы и ключевые слова, описывающие тему страницы.
- Информация об авторстве страницы.
- Инструкции для конкретных действий браузера.
- Подробная информация о заголовке страницы, описании и авторе, которые будут использоваться при публикации страницы в социальных сетях или отображении в поисковой выдаче.
- И многое, многое другое.
В этом разделе мы рассмотрим несколько наиболее распространенных действий, выполняемых metaтег в headHTML-документа.
Создание charset
The charset, сокращение от набора символов, представляет собой кодировку символов, используемую на веб-странице. Почти во всех случаях вы будете писать в UTF-8, а если нет, то вы, вероятно, уже знаете это.
Важно объявить charsetкак можно раньше в документе HTML, потому что браузеры перестанут искать кодировку символов после 512 байтов и угадывают, какая кодировка должна применяться. Это может создать некоторые риски для безопасности , поэтому не рискуйте и объявите кодировку символов одним из первых элементов в HTML-документе. head.
Вот синтаксис для объявления UTF-8 в качестве кодировки символов:
<meta charset="utf-8">
Assigning a Description, Keywords, and Authorship
The metaэлемент в сочетании с nameАтрибут можно использовать для создания метаданных уровня документа и присвоения имени этим данным. Полученные данные могут использоваться поисковыми системами в качестве подсказки для определения содержимого страницы. Вот синтаксис, используемый для создания описания, назначения ключевых слов и предоставления информации об авторстве.
<meta name="description" content="A short description of the website or of the organization behind the website can be added here and will be used by some search engines and web browsers in a variety of different ways.">
<meta name="keywords" content="insert, relevant, keywords, separated, by, commas">
<meta name="author" content="Author Name">
В прошлом описание мета-уровня и ключевые слова были важным компонентом SEO. Хотя на самом деле это уже не так — поисковые системы стали намного умнее за последние несколько лет — по-прежнему важно предоставить хорошее описание и релевантные ключевые слова. Они могут отображаться в разных местах в зависимости от используемого вами веб-браузера и поисковых систем, которые индексируют ваш сайт.
Предоставление инструкций браузеру
The http-equivатрибут может быть применен к metaтег, чтобы заставить веб-браузер автоматически обновлять или перенаправлять через несколько секунд.
Сегодня многие веб-сайты основаны на пользовательском контенте, который постоянно обновляется. Например, каждый веб-сайт социальной сети, который вы посещаете, отображает сайт, заполненный контентом, отправленным вашими контактами в социальных сетях. Весь этот контент постоянно обновляется, и новый контент готов к регулярному отображению. В прошлом было распространено использование http-equivчтобы заставить веб-страницу периодически обновляться, чтобы получать обновленный контент. Однако сегодня подобные манипуляции с браузером посетителя не рекомендуются.
Другой путь http-equivиногда используется для перенаправления пользователей с устаревшей или устаревшей веб-страницы на новую веб-страницу. Однако это также теперь не одобряется, и веб-мастера или разработчики должны использовать перенаправление сервера 301 для постоянных перенаправлений или перенаправление сервера 302 для временных перенаправлений.
Если вы обнаружите, что у вас есть законный вариант использования возможности принудительного перенаправления или обновления браузера, вы можете использовать следующий синтаксис, чтобы это произошло:
<meta http-equiv="refresh" content="5; url=http://www.example.com">
Этот код скажет браузеру перенаправить посетителя веб-сайта на www.example.com через пять секунд. Если URL-адрес не указан, то текущая страница обновляется через интервал времени, указанный в поле contentатрибут (пять секунд в данном случае).
Превращение веб-сайта в общедоступный объект социальной сети
Когда вы делитесь веб-сайтом в социальных сетях, происходит одно из двух:
- Сайт социальной сети просканирует сайт и найдет некоторые релевантные metaтеги, сообщающие ему, что отображать.
- Сайт социальной сети просканирует сайт, но не найдет нужные теги и либо покажет очень мало информации, либо автоматически сгенерирует заголовок, фотографию и фрагмент текста.
Для дизайнера, разработчика или владельца веб-сайта ценность возможности сообщить сайтам социальных сетей именно то, что вы хотите, чтобы они сказали о вашем веб-сайте, должна быть очевидной.
Open Graph — это протокол, используемый для определения того, как ваш сайт должен выглядеть при публикации в социальных сетях. Это довольно просто, и если мы говорим о веб-сайте, вам действительно нужно указать только четыре элемента: заголовок, URL-адрес, описание и избранное изображение.
Вот синтаксис для определения каждого из этих элементов.
<meta property="og:title" content="Title of blog post or page">
<meta property="og:url" content="http://www.example.com">
<meta property="og:description" content="A good description around 300 characters long.">
<meta property="og:image" content="http://www.example.com/image-name.jpg">
С Open Graph можно сделать гораздо больше, и вы можете узнать больше о дополнительных полях, которые вы можете использовать для дальнейшего определения того, как ваш сайт будет отображаться на сайтах социальных сетей, использующих Open Graph, посетив веб-сайт Open Graph .
Twitter использует собственный синтаксис, но будет использовать контент Open Graph, если не сможет найти metaтеги с информацией, которую он ищет. Поскольку в Твиттере меньше символов, рекомендуется использовать теги Твиттера отдельно, чтобы ваша страница выглядела как можно лучше при публикации в Твиттере.
Основные поля, которые вам нужно включить, очень похожи на поля, необходимые для Open Graph, с одним примечательным отличием.
<meta name="twitter:title" content="Blog post or page title">
<meta name="twitter:url" content="http://www.example.com">
<meta name="twitter:site" content="@Twitter_username" />
<meta name="twitter:description" content="A good description limited to 200 characters.">
<meta name="twitter:image" content="http://www.example.com/image-name.jpg">
При добавлении metaинформацию для Twitter, чтобы использовать, когда веб-страница твитится, не забудьте включить name="twitter:site"и имя пользователя в Твиттере, которому следует указать авторство твита. Опять же, с карточками Twitter можно сделать намного больше, и документация для разработчиков Twitter поможет вам создать идеальную карточку Twitter.
Это не так сложно, как кажется
Если вы новичок в идее использования HTML headэлемент для общения с веб-браузерами и поисковыми системами, возможно, вы сейчас чувствуете себя немного подавленным. Задача выяснить, как добавить все эти теги на каждую страницу вашего сайта, несомненно, сложна. Однако есть хорошие новости! По всей вероятности, если вы создали свой сайт с помощью CMS или конструктора веб-сайтов, ваш сайт, вероятно, уже содержит многие из этих элементов. А если это не так, есть плагины, которые помогут вам добавить эти теги на вашу веб-страницу.
Поскольку большинство тегов, которые мы рассмотрели, имеют последствия для SEO, хорошие плагины SEO для ведущих CMS позаботятся о большинстве тегов, которые мы определили в этом руководстве. Начните с изучения лучших SEO-плагинов на основе вашей системы управления контентом или платформы веб-сайта. После того, как вы установили, активировали и правильно настроили SEO-плагин, взгляните на свой документ. head, определите дополнительные проблемы и найдите дополнительные плагины или расширения, которые точно определяют, что вы видите в своем документе. head элемент.