(Последнее обновление: 12.04.2019)

Привет, сеньоры и сеньориты! Во как. Так красиво я вас ещё не приветствовал. А это всё от того, что у нас сегодня тема касается красоты. Я вас научу, как красиво и правильно постить/делиться в социальные сети Facebook и Twitter. Для красивого отображение анонса статьи или главной страницы блога/сайта с картинкой в социальной сети Facebook и Twitter мы будем использовать разметку Facebook Open Graph и Twitter Cards. Названия звучат устрашающе, но, не так страшен чёрт, как его малюют. Сделать нужную разметку в вашем блоге совсем не трудно, надо всего лишь добавить несколько дополнительных <meta> тегов в секцию <head> шаблона Blogger и готово. Этой несложной работой мы сейчас и займёмся. Вот, как то так, друзья.

Open Graph

Протокол Open Graph для Blogger

Как вам известно, что основная часть материалов, которыми делятся люди в соцсетях, представлена в виде URL-адресов, поэтому для разметки HTML кода своего веб - ресурса важно использовать теги Open Graph. Они отвечают за то, как ваши материалы будут отображаться в социальной сети.
Анонс статьи без разметки:

Ссылка в Facebook

Ссылка в социальной сети Facebook

А так в Twitter:

Ссылка в Twitter

Ссылка на статью в Twitter

После того, как мы добавим мета теги в свой блог, ваши публикации будут выглядеть вот так, красиво:

В Твиттер:

Twitter Cards

Twitter Cards в действии

И правильная публикация в социальной сети FB:

Facebook Open Graph

Использование разметки Facebook Open Graph в Blogger

Для тех пользователей, кто хочет полноценно присутствовать в социальных сетях и публиковать красивые анонсы ваших статей в FB и Twitter - моя небольшая инструкция.

Добавляем разметку Twitter Cards в Blogger

У сервиса микроблогов есть свой аналог разметки Open Graph с таким названием Twitter Cards. Использование такой разметки позволяет получить красивые и более кликабельные превью постов для Твиттов со ссылкой на ваш сайт.

Twitter Cards — это механизм управления дополнительной информацией о вашей ссылке в социальной сети Twitter, при помощи которого веб-мастер может управлять выводом заголовков, описаний и изображений для ссылок в твитах. Позволяет выйти за рамки 140 символов и получить больше кликов

Чтобы передать красивую информацию сервису микроблогов, необходимо чуть ниже <head> в начале шаблона Blogger добавить следующие мета теги Twitter Cards (метаданные карточки Twitter):

<!-- START TWITTER CARD -->
    <meta content='summary' name='twitter:card'/> 
    <meta content='@zagulyaevsv' name='twitter:site'/>
    <meta content='new-school-blogger.blogspot.ru' name='twitter:domain'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' name='twitter:title'/>
    <b:else/>
    <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>  
    </b:if>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
    <b:else/>
    <meta content='ссылка на картинку' name='twitter:image:src'/>
    </b:if> 
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
     </b:if>
    <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
    <!--  END TWITTER CARD -->

Вот так, чтобы вы не ошиблись:

мета теги Twitter Cards

Добавить следующие мета теги Twitter Cards (метаданные карточки Twitter)

Теперь вам нужно в строке 3. заменить @zagulyaevsv на своё имя пользователя в Twitter. В строке 4. указать свой домен блога, а в 14. строчке мета тегов вставить ссылку на свою картинку, которая будет отображаться по умолчанию, если ваша статья не имеет фото, а также, если поделиться главной страницей блога (например, кнопка Нравится). Важно: картинку подбирайте большую и желательно по теме вашего блога. И ещё, первое изображение в ваших статьях должно быть тоже большое, так как подтягивается всегда фото номер один.

После того, как вы проделали всю работу, вам теперь нужно проверить свой блог в Twitter Card validator, правильно вы всё сделали или нет. Вставляете ссылку на свой блог или на статью и нажимаете кнопку Preview card:

Card validator

Проверка в Card validator блога

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

Карточка Твиттер

Карточка Твиттер для анонса статьи

Если все надписи в зелёном цвете, тогда всё окей. Идёте пить кофе или отпразднуете чем то покрепче. Теперь все ваши превью постов для Твиттов будут более привлекательны. Идем дальше. С птичкой твиттер мы разобрались, возьмёмся теперь за большого монстра Facebook.

Разметка Facebook Open Graph для Blogger/Blogspot

Facebook Open Graph

