Open Graph — это инструмент для управления тем, как ваши страницы выглядят при публикации в соцсетях. С помощью OG-тегов вы можете задать заголовок, описание, изображение и сделать ссылку более привлекательной. Правильная настройка помогает выделиться среди других публикаций, привлечь внимание и повысить кликабельность. Эта шпаргалка даст ключевые рекомендации, чтобы ваш контент выглядел идеально в любой соцсети.
Чтобы при публикации ссылки в социальных сетях (VK, Facebook) отображалась заданная картинка, нужно использовать Open Graph мета-теги в секции <head> HTML-документа.
Требования к изображению:
1. Разрешение: Минимальное: **600×315 px**. Рекомендуемое: **1200×630 px** для оптимального качества на всех устройствах.
2. Соотношение сторон: Около 1.91:1 (ширина:высота).
3. Размер файла:не более 5 МБ.
4. Формат: JPEG, PNG, или WebP (JPEG предпочтителен для больших изображений).
<head>
<!-- Основные Open Graph теги -->
<meta property="og:title" content="Заголовок вашей страницы">
<meta property="og:description" content="Краткое описание вашей страницы">
<meta property="og:image" content="https://example.com/path-to-image.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">
<!-- Для Facebook -->
<meta property="fb:app_id" content="ВАШ_APP_ID"> <!-- Опционально -->
<!-- Для VK (использует те же теги) -->
<!-- Дополнительный тег для SEO -->
<meta name="twitter:card" content="summary_large_image">
</head>
Для проверки ФБ есть инструмент Facebook Sharing Debugger(https://developers.facebook.com/tools/debug/) на то, как страница будет выглядеть при шаринге.
