Html head - используемые элементы, правильные мета теги, примеры, код

03.10.2019 12:29

Для чего нужен HTML-тег head

Теги верхнего уровня <head /> и <body /> являются обязательными элементами веб-страницы и формируют ее структуру. В общих чертах разметка любого html-документа выглядит следующим образом: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
</head>
<body>
    <p>Содержимое страницы</p>
</body>
</html>

Как видно выше, тег <head /> содержит метаданные о странице, а тег <body /> - непосредственно содержимое страницы. Информация внутри <head /> не видна пользователю (за исключением <title />, но об этом позже), зато активно используется:

  • роботами в процессе индексации вашего сайта,
  • соц. сетями и месседжерами, когда кто-то шарит страницу вашего сайта,
  • ну и конечно, самим браузером в процессе отрисовки страницы.

Какие теги помещаются между тегами <head> … </head>

В <head /> разрешается добавлять следующие теги title, meta, link, style, script, noscript, и base. Наличие любого из них является опциональным. Даже если <head /> будет пустым или вообще отсутствовать, браузер сможет отрисовать страницу, правда, выглядеть она скорее всего будет не очень.

Вот минимум, который стоит включать в каждую страницу

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Заголовок страницы</title>

Обычно <head /> выглядит примерно так:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Заголовок страницы</title>

<base href="https://site.com/page">

<link rel="icon" sizes="192x192" href="https://site.com/favicon.png">
<link rel="stylesheet" href="https://site.com/css/style.css">
<style>
    body {
        font-size: 14px;
    }
</style>

<script src="https://site.com/js/script.js"></script>
<script>
    alert('Lorem ipsum');
</script>

<noscript>
    <link rel="stylesheet" href="https://site.com/css/no-js.css">
</noscript>

Давайте теперь более подробно рассмотрим каждый тег...

Тег <title />

Этот тег определяет заголовок страницы, текст который вводится на вкладке браузера рядом с фавиконом (который, кстати тоже задается внутри тега <head />, но об этом чуть позже).

Кроме того, поисковые системы очень часто используют значение тега <title /> в качестве заголовка поискового сниппета, поэтому этот тег - абсолютный “мастхэв”.

Вот некоторые рекомендации по поводу заголовка страницы:

  • Следите за количеством символов (лучше не больше 50-60)
  • Не борщите с ключевиками
  • Помещайте основную ключевую фразу в начало заголовка
<title>Основная ключевая фраза - дополнительная фраза | Название сайта</title>

Тег <meta>

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

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

<meta> не имеет закрывающего тега и имеет следующие атрибуты:

  • charset - кодировка страницы
  • name - название метаданных, которые содержатся в данном теге
  • http-equiv - формат ответа сервера
  • content - само значение

Атрибуты name и http-equiv являются взаимоисключающими и не могут вместе находиться в одном теге.

Итак основная <meta>

<!--
    Кодировка документа. Лучше всего использовать универсальную - UTF-8.
    В ней корректно отображаются латинский алфавит, кириллические символы, иероглифы и эмодзи
-->
<meta charset="utf-8">

<!--
    Сообщаем браузеру, что ширина страницы определяется шириной экрана. Таким образом, независимо от того, на каком
    устройстве пользователь просматривает ваш сайт, ширина страницы будет совпадать с шириной экрана устройства
-->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--
    Короткое (не более 150 символов) описание контента страницы.
    Может быть использовано в сниппете поисковых систем
-->
<meta name="description" content="Описание того, что содержится на странице">

Как использовать meta name viewport?

Viewport - это размер видимой области страницы. Он, понятное дело, сильно отличается в зависимости от размера экрана устройства, на котором пользователь просматривает ваш сайт.

Если вы не используете meta name=viewport в разметке страницы, то скорее всего мобильный браузер просто уменьшит ее для того чтобы впихнуть в границы экрана. Контент на странице станет трудночитаемым и пользователю придется увеличивать части страницы и бесконечно скроллить, чтобы что-то разглядеть. Не айс.

Для решения этой проблемы используйте приведенный ниже код 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width сообщает браузеру о том, что ширина страницы должна быть привязана к ширине экрана устройства.

