Содержание

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

ОпубликованоАвторЛеха4 комментария

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

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

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

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

Skype с Open Graph:

Facebook с Open Graph:

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

<meta property = «og:title» content = «Квадроцикл Stels ATV-500» /> <meta property = «og:description» content = «Квадроцикл Stels ATV-500 — отзывы, фотографии, технические характеристики.

Объявления о продаже мотовездехода Stels ATV-500.» /> <meta property = «og:type» content = «website» /> <meta property = «og:url» content = «http://mototip.ru/atv/stels/stels-atv-500.html» /> <meta property = «og:image» content = «http://mototip.ru/assets/cache/pictures/large_og—c811—stels-atv500.jpg» />

<meta property = «og:title» content = «Квадроцикл Stels ATV-500» />

<meta property = «og:description» content = «Квадроцикл Stels ATV-500 — отзывы, фотографии, технические характеристики. Объявления о продаже мотовездехода Stels ATV-500.» />

<meta property = «og:type» content = «website» />

<meta property = «og:url» content = «http://mototip.ru/atv/stels/stels-atv-500.html» />

<meta property = «og:image» content = «http://mototip.ru/assets/cache/pictures/large_og—c811—stels-atv500.jpg» />

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

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

og:description

— описание.

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

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

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

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

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

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

Настройка корректного отображения репоста в соцсетях

  1. Отображение единого логотипа и описания репоста в соцсети “ВКонтакте”
  2. Отображение изображения для каждого репоста новости в соцсети “ВКонтакте”
  3. Отображение изображения и описания репостов новостей в Facebook
  4. Отображение единого логотипа и описания репоста в Twitter
  5. Примечания

Отображение единого логотипа и описания репоста в соцсети “ВКонтакте”

Чтобы репосты в социальной сети “ВКонтакте” отображались правильно и привлекательно с точки зрения подписчиков вашей группы, необходимо внести небольшие дополнения в шаблоны «Страница материала и комментариев к нему» для модулей “Блог” и “Новости”. Кроме того, постинг также доступен для модулей ”Каталог файлов” и “Доска объявлений”.

  • Настройка единого логотипа и описания. Для настройки войдите в Панель управления — Модули — Расширения — Постинг в соц.сети — Настройки.

По умолчанию настроено отображение логотипа uCoz, которое вы можете изменить на свое, нажав на иконку логотипа.

Загрузите собственную иконку. Загруженная вами иконка будет отображаться для всех материалов. Длину описания вы можете настроить там же в настройках расширения “Постинг в соц.сети”. Подключите модули, для которых нужно выводить описание, и настройте оптимальное количество символов для описания.

  • Редактирование шаблонов и установка кода

Для установки кода нам потребуется отредактировать шаблон “Страница материала и комментариев к нему”. Панель управления — Дизайн — Редактор — Новости сайта (“Блог”, “Каталог файлов” и “Доска объявлений”) — Страница материала и комментариев к нему. Найдите в шаблоне закрывающий тег

</head>, вставьте перед ним код и сохраните шаблон:

<?if($SOCIAL_IMAGE_SRC$)?>
<link rel="image_src" href="$HOME_PAGE_LINK$<?substr($SOCIAL_IMAGE_SRC$,1)?>" />
<?endif?>
<meta name="title" content="<?if($MODULE_ID$='blog' or $MODULE_ID$='news')?>$ENTRY_NAME$<?else?>$ENTRY_TITLE$<?endif?>" />
<meta name="description" content="$SOCIAL_DESCRIPTION$" />
  • $SOCIAL_IMAGE_SRC$ — это код иконки, которую вы установили в настройках “Постинг в соц.
    сети”.
  • $ENTRY_NAME$ — используется для вывода названия материала в модулях “Новости сайта” и “Блог”.
  • Если вы настраиваете шаблоны модулей “Каталог файлов” или “Доска объявлений”, замените $ENTRY_NAME$ на $ENTRY_TITLE$.
  • $SOCIAL_DESCRIPTION$ — используется для вывода краткого описания материала, который вы подключили и настроили в настройках модуля “Постинг в соц. сети”.

Отображение изображения для каждого репоста новости в соцсети “ВКонтакте”

  • Редактирование шаблонов и установка кода

Для установки кода нам потребуется отредактировать шаблон “Страница материала и комментариев к нему

”. Панель управления — Дизайн — Редактор — Новости сайта (“Блог”, “Каталог файлов” и “Доска объявлений”) — Страница материала и комментариев к нему. Найдите в шаблоне закрывающий тег </head>, вставьте перед ним код и сохраните шаблон:

