Open Graph метаданные для соц.сетей [Модуль 10: Метаданные и head]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Вы когда-нибудь задумывались, почему, когда вы делитесь ссылкой в мессенджере или соцсети, она превращается в красивую карточку с заголовком, описанием и картинкой? За эту 'магию' отвечает протокол Open Graph. Он позволяет веб-разработчикам контролировать, как их контент будет выглядеть при репосте. Это делается с помощью набора специальных `<meta>` тегов, которые размещаются в `<head>`. В этих заданиях мы на практике разберем синтаксис OG-тегов: научимся задавать заголовок, описание, тип контента и, конечно же, картинку для превью. Эти знания помогут сделать ваши ссылки привлекательными и информативными.

Список тем

Основной атрибут для Open Graph

id: 37897_og-meta-01

Для разметки Open Graph используется тот же тег `<meta>`, что и для SEO, но с одним ключевым отличием: вместо атрибута `name` для указания типа данных используется другой атрибут. Вставьте его имя, чтобы задать заголовок для будущего превью в соцсетях.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
.info {
  background: #f0f8ff;
  border-left: 4px solid #4682b4;
  padding: 10px;
}

                     <head>
  <title>OG Разметка</title>
  <meta input1="og:title" content="Заголовок для соцсетей">
</head>
<body>
  <p class="info">Эти данные не видны на странице, но их увидят роботы соцсетей.</p>
</body>

HTML

<head>
  <title>OG Разметка</title>
  <meta input1="og:title" content="Заголовок для соцсетей">
</head>
<body>
  <p class="info">Эти данные не видны на странице, но их увидят роботы соцсетей.</p>
</body>

Для метаданных Open Graph используется атрибут `property` вместо привычного `name`. Это основное синтаксическое отличие, которое нужно запомнить.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Заголовок для репоста

id: 37897_og-meta-02

Заголовок — первое, что видят пользователи при репосте вашей ссылки. Он задается с помощью свойства `og:title`. Ваша задача — правильно составить имя этого свойства, заполнив пропущенный префикс.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}

                     <head>
  <title>Заголовок</title>
  <meta property="input1:title" content="Лучшие рецепты пирогов">
</head>
<body>
  <h1>Кулинарный блог</h1>
  <p>Этот заголовок увидят соцсети.</p>
</body>

HTML

<head>
  <title>Заголовок</title>
  <meta property="input1:title" content="Лучшие рецепты пирогов">
</head>
<body>
  <h1>Кулинарный блог</h1>
  <p>Этот заголовок увидят соцсети.</p>
</body>

Все свойства протокола Open Graph начинаются с префикса `og:`, за которым следует имя самого свойства. В данном случае это `og:title`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Тип контента

id: 37897_og-meta-03

Чтобы помочь соцсетям лучше понять, что представляет собой ваша страница (это обычный сайт, статья, видео?), используется свойство `og:type`. Для обычной веб-страницы используется определенное значение. Укажите его.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}

                     <head>
  <title>Тип контента</title>
  <meta property="og:title" content="Главная страница">
  <meta property="og:type" content="input1">
</head>
<body>
  <p>Мы указали, что это обычная веб-страница.</p>
</body>

HTML

<head>
  <title>Тип контента</title>
  <meta property="og:title" content="Главная страница">
  <meta property="og:type" content="input1">
</head>
<body>
  <p>Мы указали, что это обычная веб-страница.</p>
</body>

Для стандартной веб-страницы в качестве значения для `og:type` используется `website`. Другие популярные значения — `article`, `video.movie` и т.д.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Картинка для превью

id: 37897_og-meta-04

Визуальная составляющая очень важна. Чтобы при репосте отображалась красивая картинка, используется свойство `og:image`. Укажите полное имя этого свойства в атрибуте `property`.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
img {
  max-width: 100%;
  border: 2px solid #ccc;
}

                     <head>
  <title>Картинка</title>
  <meta property="input1" content="https://naytikurs.ru/img/4j.jpeg">
</head>
<body>
  <p>Эта картинка будет в превью:</p>
  <img src="https://naytikurs.ru/img/4j.jpeg" alt="Превью">
</body>

HTML

<head>
  <title>Картинка</title>
  <meta property="input1" content="https://naytikurs.ru/img/4j.jpeg">
</head>
<body>
  <p>Эта картинка будет в превью:</p>
  <img src="https://naytikurs.ru/img/4j.jpeg" alt="Превью">
</body>

Свойство для указания URL-адреса изображения для превью называется `og:image`. В атрибуте `content` указывается прямая ссылка на картинку.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Заголовок и Описание

id: 37897_og-meta-05

Помимо заголовка, для превью также используется короткое описание. Оно задается через свойство `og:description`. В этом задании вам нужно указать свойства и для заголовка, и для описания.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}

                     <head>
  <title>Полное превью</title>
  <meta property="input1" content="Увлекательное путешествие">
  <meta property="input2" content="Узнайте все о путешествиях по экзотическим странам!">
</head>
<body>
  <h1>Путешествия</h1>
  <p>Заголовок и описание для соцсетей готовы.</p>
</body>

HTML

<head>
  <title>Полное превью</title>
  <meta property="input1" content="Увлекательное путешествие">
  <meta property="input2" content="Узнайте все о путешествиях по экзотическим странам!">
</head>
<body>
  <h1>Путешествия</h1>
  <p>Заголовок и описание для соцсетей готовы.</p>
</body>

Вам нужно заполнить два свойства: `og:title` для заголовка и `og:description` для описания. Оба используют атрибут `property`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Уточнение размеров картинки

id: 37897_og-meta-06

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

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}

                     <head>
  <title>Размеры картинки</title>
  <meta property="og:image" content="https://naytikurs.ru/img/1.png">
  <meta property="input1" content="300">
  <meta property="input2" content="300">
</head>
<body>
  <p>Мы подсказали соцсетям, что картинка квадратная.</p>
</body>

HTML

<head>
  <title>Размеры картинки</title>
  <meta property="og:image" content="https://naytikurs.ru/img/1.png">
  <meta property="input1" content="300">
  <meta property="input2" content="300">
</head>
<body>
  <p>Мы подсказали соцсетям, что картинка квадратная.</p>
</body>

Для указания размеров используются свойства `og:image:width` и `og:image:height`. Обратите внимание на двоеточия в названии — это часть синтаксиса структурированных свойств.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Полный набор Open Graph

id: 37897_og-meta-07

Давайте соберем все основные OG-теги вместе. Вам нужно заполнить пропуски для четырех ключевых свойств: заголовок, тип, URL страницы и изображение. Это базовый набор, который должен быть на большинстве страниц.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background: #fdf5e6;
}

                     <head>
  <title>Финальная проверка</title>
  <meta property="input1" content="Итоговое задание">
  <meta property="input2" content="website">
  <meta property="input3" content="https://naytikurs.ru/page.html">
  <meta property="input4" content="https://naytikurs.ru/img/8.png">
</head>
<body>
  <p>Весь базовый набор Open Graph тегов готов!</p>
</body>

HTML

<head>
  <title>Финальная проверка</title>
  <meta property="input1" content="Итоговое задание">
  <meta property="input2" content="website">
  <meta property="input3" content="https://naytikurs.ru/page.html">
  <meta property="input4" content="https://naytikurs.ru/img/8.png">
</head>
<body>
  <p>Весь базовый набор Open Graph тегов готов!</p>
</body>

Вам нужно последовательно указать четыре свойства: `og:title`, `og:type`, `og:url` (для канонической ссылки на страницу) и `og:image`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку