Оптимизация страниц для share в facebook, vk: протокол Open Graph и метатеги property

Оригинал взят у shalenaolena в Оптимизация страниц для share в facebook, vk: протокол Open Graph и метатеги property
Facebook share некрасиво обрезает картинки или не подставляет нужные?
И вас, товарисчи, это не устраивает?
Хотите оптимизировать посты на фейсбук?
Чтобы они отбражались с заданной картинкой?
А не то, что предлагает автомат, который некрасиво обрезает дап и подбирает что попало?
Или вообще хотите подставлять ту картинку, которой нет на сайте?
ПЛОХОЙ пример:

а Вы хотите вот так:


или вообще картинку которой нет в статье или с логотипом, как тут:

1) подберите правильную картинку/фотографию

то есть не менее 200х200 - иначе все равно бкдет незнамо шо,
а оптимально - прямоугольная:
максимальный размер - 1200 x 630 pixels
минимальный - 600 x 315 pixels

2) подключите протокол Open Graph, прописав его в теге html без изменений:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://ogp.me/ns/fb#">

3) пропишите специальные метатеги в html своей страницы, согласно протоколу Open Graph:

Если вы правильно прописали метатеги для facebook внутри

<head>ПИСАТЬ ВНУТРИ ЭТИХ ТЕГОВ</head>:

<meta property="fb:admins" content="100003338884516" /> - id админа на фейсбук
<meta property="facebook_app_id" content="715889101878291" /> - определите через https://developers.facebook.com/tools/debug/ отдельно для каждой страницы (URL)
<title<Обычный тайтл странички. Название данной страницы</title>
<meta property="og:url" content="http://mysite.com.ua/"/>
<meta property="og:site_name" content="Мой Сайт" />
<meta property="og:title" content="Прекрасная статья про важное" />
<meta property="og:description" content="Читайте про важное и прекрасное на самом лучшем в мире сайте, ибо это чертовски полезно" />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://mysite.com.ua/images/beautyful_image.jpg" />

И все равно не работает?..

Но как сделать так, чтобы "УРА!!! ЗАРАБОТАЛО!!!"
4) ВОЛШЕБСТВО!
Вам нужно проаннализировать свою страницу через инструмент фейсбука:
https://developers.facebook.com/tools/debug/
И... О да!, чтобы все заработало - нажать волшебную кнопочку!!!
см. картинку.


Привет от веб-блондинки!



  Нужен хостинг?
Поддержка пользователей 24/7. Антивирус. 5 дней бесплатно! Все CMS. Регистрируйся и пробуй!
ukraine.com.ua
  Рассылка для бизнеса
Лучший сервис для массовой рассылки. До 1000 подписчиков бесплатно. Все в одном месте. Импорт подписчиков. Пробуйте!
smartresponder.ru
  Конструктор сайтов
Создай сайт прямо сейчас. Домен и хостинг в подарок! Готовые яркие дизайны. Легкая настройка. Сделай свой сайт за полчаса.
wix.com