<?if($IMG_URL1$)?>
<link rel="image_src" href="$HOME_PAGE_LINK$<?substr($IMG_URL1$,1)?>" />
<?endif?>
<meta name="title" content="<?if($MODULE_ID$='blog' or $MODULE_ID$='news')?>$ENTRY_NAME$<?else?>$ENTRY_TITLE$<?endif?>" />
<meta name="description" content="$SOCIAL_DESCRIPTION$" />
  • $IMG_URL1$ — это код изображения, которое вы прикрепили к материалу.
    Отображаться будет первое прикрепленное изображение. Если в материалах вы используете изображения из файлового менеджера или сторонние изображения, при постинге они отображаться не будут!
  • $ENTRY_NAME$ — используется для вывода названия материала в модулях “Новости сайта” и “Блог”.
  • Если вы настраиваете шаблоны модулей “Каталог файлов” или “Доска объявлений”, замените $ENTRY_NAME$ на $ENTRY_TITLE$.
  • $SOCIAL_DESCRIPTION$ — используется для вывода краткого описания материала, который вы подключили и настроили в настройках модуля “Постинг в соц. сети”.

Отображение изображения и описания репостов новостей в Facebook

Для правильного отображения репостов в социальной сети Facebook нужно использовать микроразметку Open Graph. Стандарт Open Graph используется такими соцсетями, как LinkedIn, “ВКонтакте” и др.

  • Редактирование шаблонов и установка кода

Для установки кода нам потребуется отредактировать шаблон “Страница материала и комментариев к нему”. Панель управления — Дизайн — Редактор — Новости сайта (“Блог”, “Каталог файлов” и “Доска объявлений”) — Страница материала и комментариев к нему. Найдите в шаблоне закрывающий тег

</head>, вставьте перед ним код и сохраните шаблон:

<meta property="og:locale" content="ru_RU" />
<meta property="og:url" content="$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>" />
<meta property="og:type" content="article" />
<meta property="og:title" content="<?if($MODULE_ID$='blog' or $MODULE_ID$='news')?>$ENTRY_NAME$<?else?>$ENTRY_TITLE$<?endif?>" />
<meta property="og:description" content="$SOCIAL_DESCRIPTION$" />
<meta property="og:image" content="<?if($IMG_URL1$)?>$HOME_PAGE_LINK$<?substr($IMG_URL1$,1)?><?else?><?substr($SOCIAL_IMAGE_SRC$,0,strpos($SOCIAL_IMAGE_SRC$,"?"))?><?endif?>"/>
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="<?if($IMG_URL1$)?>600<?else?><?if($SOCIAL_IMAGE_SRC$)?>220<?endif?><?endif?>" />
<meta property="og:image:height" content="<?if($IMG_URL1$)?>315<?else?><?if($SOCIAL_IMAGE_SRC$)?>160<?endif?><?endif?>" /> 
  • meta property=»og:title» — отвечает за заголовок материала. Для модулей “Новости” и “Блог” — это $ENTRY_NAME$. Для модулей “Каталог файлов” и “Доска объявлений” — $ENTRY_TITLE$.
  • meta property=»og:description» — отвечает за описание материала.
  • meta property=»og:image» — выводит общий логотип для материалов, если прописан код $SOCIAL_IMAGE_SRC$, или индивидуальное изображение для каждого материала, если прописан код $IMG_URL1$.
  • meta property=»og:image:type» — размеры картинки. Параметры 220 и 160 вы можете изменить.

Отображение единого логотипа и описания репоста в Twitter

Записи, публикуемые в Twitter, автоматически сокращаются до 140 символов, независимо от настроек модуля. Для постинга в Twitter с изображением логотипа сайта используйте следующий код:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="<?if($MODULE_ID$='blog' or $MODULE_ID$='news')?>$ENTRY_NAME$<?else?>$ENTRY_TITLE$<?endif?>">
<meta name="twitter:description" content="$SOCIAL_DESCRIPTION$">
<meta name="twitter:url" content="$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>" />
<meta name="twitter:image" content="<?if($IMG_URL1$)?>$HOME_PAGE_LINK$<?substr($IMG_URL1$,1)?><?else?><?substr($SOCIAL_IMAGE_SRC$,0,strpos($SOCIAL_IMAGE_SRC$,"?"))?><?endif?>" />

Примечания

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

  • Сброс кеша для социальной сети “ВКонтакте”: https://new.vk.com/dev/pages.clearCache
  • Сброс кеша и валидатор Facebook: https://developers.facebook.com/tools/debug/
  • Сброс кеша и валидатор Twitter: https://cards-dev.twitter.com/validator

Важно: Обязательно к прочтению 
  • В старой панели управления. Перейдите в Панель управления — Главная — Настройки — Общие настройки — URL адрес вашего сайта.
  • В новой панели управления. Перейдите в Панель управления — Главная — Настройки — URL адрес вашего сайта.

Проверяем урл адрес, если у вас урл выглядит подобно http://sitename.ucoz.ru/ тогда ничего менять не нужно, но если выглядит примерно так http://sitename.ucoz.ru то есть в урл адреса сайта нет крайнего слэша. В таком случае в кодах с примеров ниже:

$HOME_PAGE_LINK$<?substr($SOCIAL_IMAGE_SRC$,1)?>
$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>
$HOME_PAGE_LINK$<?substr($IMG_URL1$,1)?>
$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>
$HOME_PAGE_LINK$<?substr($PHOTO$,1)?>
$HOME_PAGE_LINK$<?substr($PHOTO_1$,1)?>
$HOME_PAGE_LINK$<?substr($DESC_LINK$,1)?>
<?substr($HOME_PAGE_LINK$,0,-1)?>

