Микроразметка Open Graph и Twitter Cards для Blogger
Микроразметка Open Graph и Twitter Cards в Blogger нужна для лучшего взаимодействия с социальными сетями, чтобы публикуемые ссылки с вашего сайта выглядели красиво: была актуальная картинка, текст располагался ровно и был читабельным.
Изначально, Open Graph был внедрен командой фейсбук для того, чтобы публикуемые анонсы статей смотрелись подобающем образом. А впоследствии, аналогичную разметку (Twitter Cards) внедрил твиттер и другие соцсети.
Чтобы наглядно увидеть как работает разметка, посмотрите на публикацию в твиттер без нее. Просто название статьи и ссылка:
А вот тот же самый твит, но с разметкой Twitter Cards. Мы видим уже изображение из статьи, заголовок и описание:
Сегодня мы будем внедрять микроразметку Open Graph и Twitter Cards в шаблон Blogger.
Добавляем микроразметку Open Graph
Чтобы внедрить Open Graph в блоггер, необходимо в шаблоне найти строку, которая находится в самом верху и приблизительно выглядит так (в некоторых шаблонах может незначительно отличаться):
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' 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'>
Затем, перед закрывающимся символом >, после http://www.google.com/2005/gml/expr', ставим пробел (наличие пробела обязательно) и добавляем строку: xmlns:og='http://ogp.me/ns#'.
Должно получится: 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 -->
В коде, вместо надписи: "Ссылка на картинку", вставляем ссылку на изображение, которое будет использоваться для главной страницы сайта, а также, для публикаций в которых нет картинок.
Добавляем микроразметку Twitter Cards
Чтобы добавить микроразметку Twitter Cards в Blogger, необходимо в шаблон, чуть ниже <head> вставить следующий код:
<!-- START TWITTER CARD --><meta content='summary' name='twitter:card'/><meta content='@sawich86' name='twitter:site'/><meta content='news-sawich.blogspot.com/' 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 -->
В коде замените: sawich86 на свой логин в твитер, news-sawich.blogspot.com на адрес своего блога. А также добавьте ссылку на изображение для главной страницы и статей без картинок вместо надписи: "Ссылка на картинку".
На этом все, разметки Open Graph и Twitter Cards добавлены на ваш сайт Blogger. Теперь анонсы ваших статей в социальных сетях будут выглядеть красиво и будут привлекать внимание читателей.
Комментарии