Руководство по базовому использованию

Это руководство пошагово объясняет, как с помощью нашего инструмента создавать метатеги Open Graph.

Шаг 1: Откройте инструмент

Перейдите в Open Graph Meta Generator с главной страницы инструментов или откройте его по прямой ссылке.

Шаг 2: Заполните общую информацию

Тип страницы

Выберите подходящий тип контента для вашей страницы:

• Website: Обычные страницы сайта
• Article: Записи блога, новости, обучающие материалы
• Book: Страницы книг, электронные книги
• Profile: Личные или корпоративные профили
• Music: Треки, альбомы, плейлисты
• Video: Видеоконтент, фильмы, телепередачи

Заголовок

Введите привлекательный заголовок для страницы:

• Для оптимального отображения держите его в пределах 60 символов
• Сделайте его понятным и интересным
• Естественно включайте релевантные ключевые слова

Описание

Напишите понятное описание вашего контента:

• Ориентируйтесь на 150-160 символов
• Кратко объясните, что пользователь найдет на странице
• Сделайте текст достаточно привлекательным, чтобы стимулировать клики

URL страницы

Введите полный URL вашей страницы:

• Используйте абсолютные URL (включая https://)
• Убедитесь, что URL доступен
• Используйте чистые и понятные URL

Название сайта

Укажите название вашего сайта или бренда:

• Оно будет отображаться в публикациях в соцсетях
• Сохраняйте единообразие на всех страницах
• Используйте официальное название бренда

Шаг 3: Настройте изображение

URL изображения

Укажите URL изображения для соцсетей:

• Используйте абсолютные URL (включая https://)
• Убедитесь, что изображение доступно публично
• Рекомендуемый размер: 1200x630 пикселей

Alt-текст изображения

Добавьте описательный Alt-текст для доступности:

• Опишите, что показано на изображении
• Пишите кратко, но содержательно
• Это важно для пользователей экранных дикторов

Размеры изображения

Укажите ширину и высоту изображения:

• Ширина: обычно 1200 пикселей
• Высота: обычно 630 пикселей
• Эти данные помогают соцплатформам правильно отображать изображение

Шаг 4: Настройте параметры Twitter

Тип карточки

Выберите подходящий тип Twitter Card:

• Summary: Базовая карточка с заголовком, описанием и миниатюрой
• Summary with Large Image: Расширенная карточка с большим изображением
• App: Для продвижения мобильных приложений
• Player: Для видео- или аудиоконтента

Аккаунт сайта

Введите Twitter-хендл вашего сайта:

• Формат: @yourhandle
• Он будет показываться в публикациях Twitter
• Необязательно, но рекомендуется

Аккаунт автора

Введите Twitter-хендл автора контента:

• Формат: @authorhandle
• Особенно полезно для статей и записей блога
• Необязательно

Шаг 5: Сгенерируйте и скопируйте метатеги

После заполнения всей информации:

1. Метатеги будут автоматически генерироваться в реальном времени
2. Проверьте созданный HTML в блоке вывода
3. Нажмите кнопку "Copy Meta Tags", чтобы скопировать его в буфер обмена
4. В области предварительного просмотра видно, как контент будет выглядеть в соцсетях

Шаг 6: Внедрите на сайт

Добавьте скопированные метатеги в секцию HTML <head> вашего сайта:

<head>
  <!-- Your existing head content -->

  <!-- Open Graph Meta Tags -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Your Page Title" />
  <!-- ... other meta tags ... -->

  <!-- Twitter Meta Tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <!-- ... other Twitter meta tags ... -->
</head>

Быстрые советы

Для лучшего результата:

• Всегда используйте качественные и релевантные изображения
• Проверяйте метатеги с помощью инструментов отладки соцсетей
• Держите заголовки и описания в рекомендованных пределах
• Используйте единый стиль бренда на всех страницах

Распространенные ошибки, которых стоит избегать:

• Использование относительных URL вместо абсолютных
• Отсутствие Alt-текста у изображения
• Использование слишком маленьких или слишком больших изображений
• Отсутствие проверки отображения на разных платформах

Проверьте свои метатеги

После внедрения протестируйте метатеги с помощью:

• Facebook Sharing Debugger: developers.facebook.com/tools/debug
• Twitter Card Validator: cards-dev.twitter.com/validator
• LinkedIn Post Inspector: linkedin.com/post-inspector

Эти инструменты покажут, как именно ваш контент будет выглядеть при публикации, и помогут выявить возможные проблемы.

Что дальше

Теперь, когда вы разобрались с основами, переходите к руководству Advanced Features, чтобы узнать о более продвинутых настройках и возможностях кастомизации.