OpenGraph og:title og:description og:image
Управляйте видом страницы при публикации в социальных сетях
«OpenGraph og:title og:description og:image» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Что такое OpenGraph
OpenGraph — это протокол метаданных, представленный Facebook, который позволяет любой странице описать, как она должна выглядеть при публикации в социальной сети. Теги находятся в <head> в виде пар <meta property="og:..." content="...">, и их обрабатывают все основные социальные сети.
Основные теги
Четыре практически обязательных тега — это og:title, og:description, og:image и og:url. Отсутствие любого из них приводит к непривлекательной карточке публикации или, что ещё хуже, к карточке без превью, которую пользователи обычно пропускают.
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
Заголовок на карточке публикации. Ограничьте его примерно 60 символами, чтобы он помещался в одну строку и социальная сеть его не обрезала. Сопоставьте его с <title> страницы, но при необходимости оптимизируйте для повышения числа переходов.
og:description
Краткое описание из одного-двух предложений, отображаемое под заголовком. Стремитесь к 120–160 символам: этого достаточно, чтобы заинтересовать читателя, и при этом описание полностью отображается на любой платформе. Избегайте кликбейта: честные описания обеспечивают более устойчивую вовлечённость.
og:image
Главное изображение. Используйте JPG или PNG размером 1200x630 пикселей (примерно до 5 MB). Всегда указывайте абсолютный URL: относительные URL не работают, поскольку у средства сбора данных нет понятия о «текущей странице». Укажите og:image:width и og:image:height, чтобы при создании превью не требовался дополнительный запрос.
og:url
Канонический URL страницы. Указывайте его даже тогда, когда на странице уже есть <link rel="canonical">: некоторые средства сбора данных предпочитают тег OG. Удаляйте параметры отслеживания, чтобы опубликованные URL не превращались в базе данных социальной сети во множество «разных» страниц.
og:type
Сообщает платформе, что это за тип содержимого: "website", "article", "product", "video.movie", "book" и так далее. Тип article чаще всего выбирают для публикаций в блоге; он открывает доступ к дополнительным тегам, таким как article:published_time и article:author.
og:locale
Локаль содержимого в формате BCP-47, например "en_US" или "tr_TR". В сочетании с og:locale:alternate она сообщает сети, на каких других языках доступна страница, и таким образом Facebook решает, следует ли переводить превью.
og:site_name
Отображаемое название сайта, публикующего материал. Некоторые сети показывают его как подзаголовок карточки. Делайте его коротким и одинаковым на всех страницах, чтобы бренд выглядел единообразно независимо от того, какая статья опубликована.
Тестирование карточек
Используйте Facebook Sharing Debugger и Post Inspector от LinkedIn, чтобы получить страницу так, как её видит средство сбора данных, просмотреть разобранные теги и обновить сохранённое превью. После публикации нового og:image необходимо повторно запустить сбор данных, иначе пользователи могут видеть старое изображение несколько дней.
Распространённые ошибки
Теги должны отображаться на сервере: большинство средств сбора данных не выполняют JavaScript, поэтому добавленные React на клиенте OG-теги им недоступны. Вставляйте их в исходный HTML, желательно используя SSR или SSG, иначе карточки публикаций навсегда останутся стандартными.
Проверка знаний
Почему og:image должен использовать абсолютный URL, а не относительный путь?
Итоги
Теги OpenGraph (og:title, og:description, og:image с абсолютным URL, og:url, og:type, og:locale, og:site_name) определяют внешний вид каждой страницы при публикации. Формируйте их на стороне сервера, ограничивайте заголовки 60 символами, описания — примерно 150 символами, используйте изображения 1200x630 и проверьте всё с помощью Facebook Sharing Debugger перед запуском.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 40
- Уроки
- 159
Часто задаваемые вопросы
Урок «OpenGraph og:title og:description og:image» бесплатный?
Да — полный текст урока «OpenGraph og:title og:description og:image» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «OpenGraph og:title og:description og:image»?
Управляйте видом страницы при публикации в социальных сетях Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «OpenGraph og:title og:description og:image»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- OpenGraph og:title og:description og:image
- Мета-теги карточки Twitter
- Основы структурированных данных JSON-LD
- Hreflang для международных страниц