БЕСПЛАТНЫЙ ОНЛАЙН-ТРЕНИНГ
по созданию сайта с нуля
1.Простые и понятные шаги по созданию сайта с нуля.
2.20+ уроков, включая уроки по заработку на сайтах.
3.Готовый сайт, который вы сделали сами!
Курс стартует в 15:00





или Регистрация
Восстановление пароля

Всё об Open Graph

Open Graph (OG) — это язык разметки. Кто-то размещает ссылку на ваш сайт в своей уютной социалочке, а благодаря протоколу Open Graph автоматически подтягиваются нужная информация в сниппет.

Сниппет обычно содержит: адрес сайта, название страницы, ее описание и картинку. В результате мы получаем полноценную заметку, вместо простой ссылки.

В примере ниже Фейсбук даже не понял, что нужно подтягивать. На этом сайте нет разметки OG. Поэтому в сниппете отсутствуют картинка, заголовков и описание темы.

Когда нет разметки Open Graph

 

Здесь же Фейсбук подтянул в сниппет все, что «нужно»:

Пример, когда есть разметка Open Graph

Разметка работает во ВКонтакте, Фейсбуке, Твиттере, Одноклассниках и различных мессенджерах, например, Telegram и Viber.

Мало кто захочет кликать на непонятную ссылку. А вот, если есть картинка, да еще и с описанием — другое дело. Дело в том, что Фейсбук и другие соцсети, не имея данных Open Graph, размещают первое попавшееся изображение сайта.

Как подключить Open Graph

Для начала проверьте, может быть на вашем сайте уже есть поддержка Open Graph. Иногда этот протокол добавлен в шаблоны по умолчанию.

  1. Откройте исходный код страницы комбинацией Ctrl + U, находясь на странице сайта. Найдите строчку, которая начинается с <meta property=»og:Разметка Open Graph в редакторе
  2. А также анализ можно провести с помощью парсера мета-тегов Open Graph.

Подключить Open Graph с помощью плагинов

Вы убедись, что у сайта пока нет нужной разметки. Тогда перейдем к настройке.

Если сайт работает на CMS — системе управления контентом сайта, то можно воспользоваться готовыми решениями — плагинами:

А также можно автоматически сделать разметку через Генератор мета-тегов Open Graph. Заполните поля ссылками и нужным текстом и скопируйте готовый код для вставки на сайт.

Делаем разметку Open Graph вручную

Если вы никому не доверяете и любите все делать самостоятельно, ну или для вашего сайта нет готовых решений, то велкам в исходный код страницы.

Микроразметка страницы в виде кода html, размещается между тегами <head>…</head>. 

Пример разметки Open Graph

Для правильного отображения достаточно использовать основные Open Graph теги.

  • og:title — заголовок статьи или видео. Если этот тег отсутствует, социальные сети используют вместо него главный title;
  • og:description — описание страницы, может быть в пределах 300 символов;
  • og:image — ссылка на изображение, которое будет отображаться в сниппете. У каждой социальной сети свои требования к размерам картинок. Например, для Вконтакте — 510×228 пикселей, для Facebook — 600×315. Благодаря этому тегу изображение автоматически будет подстраиваться под требования социальной сети;
  • og:type — тип объекта: новость, видео, статья, музыка и так далее;
  • og:url — постоянная ссылка на страницу.

О другим метатегах — на сайте разработчика.

Проверка корректности разметки

  1. Отладчик репостов на Фейсбук. Чтобы посмотреть, как выглядит сниппет, вставьте ссылку в поле для ввода. Проверка займет несколько секунд. Сервис демонстрирует имеющиеся ошибки, но не дает рекомендаций, как их исправить.
  2. Валидатор Яндекса помогает проверить разметки веб-страниц в любом формате и на всех имеющихся языках программирования. Валидатор дополнительно проверяет соответствие разметки существующим требованиям сервисов Яндекса.

Что нужно запомнить об Open Graph

Разметка Open Graph нужна для создания адекватных сниппетов в социальных сетях и мессенджерах. К ним уже все привыкли, поэтому без нее никуда. К тому же вы сами определяете, что конкретно будет подгружаться к ссылке: картинка, видео, название и так далее.

Расширенные сниппеты нравятся пользователям. По ним лучше кликают, лайкают и репостят. А это значит, что разметка помогает привлечь пользователей на сайт.

Внедрить протокол можно разными способами:

  • с помощью плагина, которые подходит вашему сайту,
  • или вручную через исходный код сайта.

Ну и, конечно, любое внедрение надо проверить. Вдруг что-то пошло не так. Тут вам помогут Отладчик репостов на Фейсбук или Валидатор Яндекса.

Вы уже внедрили разметку Open Graph? Как все прошло? Делитесь опытом в комментариях.

САЙТ С НУЛЯ.
Бесплатный онлайн-тренинг
оставьте почту, чтобы стать участником и получить:
Пошаговые уроки по созданию сайта с нуля
Первые знания о способах заработка на сайтах
Ваш собственный сайт, где вы можете размещать статьи и рекламу
Старт курса в 15:00 мск





Ещё вам может быть интересно:

Комментарии

  • seoonly.ru

    Удобная разметка, если разобраться-)