Как делать красивые ссылки на ваш сайт в социальных сетях? Или Open Graph в деле

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

Когда вы сами делаете посты на социальных сайтах, мы можете все красиво подготовить – обрезать в нужных пропорциях картинку, отредактировать текст, добавить смайлики, если потребуется. Но что происходит, когда ссылка на ваш сайт вставляют ваши посетители? Они не будет заниматься редактированием ее внешнего вида и если вы хотите, чтобы она выглядела презентабельно, тогда данная статья для вас.

Протокол Open Graph

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

Теги для данного протокола размещаются на вашем сайте. На каждой странице свои. И если, кто-то пытается разместить ссылку на ваш сайт в Facebook, то данные для предпросмотра берутся именно из этих тегов. Кроме озвученной компании, данные теги используют и другие социальные сети. Среди них Вконтакте, Twitter, Pinterest и не только.

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

Основные мета теги

Чаще всего используют три главных – это заголовок (og:title), краткое описание (og:description) и картинка (og:image).

Эти теги добавляются между <head> и </head> в таком виде:

Существуют и другие мета данные:

og:type – тип объекта

og:url – ссылка на объект

og:site_name – название сайта

og:locale – язык описания объекта

Это примеры простой интеграции, но есть и более сложные настройки OP, если вдаваться в детальные подробности. Хороший материал по данной теме можно найти в справочной Яндекса для вебмастеров.

Как проверить корректность размещенных тегов

Самый простой способ это попробовать сделать пост с ссылкой на свой сайт. Если вы видите, что все отобразилось хорошо, то значит вы корректно настроили теги.


Однако рекомендуется проверить не только главную страницу, но и другие. Это может быть страница товара или категории каталога, если у вас интернет-магазин. Или страница статьи, если у вас есть контент раздел на сайте для продвижения и привлечения новых пользователей. Кратко говоря, все страницы, которые могут иметь интерес для репостов в социальных сетях.

Если вы не добавляли или добавили мета данные не корректно, тогда вы можете увидеть такую картину:


Кроме народного метода проверки в facebook есть профессиональный отладчик репостов. Он дает более развернутую информацию, необходимую для разработки. Это очень удобный инструмент отладки от самого создателя данной технологии. Он не просто покажет вам информацию в полном объеме, но и отметит что вы упустили, а так же позволит проводить пакетную проверку по несколько страниц сразу.


Способы внедрения Open Graph мета тегов

Один из способов, который мы используем на своем сайте и иногда устанавливаем на сайты наших клиентов, если они сделаны на системе управления Битрикс, это создание специального скрипта. Он работает по такому принципу – сначала собирает данные по открываемым страницам сайта и делает записи в предварительно созданную таблицу HighLoad блока. Далее в ней мы находим нужную нам страницу и может установить необходимые параметры – заголовок и ссылку на нужную картинку.


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

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

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

Один из популярных, это работа с $APPLICATION->AddHeadString на стороне компонента каталога и $APPLICATION->ShowHeadStrings() на стороне, где выводим эти добавленные пользовательские теги.

Однако если вы не разбираетесь в программировании, тогда вам проще будет установить готовый модуль для Битрикс, либо поставить задачу своему разработчику.

Резюме

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

А если ваш сайт работает на Битрикс, вы можете обращаться к нам – мы сможем помочь вам все качественно настроить.