initial-scale=1.0 устанавливает начальный уровень зума.

Это все, конечно, здорово, но для того, чтобы сайт одинаково хорошо смотрелся на всех устройствах не достаточно. Нужно также максимально отказаться от фиксированных размеров элементов страницы и использовать media queries в CSS.

Обо всем этом в рамках данной статьи рассказать не получится. Обещаю посвятить теме адаптивного дизайна отдельную статью.

Дополнительная <meta>

<!--
    Рекомендуемый цвет окна браузера, когда в нем открыта вкладка с этой страницей.
    К сожалению, пока это актуально только для Chrome на Android, а также дефолтном браузере Samsung
-->
<meta name="theme-color" content="#51adf6">

<!-- Рекомендация Google не переводить содержимое страницы -->
<meta name="google" content="notranslate">

<!-- Подтверждение владения сайтом -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->

<!--
    Определение гео-данных. Может быть полезно, если ваш сайт нацелен на опреденный регион.
    Эта информация может быть использована поисковиками при формировании выдачи.
-->
<meta name="ICBM" content="55.7563885286146,37.61566760038"><!-- В формате широта, долгота -->
<meta name="geo.position" content="55.7563885286146,37.61566760038"><!-- В формате широта, долгота -->
<meta name="geo.region" content="RU"><!-- Код страны согласно стандарту ISO 3166 -->
<meta name="geo.placename" content="Moscow">

Это далеко не полный список того, что можно указать при помощи тега <meta />. Например, можно еще "сформировать" сниппет для шаринга страницы в соц. сетях и мессенджерах. Подробнее об этом смотрите в конце этой статьи.

Что такое meta http-equiv?

Мета-теги с атрибутом http-equiv - довольно сложная для восприятия тема. Говоря простым языком, при помощи таких тегов можно передавать браузеру информацию о том, как следует обрабатывать страницу в формате заголовка ответа сервера.

При помощи тегов <meta> с атрибутом http-equiv можно, например, обновлять страницу или перенаправлять на другую

<!-- Обновление страницы через 5 минут -->
<meta http-equiv="refresh" content="300">

<!-- Перенаправление на https://site.com через 10 секунд -->
<meta http-equiv="refresh" content="10;URL='https://site.com/'" />

В HTML5 большая часть meta http-equiv не поддерживается (set-cookie, expires).

Тег <link>

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

<link> также не имеет закрывающего тега и его параметры передаются в виде атрибутов.

Ниже приведены наиболее распространенные примеры использования тега <link>:

<!-- Подключение внешнего CSS-файла -->
<link rel="stylesheet" href="https://site.com/css/style.css">

<!-- Подключение фавиконки -->
<link rel="icon" sizes="192x192" href="https://site.com/favicon.png">

