Как Facebook и ВКонтакте выбирают картинку и текст для ссылки, которой мы делимся

The Open Graph protocol logoТот, кто пользовался кнопкой «Like» (‹Мне нравится») от Facebook или пытался поделиться ссылкой в социальных сетях Facebook или в ВКонтакте, наверное заметил, что вместе со ссылкой и кратким описанием страницы нередко цепляется совершенно неподобающая картинка.

Например, при попытке поделиться страницей с описанием мероприятия к ссылке может прикрепиться простыня с логотипами его партнеров или вместо фотографии товара вместе со ссылкой появится не относящийся к нему чужой баннер.

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

В частности, подробное описание того, как заранее подготовить информацию, которую Фейсбук будет забирать по ссылке, дано в чек-листе для процедур публикации ссылки (по-английски гораздо короче — Facebook Sharing Checklist (https://developers.facebook.com/docs/plugins/checklist?locale=ru_RU). Этот чек-лист хорош тем, что не только описывает технические моменты подготовки информации, но и рассматривает этот процесс концептуально. Ниже его основные рекомендации на текущий момент:

  1. Добавьте на ваш сайт обе кнопки: ‹Мне нравится» и «Поделиться»
  2. Используйте изображения размером не менее 1200×630 пикселов для последующей генерации превьшек для вашего контента в Facebook
  3. Используйте правильные теги Open Graph (http://ogp.me/)
  4. Используйте наш инструмент для отладки, чтобы проверить правильность тегов Open Graph
  5. Используйте наши инструменты для отслеживания того контента, которым люди хотят поделиться
  6. Применяйте трекинг событий в коде JavaScript для отслеживания работы плагина в реальном времени
  7. Используйте нашу встроенную поддержку перевода для отображения кнопок на различных языках

Остановимся поподробнее на тегах протокола Open Graph, так как именно они определяют правильность подгружаемой в социальную сеть информации:

Тэг Описание
og:title Заголовок вашей статьи, но без брэндинга.
og:site_name Название вашего сайта (но не его адрес)
og:url URL как уникальный идентификатор вашей статьи. Он должен совпадать с каноническим URL, используемым для SEO, и он не должен включать в себя какие-либо переменные сессии, параметры идентификации пользователя или счетчики.
og:description Детальное описание контента, обычно 2 — 4 предложения.
og:image Абсолютный URL картинки, которую вы хотели бы предложить соцсети, когда люди будут «лайкать» или делиться ссылкой на ваш статью. Мы предлагаем вам использовать картинки с размерами не менее 1200×630 пикселов.
fb:app_id Уникальный ID который позволяет Facebook идентифицировать ваш сайт. Наличие этого тега критически важно для корректной работы Facebook Insights.

Помимо этого Фейсбук предлагает еще несколько дополнительных тегов, про которые можно прочесть в его оригинальном руководстве.

Как же практически должны выглядеть эти теги в коде страницы? В минимальном наборе примерно вот так:
<meta property="og:title" content="Заголовок страницы"/>
<meta property="og:site_name" content="Название вашего сайта"/>
<meta property="og:url" content="http://урл-вашей-статьи/"/>
<meta property="og:description" content="Краткое описание статьи для ее анонса"/>
<meta property="og:image" content="http://урл-вашего-сайта/каталог-с-картинками/имя-файла-картинки.jpg"/>

Ну и, наконец, чрезвычайно полезный инструмент для проверки правильности добавленных тегов Open Graph − Facebook debug tool to check your Open Graph tags (https://developers.facebook.com/tools/debug). Настоятельно рекомендуется к использованию.

Способ добавления этих мета-тегов в реальный сайт может быть разным и будет определяться используемой CMS. Например, для WordPress уже написаны плагины, облегчающую эту задачу. Такая возможность уже встроена в плагин WordPress SEO by Yoast, считающийся почти эталоном среди плагинов для поисковой оптимизации сайтов и поэтому часто применяемый, или может быть отдельно добавлена с помощью плагина Open Graph (https://wordpress.org/plugins/opengraph/).

PS: Настраивал эти теги на других сайтах, а сделать на своем − пока руки пока не дошли 😉

Метки:
Понравилась статья? Поделитесь ссылкой в соцсетях: