Содержимое HEAD, метатеги

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

Мета теги

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

<head>
<meta charset="UTF-8">
<title>Заголовок</title>
<meta name="description" content="описание">
<meta name="keywords" content="ключи">
</head>
  • charset - кодировка страницы. Хотя браузеры и сами неплохо ее определяют, лучше этот тэг указать. Во первых определять могут не все браузеры, во вторых есть множество других сервисов, некоторые из которых могут не прочесть содержимое страницы.
  • title - заголовок страницы для поисковиков, браузера. Его пользователь может увидеть на вкладке браузера. Именно этот заголовок чаще всего используют поисковики в выдаче, хотя могут взять и любой другой, со страницы.
  • description - описание страницы, обычно именно то, что вы укажите здесь, будет выдаваться поисковой машиной. Описание должно быть четким, и ярким, не надо писать его прописными буквами, так как хорошие поисковики могут посчитать это спамом. Кстати это не значит, что мета тег обязателен, часто хорошего и качественного заголовка хватает, но если речь идет об основных страницах - лучше постараться.
  • keywords - ключевые слова, с помощью них поисковик выдает результаты запросов. В настоящиее время для поисковиков keywords не имеет значения и воспринимается просто как часть содержимого страницы

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

Есть и другие виды метаданных, к примеру протокол Open Graph, для передачи информации о странице в facebook и не только

<meta property="og:image" content="image.jpg">
<meta property="og:description" content="описание">
<meta property="og:title" content="Заголовок">

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

Иконки, изображения

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

Favicon

Фавикон - иконка для браузера, так же отображается в результатах выдачи поисковиков. Может быть указана в формате в формате .ico (старые браузеры поддерживают только такой формат), .gif или .png

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

или так (можно указать оба варианта)

<link rel="icon" type="image/png" href="icon.png">

Иконки для различных устройств

Сразу хочу заметить, здесь для примера несколько вариантов, что бы иметь представление, могут добавляться и другие. Указываются до обычного favicon

Для iPad 3 с Retina-экраном высокого разрешения:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="iconka-144.png">

Для iPhone с Retina-экраном высокого разрешения:

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="iconka-114.png">

Для iPad первого и второго поколения:

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="iconka-75.png">

Для iPhone, iPod Touch без Retina, и устройств с Android 2.1+:

<link rel="apple-touch-icon-precomposed" href="iconka.png">

Изображения для социальных сетей

Таких изображений может быть несколько, с разными размерами.

<link rel="image_src" href="img.png">

Используется для указания иконки/изображения страницы для соцсетей, минимальная ширина - 400px. Вообще что касается размеров изображений для соцсетей и браузеров - они могут меняться. Если это для вас важно - лучше следить за актуальностью. Ссылки на изображения лучше использовать абсолютные (с доменом и протоколом). Пример:

<meta property="og:image" content="https://httpmaster.ru/img.png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta property="og:image" content="https://httpmaster.ru/img2.png">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="300">
<meta name="twitter:image:src" content="http://example.com/img.png">

Изображение для микроразметки

Так же можно указать в HEAD, как и некоторые другие данные микроразметки

<meta itemprop="image" content="https://httpmaster.ru/img.png"

Кроме того в тэгах OG можно указть видео, аудио. Подробно на этом останавливаться не буду, тема немного другая

Скрипты и таблицы стилей

Все что выше - хорошо, но странице еще нужно придать какой то внешний вид, обеспечить взаимодействие с пользователем. Для этого нужно подкличить css и js файлы, и/или прописать некоторые скрипты и стили непосредственно в часть head. Сразу хочу отметить, что современные браузеры прекрасно понимают стили/скрипты в любой части страницы, что часто используется для получения более высоких оценок в google page speed.

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

<link rel="stylesheet" href="style-file.css">
<style>
.cls {background: #fff;}
</style>
<script src="script-file.js"></script>
<script type="text/javascript">
alert('privet');
</script>

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

Похожих не нашлось :(

Комментарии ()