Оценок: 1

Содержимое 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://webrazrab.ru/img.png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta property="og:image" content="https://webrazrab.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://webrazrab.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>