Head, мета-теги и Open Graph

Head — невидимая часть HTML-страницы: кодировка, viewport, title, description и теги Open Graph, из которых мессенджеры строят карточку ссылки.

То, чего не видно

Откройте любую страницу, нажмите Ctrl+U (в большинстве браузеров это «показать исходный код») и посмотрите в начало. Там, в элементе <head>, десятки строк, которых вы на экране не увидите. Это сведения о странице: для браузера, для поисковика, для мессенджера, в который вы кинули ссылку. Хороший head невидим, пока всё в порядке, и сразу заметен, когда он не заполнен: ссылка выглядит голой, страница мелкая, русские буквы превратились в знаки вопроса.

В эпохе 2014 года сайт перестал быть только «страницей в браузере». Его шарят в соцсетях и мессенджерах, смотрят на телефоне, ищут в поиске. И каждому из этих читателей head говорит что-то своё.

Что обязательно

Кодировка. <meta charset="utf-8"> это первая строка в head. Она говорит, как читать байты текста. Без неё русские буквы могут превратиться в «кракозябры», как в 1990-х. UTF-8 это кодировка, которой хватает на все языки, и её давно используют везде.

Viewport. <meta name="viewport" content="width=device-width, initial-scale=1"> говорит телефону: ширина страницы равна ширине экрана. Без неё телефон предположит, что сайт рассчитан на экран шириной около 980 пикселей, и уменьшит его целиком: мелко, и адаптивная вёрстка не сработает. Эту строку ввёл Apple для первого iPhone в 2007 году, и теперь её читают все.

Название. <title> это то, что видно на вкладке, в закладках и в заголовке результата поиска. Правила: у каждой страницы своё, главное в начале, около 60 знаков (дальше поиск режет), название проекта в конце или в начале, но не пустое «Главная».

Описание. <meta name="description" content="…"> это текст, который поисковик может показать под заголовком. На позицию страницы он напрямую не влияет, но влияет на то, кликнет ли человек. Пишите его для человека: кто вы, для кого, что он получит. 50–160 знаков. Поисковик может заменить ваш текст своим, если сочтёт его подходящим к запросу.

Канонический адрес. <link rel="canonical" href="https://…"> говорит поисковику, какой из нескольких адресов одной страницы главный (с www и без, со слэшем в конце и без).

Значок. <link rel="icon" href="…"> это маленькая картинка во вкладке. SVG-значок хорош тем, что остаётся чётким и весит несколько сот байт.

Проверьте себя: что будет без viewport?

Телефон будет считать, что экран шириной около 980 пикселей, и уменьшит страницу. Текст станет мелким, адаптивные стили не сработают.

Open Graph: как выглядит ваша ссылка

Когда вы вставляете ссылку в Telegram, ВКонтакте или WhatsApp, мессенджер сам заходит на страницу и строит карточку: картинку, заголовок и пару строк. Откуда он берёт их? Из тегов Open Graph. Это соглашение придумал Facebook в 2010 году, и теперь его читают почти все. Теги имеют вид <meta property="og:…" content="…">:

• og:title это заголовок карточки;
• og:description это подпись;
• og:image это картинка, обычно 1200 × 630 пикселей; адрес должен быть полным, с https://, потому что превью строит чужой сервер;
• og:type это вид страницы, чаще всего website;
• og:locale это язык в виде ru_RU;
• og:url и og:site_name это адрес и название сайта.

Если Open Graph нет, мессенджер возьмёт, что найдёт: заголовок страницы и первую попавшуюся картинку, а то и ничего. Результат может смущать. Мессенджеры запоминают превью надолго, поэтому после правки новая карточка появляется не сразу.

Поиграйте с тем, как одна и та же страница выглядит в трёх местах. Длина обрезается по-разному, и вся важная мысль должна уместиться в начале.

title description Кто вы, для кого и что человек получит. Одна-две фразы, в которых есть то, что ищут. og:title (если пусто, берётся title) og:description (если пусто, берётся description) og:image

Вкладка браузера

Название проекта — чем…

Поисковая выдача

zarechye.example

Название проекта — чем вы занимаетесь

Кто вы, для кого и что человек получит. Одна-две фразы, в которых есть то, что ищут.

Длина: title 37 (около 60 видно), description 84 (около 155–160).

Ссылка в мессенджере

картинка

zarechye.example

Название проекта — чем вы занимаетесь

Кто вы, для кого и что человек получит. Одна-две фразы, в которых есть то, что ищут.

Проверьте себя: почему адрес в og:image должен быть полным?

Превью строит чужой сервер, у которого нет вашей страницы. Относительный адрес ему ничего не скажет.

Практика

Заполните head своей страницы. Описание и название берите из брифа: в нём уже есть всё, что нужно (кто, для кого). Если вашего настоящего адреса сайта ещё нет, используйте условный https://zarechye.example/: он нужен, чтобы адреса в тегах были полными.

Заметьте, что значок во вкладке и картинка превью без файлов не загрузятся: предпросмотр не ходит в сеть. Ваша задача сейчас записать правильные теги.

Что было не так с 2014 годом

Теги описания и ключевых слов писали «для поисковика»: <meta name="keywords"> забивали сотней слов. Поисковики давно перестали его учитывать (Google заявил об этом в 2009 году), и сегодня этот тег просто мусор. Превью ссылок тоже поначалу были случайными: каждая соцсеть изобретала свои теги, пока Open Graph не стал общим языком. Сегодня правило простое: пишите для человека, который прочитает карточку, а не для робота.