Как добавить Open Graph на сайт в Cursor AI без кода?

1 мин читать
make.com
!

Важно

Берите 1-2 идеи за раз и внедряйте сразу — это даёт результат быстрее, чем теория.

x

Ошибка

Не пытайтесь внедрить всё за день: перегрузка убивает стабильность и дисциплину.

>

Шаг

После чтения выберите один процесс и переведите его в повторяемый сценарий.

*

Инсайт

Рост приходит не от объёма контента, а от системной связки: стратегия -> публикация -> аналитика.

Марина скинула клиенту в Telegram ссылку на лендинг с Vercel Drop – и вместо обложки с оффером мессенджер показал серую строку и кусок текста из футера. Знакомая боль: сайт уже есть, а ссылка выглядит как стыдный голый URL. За один вечер настройте Open Graph в head через Cursor AI – и получите нормальную «визитку» ссылки без npm, React и SEO-специалиста.

Open Graph – короткая «визитка» страницы для Telegram и VK: заголовок, описание и картинка берутся из meta в head, а не из вкладки браузера. Спецификация ogp.me почти не менялась годами: чаще ломают превью относительный путь в og:image и кэш Telegram. Сделайте картинку 1200×630, попросите Cursor Agent вписать og:title, og:description, og:image (полный https), og:url и og:type – затем проверьте ссылку в «Избранном» или обновите кэш через @WebpageBot.

Если лендинг уже собран в Cursor без кода, следующий шаг – не «микроразметка для разработчиков», а пять-шесть понятных строк в head. Обычные title и description отвечают за вкладку и поиск; og:* – отдельный слой для карточки ссылки. Ниже – workflow от картинки до проверки в чате.

Схема на пальцах:
Картинка 1200×630 → правило в Cursor → Agent пишет og:* в head → публикация (Vercel Drop) → полный https в og:image/og:url → проверка в Telegram → при старом кэше @WebpageBot

Чем Open Graph отличается от title и description

Сравнение title/description и Open Graph-тегов для превью в мессенджерах

Типичная ошибка новичка: поправить title во вкладке и ждать красивую карточку в мессенджере. На практике мессенджер смотрит на другие теги. По протоколу ogp.me обязательны четыре свойства: og:title, og:type, og:image и og:url. Описание (og:description) – полезное дополнение, но без картинки и абсолютного адреса превью часто пустое.

Например, без Open Graph краулер угадывает текст и картинку эвристиками – отсюда случайный логотип или абзац из подвала. Не делайте ставку только на SEO-meta: для шаринга нужна отдельная визитка. Если title ещё не настроены, сначала загляните в гайд мета-теги SEO-страницы в Cursor AI, а сюда вернитесь за og:*.

Ориентир простой: вкладка браузера ≠ карточка в Telegram. Закройте эту путаницу до правок – так Agent не смешает два набора тегов.

Подготовьте картинку превью 1200×630

Схема подготовки og-cover.jpg 1200×630 для Open Graph

Боль «не знаю размер» решается одним файлом. Meta рекомендует около 1200×630 (примерно 1.91:1), минимум для крупного превью 600×315, абсолютный минимум 200×200, файл не тяжелее 8 MB. В гайдах 2026 этот размер закрывает Facebook, LinkedIn, Discord, Slack, WhatsApp и Telegram.

  1. Сделайте обложку с крупным оффером и читаемым заголовком по центру.
  2. Уберите мелкий текст у самых краёв – его часто обрезают превью.
  3. Сохраните файл как og-cover.jpg или PNG рядом с index.html в корне папки сайта.
  4. Избегайте крошечного логотипа на белом фоне: карточка должна читаться как анонс.
  5. Проверьте вес файла: сожмите JPG до разумных сотен килобайт.
  6. Добавьте запасной og-cover-v2.jpg на случай смены обложки – новый URL помогает обойти кэш.

