Open Graph — корректная передача данных с сайта в социальные сети с примером

Проблема:

Передача некорректных данных с сайта при размещении ссылок на страницы в социальных сетях.

Пример:

Пример размещения ссылки в Facebook без разметки Open Graph. Вместо логотипа агенства выводится сертификат, то есть то, что скрипт социальной сети смог автоматизированно подтянуть с сайта. Тут как повезет.

Пример ссылки на сайт реестра Российской Гиьдии Риэлторов.

На указанном выше скриншоте видно, что вместо логотипа компании подтянулась картинка сертификата. Это произошло из-за того, что размер указанного в разметке логотипа компании был меньше 200 на 200 пикселей (таковы требования Facebook к картинкам).

Решение:

Решить эту задачу можно путем подключения разметки частей сайта по стандарту Open Graph. Данный стандарт и был специально создан для передачи данных с сайта в социальные сети. В данном примере на сайт реестра сертифицированных компаний и аттестованных специалистов рынка недвижимости.

Теги для разметки Open Graph размещаются в основании html-документа в теге . Это позволяет использовать разметку Open Graph совместно с разметкой schema.org. Во все шаблоны сайта мы добавили теги разметки Open Graph и передали в них ключевые параметры страницы: заголовок, основную картинку, краткое описание страницы, url.

Пример размещения ссылки в Facebook с разметкой Open Graph. Все параметры передались корректно.

Задача выполнена! При размещении любых ссылок на страницы агентств и агентов в соцсетях передаются корректные данные по компании или агенту.