Тот, кто пользовался кнопкой «Like» (‹Мне нравится») от Facebook или пытался поделиться ссылкой в социальных сетях Facebook или в ВКонтакте, наверное заметил, что вместе со ссылкой и кратким описанием страницы нередко цепляется совершенно неподобающая картинка.
Например, при попытке поделиться страницей с описанием мероприятия к ссылке может прикрепиться простыня с логотипами его партнеров или вместо фотографии товара вместе со ссылкой появится не относящийся к нему чужой баннер.
Глядя на такое безобразие, невольно хочется получше контролировать этот процесс. К счастью, тот же Фейсбук не делает тайны из своих предпочтений, используемых при подкачивании дополнительной информации к ссылке, публикуемой в ленте пользователя соцсети. Эту тайну, однако, он раскрывает лишь в своей документации для разработчиков, доступной на английском языке.
В частности, подробное описание того, как заранее подготовить информацию, которую Фейсбук будет забирать по ссылке, дано в чек-листе для процедур публикации ссылки (по-английски гораздо короче — Facebook Sharing Checklist (https://developers.facebook.com/docs/plugins/checklist?locale=ru_RU). Этот чек-лист хорош тем, что не только описывает технические моменты подготовки информации, но и рассматривает этот процесс концептуально. Ниже его основные рекомендации на текущий момент:
- Добавьте на ваш сайт обе кнопки: ‹Мне нравится» и «Поделиться»
- Используйте изображения размером не менее 1200×630 пикселов для последующей генерации превьшек для вашего контента в Facebook
- Используйте правильные теги Open Graph (http://ogp.me/)
- Используйте наш инструмент для отладки, чтобы проверить правильность тегов Open Graph
- Используйте наши инструменты для отслеживания того контента, которым люди хотят поделиться
- Применяйте трекинг событий в коде JavaScript для отслеживания работы плагина в реальном времени
- Используйте нашу встроенную поддержку перевода для отображения кнопок на различных языках
Остановимся поподробнее на тегах протокола 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: Настраивал эти теги на других сайтах, а сделать на своем − пока руки пока не дошли 😉