С помощью Open Graph мы можем задать определенный вид для внешней ссылки, которая будет выставлена в социальных сетях.
Для чего вообще нужен Open Graph
Изначально Open Graph был разработан для социальной сети Facebook, но теперь он получил более широкое распространение, в том числе и в России. Сейчас этот инструмент используют для того, чтобы в ВКонтакте разместить адреса для перехода на Яндекс и Гугл.
Когда вы делаете перенаправление на Гугл или Яндекс, ваша публикация будет выглядеть узнаваемой. Все-таки бренды этих поисковых систем знают все, поэтому и даже скромный пост с Гуглом, без работы с OG, не снизит количество переходов по ссылке из-за визуала. Однако если вы делаете перенаправление на собственный сайт – оформление будет очень важным.
Предположим, ситуация: участник социальной сети захотел выложить у себя на стене ссылку с вашим материалом или товаром из вашего магазина. Если вы не занимались специальным оформлением, то для создания ссылки будет выдергиваться случайная картинка и текст: маловероятно, что такое оформление будет приятным. Никто не захочет публиковать у себя на стене то, что будет портить ее внешний вид.
Если же вы делаете оформление ссылок с помощью Open Graph, то:
- картинка в ссылке (или даже видеозапись) будет отображена релевантная и та, которую вы сами захотите;
- вы сможете создать пост самостоятельно – написать сопроводительный текст или узнаваемый слоган вашей компании;
- вы сможете сделать самостоятельный пост, который будет отражать миссию вашего сайта или компании и не будет нуждаться в пояснениях.
Итак, Open Graph поможет вам сделать такую ссылку, по которой будет интересно и приятно переходить. Кроме того, пользователи соцсетей будут охотно размещать ее на своих страницах, ведь оформление будет приятно.
Настраиваем Open Graph: как все выглядит на практике
Open Graph для Facebook и других социальных сетей будет работать только в том случае, если будет верно заданы теги и мета-данные.
Используемые теги
- <html prefix=»og: ogp.me/ns#>: это тег дает сигнал, что протокол Open Graph был использован при создании ссылки;
- og:title: прописывает заголовок для материала;
- og:description:тег дает краткое описание для материала, стандартное ограничение – 160 символов, но в него можно вместить больше (не рекомендуется сильно перебарщивать с описанием);
- og:type: здесь нужно указать, какой именно контент вы размещаете на странице – видео формат или текст (если у вас сразу несколько разных форматов, то вы выбираете главный и указываете его);
- og:image:здесь вы вставляете то изображение, которое будет использоваться в пост (нужно вставить url адрес);
- og:url: вставляется canonical url адрес для идентификации страницы.
Оформление видеороликов
Если ваша задача – вставить в публикацию файл в формате видео, то вы используете специальные теги:
Далее нам нужно ввести префиксы, которые используются на странице:
Дальнейший код дает детальное разъяснение для поискового робота:
Конечно, это не все теги, которые можно использовать в Open Graph. Более подробный список вы сможете найти на официальном сайте. Также там размещена дополнительная информация о настройках оформления ссылок, используемых в различных социальных сетях (не только в Facebook и ВКонтакте, но и также в Гугл+, Твиттере или Пинтересте).
Проверяем корректность разметки в Open Graph
Когда вы зададите разметку для отображения внешних ссылок – протестируете ее на корректность отображения. Все должно выглядеть так, как вы задумали.
Провести тест вы сможете с помощью специальной разработки от Facebook. Они создали инструмент, где можно протестировать код и увидеть ссылку, которая будет вести на ваш сайт. Если в отображении что-то нарушено – значит, необходимо изменить код.
Проверить настройки Open Graph можно и с помощью специального российского валидатора, созданного разработчиками Яндекса.
Вместо заключения
Open Graph – это ваша важность решить сразу две важные задачи. Первое – это задать нужные параметры для поисковых систем, которые с помощью кода будут индексировать страницу и повышать ее позиции среди запросов. Второе – с помощью проработанного визуала вы привлечете пользователей на ваш сайт из социальных сетей. Одни участники будут размещать эти ссылки у себя на страницах, потому что они хорошо выглядят, а товар или материал им нравится, а другие будут переходить по ним, потому что пост выглядит интересным, а описание располагает к покупке, прочтению или просмотру.