Позже в og:image понадобится полный адрес https://ваш-домен/og-cover.jpg. Относительный путь /og-cover.jpg Telegram часто не подхватывает. В реальном проекте на GitHub (PicImpact, март 2026) без абсолютного URL thumbnail просто не появлялся.

Задайте правило Cursor для Open Graph

Чеклист правила Cursor open-graph.mdc для og-тегов в head

Страх «сломаю сайт кодом» снимается правилом для агента. Откройте папку лендинга в Cursor (как в гайде лендинг без кода) и создайте файл .cursor/rules/open-graph.mdc.

В правиле зафиксируйте: только статический HTML; Tailwind через CDN допустим; без npm и React; все og:* и twitter:* только в head; og:image и og:url – только абсолютные https после публикации; body не трогать без запроса. Используйте правило как ограничитель: Agent не уйдёт в лишнюю архитектуру.

Чеклист перед промптом Agent:

  • папка сайта открыта в Cursor;
  • файл og-cover.jpg лежит в корне рядом с index.html;
  • правило open-graph.mdc сохранено;
  • вы знаете временный или постоянный URL после деплоя;
  • не ставите Yoast – у вас статика, не WordPress;
  • favicon уже ок или отложен (см. favicon сайта в Cursor AI);
  • готовы сначала задеплоить, потом подставить финальные https;
  • не копируете один og:title на все HTML без правки;
  • не вставляете Schema.org «заодно» – это другая задача;
  • держите под рукой @WebpageBot для сброса кэша.

Соберите разметку в Agent: пошагово

Попросите Agent добавить визитку. Каждый шаг можно вставить в промпт целиком.

  1. Шаг 1: откройте index.html и найдите head – правки только там.
  2. Шаг 2: добавьте og:title с вашим оффером (коротко, без канцелярита).
  3. Шаг 3: добавьте og:description – одно-два предложения, что получит человек по ссылке.
  4. Шаг 4: добавьте og:image с полным https на og-cover.jpg плюс width 1200, height 630 и alt.
  5. Шаг 5: добавьте og:url на канонический адрес и og:type со значением website.
  6. Шаг 6: добавьте og:locale=ru_RU; по желанию twitter:card=summary_large_image.
  7. Шаг 7: после первого деплоя обновите временные URL на финальные https.

Шаблон на выходе (без фреймворков) выглядит так:

meta property=»og:title» content=»Ваш оффер»
meta property=»og:description» content=»Коротко, что получит человек»
meta property=»og:image» content=»https://ваш-домен/og-cover.jpg»
meta property=»og:image:width» content=»1200″
meta property=»og:image:height» content=»630″
meta property=»og:url» content=»https://ваш-домен/»
meta property=»og:type» content=»website»
meta property=»og:locale» content=»ru_RU»

Не делайте og:image относительным. Community-гайды и багфиксы 2026 сходятся: без https://… превью в Telegram часто пустое. Ширина и высота помогают краулеру отрисовать картинку уже при первом шаринге.

Опубликуйте и пройдите чеклист превью в Telegram

Опубликуйте папку через Vercel Drop или ваш хостинг. Откройте живую страницу, нажмите Ctrl+U и найдите property=»og:…». Если тегов нет в исходнике – мессенджер их не увидит.

  1. Вставьте ссылку в «Избранное» Telegram и посмотрите карточку.
  2. Проверьте, что заголовок и описание ваши, а не кусок футера.
  3. Проверьте, что картинка крупная и узнаваемая.
  4. Если превью старое или пустое – отправьте URL боту @WebpageBot и обновите preview.
  5. Для Facebook при необходимости используйте Sharing Debugger.
  6. Во VK откройте ссылку в новом сообщении; при залипании кэша смените URL картинки (v2).

Часто ломается не «не та разметка», а две бытовые ловушки: относительный og:image и кэш. После правки тегов старая карточка может жить, пока бот не перескачает страницу. Гайды спорят, хватит ли одних og:* для крупной карточки в Telegram или нужен ещё twitter:card – новичку безопаснее добавить оба блока и сверить глазами в чате.