нужно произвести изменения заменив эти коды выше на:

$HOME_PAGE_LINK$$SOCIAL_IMAGE_SRC$
$HOME_PAGE_LINK$$ENTRY_URL$
$HOME_PAGE_LINK$$IMG_URL1$
$HOME_PAGE_LINK$$ENTRY_URL$
$HOME_PAGE_LINK$$PHOTO$
$HOME_PAGE_LINK$$PHOTO_1$
$HOME_PAGE_LINK$$DESC_LINK$
$HOME_PAGE_LINK$

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

Важно: Если вы планируете делиться товарами с модуля Интернет-Магазин в социальной сети Вконтакте, в шаблон Страница товара между тегов <head>сюда</head>, вставьте код:

<?if($PHOTO$)?>
<link rel="image_src" href="<?if($PHOTO$)?>$HOME_PAGE_LINK$<?substr($PHOTO$,1)?><?else?>$HOME_PAGE_LINK$<?substr($PHOTO_1$,1)?><?endif?>" />
<?endif?>
<meta name="title" content="$ENTRY_TITLE$" />
<meta name="description" content="<?substr($META_DESCRIPTION$,34,strpos(substr($META_DESCRIPTION$,34),'>')-3)?>" />

Для социальной сети Facebook в шаблон Страница товара между тегов <head>сюда</head> вставьте код:

<meta property="og:locale" content="ru_RU" /> 
<meta property="og:url" content="$HOME_PAGE_LINK$<?substr($DESC_LINK$,1)?>" /> 
<meta property="og:type" content="article" />
<meta property="og:title" content="$ENTRY_TITLE$" />
<meta property="og:description" content="<?substr($META_DESCRIPTION$,34,strpos(substr($META_DESCRIPTION$,34),'>')-3)?>" />
<meta property="og:image" content="<?if($PHOTO$)?>$HOME_PAGE_LINK$<?substr($PHOTO$,1)?><?else?>$HOME_PAGE_LINK$<?substr($PHOTO_1$,1)?><?endif?>"/>
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />

Для корректной публикации товаров с модуля Интернет-магазин в Twitter, вам нужно в шаблон — Страницы товара между тегов <head>сюда</head> вставить код:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="$ENTRY_TITLE$">
<meta name="twitter:description" content="<?substr($META_DESCRIPTION$,34,strpos(substr($META_DESCRIPTION$,34),'>')-3)?>">
<meta name="twitter:url" content="$HOME_PAGE_LINK$<?substr($DESC_LINK$,1)?>" />
<meta name="twitter:image" content="<?if($PHOTO$)?>$HOME_PAGE_LINK$<?substr($PHOTO$,1)?><?else?>$HOME_PAGE_LINK$<?substr($PHOTO_1$,1)?><?endif?>" />

Важно: Если вы планируете делиться фотографиями с модуля «Фотоальбомы» в социальной сети Вконтакте, в шаблон — Страница с полной фотографией и комментариями между тегов <head>сюда</head>, вставьте код:

<link rel="image_src" href="<?substr($HOME_PAGE_LINK$,0,-1)?><?substr($FULL_PHOTO_DIRECT_URL$,0,strpos($FULL_PHOTO_DIRECT_URL$,"?"))?>" />
<meta name="title" content="$PHOTO_NAME$" />
<meta name="description" content="$PHOTO_DESCR$" />

Для социальной сети Facebook в шаблон — Страница с полной фотографией и комментариями между тегов <head>сюда</head> вставьте код:

<meta property="og:locale" content="ru_RU" />
<meta property="og:type" content="image" /> 
<meta property="og:title" content="$PHOTO_NAME$" /> 
<meta property="og:description" content="$PHOTO_DESCR$" /> 
<meta property="og:url" content="$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>" /> 
<meta property="og:image" content="<?substr($HOME_PAGE_LINK$,0,-1)?><?substr($FULL_PHOTO_DIRECT_URL$,0,strpos($FULL_PHOTO_DIRECT_URL$,"?"))?>"/> 
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />

Для корректной публикации фотографий с модуля Фотоальбомы в Twitter, вам нужно в шаблон — Страница с полной фотографией и комментариями между тегов <head>сюда</head> вставить код:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="$PHOTO_NAME$">
<meta name="twitter:description" content="$PHOTO_DESCR$">
<meta name="twitter:url" content="$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>" />
<meta name="twitter:image" content="<?substr($HOME_PAGE_LINK$,0,-1)?><?substr($FULL_PHOTO_DIRECT_URL$,0,strpos($FULL_PHOTO_DIRECT_URL$,"?"))?>" />

Примечание по фотоальбому: Если при постинге в соц-сети изображение не будет подгружаться, в коде выше замените оператор $FULL_PHOTO_DIRECT_URL$ на $PHOTO_URL$ .

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

Blog2Social — планируйте публикации в социальных сетях, таких как Facebook, автоматически публикуйте в Facebook, делитесь сообщениями блога в Facebook, Twitter, LinkedIn, Instagram

Что такое теги OG Open Graph для Facebook?

Идентификационный номер 1107