Привет, сеньоры и сеньориты! Во как. Так красиво я вас ещё не приветствовал. А это всё от того, что у нас сегодня тема касается красоты. Я вас научу, как красиво и правильно постить/делиться в социальные сети Facebook* и Twitter. Для красивого отображение анонса статьи или главной страницы блога/сайта с картинкой в социальной сети Facebook и Twitter мы будем использовать разметку Facebook* Open Graph и Twitter Cards для блога Blogger. Для WordPress инструкция тут.
Названия звучат устрашающе, но, не так страшен чёрт, как его малюют. Сделать нужную разметку в вашем блоге совсем не трудно, надо всего лишь добавить несколько дополнительных <meta> тегов в секцию <head> шаблона Blogger и готово. Этой несложной работой мы сейчас и займёмся. Вот, как то так, друзья.
Как вам известно, что основная часть материалов, которыми делятся люди в соцсетях, представлена в виде URL-адресов, поэтому для разметки HTML кода своего веб - ресурса важно использовать теги Open Graph. Они отвечают за то, как ваши материалы будут отображаться в социальной сети. Анонс статьи без разметки:
А так в Twitter:
После того, как мы добавим мета теги в свой блог, ваши публикации будут выглядеть вот так, красиво:
В Твиттер:
И правильная публикация в социальной сети FB*:
Для тех пользователей, кто хочет полноценно присутствовать в социальных сетях и публиковать красивые анонсы ваших статей в FB* и Twitter - моя небольшая инструкция. Как добавить мета-теги Open Graph и Twitter Cardsна свой веб-сайт Blogger.
Добавляем разметку 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 == "item"'>
<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 --> Вот так, чтобы вы не ошиблись:
Теперь вам нужно в строке 3. заменить @zagulyaevsv на своё имя пользователя в Twitter. В строке 4. указать свой домен блога, а в 14. строчке мета тегов вставить ссылку на свою картинку, которая будет отображаться по умолчанию, если ваша статья не имеет фото, а также, если поделиться главной страницей блога (например, кнопка Нравится). Важно: картинку подбирайте большую и желательно по теме вашего блога. И ещё, первое изображение в ваших статьях должно быть тоже большое, так как подтягивается всегда фото номер один.
После того, как вы проделали всю работу, вам теперь нужно проверить свой блог в , правильно вы всё сделали или нет. Вставляете ссылку на свой блог или на статью и нажимаете кнопку Preview card:
Вот, так, должна выглядеть итоговая карточка вашего блога - главная страница с картинкой по умолчанию. А так, ссылка на запись:
Если все надписи в зелёном цвете, тогда всё окей. Идёте пить кофе или отпразднуете чем то покрепче. Теперь все ваши превью постов для Твиттов будут более привлекательны. Идем дальше. С птичкой твиттер мы разобрались, возьмёмся теперь за большого монстра Facebook*.
Разметка Facebook* Open Graph для Blogger/Blogspot
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*, ВКонтакте, Twitter, и другие.
*Компания Meta, которой принадлежит Facebook и Instagram, признана в России экстремистской организацией.