Результат на сегодня: в «Избранном» у ссылки видны ваш заголовок, описание и картинка 1200×630; в исходнике в head есть og:title, og:description, og:image с https://…, og:url и og:type=website. Когда домен станет постоянным, подставьте его в og:url/og:image – поможет гайд подключить домен сайта на Vercel.

Если хотите быстрее освоить связку Cursor и автоматизацию без кода, мягкий следующий шаг – курс Make.com и вайбкодинга на kv-ai.ru.

Что дальше после первой карточки

Для каждой важной страницы сделайте свой набор og:* – не копируйте один title на все HTML. При смене обложки используйте новый URL файла или снова @WebpageBot. Избегайте правок без деплоя: мессенджер читает живой URL.

  • выровняйте og:description на второстепенных страницах;
  • сохраните правило open-graph.mdc в шаблон новых лендингов;
  • запишите workflow: картинка → Agent → Drop → WebpageBot;
  • после смены домена снова проверьте превью в чате.

Материал проверен: Артур Хорошев (CEO Maya AI, автор курса по Make.com и вайбкодингу).
Источники сверки: обязательные свойства OG – ogp.me и репозиторий facebook/open-graph-protocol; размеры картинок – Meta Sharing Images; кэш Telegram – @WebpageBot и GitHub PicImpact PR #417; частотность «open graph» – Яндекс Вордстат, регион Россия, съём 2026-07-10.

Частые вопросы

Как проверить Open Graph на сайте?

Откройте страницу → Ctrl+U и найдите meta property=»og:…». Затем вставьте URL в Telegram «Избранное». Если карточка старая, отправьте ссылку @WebpageBot и обновите preview. Для Facebook используйте Sharing Debugger.

Какой размер Open Graph image нужен в 2026?

Ориентир – 1200×630 пикселей, файл до 8 MB. Минимум для крупного превью у Meta – 600×315. Сделайте один JPG/PNG в корне и укажите полный https в og:image.

Почему превью в Telegram не обновилось после правок?

Чаще виноват кэш или относительный путь в og:image. Проверьте, что в исходнике уже https://…, задеплойте страницу и попросите @WebpageBot обновить preview. При смене картинки по тому же URL иногда помогает файл с новым именем.

Чем Open Graph отличается от обычных title и description?

Title и description влияют на вкладку и сниппеты поиска. Open Graph – визитка для шаринга: мессенджеры читают og:title, og:description, og:image и og:url. Не делайте вид, что одного title достаточно.

Нужен ли отдельный Open Graph на каждую страницу?

Для важных URL лучше свой набор. Иначе у тарифов и главной будет одна карточка. Добавьте уникальные og:title и og:description; картинку можно переиспользовать.

Можно ли настроить Open Graph без WordPress и Yoast?

Да. На статическом HTML из Cursor достаточно тегов в head и публикации папки. Используйте правило open-graph.mdc и Agent, затем проверьте живой URL в Telegram.

Часто задаваемые вопросы по теме (FAQ)

Для чего нужны AI-агенты и автоматизация в контенте?

AI-агенты (например, в связке с Make.com и Cursor) позволяют заменить рутинные задачи: сбор данных, написание постов, рерайт и даже автопостинг в Telegram или WordPress. Это экономит десятки часов в неделю и позволяет масштабировать бизнес без расширения штата.

Как быстро можно запустить свой контент-завод?

Базовый контент-завод (генерация текстов по RSS или из других источников) с автопостингом собирается без программирования (No-Code) за 1-2 дня. Сложные сценарии (с видео, аудио и кастомными MCP) внедряются за 1-2 недели.

Нужно ли уметь программировать?

Нет, большинство систем собираются визуально в Make.com (No-Code). Для сложных задач можно использовать вайбкодинг — генерацию кода с помощью Cursor AI через промпты на естественном языке.