Home News

Микроразметка open graph – прокачай репосты!

05.09.2018

Пользователи активно репостят страницы вашего сайта в соцсети, однако, картинки обрезаются, а название и описание зачастую «не то, какое хотелось»? Тогда вам необходимо внедрить в код микроразметку 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="https://djdiplomat.ru/?p=1452" />

<meta property="og:image" content="ссылка_на_картинку" />

В микроразметке для соцсетей основных метатегов четыре, а именно:

og:title – название статьи (ссылки); og:description – описание; og:url – ссылка на ваш сайт; og:image – ссылка на картинку.

Требования к картинкам

Мин. ширина, px Мин. высота, px Соотношение сторон
Facebook 600 315 1:91
ВКонтакте 537 240 2:2375
Twitter 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=»https://djdiplomat.ru/primer.jpg» />

<meta property=»twitter:site» content=»@djdiplomat» />

<meta property=»twitter:creator» content=»@djdiplomat» />

Обратите внимание на twitter:card и его значение summary_large_image. Этот метатег сообщает социальной сети, что следует создать картинку на всю ширину ленты!

Подробную документацию по микроразмете для твиттер можно почитать тут . А протестировать тут .

Полезные ссылки по теме

 

rss