В данном материале попробуем подробно разобраться в структуре <head> HTML документа. Для чего и как используются разные мета-теги.
Ознакомиться с примером документа который мы будем разбирать, можно по этой ссылке.
Основа
<!DOCTYPE html>
Настройка совместимости, раньше этот элемент включал в себя множество настроек и определений. Сейчас достаточно указать эту короткую запись, чтобы браузер понял что, работает с обычной HTML страницей.
<html lang="ru" prefix="og: http://ogp.me/ns#">
Атрибут lang указывает основной используемый язык на странице. В prefix'е мы сообщаем о том что у нас используется Open graph разметка, но об этом чуть позже.
<meta charset="UTF-8" />
Определяем кодировку страницы, почти во всех случаях используем UTF-8. Особенно если не знаем что указывать :)
<meta name="viewport" content="width=device-width" />
Свойство viewport определяет область просмотра. В данном случае настройка width=device-width сообщает о том что, размер области просмотра равен ширине экрана устройства.
<title>Заголовок страницы</title>
<meta name="description" content="Описание страницы" />
Элементы описания страницы, как правило, должны быть уникальными. Нужны как для поисковиков (+СЕО) так и для удобства при навигации. Информация из title выводится в названии вкладки браузера и на панели задач windows.
<meta name="theme-color" content="# FF00FF" />
Настройка для мобильных устройств, позволяет задать цвет в интерфейсе браузера, например под свою цветовую палитру сайта.
Open graph разметка
Микро-разметка, в основном используется для формирования карточки страницы вашего сайта, когда вы например оставляете ссылку в соц. сетях или каких-то мессенджерах. Небольшой пример с соц. сети Вконтакте. Когда вы оставляете ссылку на стене, формируется карточка подобно этой. Также этой информацией могут пользоваться поисковые системы.
<meta property="og:title" content="Заголовок страницы - Мой сайт" />
Уникальный заголовок страницы, оптимальный размер ~65 символов.
<meta property="og:description" content="Описание страницы" />
Описание страницы. Оптимальный размер ~165 символов.
<meta property="og:image" content="https://example.com/image.jpg" />
Основное изображение вашей карточки. Размер рекомендуется использовать не менее 600×315.
<meta property="og:image:alt" content="Описание изображения" />
Необязательный элемент, используется для описания изображения карточки.
<meta property="og:locale" content="ru_RU" />
Необязательный элемент, указывает на используемый язык текущей страницы.
<meta property="og:type" content="website" />
og:type нужен для определения типа контента, в большинстве случаев можно использовать по стандарту website. Почитать подробнее про типы можно тут.
<meta property="og:url" content="https://example.com/page" />
Адрес текущей страницы сайта.
Link элементы
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
Иконка для сайта, в первом элементе используется для устаревших браузеров, минимальный размер 32 пикселя и формат ICO. Второй элемент, это уже формат svg необходим для всего остального (поисковики, современные браузеры, ...) SVG хорошо масштабируемый и имеет небольшой размер.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
Иконки для устройств от Apple, в первом варианте достаточно добавить одно изображение размером 180x180px, Также можно добавлять иконки в произвольном размере, регулируя их через атрибут sizes.
<link rel="stylesheet" href="/assets/css/styles.css" />
<link rel="stylesheet" href="/assets/css/print.css" media="print" />
Тут все просто, подключаем стили. Вариант с атрибутом media="print" - нужен для печатной версии сайта.
<link rel="preconnect" href="//fonts.googleapis.com" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
Пример подключения сторонних шрифтов. В данном случае с googleapis.com Первый элемент с атрибутом rel="preconnect" необходим для установки соединения с нужным ресурсом, до того момента как будет сделан HTTP запрос. Проще говоря, это чуть ускорит загрузку данных.
<link rel="manifest" href="/my.webmanifest" />
В основном этот элемент нужен для PWA сайтов, содержит в себе настройки для Android устройств.