Facebook Open Graph и Twitter Cards для Blogger

Привет, сеньоры и сеньориты! Во как. Так красиво я вас ещё не приветствовал. А это всё от того, что у нас сегодня тема касается красоты. Я вас научу, как красиво и правильно постить/делиться в социальные сети 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):

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

мета теги 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 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> вставляем вот такие мета теги:

В 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, и другие.

 



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

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

Решите задачку: *