Пользователи активно репостят страницы вашего сайта в соцсети, однако, картинки обрезаются, а название и описание зачастую «не то, какое хотелось»? Тогда вам необходимо внедрить в код микроразметку Open Graph.
Open Graph – микроразметка для социальных сетей придуманная программистами Facebook. С ее помощью можно создавать более привлекательные ссылки на сайт, украшенные картинками на всю ширину ленты и подписанные не случайным, а составленным вами текстом (см. пример ниже).
Для внедрения Open Graph понадобятся минимальные знания html. А выгоды очевидны – репосты будет более заметны и кликабельны.
Микроразметка для социальных сетей. Внедрение.
Поскольку Фейсбук, Гугл+, Вконтакте, Твиттер и Одноклассники имеют разную ширину контента – требования к минимальным размерам картинок, их пропорциям, а также длине вводного текста слегка отличаются друг от друга. Я собрал воедино все требования и на их основе составил общее, с которым и предлагаю Вам ознакомиться.
Метатеги (а именно они понадобятся для внедрения Open Graph на сайт
Располагаются в шапке сайта между тегами <head></head> имеют следующий вид:
<meta name="og:title" content="Название. Не более 50 знаков" />
<meta property="og:description" content="Описание. Рекомендую не более 200 знаков." />
<meta property="og:url" content="http://binetmed15.beget.tech/?p=1452" />
<meta property="og:image" content="ссылка_на_картинку" />
В микроразметке для соцсетей основных метатегов четыре, а именно:
- og:title – название статьи (ссылки);
- og:description – описание;
- og:url – ссылка на ваш сайт;
- og:image – ссылка на картинку.
Требования к картинкам
| Мин. ширина, px | Мин. высота, px | Соотношение сторон | |
| 600 | 315 | 1:91 | |
| ВКонтакте | 537 | 240 | 2:2375 |
| 280 | 150 | 1:87 | |
| ОК.ру | 640 | 286 | 1:91 или 2:2375 |
| Google+ | 400 | н/д | 1:91 или 2:2375 |
Как видно из таблицы, минимальный размер картинки, который «понравится» всем сосцетям сразу, должен быть не меньше 640 px в ширину и не меньше 315 px в высоту. Но это не все! По непонятной причине ВКонтакте отказался от поддержки установленной фейсбуком (родоначальником Open Graph), пропорции 1:91 и ввел свою 2:2375.
Что это означает на практике? А то, что картинки, не соответствующие этой пропорции будут «подрезаны снизу»!
Менее раскрученные соцсети, а именно Гугл+, Одноклассники и ряд других поступили мудрее. Они поддерживают оба формата (фейсбучный, и вконтактовский). Также слегка отошел от стандартов Твиттер. Но его пропорция 1:87 не так уж сильно ушла от 1:91, поэтому обрезка незначительна. Кроме того, Твиттер проявил мудрость, расширив микроразметку своими собственными параметрами такими как twitter:image (аналог og:image), twitter:card и ряд других.
Вывод. Создавая картинку для перепоста предстоит выбирать, либо полную совместимость с Фейсбук, либо ВКонтакте. Т.е. минимальный размер картинки для корректного отображения во всех соцсетях должен быть либо:
640×335 (стандарт Фейсбук 1:91)
705×315 (стандарт ВК 2:2375)
В код микроразметку внедрил, но ВКонтакте ее не распознает
Если кто-то из ваших подписчиков уже делился ссылкой на ту или иную страницу вашего сайта в соцсети ВКонтакте, то само по себе внедрение микроразметки ровным счетом ничего не даст. Все дело в том, что ВКонтакте кэширует (запоминает) странички в их первоначальном состоянии. Поэтому, вам необходимо будет очистить КЭШ внешних сайтов ВКонтакте.
Микроразметка для Твиттера
Не смотря на то, что Твиттер неплохо расшаривает стандартные метатегитеги «og:», я все же рекомендую прописывать для него собственные, начинающиеся с twitter: (см. пример ниже)
<meta name=»twitter:card» content=»summary_large_image» />
<meta property=»twitter:title» content=»Название. Не более 50 знаков» />
<meta property=»twitter:description» content=»127 знаков включая пробелы» />
<meta property=»twitter:image» content=»http://binetmed15.beget.tech/primer.jpg» />
<meta property=»twitter:site» content=»@djdiplomat» />
<meta property=»twitter:creator» content=»@djdiplomat» />
Обратите внимание на twitter:card и его значение summary_large_image. Этот метатег сообщает социальной сети, что следует создать картинку на всю ширину ленты!
Подробную документацию по микроразмете для твиттер можно почитать тут. А протестировать тут.
Полезные ссылки по теме
- Тестирование разметки в Фейсбук.
- Очистка кэша внешних страниц ВКонтакте
- Официальный мануал по формированию снипета в Гугл+
- Документация по внедрению микроразметки для Гугл+