Open Graph: карточки в соцсетях

Разметка для превью ссылок: заголовок, описание, картинка при шаринге.

Уровень: начальный 10 разделов 12 минут

1. Что это и зачем

Разметка для превью ссылок: заголовок, описание, картинка при шаринге.

Кроме отдельных тегов, в HTML есть приёмы и правила организации разметки: как связать страницы, как разметить данные для поисковиков, как оформить метаданные документа. Это не синтаксис, а договорённости, по которым сайт понимают и браузер, и поисковая система, и другие люди.

{title} — это договорённость, а не «магия»: понимая структуру, вы предсказываете, как контент поведут и браузер, и роботы.

2. Синтаксис и пример

<meta property="og:title" content="Название"><meta property="og:image" content="https://site.ru/preview.png">

Запись выше — базовый вариант использования. Обратите внимание, как open graph: карточки в соцсетях вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Большинство приёмов — прогрессивные улучшения: базовая разметка работает без них, а добавление метаданных или схемы делает страницу богаче без потери совместимости.

В реальной разметке open graph: карточки в соцсетях встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

Кроме отдельных тегов, в HTML есть приёмы и правила организации разметки: как связать страницы, как разметить данные для поисковиков, как оформить метаданные документа. Это не синтаксис, а договорённости, по которым сайт понимают и браузер, и поисковая система, и другие люди.

{title} — это договорённость, а не «магия»: понимая структуру, вы предсказываете, как контент поведут и браузер, и роботы.
Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Метаданные и разметка данных безопасны: браузеры их игнорируют, если не знают, а поисковые системы используют как подсказку. Поэтому добавлять их можно без страха «сломать» страницу.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

og:image с абсолютным URL и большим разрешением даёт красивую карточку.
Без og ссылка выглядит скучно в мессенджере и соцсети.

7. Практическое задание

Добавьте og-разметку на главную страницу.

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

8. Как применять в проектах

Приёмы применяются на уровне всего сайта: общие метаданные в head, согласованные URL, структура данных в JSON-LD. Один раз настроив конвенции, дальше просто следуете им в каждой новой странице.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам