Open Graph — правильные картинка, заголовок и описание сайта в соц сетях

open graph social - Open Graph - правильные картинка, заголовок и описание сайта в соц сетях

При публикации ссылок в социальных сетях, например, в vk.com, к ссылке автоматически подтягивается заголовок статьи, картинка и краткое описание.

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

<meta property = "og:title" content = "Заголовок " />
<meta property = "og:type" content = "article" />
<meta property = "og:image" content = "http://site.name/image-url" />
<meta property = "og:description" content = "Описание 30-40 слов" />

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

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

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

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