Open Graph

Уроки Adobe Muse: Как ваш сайт смотрится в социальных сетях или Протокол Open Graph

Уроки Adobe Muse: Open Graph протокол или Как ваш сайт выглядит в социальных сетях

Вы когда-нибудь обращали внимание, что буквально на каждом сайте есть социальные кнопки. Каждый сайт предлагает своим посетителям поделиться информацией с друзьями в социальных сетях. Что при этом происходит? Просто посетитель нажимает на социальную кнопочку и социальная сеть публикует ссылку на сайт или страницу на стене пользователя или в группе. Иногда, но очень редко, пользователь черканет пару слов:” Чуваки, надыбал крутой сайтец. Гляньте”. Все! И это реклама Вашего сайта в социальной сети! О такой рекламе вы думали, когда размещали социальные кнопки у себя на сайте?… Вот этот вот бред сумасшедшего и ваша ссылка?…

Кто и зачем придумал Open Graph протокол

Конечно, социальные сети как могут пытаются исправить положение. Они сканируют страницу по публикуемой ссылке и пытаются создать приемлемый сниппет. Только не всегда это у них получается толково. Что бы хоть как-то навести в этом деле порядок Фейсбук и придумал Open Graph протокол. Это протокол для описания сниппете вашего сайта. При помощи этого протокола вы объясняете социальной сети как бы вы хотели, что бы она прорисовала сниппет на ваш сайт.

Где взять и куда вставить секцию Open Graph протокола

Как выглядит секция Open Graph в коде страницы, вы можете увидеть в шаблоне. Этот протокол добавляется к коду секции <head> вашего сайта или лендинга. Сегодня его поддерживают многие социальные сети. Такие как Facebook, ВКонтакте, G+ и др. Когда они обнаруживают ссылку на внешний сайт, они загружают к себе указанную страницу и ищут секцию Open Graph. Если находят, то строят сниппет по этому описанию, если нет, то берут первую попавшуюся картинку на сайте и произвольный кусок текста со страницы в качестве описания.

Полная спецификация протокола Open Graph весьма сложна и запутана. Но для нужд простой настройки сниппете вашей страницы достаточно всего несколько строчек. Просто подготовьте картинку размером не менее 1200×630 пикселей, загрузите ее на свой сайт в свободный доступ и правильно заполните реквизиты в приведенном шаблоне. Вставьте полученный код в секцию <head> вашей страницы и социальные сети будут знать, как отображать ссылки на ваш сайт. В Adobe Muse подготовленный код можно вставить в свойствах страницы на закладке метаданные. Подробнее смотрите в видео выше.

Возможные трудности и пути их преодоления

Следует учитывать, что социальные сети строят сниппет для вашей ссылки только один раз. При первой ее публикации, кто бы ее не сделал, социальная сеть построит сниппет и запомнит его (поместит в кеш). И если эта первая публикация прошла, когда секции протокола еще не было на вашей странице, то сниппет будет построен так, как решила социальная сеть. И в дальнейшем, даже если вы добавили эту секцию к себе на страницу, в постах будет выдаваться сниппет из кеша. Что бы дать Вам возможность перестроить запомненный сниппет, некоторые социальные сети придумали специальный механизм сброса кеша. Обычно это делается на специальных страницах:

Более подробно о том как это делать смотрите в видео.

Разработчикам сайтов в Adobe Muse невероятно повезло

Коробка---Open-Graph-smallКак видите, встраивание протокола Open Graph в вашу страницу довольно трудоемкий и нудный процесс. Если еще где-нибудь допустите ошибку – вообще труба. Найти ее потом весьма и весьма проблематично. Однако для разработчиков и верстальщиков сайтов в Adobe Muse у меня есть приятный сюрприз. Специально для вас я разработал виджет, который на основании вашей картинки, заголовка и описания сам сформирует верный код Open Graph и поместит его в правильное место на вашей странице. Подробнее о том как применять этот виджет смотрите в видео.

Обычно я продаю этот виджет за 450 рублей. Но для Вас, как для читателей моего блога, я сделал специальную 20% скидку. Переходите по ссылке ниже и покупайте мой виджет всего за 360 рублей прямо сейчас и я добавлю к нему бонус. Это шаблон для подготовки баннера для сниппета, на котором отмечены все мертвые зоны, которые вырезает сеть ВКонтакте.

Купить виджет Open Graph протокол всего 360 рублей!

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *