Open Graph — красивая разметка для ссылок в VK, Facebook и других соцсетях

Получить красивые ссылки внутри соцсетей очень просто, для этого существует стандарт микроразметки Open Graph, разработанная компанией Facebook. Со временем этот стандарт приняли на вооружение многие популярные социальные сети (Вконтакте, Google+, Twitter, LinkedIn, Pinterest и др.), а также Skype.

Далее примеры, чтобы было понятнее как выглядит, для подопытной страницы: http://mototip.ru/atv/stels/stels-atv-500.html

Ссылка в личных сообщениях VK с разметкой Open Graph и без:

Open Graph личные сообщения VK

Ссылка на стене сообщества VK (с разметкой OpenGraph):

OpenGraph - vk стена сообщества

Skype с Open Graph:

skype

Facebook с Open Graph:

facebook

Для наведения такой красоты, необходимо в секцию <head> html кода страницы вставить такие метатеги (пример с подопытной страницы):

Думаю из кода все понятно, но все-же поясню:

og:title — заголовок.

og:description — описание.

og:type — тип страницы, он может быть разным (website, article, video.movie и т.п.), думаю не все соцсети его одинаково поддерживают.

og:url — URL страницы.

og:image — URL картинки (обратите внимание, путь должен быть абсолютным).

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

В моем примере заметно, что для Вконтактика картинка в превью получается так себе, не очень удачно. Это связано с тем, что у неё практически стандартные для фоток пропорции 3 к 2 (ширина к высоте). Более удачно использовать фотографии с пропорциями 2 к 1. Как это делать — это уже другая задача (не каждую фотографию, да еще и автоматически, можно удачно подогнать под нужные пропорции).

Еще заметил, что VK фотографию кадрирует отрезая снизу лишнее, Facebook центрует и режет сверху и низу, Skype приводит к квадрату, остальные соцсети я даже не стал смотреть, чтобы не портить себе нервы.

4 thoughts on “Open Graph — красивая разметка для ссылок в VK, Facebook и других соцсетях

  1. Стоит добавить, что если есть возможность выбрать, то для og:image лучше указать картинку с наибольшим размером. Если размер меньше 200×200 px то тот же facebook просто выдаст ошибку.

  2. Сделал разметку, но все равно картинка в ВК тянется не корректная. В чем может быть проблема?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *