Красивые картинки при публикации статьи в соцсетях

Когда я был молодым и глупым, часто мучился, пытаясь добиться, чтобы при публикации ссылки на свою очередную статью в контакте, одноклассниках или в фейсбуке, рядом со статьей отображалась одна из иллюстраций. Потом прочитал у Ильяхова, что оказывается, в фейсбуке есть специальный отладчик, который показывает, как будет выглядеть опубликованная статья. А потом смотрел видео на канале WebDesign Master, в котором автор рассказал, что к чему.

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

<head></head>

, и тогда наступит счастье. Все теги расписаны по ссылке про OpenGraph, но чтобы не лезть туда, я здесь приведу пример оформленных тегов.

<meta property="og:url"  content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title"  content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

og:url

это просто ссылка на статью

og:type

тип содержимого, для статьи — article, для сайта — website

og:title

заголовок статьи без какого-либо наименования, такого как название сайта.

|og:description

Краткое описание материалов (обычно 2—4 предложения). Отображается под заголовком публикации на Facebook.

|og:site_name

Название веб-сайта (например, «IMDb», а не «imdb.com»).

og:image

URL-адрес изображения объекта. Размер изображения должен быть не менее 600 x 315 пикселей, однако рекомендуется использовать размер 1200 x 630 пикселей или более (размер файла изображения не должен превышать 5 МБ). Если не хотите, чтобы изображение было обрезано, выбирайте соотношение сторон 1,91:1 или близкое к нему. Значки игр должны быть квадратными и размером не менее 600 x 600 пикселей. Если изображение доступно в нескольких разрешениях, можно добавить несколько тегов og:image. При обновлении изображения после его публикации следует использовать новый URL-адрес, поскольку изображения кэшируются на основе URL-адреса. В противном случае изображение, возможно, не удастся обновить.

|og:locale

В моем случае ru_RU

og:image:secure_url

URL-адрес изображения в формате «https://».

og:image:type

Тип MIME изображения. Может иметь одно из следующих значений: image/jpeg, image/gif или image/png.

og:image:width

Ширина изображения в пикселях. Укажите высоту и ширину изображения, чтобы при первой публикации оно загрузилось должным образом.

og:image:height

Высота изображения в пикселях. Укажите высоту и ширину изображения, чтобы при первой публикации оно загрузилось должным образом.

Там еще куча разных тегов есть, но в большинстве случаев вполне достаточно тех, которые в примере кода. В итоге получается вот такой симпатичный репостик.

Кстати, мои блоги на блоггере сами добавляют какую-то часть тегов OpenGraph, так что мне не приходится сильно заморачиваться

Поделиться
Отправить
Запинить
 25   2016   Facebook   OpenGraph   репосты
Популярное