На WordPress, Tilda, Wix и Shopify разметку обычно можно настроить через административную панель. Программист потребуется для самописного сайта, необычной темы или приложения, которое формирует страницы только после запуска JavaScript. В остальных случаях достаточно заполнить несколько полей, опубликовать страницу и обновить кэш платформы.
Как Open Graph формирует карточку ссылки
Open Graph создали в Facebook, чтобы веб-страницы можно было описывать как структурированные объекты. Сейчас протокол используют LinkedIn, Slack, Facebook и другие сервисы. Telegram и некоторые мессенджеры также извлекают похожие данные, хотя точный вид карточки каждая платформа определяет самостоятельно.
Метатеги размещаются внутри раздела <head>. Человек не видит их на странице, но робот платформы загружает HTML, читает свойства og: и собирает превью.
<meta property="og:title" content="Как выбрать домашний роутер">
<meta property="og:description" content="Разбираем Wi-Fi 6, диапазоны, порты и ошибки при покупке.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.ru/router-guide">
<meta property="og:image" content="https://example.ru/images/router-guide.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Домашний роутер и схема беспроводной сети">
<meta property="og:site_name" content="Название сайта">
<meta property="og:locale" content="ru_RU">Спецификация Open Graph называет обязательными четыре свойства.
| Тег | Назначение | Что указывать |
|---|---|---|
og:title |
Заголовок карточки | Понятное название материала без лишних повторов бренда |
og:type |
Тип объекта | article для статьи, website для главной страницы |
og:image |
Основное изображение | Полный HTTPS-адрес доступного файла |
og:url |
Основной адрес объекта | Постоянный URL без рекламных и аналитических параметров |
og:description, og:site_name и og:locale не входят в обязательную четверку, но помогают платформе точнее оформить карточку. Для изображения полезно добавить ширину, высоту, MIME-тип и og:image:alt.
Несколько тегов og:image не нарушают спецификацию. Open Graph разрешает перечислить несколько вариантов и отдает приоритет первому изображению. Ошибка возникает, когда тема и два плагина независимо выводят разные карточки в случайном порядке.
Open Graph не заменяет HTML-тег <title>, обычное метаописание и Schema.org. Метатеги решают разные задачи. Google может взять текст поискового сниппета из содержимого страницы или description, что объясняется в документации Google Search Central.
Open Graph не заявлен как отдельный фактор ранжирования. При этом с марта 2026 года Google использует og:image вместе со Schema.org при выборе миниатюры в поиске и Discover. Поэтому разметка может влиять на внешний вид результата, но не гарантирует более высокую позицию.
Как настроить Open Graph без кода
Сначала проверьте, не создает ли сайт разметку автоматически. Откройте опубликованную страницу, нажмите Ctrl+U и найдите og:title или og:image. В браузерах на macOS просмотр исходного кода обычно вызывается сочетанием Command+Option+U.
Наличие тегов еще не подтверждает правильную настройку. Проверьте заголовок, описание, URL картинки и отсутствие неожиданного логотипа перед нужной обложкой.
WordPress
Для WordPress достаточно одного SEO-плагина. Yoast SEO, Rank Math, All in One SEO и SEOPress умеют создавать Open Graph без редактирования темы. В Yoast откройте запись или страницу, разверните раздел Social media appearance и задайте изображение, заголовок и описание. Текущий порядок действий опубликован в справке Yoast.
Не ставьте отдельный плагин Open Graph поверх SEO-плагина без причины. Сначала откройте исходный код и посмотрите, какие теги уже выводятся. Допустимый массив изображений выглядит нормально, но два разных заголовка и два разных основных URL говорят о конфликте.
Tilda
Откройте настройки страницы, выберите раздел Social Media и настройку превью. Заполните название ссылки, описание и загрузите бейдж. Если поля пусты, Tilda берет данные из общих настроек, а при отсутствии бейджа может использовать первое изображение страницы. После изменений страницу нужно опубликовать заново. Порядок описан в справке Tilda.
Wix
Wix автоматически добавляет Open Graph на страницы. Отдельные значения можно изменить в настройках SEO и Social Share. Для всего сайта также задается резервное изображение og:image. Wix описывает автоматическую разметку в разделе про стандартные настройки SEO.
Shopify
Бесплатные темы Shopify используют Open Graph по умолчанию. Магазин берет изображения товаров, коллекций и записей блога из соответствующих объектов, а общую резервную картинку можно задать в настройках темы или интернет-магазина. Точный путь зависит от версии темы. Поддержку разметки подтверждает Shopify Help Center.
X
X использует карточки Twitter Cards. Платформа может подставить часть информации из Open Graph, но для большой картинки лучше добавить отдельный тег.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Как выбрать домашний роутер">
<meta name="twitter:description" content="Разбираем Wi-Fi 6, диапазоны и порты.">
<meta name="twitter:image" content="https://example.ru/images/router-guide.jpg">Большинство SEO-плагинов и конструкторов создают Twitter Cards одновременно с Open Graph. Отдельная ручная настройка обычно не требуется.
Как подготовить картинку и проверить результат
Спецификация Open Graph не задает обязательный размер. Практический шаблон 1200 на 630 пикселей подходит для большинства горизонтальных карточек. LinkedIn рекомендует близкий размер 1200 на 627 пикселей и соотношение 1,91 к 1.
Держите заголовок, лицо, товар и другие значимые элементы ближе к центру. Мессенджер может обрезать края или превратить горизонтальную картинку в квадратную миниатюру. Мелкие надписи на мобильном экране почти не читаются.
Для главной страницы подойдет фирменная карточка, но статьи, товары и услуги лучше снабжать отдельными обложками. В 2026 году Google также рекомендует выбирать релевантное изображение и избегать универсального логотипа или картинки, перегруженной текстом.
После сохранения настроек проверьте страницу по следующей схеме.
- Опубликуйте или обновите страницу.
- Откройте исходный код и найдите основные
og:-теги. - Проверьте, что
og:imageоткрывается в отдельной вкладке без входа в аккаунт. - Убедитесь, что сервер возвращает сам файл изображения, а не HTML-страницу с ошибкой.
- Проверьте карточку в инструменте нужной платформы.
- Создайте тестовое сообщение и посмотрите реальное превью на компьютере и смартфоне.
Для Facebook используется Sharing Debugger. Сервис показывает считанные метатеги и позволяет повторно просканировать страницу.
Для LinkedIn подходит Post Inspector. Обновленная карточка применяется к новым публикациям. Уже размещенные записи сохраняют старое превью.
В Telegram отправьте команду /updatepreview боту @WebpageBot, затем передайте ему адрес страницы. Бот заставит Telegram повторно загрузить данные.
Почему Open Graph не работает
Чаще всего платформа показывает старую картинку из кэша. Замена файла на сервере не означает, что Facebook, LinkedIn или Telegram сразу загрузят новую версию. Сначала очистите кэш сайта и CDN, затем запустите повторное сканирование через инструмент платформы.
Другие распространенные причины выглядят так.
- Изображение требует авторизацию или закрыто защитой от хотлинков.
- Межсетевой экран блокирует робота социальной платформы.
- Сервер возвращает ошибку или длинную цепочку перенаправлений.
- В разметке указан старый домен после переезда сайта.
- Тема и несколько плагинов выводят противоречащие друг другу теги.
- Редактор сохранил настройки, но не опубликовал страницу.
- Метатеги появляются только после выполнения JavaScript.
Не внедряйте Open Graph через Google Tag Manager, когда CMS умеет выводить теги напрямую. Серверная разметка надежнее. LinkedIn прямо требует, чтобы нужные свойства присутствовали в исходном коде страницы. Робот другой платформы также может не дождаться выполнения JavaScript.
Карточка не подтверждает подлинность ссылки. Владелец страницы сам задает заголовок, описание и изображение. В 2017 году SecurityLab описывал подмену URL в карточках Facebook, а исследование 2024 года продемонстрировало похожие атаки на 13 платформах. Перед переходом проверяйте настоящий домен, а не только текст и картинку превью.
Какой набор настроек нужен сайту
Небольшому сайту достаточно резервной картинки и отдельных карточек для главной страницы, популярных статей, услуг и посадочных страниц. Интернет-магазину нужны корректные изображения товаров и категорий. Новостному проекту лучше автоматически подставлять заголовок, анонс и обложку каждой публикации.
Рабочий минимум включает og:title, og:type, og:url, og:image, короткое описание и текст og:image:alt. Используйте изображение около 1200 на 630 пикселей как исходный шаблон, но проверяйте обрезку на каждой важной платформе.
Главная ошибка состоит не в отсутствии десятков дополнительных тегов. Проблемы создают неверный URL, закрытая картинка, конфликтующие плагины и старый кэш. Проверьте исходный код, откройте файл изображения без авторизации и запустите повторное сканирование. Такой порядок закрывает большинство проблем без участия программиста.
Частые вопросы об Open Graph
Влияет ли Open Graph на позиции сайта в Google?
Google не называет Open Graph отдельным фактором ранжирования. С марта 2026 года система использует og:image при выборе миниатюр в Google Search и Discover, поэтому разметка может влиять на внешний вид результата.
Какой размер изображения нужен для Open Graph?
У протокола нет обязательного размера. Изображение 1200 на 630 пикселей подходит как практический универсальный шаблон для горизонтальных карточек. Значимые элементы лучше размещать ближе к центру.
Можно ли настроить Open Graph в WordPress бесплатно?
Да. Бесплатные версии Yoast SEO, Rank Math и других SEO-плагинов создают базовую разметку и позволяют выбрать изображение, заголовок и описание.
Почему после замены изображения показывается старая картинка?
Платформа сохранила прежнюю карточку в кэше. Запустите повторное сканирование через Facebook Sharing Debugger, LinkedIn Post Inspector или Telegram WebpageBot.
Можно ли указать несколько изображений og:image?
Да. Спецификация разрешает несколько тегов og:image. Первое изображение получает приоритет. Случайные дубли от разных плагинов лучше удалить, если они задают противоречащие варианты.
Нужно ли добавлять Twitter Cards вместе с Open Graph?
Для X желательно добавить twitter:card со значением summary_large_image. Популярные SEO-плагины и конструкторы обычно создают такие теги автоматически.
Чем Open Graph отличается от Schema.org?
Open Graph в первую очередь описывает карточку ссылки. Schema.org передает поисковым системам структурированные сведения о статье, товаре, организации, событии и других сущностях. Разметки дополняют друг друга и могут работать на одной странице.