Facebook Open Graph для блога Blogger

FB самая популярная социальная сеть в мире и практически у каждого сайта/блога есть своя страница или группа в Facebook, которые наполняются вручную, либо автоматически новыми анонсами. В ленте новостей или на странице пользователей в Facebook публикуется короткий анонс внешней ссылки с изображением и небольшим описанием. И тут может случиться самое страшное (вам наверное знакомо): при публикации статьи в соцсеть FB, картинка или описание, появившееся в социальной сети, может совершенно исказить исходный материал и представить в анонсе несвязный текст или изображение мало связанное с темой ссылки (например, рекламные баннеры с боковой панели и так далее). Для того, чтобы исправить эту ситуацию был разработан дополнительный стандарт разметки страниц, получивший название Open Graph.

Если не использовать такую разметку на странице сайта, то при публикации ссылки в Facebook система в любом случае попробует построить превью. Это выходит далеко не так удачно - вместо картинки к статье может отражаться логотип с сайта, заголовок может быть заменен названием какой-нибудь категории блога и в краткое описание статьи попадет текст из рекламного баннера, который не будет отражать суть статьи и вряд ли порадует пользователя. Для красивого постинга в социальную сеть FB вам нужно добавить метаданные Facebook Open Graph в раздел <head> вашего блога и в <HTML ...> вставить маленькую строчку. И всё будет отлично. И так, в самом начале шаблона найдите приблизительно такое:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Или, в зависимости от шаблона, может быть такое - <HTML class='no-js'> Затем, в самом конце, перед закрывающим символом > добавьте: xmlns:og='http://ogp.me/ns#' Должно получиться всё вместе так:

код в шаблоне

Общий код в шаблоне с добавленным кодом

Или так (в зависимости у кого какой шаблон): <HTML class='no-js' xmlns:og='http://ogp.me/ns#'>. Сохраните шаблон. Если шаблон не сохраняется - обратите внимание, что между предпоследней строкой xmlns:expr='http://www.google.com/2005/gml/expr' и вновь вставленной xmlns:og='http://ogp.me/ns#' должен быть пробел.

Далее, чуть ниже <head> вставляем вот такие мета теги:

<!-- Start Open Graph Protocol -->
<meta expr:content='data:blog.pageName' property='og:title'/> 
<meta expr:content='data:blog.canonicalUrl' property='og:url'/> 
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/> 
<meta content='1200' property='og:image:width'/> 
<meta content='630' property='og:image:height'/>
<b:else/>
<meta content='ссылка на картинку, по умолчанию' property='og:image'/> </b:if>
<b:if cond='data:blog.metaDescription'> 
<meta expr:content='data:blog.metaDescription' name='og:description'/> <b:else/> <meta expr:content='data:post.snippet' name='og:description'/> </b:if>
<!-- End Open Graph Protocol -->

В 11. строке мета тегов вставьте ссылку на картинку (большую, не менее 200 px по 200 px, соотношение 3 : 1), которая будет по умолчанию. Если главной страницей блога или записью поделятся (shared) и они не содержит изображений, то тогда будет использоваться эта картинка.

И последнее, по желанию. Для того, чтобы использовать/собирать статистику о том, как люди взаимодействуют с вашим доменом на Facebook, то вам надо добавить к предложенным выше, ещё пару мета тегов:

<meta content='app_id' property='fb:app_id'/>

<meta content='fb_admins' property='fb:admins'/>

Естественно, app_id и fb_admins надо заменить с вашими данными. Для этого, вам нужно создать приложение и добавить свой домен в Facebook Insights. Здесь - https://www.facebook.com/insights.

Кроме построения превью и сниппетов, стандарт Open Graph могут использовать разработчики приложений для публикации действий пользователей в Facebook. В таких публикациях можно указывать действующее лицо (пользователя), объект, действие с этим объектом и название приложения, с помощью которого это действие было произведено.

Инструкции не будет, так как это не главное. Хотя, кому надо, пишите в комментах, тогда дополню этот пост инструкцией, как получить app-id и fb-admins для Facebook Open Graph. А на сегодня, всё господа. Надеюсь что, ни чего не пропустил и данная инструкция будет вам полезна. Удачи и встретимся в социальных сетях, посмотрю ваши красивые анонсы. Пока, пока.

Справка: Open Graph разработан социальной сетью Facebook Марка Цукерберга. Протокол Open Graph позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях. Разметку Open Graph используют Facebook, ВКонтакте, Google+, Twitter, и другие.