<!--
    Определение канонического URL. Таким образом можно сообщить поисковым роботам о том,
    что указанная страница (например, https://site.com/posts/post1234) является "первоисточником",
    а другие страницы со схожим контентом (например, https://site.com/posts/post1234?from=search) - это ее вариации.
    Это позволит избежать проблем с попаданием в индекс дублей, а также передавать весь "вес" неканонических URLов
    каноническим.
-->
<link rel="canonical" href="https://site.com/posts/post-1234">

<!--
    Альтернативные версии страницы (например, на другом языке, или для других устройств)
-->
<link rel="alternate" href="https://en.example.com/" hreflang="en">
<link rel="alternate" media="only screen and (max-width: 640px)"  href="http://m.site.com/">

Вот еще несколько примеров использования <link>

<!--
    Ссылка на страницу, которая находится выше данной в иерархической структуре,
    т.е. является родительской страницей
-->
<link rel="index" href="https://site.com/top-level/">

<!--
    Ссылки на первую, последнюю, предыдущую, следующую страницы (соответственно)
    в серии страниц
-->
<link rel="first" href="https://site.com/page/1">
<link rel="last" href="https://site.com/page/30">
<link rel="prev" href="https://site.com/page/5">
<link rel="next" href="https://site.com/page/7">

<!-- Ссылки на RSS-фиды -->
<link rel="alternate" href="https://feeds.feedburner.com/site" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://site.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Предзагрузка контента на странице для оптимизации скорости загрузки -->
<link rel="dns-prefetch" href="https://site.com/">
<link rel="preconnect" href="https://site.com/">
<link rel="prefetch" href="https://site.com/">
<link rel="prerender" href="https://site.com/">
<link rel="preload" href="https://site.com/image.png" as="image">
<!-- ### Если вам интересно узнать об этом подробнее, напишите в комментариях ### -->

Тег <style />

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

Этот тег может быть использован в разметке страницы неоднократно, и его можно помещать не только в <head />, но и в <body />.

<head>
    <style>
        body {
            background: #EFEFEF;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <style>
        #container {
            background: #000;
            font-size: 16px;
        }
    </style>
    <div id="container">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</body>

Тег <script />

Этот тег может использоваться как для вывода javascript-кода, так и для подключения внешних js-файлов. Во втором случае необходимо использовать атрибут src, при этом внутри тега не должно ничего быть.

<script src="https://site.com/js/jquery.js"></script>
<script>
    jQuery(document).ready(function($){
       $('body').append('<p>Lorem ipsum dolor sit amet</p>');
    });
</script>

Как и <style />, тег <script /> может быть использован в разметке страницы неоднократно, и его можно помещать не только в <head />, но и в <body />.

Тег <noscript />

Этот тег используется для вывода контента, который предназначен исключительно для браузеров, в которых отключена поддержка javascript. Это своеобразный контейнер, внутри которого можно размещать другие валидные в <head /> элементы: <meta>, <link>, <style />.

<head>
    <link rel="stylesheet" href="https://site.com/css/style.css">
    <noscript>
        <link rel="stylesheet" href="https://site.com/css/no-js.css">
    </noscript>
</head>

<body>
    <noscript>
        <style>
            #no-js {
                background: red;
                color: white;
                padding: 12px;
            }
        </style>
        <p id="no-js">Для корректной работы сайта, пожалуйста, включите в настройках браузера поддержку javascript</p>
    </noscript>
</body>

Если тег <noscript /> используется внутри <body />, в него можно помещать любой валидный HTML.

Тег <base>

Этот тег используется для указания базового URL для всех относительных путей на странице и/или дефолтного значения атрибута target ссылок на странице.

<head>
    <!-- Определение базовых параметров ссылок на странице -->
    <base href="https://site.com/" target="_blank">
</head>

<body>
    <!--
        Когда пользователь кликнет по этой ссылке, у него в новой вкладке откроется адрес
        https://site.com/pages/page-123
    -->
    <a href="pages/page-123">Какая-то страница</a>
</body>

Тег <base> может размещаться только в <head /> и должен быть только один. Наличие этого тега необязательно, если вы используете абсолютные пути.

Бонус: Микро разметка Open Graph для шаринга

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

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

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

<meta property="og:url" content="https://site.com/pages/page-123"> <!-- URL данной страницы -->
<meta property="og:type" content="website"> <!-- Тип контента (для страниц используйте тип website) -->
<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Краткое описание контента на странице">
<meta property="og:image" content="https://site.com/images/image.jpg"> <!-- Превью -->
<meta property="og:image:alt" content="Описание того, что изображено на превью">
<meta property="og:site_name" content="Название сайта">
<meta property="og:locale" content="ru_RU"> <!-- Язык контента на странице -->

Хотя изначально разметка Open Graph создавалась для Facebook, сейчас ее понимают большинство соц. сетей и мессенджеров, хотя интерпретируют ее немного по-своему.

Попробуйте поделиться этой статьей в различных соц. сетях и сравните сниппеты.

В заключение хочу подытожить все вышесказанное.

Тег <head /> является обязательным структурным элементом любого HTML-документа. Это своеобразный контейнер для тегов, которые описывают то, что находится в документе и как это нужно выводить (title, meta, style, base). Кроме того, в <head /> подключаются скрипты и стили, а также другие файлы необходимые для корректной отрисовки страницы (link, script).

Надеюсь, что эта статья была для вас полезной. Буду рад ответить на ваши вопросы в комментариях.

Комментарии

Оставьте свой комментарий

© 2024 SITEROST

Ничего не найдено