Автор — Алексей Симоненко, технический директор маркетингового агентства Serenity; Алексей также ведёт блог о технологиях веб-разработки Web Energy.

Facebook Open Graph

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

Вот так может выглядеть ссылка, когда Facebook сама извлекает информацию о вашей странице:

А вот так она будет выглядеть, если вы подготовите информацию для Facebook:

20121018-152404.jpg

Как подготовить сайт для Facebook

Уже достаточно давно существует технология Open Graph, с ее помощью, в частности, можно подготовить описание своего сайта. Рассмотрим как это сделать на удачном примере, который я упоминал ранее, — статья «Зачем нужен личный сайт». Если посмотреть в шапку этой страницы (тег <head>), то мы увидим следующее:

<meta property="og:type" content="article">

<meta property="og:url" content="http://simonenko.su/30807180046/personal-website">

<meta property="og:title" content="Зачем нужен личный сайт?">

<meta property="og:description" content="Зачем создавать собственный сайт, если всё можно делать с помощью социальных сервисов? Я решил разобраться в этом вопросе, и заодно рассказать зачем сделал личный сайт.">

<meta property="og:image" content="http://simonenko.su/i/u/homepage.png">

Давайте разбираться, начнем с самого скучного:

  • og:type — тип контента, может быть: website (сайт), article (статья), book (книга), video (видео) и другие;
  • og:url — абсолютная ссылка на страницу.

Теперь уже более интересное:

  • og:title — заголовок страницы;
  • og:description — описание страницы;
  • og:image — ссылка на изображение.

Вы можете попробовать разместить такой код сами или попросить своих разработчиков сделать это. Главное — понять, что это так же важно, как SEO. Помните, что при каждом упоминании вашей страницы в Facebook будет отображаться подготовленный вами текст. Подойдите к вопросу креативно: подберите привлекательное изображение, подумайте над заголовком.

В работе с Facebook вам может помочь инструмент для проверки работы Open Graph на вашем сайте. Вы может использовать этот инструмент для изучения чужих сайтов (например, можно проверить страницу статьи, о которой мы говорили ранее).

Не останавливайтесь на описании

На самом деле, технология Open Graph это нечто большее, чем просто описание страниц. Чтобы понимать возможности, которые можно получить с ее помощью, можно посмотреть как преобразуется ссылка из «Яндекс.Музыки» в Facebook.

Как видите, в ленте новостей я могу сразу же увидеть список песен и послушать их. Поэтому начинайте с описания и продолжайте развивать интеграцию вашего сайта с Facebook.