17.04.2015

Делая один из проектов столкнулся с очень не предсказуемым поведением Facebook. Эта соц. сеть упёрто не правильно выбирала картинки, заголовки и краткое описание для оформления ссылки на сайт, а заказчику это было важно.

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

Пример публикации ссылки в Facebook

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


На иллюстрации видно, что в отчаянном желании сделать ссылку красивой, Facebook притягивает «за уши» любую картинку со страницы. В моем же случае при тестировании проекта не только картинка была странной, возникали проблемы и с текстами. Особенно это касалось страниц, которые формировались в виде «солянки» из материалов других страниц (главная страница, архив новостей и т.д.). Странное поведение, но исправить его можно.

Особо обратите внимание! Если Ваши картинки по факту имеют относительные пути и корректно отображаются на странице за счёт тега <base>, для Facebook-а этих изображений существовать не будет. Социальная сеть по каким-то причинам полностью игнориует этот тег и строит пути без его учёта.

Решение проблемы

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

В созданной мной странице необходимо и достаточно добавить в <head> следующие meta-теги:

<meta property="og:title" content="…">
<meta property="og:type" content="article">
<meta property="og:url" content="http://safonov.pro/examples/friend-facebook/after.html">
<meta property="og:image" content="http://safonov.pro/examples/friend-facebook/images/default.jpg">
<meta property="og:description" content="…">
  • og:title - заголовок страницы;
  • og:type - в большинстве случаев указываем «article», но могут быть и другие варианты;
  • og:url - полную ссылку к странице;
  • og:image - полный путь к картинке (если к странице не прекреплена картинка, используем «картинку по умолчанию»);
  • og:description - краткое описание старницы

Благодоря этим тегам контроль 100%, ссылка в Facebook выглядит ровно так, как хотелось бы. Старницу с добавленными meta-тегами смотрите здесь. Если появятся вопросы пишите, буду рад ответить.