Что такое Open Graph
Open Graph - набор метатегов, по которым сервисы формируют карточку ссылки: изображение, заголовок, описание и адрес. Пользователь видит эту карточку в чате или социальной сети еще до перехода на сайт.
На Tilda основные параметры задаются в настройках страницы. Официальная инструкция находится в разделе настройки превью ссылки.
Как настроить Open Graph на Tilda
Где настроить на Tilda
Откройте страницу, затем Настройки страницы - Социальные сети. Там можно задать данные, которые используются для социальных превью, включая название, описание и изображение. После изменений страницу нужно сохранить и опубликовать.
Для массового блога лучше предусмотреть отдельные CMS-поля для Social Title и Social Description, чтобы не копировать SEO-метаданные автоматически, если для социальной карточки нужна другая подача.
Open Graph и SEO-метаданные - не одно и то же
| Поле | Где используется | Задача |
|---|---|---|
| SEO Title | поиск и браузер | описать страницу для поискового контекста |
| SEO Description | может использоваться поиском для сниппета | кратко объяснить содержание |
| OG title | соцсети и мессенджеры | сделать понятную карточку ссылки |
| OG image | социальное превью | дать визуальный контекст |
Они могут совпадать, но это не обязательное правило. Например, SEO Title содержит основной запрос, а Social Title может быть короче и естественнее для чата.
Как подготовить изображение
Используйте отдельную обложку с понятной композицией и безопасными отступами. Не размещайте важный текст у краев: разные сервисы могут обрезать изображение по-своему.
Для блога полезно держать единый формат обложек. Тогда карточки узнаваемы, а производство не превращается в ручную настройку каждой публикации с нуля.
Проверьте URL изображения
Социальный робот должен иметь доступ к картинке по публичному адресу. Локальный файл, закрытый ресурс или изображение, которое требует авторизации, не подойдет. После публикации откройте исходный код страницы и убедитесь, что метатег og:image содержит рабочий URL.
Почему старое превью не меняется сразу
Мессенджеры и социальные платформы кешируют карточки. Поэтому после замены изображения старая версия может еще некоторое время показываться у уже отправленной ссылки. Это не обязательно ошибка Tilda.
Сначала проверьте исходный код опубликованной страницы. Если там новые значения, проблема, скорее всего, в кеше конкретного сервиса.
Частые ошибки
- оставить стандартный заголовок проекта вместо заголовка страницы;
- использовать вертикальную фотографию, которая плохо обрезается;
- забыть опубликовать страницу после изменения;
- поставить одну обложку на все статьи;
- написать Social Description длиннее, чем имеет смысл для превью;
- менять URL страницы, но не проверить связанные метатеги и редиректы.
Как проверить перед запуском
- опубликуйте страницу;
- откройте ее без авторизации;
- проверьте title, description и image в исходном коде;
- отправьте ссылку в рабочий тестовый чат;
- проверьте десктопное и мобильное отображение карточки;
- если показана старая версия - учитывайте кеш.
Какие данные должны быть согласованы
| Элемент | Что проверить |
|---|---|
| Заголовок | Понятен без контекста переписки и не обрезается в ключевой мысли |
| Описание | Дополняет заголовок, а не повторяет его слово в слово |
| Изображение | Доступно публично, имеет достаточное разрешение и читается в маленьком превью |
| URL | Ведет на каноническую публичную страницу без тестового домена |
| Тип контента | Не противоречит назначению страницы |
Tilda берет данные превью из вкладки Соцсети, а если отдельные значения не заданы - может использовать данные страницы и первое изображение. Поэтому на важных страницах лучше задавать превью явно. Формат карточки все равно зависит от конкретной соцсети или мессенджера, что прямо отмечено в справке Tilda.
Как отличить ошибку сайта от кеша сервиса
Сначала откройте опубликованный HTML и убедитесь, что актуальные meta-теги действительно присутствуют. Если HTML правильный, а в мессенджере остается старая карточка, причина часто в кеше внешнего сервиса. У Tilda есть отдельные рекомендации по обновлению превью для разных площадок.
Если meta-теги в HTML старые, очистка кеша не поможет. Тогда возвращайтесь в настройки страницы, проверяйте поля, публикацию и домен.
Как масштабировать Open Graph на большом блоге
Для десятков публикаций ручное заполнение быстро становится источником ошибок. Заведите отдельные поля Social Title, Social Description и обложку в CMS. Тогда редактор видит социальное превью как часть публикации, а не вспоминает о нем после запуска.
Полезно также задать резервную обложку на уровне проекта для служебных страниц, но статьи и ключевые коммерческие URL лучше оформлять индивидуально.
Проверьте реальные сценарии шаринга
Карточка может выглядеть хорошо в одном сервисе и обрезаться в другом. Перед запуском важной страницы отправьте URL хотя бы в два используемых вашей аудиторией мессенджера. Смотрите не только изображение, но и то, достаточно ли заголовка без контекста переписки.
Что делать со служебными страницами
Страницы спасибо, политики, технические URL и тестовые публикации не всегда нуждаются в индивидуальной социальной карточке. Сначала решите, должны ли они вообще индексироваться и распространяться. Для обычных страниц можно использовать аккуратные значения по умолчанию, а редакционный ресурс тратить на статьи, кейсы и коммерческие посадочные.
Не превращайте обложку в рекламный баннер
Большой логотип, мелкий текст и пять преимуществ плохо читаются в маленьком превью. Лучше одна короткая мысль, узнаваемая типографика и контрастная композиция. Социальная карточка должна объясняться за секунду.
Что настраивать в обязательном порядке
Для коммерческих страниц и статей достаточно обеспечить корректные title, description, URL и изображение. Не нужно превращать Open Graph в отдельный SEO-проект, но оставлять случайную карточку тоже не стоит: ссылка часто приходит пользователю от коллеги или клиента, и первое впечатление формируется до открытия сайта.
Для сайта на Tilda такую проверку удобно включить в общий аудит вместе с метаданными, изображениями и техническими настройками.
