Увеличение CTR сниппетов в Facebook, настройка картинок, заголовка и описания

Решил перепостить свой пост из блога, может кому пригодится:

Потратил вчера несколько часов на то, чтобы разобраться чем может быть полезен Facebook и как можно интегрировать свой сайт в эту социальную сеть. Сам я практически не сижу в Facebook и Вконтакте, но достаточно много людей проводят там почти весь свой день. Что там можно делать целый день я не представляю, но раз уж так много людей там сидят, можно каким то образом этих людей привлечь на свой сайт. Первый раз я заметил пользу от социальных сетей в статистике просмотров одного из моих роликов на Youtube. После того как кому то из пользователей понравился один из моих роликов в социальной сети, число просмотров увеличилось примерно на 20 тысяч. Для большинства людей интеграция с Вконтакте и Facebook заканчивается установкой кнопок Like/Нравится, после чего эффективность этой кнопки вебмастера отслеживают с помощью счетчиков Liveinternet, Google Analytics (в новом интерфейсе есть вкладка Social).

Когда пользователь нажимает кнопку Like или Recommend, Facebook формирует сниппет типа такого:

Заголовок как я понял берется из тега <title>, картинки предлагаются на выбор их тех что были найдены на странице, текст для сниппета берется из тега meta с аттрибутом description, если такого нет, то берется какой то рандомный кусок текста. Может и есть какой то алгоритм выбора текста когда нет тега meta, но мне не удалось найти подробного описания.

Как можно изменить описание, заголовок и увеличить CTR сниппетов?

Для этого существуют специальные теги Open Graph. Для каждой страницы на сайте можно создать уникальные заголовки, описание и картинки к сниппетам на Facebook. На примере страницы моего блога:

<meta property="fb:page_id" content="208820155840230" />
<meta property="og:title" content="Смена пути к rss в шаблоне Drupal" /> 
<meta property="og:description" content="Заметил некоторую особенность в шаблоне Drupal, про которую совсем забыл при редактировании готового шаблона. В самом верху между тегами выводятся различные ссылки к стилям итд, кроме всего прочего " /> 
<meta property="og:image" content="http://www.mindinmotion.ru/stuff/images/gold1.jpg" /> 
<meta property="og:type" content="article" /> 
<meta property="og:url" content="http://www.mindinmotion.ru/post/smena-puti-k-rss-v-shablone-drupal" /> 
<meta property="og:site_name" content="Mind in motion" />

Для тестирования можно использовать Debugger, который предоставляет Facebook. Теперь когда пользователь нажмет кнопку Like или Share сниппет будет выглядеть в соответствии с теми тэгами что мы прописали:

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

Вместо того чтобы создавать десятки и сотни фейковых аккаунтов, Facebook предоставляет возможность создавать тестовых пользователей для того чтобы можно было тестировать свои приложения и другие функции. Для создания тестового пользователя сначала надо создать приложение. После того как приложение создано, находим "Roles", справа от этой надписи будет ссылка "Edit roles". Внизу, рядом с заголовком "Test users" создаем нового пользователя, после чего рядом с новым пользователм жмем "Switch to" и можем выполнять действия не под своим аккаунтом, а под аккаунтом этого тестового пользователя.

Просмотр статистики

Заходим на страницу Facebook Insights, справа будет зелёная кнопка Insights for your Website, после нажатия на эту кнопку в появившемся диалоговом окне выбираем App (Приложение), которое мы создали до этого. После ввода доменного имени и выбора приложения/страницы чуть ниже появится тег типа такого

<meta property="fb:app_id" content="237250942985629" />

Вставляем этот тег на сайте и жмем Get Insights. Если всё сделали правильно, теперь можем смотреть статистику по Like и другую информацию.

Open Graph и Drupal

Если на сайте сотни и тысячи страниц, создавать для всех Open Graph meta теги может быть непростой задачей. Для Drupal есть модуль "Open Graph meta tags". После установки модуля, заходим в администрирование "/admin/content/opengraph_meta", отмечаем галочками те типы контента, для которых хотим включить Open Graph мета теги, название сайта и дефолтную картинку (например логотип). При создании/редактировании контента теперь есть возможность изменять заголовок и описание, всё находится под полями для ввода контента, под заголовком "Open Graph meta tags (e.g. for Facebook sharing)". К сожалению кастомную картинку там прописать нельзя и разработчики как то долго возятся с внедрением этой функции.