[{"data":1,"prerenderedAt":31},["ShallowReactive",2],{"$fcC5bD2IigMlB2cACkA3MCaKKxB3DBogOf0kmkaDp6ZY":3},{"slug":4,"title":5,"description":6,"date":7,"created_at":8,"updated_at":8,"h1":9,"content":10,"views":11,"next_articles":12},"open-graph-kartochki-socsetej","Open Graph: как сделать карточку ссылки в соцсетях","Open Graph для ВКонтакте, Telegram и MAX: обязательные og-теги, проверка в \u002Ftools\u002Fsocial-cards, генератор OG в разделе Инструменты и частые ошибки превью.","2026-07-01","2026-09-07","Open Graph: карточка ссылки в соцсетях","\u003Ch2>Open Graph — почему ссылка выглядит по-разному в каждой соцсети\u003C\u002Fh2>\n\u003Cp>Когда вы делитесь ссылкой в Telegram, ВКонтакте или MAX, соцсеть формирует карточку предпросмотра: заголовок, описание и картинка. Без правильно настроенных мета-тегов Open Graph (OG) соцсеть пытается угадать, что показать — и чаще всего угадывает неправильно.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Что происходит без OG-тегов:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>Соцсеть берёт первый попавшийся заголовок с страницы (часто это название меню или логотип)\u003C\u002Fli>\u003Cli>Картинка может быть слишком маленькой, обрезанной или вообще отсутствовать\u003C\u002Fli>\u003Cli>Описание отсутствует или берётся из случайного абзаца\u003C\u002Fli>\u003Cli>Ссылка выглядит непрофессионально и снижает доверие\u003C\u002Fli>\u003C\u002Ful>\n\u003Cp>Open Graph — это протокол, появившийся в 2010 году, который позволяет контролировать, как ваша ссылка выглядит при шеринге. Сейчас его поддерживают все крупные соцсети и мессенджеры.\u003C\u002Fp>\n\u003Ch2>Обязательные OG-теги\u003C\u002Fh2>\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Тег\u003C\u002Fth>\u003Cth>Что передаёт\u003C\u002Fth>\u003Cth>Практическое правило\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>og:title\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Заголовок карточки\u003C\u002Ftd>\u003Ctd>Кратко отражает содержание страницы\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>og:description\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Описание карточки\u003C\u002Ftd>\u003Ctd>Дополняет заголовок без переспама\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>og:image\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Изображение превью\u003C\u002Ftd>\u003Ctd>Публичный абсолютный URL, обычно 1200×630\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>og:url\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Основной URL\u003C\u002Ftd>\u003Ctd>Совпадает с канонической версией страницы\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch3>og:title — заголовок карточки\u003C\u002Fh3>\n\u003Cp>Заголовок, который отображается в карточке при шеринге. Может отличаться от \u003Ccode><title>\u003C\u002Fcode> страницы — для соцсетей иногда нужен более короткий или более цепляющий вариант.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Рекомендации:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>Длина: до 60 символов (в карточке может обрезаться)\u003C\u002Fli>\u003Cli>Уникальный для каждой страницы\u003C\u002Fli>\u003Cli>Содержит ключевую информацию\u003C\u002Fli>\u003C\u002Ful>\n\u003Ch3>og:description — описание карточки\u003C\u002Fh3>\n\u003Cp>Краткое описание, которое отображается под заголовком. Аналог meta description, но для соцсетей.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Рекомендации:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>Длина: до 200 символов (в Telegram может быть длиннее, в VK — короче)\u003C\u002Fli>\u003Cli>Не дублирует og:title\u003C\u002Fli>\u003Cli>Содержит призыв к действию\u003C\u002Fli>\u003C\u002Ful>\n\u003Ch3>og:image — картинка-превью\u003C\u002Fh3>\n\u003Cp>Главный визуальный элемент карточки. Именно картинка привлекает внимание в ленте новостей.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Технические требования:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Минимальный размер:\u003C\u002Fstrong> 1200×630 пикселей (общепринятая рекомендация)\u003C\u002Fli>\u003Cli>\u003Cstrong>Минимальная площадь:\u003C\u002Fstrong> 50 000 пикселей\u003C\u002Fli>\u003Cli>\u003Cstrong>Формат:\u003C\u002Fstrong> JPG, PNG, GIF (не анимированный), WebP\u003C\u002Fli>\u003Cli>\u003Cstrong>Вес файла:\u003C\u002Fstrong> до 5 МБ\u003C\u002Fli>\u003Cli>\u003Cstrong>Соотношение сторон:\u003C\u002Fstrong> 1.91:1 (идеально 1200×630)\u003C\u002Fli>\u003C\u002Ful>\n\u003Cp>\u003Cstrong>Что происходит с маленькой картинкой:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>VK показывает маленькое превью внизу карточки\u003C\u002Fli>\u003Cli>Telegram может не показать картинку вообще\u003C\u002Fli>\u003Cli>соцсеть может обрезать до миниатюры\u003C\u002Fli>\u003C\u002Ful>\n\u003Ch3>og:url — канонический URL\u003C\u002Fh3>\n\u003Cp>URL страницы, который указывается в OG-тегах. Помогает соцсетям понять, какая версия страницы является основной (если есть www\u002Fnon-www, http\u002Fhttps).\u003C\u002Fp>\n\u003Ch2>Дополнительные OG-теги\u003C\u002Fh2>\n\u003Ch3>og:type — тип контента\u003C\u002Fh3>\n\u003Cp>Определяет тип контента: website, article, product, video и т.д. Влияет на то, какие дополнительные элементы покажет соцсеть.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><meta property="og:type" content="article" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Для блога используйте \u003Ccode>article\u003C\u002Fcode>, для главной — \u003Ccode>website\u003C\u002Fcode>, для страницы товара — \u003Ccode>product\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch3>og:site_name — название сайта\u003C\u002Fh3>\n\u003Cp>Название вашего сайта, которое отображается внизу карточки.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><meta property="og:site_name" content="seoquest.ru" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>og:locale — язык страницы\u003C\u002Fh3>\n\u003Cp>Язык контента страницы. Влияет на то, как соцсеть форматирует даты, числа и текст.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><meta property="og:locale" content="ru_RU" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\u003Ch3>Как проверить карточку в ВК, Telegram и MAX\u003C\u002Fh3>\n\u003Cp>Для аудитории в РФ важны превью в \u003Cstrong>ВКонтакте\u003C\u002Fstrong>, \u003Cstrong>Telegram\u003C\u002Fstrong> и \u003Cstrong>MAX\u003C\u002Fstrong>. Базовых OG-тегов (\u003Ccode>og:title\u003C\u002Fcode>, \u003Ccode>og:description\u003C\u002Fcode>, \u003Ccode>og:image\u003C\u002Fcode>, \u003Ccode>og:url\u003C\u002Fcode>, \u003Ccode>og:locale\u003C\u002Fcode> = \u003Ccode>ru_RU\u003C\u002Fcode>) обычно достаточно: эти сервисы читают Open Graph.\u003C\u002Fp>\n\u003Cp>Сначала проверьте страницу в нашем инструменте \u003Ca href=\"\u002Ftools\u002Fsocial-cards\">Карточки для соцсетей\u003C\u002Fa> — увидите превью, чеклист OG-тегов и meta summary\u002Fcard по одному URL. Готовый HTML для вставки в \u003Ccode><head>\u003C\u002Fcode> можно собрать в \u003Ca href=\"\u002Ftools\u002Fog-twitter\">генераторе Open Graph\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>ВКонтакте — после правок отправьте ссылку себе в сообщения и посмотрите карточку.\u003C\u002Fli>\n\u003Cli>Telegram — перешлите URL в «Избранное» и сверьте превью.\u003C\u002Fli>\n\u003Cli>MAX — вставьте ссылку в диалог: заголовок и картинка должны подтянуться.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>После смены \u003Ccode>og:image\u003C\u002Fcode> кэш мессенджеров обновляется не мгновенно — подождите или отправьте ссылку заново (иногда помогает параметр к URL картинки, например \u003Ccode>?v=2\u003C\u002Fcode>).\u003C\u002Fp>\n\u003Ch2>Open Graph для разных типов страниц\u003C\u002Fh2>\n\u003Ch3>Главная страница\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-html\"><meta property="og:title" content="seoquest.ru — бесплатная проверка SEO" \u002F>\n<meta property="og:description" content="Проверьте сайт на 50+ SEO-ошибок за 30 секунд" \u002F>\n<meta property="og:image" content="https:\u002F\u002Fseoquest.ru\u002Fog-home.jpg" \u002F>\n<meta property="og:url" content="https:\u002F\u002Fseoquest.ru\u002F" \u002F>\n<meta property="og:type" content="website" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Блог-статья\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-html\"><meta property="og:title" content="Как проверить сайт на SEO-ошибки бесплатно" \u002F>\n<meta property="og:description" content="Пошаговая инструкция по бесплатной проверке сайта на SEO-ошибки" \u002F>\n<meta property="og:image" content="https:\u002F\u002Fseoquest.ru\u002Fblog\u002Fog-seo-check.jpg" \u002F>\n<meta property="og:url" content="https:\u002F\u002Fseoquest.ru\u002Fblog\u002Fkak-proverit-sajt-seo\u002F" \u002F>\n<meta property="og:type" content="article" \u002F>\n<meta property="article:published_time" content="2026-07-01T10:00:00+03:00" \u002F>\n<meta property="article:modified_time" content="2026-07-15T14:30:00+03:00" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Для статей добавьте \u003Ccode>article:published_time\u003C\u002Fcode> и \u003Ccode>article:modified_time\u003C\u002Fcode> — это помогает соцсетям показывать актуальный контент.\u003C\u002Fp>\n\u003Ch3>Страница товара\u002Fуслуги\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-html\"><meta property="og:title" content="SEO-аудит сайта — проверка за 30 минут" \u002F>\n<meta property="og:description" content="Найдём 50+ SEO-ошибок и дадим рекомендации по исправлению" \u002F>\n<meta property="og:image" content="https:\u002F\u002Fseoquest.ru\u002Fog-audit.jpg" \u002F>\n<meta property="og:url" content="https:\u002F\u002Fseoquest.ru\u002Fservices\u002Faudit\u002F" \u002F>\n<meta property="og:type" content="product" \u002F>\n<meta property="product:price:amount" content="0" \u002F>\n<meta property="product:price:currency" content="RUB" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Типичные ошибки с Open Graph\u003C\u002Fh2>\n\u003Ch3>1. Одна og:image для всех страниц\u003C\u002Fh3>\n\u003Cp>Самая частая ошибка — использовать одну и ту же картинку (обычно логотип) для всех страниц. Это снижает CTR при шеринге: в ленте все ссылки выглядят одинаково.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Решение:\u003C\u002Fstrong> создайте уникальную картинку для каждой страницы. Для статей — превью с заголовком. Для товаров — фото товара. Для главной — баннер с УТП.\u003C\u002Fp>\n\u003Ch3>2. og:image слишком маленький\u003C\u002Fh3>\n\u003Cp>Картинка 400×400 пикселей — это меньше минимума. Соцсети либо покажут её маленькой, либо не покажут вообще.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Решение:\u003C\u002Fstrong> используйте минимум 1200×630 px для ВКонтакте и 1024×512 px для Telegram.\u003C\u002Fp>\n\u003Ch3>3. og:title и title не совпадают\u003C\u002Fh3>\n\u003Cp>Если title страницы — «Как проверить сайт», а og:title — «seoquest.ru», это создаёт разрыв: пользователь видит одно в поиске и другое в соцсети.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Решение:\u003C\u002Fstrong> og:title должен быть согласован с title, но не обязан совпадать слово в слово. Для соцсетей можно сделать более короткий или более цепляющий вариант.\u003C\u002Fp>\n\u003Ch3>4. og:image не открывается\u003C\u002Fh3>\n\u003Cp>Если URL картинки требует авторизации, закрыт robots.txt или отдаёт 404 — соцсеть не сможет загрузить картинку и покажет карточку без изображения.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Решение:\u003C\u002Fstrong> проверьте, что URL og:image доступен публично и отдаёт 200.\u003C\u002Fp>\n\u003Ch3>5. Картинка с текстом не читается\u003C\u002Fh3>\n\u003Cp>Если на og:image напечатан текст, который не помещается в карточку соцсети — он обрежется. соцсеть может обрезать нижнюю треть, Telegram — правую часть.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Решение:\u003C\u002Fstrong> размещайте текст в верхней левой части картинки. Или лучше — не используйте текст на картинке, а положитесь на og:title и og:description.\u003C\u002Fp>\n\u003Ch2>Как проверить OG-теги\u003C\u002Fh2>\n\u003Ch3>1. Инструмент seoquest.ru — карточки для соцсетей\u003C\u002Fh3>\n\u003Cp>Откройте \u003Ca href=\"\u002Ftools\u002Fsocial-cards\">\u002Ftools\u002Fsocial-cards\u003C\u002Fa>, вставьте URL страницы и нажмите «Проверить». В отчёте: превью (заголовок, описание, картинка), чеклист по каждому OG-тегу и блок meta summary\u002Fcard. Это быстрее, чем собирать теги вручную через curl, и не уводит на сторонние отладчики.\u003C\u002Fp>\n\u003Ch3>2. Генератор тегов\u003C\u002Fh3>\n\u003Cp>Если тегов ещё нет — соберите HTML в \u003Ca href=\"\u002Ftools\u002Fog-twitter\">генераторе Open Graph и meta summary\u002Fcard\u003C\u002Fa> и вставьте в \u003Ccode><head>\u003C\u002Fcode> страницы. Затем снова прогоните URL через \u003Ca href=\"\u002Ftools\u002Fsocial-cards\">проверку карточек\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch3>3. Финальный взгляд в мессенджере\u003C\u002Fh3>\n\u003Cp>После правок отправьте ссылку себе в ВКонтакте, Telegram («Избранное») или MAX — так вы увидите, как карточку отрисует уже кэш сервиса. Если превью старое, подождите или смените query у \u003Ccode>og:image\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch3>4. Полная проверка сайта\u003C\u002Fh3>\n\u003Cp>Чтобы увидеть OG в контексте остальных SEO-сигналов, запустите \u003Ca href=\"\u002Fcheck\u002Ffree\">бесплатную проверку\u003C\u002Fa> Health Score.\u003C\u002Fp>\n\u003Ch2>Open Graph и SEO — связаны ли они?\u003C\u002Fh2>\n\u003Cp>Open Graph напрямую не влияет на SEO. Поисковики не используют OG-теги для ранжирования. Но есть косвенная связь:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>Лучший CTR в соцсетях\u003C\u002Fstrong> → больше шерингов → больше трафика → больше обратных ссылок → лучше ранжирование\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Профессиональный вид\u003C\u002Fstrong> → больше доверия → больше кликов → ниже отказ → лучше поведенческие факторы\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Уникальные картинки\u003C\u002Fstrong> → заметнее в ленте → больше репостов → больше охват\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>Чеклист настройки Open Graph\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>[ ] og:title — уникальный, до 60 символов\u003C\u002Fli>\n\u003Cli>[ ] og:description — уникальный, до 200 символов\u003C\u002Fli>\n\u003Cli>[ ] og:image — минимум 1200×630 px, уникальная для каждой страницы\u003C\u002Fli>\n\u003Cli>[ ] og:url — канонический URL страницы\u003C\u002Fli>\n\u003Cli>[ ] og:type — правильный тип контента (website\u002Farticle\u002Fproduct)\u003C\u002Fli>\n\u003Cli>[ ] og:site_name — название сайта\u003C\u002Fli>\n\u003Cli>[ ] og:locale — ru_RU для русского контента\u003C\u002Fli>\n\u003Cli>[ ] Превью проверено в ВК, Telegram и MAX\u003C\u002Fli>\n\u003Cli>[ ] og:image доступен публично (не требует авторизации)\u003C\u002Fli>\n\u003Cli>[ ] Проверено в \u003Ca href=\"\u002Ftools\u002Fsocial-cards\">\u002Ftools\u002Fsocial-cards\u003C\u002Fa> (+ при необходимости генератор \u003Ca href=\"\u002Ftools\u002Fog-twitter\">\u002Ftools\u002Fog-twitter\u003C\u002Fa>)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Итог\u003C\u002Fh2>\n\u003Cp>Open Graph — это не «техническая деталь», а инструмент привлечения трафика из соцсетей. Правильно настроенные OG-теги делают вашу ссылку привлекательной в ленте новостей, повышают CTR и косвенно влияют на SEO через увеличение трафика и обратных ссылок. Убедитесь, что на каждой странице сайта настроены все обязательные OG-теги, а картинка-превью уникальна и имеет достаточный размер. Быстрая проверка — в \u003Ca href=\"\u002Ftools\u002Fsocial-cards\">карточках для соцсетей\u003C\u002Fa>, сборка тегов — в \u003Ca href=\"\u002Ftools\u002Fog-twitter\">генераторе Open Graph\u003C\u002Fa>.\u003C\u002Fp>\n\u003Csection class=\"blog-faq\">\n\u003Ch2>Вопросы и ответы\u003C\u002Fh2>\n\u003Cdetails>\u003Csummary>Open Graph влияет на SEO напрямую?\u003C\u002Fsummary>\u003Cp>Нет, OG-теги не являются фактором ранжирования для Яндекса или Google. Но они влияют на CTR из соцсетей, а больший трафик и шеринги косвенно улучшают SEO-показатели.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Нужны ли разные og:image для разных соцсетей?\u003C\u002Fsummary>\u003Cp>Не обязательно, но желательно. Рекомендуется 1200×630, Telegram лучше показывает квадратные (1080×1080) или портретные (1080×1920) картинки. Если одна картинка работает на всех платформах — это нормально, главное — минимум 1200×630.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Почему в разных соцсетях превью отличается?\u003C\u002Fsummary>\u003Cp>Разные соцсети используют разные алгоритмы парсинга. Telegram может взять картинку из контента страницы, если og:image не указан или не загрузился. большинство платформ строго следует OG-тегам. Всегда настраивайте OG-теги — это универсальное решение.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Можно ли использовать animated GIF как og:image?\u003C\u002Fsummary>\u003Cp>Некоторые платформы не поддерживают анимированные GIF в OG-тегах — покажется первый кадр. VK и Telegram могут показать анимацию. Для надёжности используйте статичные JPG\u002FPNG\u002FWebP.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Как часто нужно проверять OG-теги?\u003C\u002Fsummary>\u003Cp>При каждом изменении дизайна или контента страницы. И регулярно — хотя бы раз в квартал, чтобы убедиться, что картинки не сломались и не устарели.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003C\u002Fsection>",0,[13,17,21,24,27],{"slug":14,"title":15,"date":16,"views":11},"socseti-i-svyaz","Соцсети и способы связи на сайте","2026-08-15",{"slug":18,"title":19,"date":20,"views":11},"mikrorazmetka-schema-org","Микроразметка Schema.org для сайта","2026-08-09",{"slug":22,"title":23,"date":7,"views":11},"snippety-v-poiske","Сниппеты в поиске: как улучшить",{"slug":25,"title":26,"date":7,"views":11},"meta-tegi-title-description","Мета-теги title, description, Open Graph",{"slug":28,"title":29,"date":30,"views":11},"sitemap-xml-proverka-i-nastrojka","Sitemap.xml: проверка и настройка","2026-08-16",1789381425103]