Как добавить Facebook Open Graph мета теги к блогу

суббота, апреля 09, 2016 Nata 0 Comments

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

В оригинале статьи (http://www.technohalf.com/2015/01/how-to-add-facebook-open-graph-to-blogger-blog.html) описаны некоторые особенности, а также то, где брать ID для вашего приложения. Я же здесь привожу не всю статью целиком, а только ее часть.


Для facebook существуют специальные open-graph мета теги, которые должны быть размещены на странице между тегами <head> </head>. Эти теги позволяют задать заголовок, описание и изображение для сообщения, которым вы собираетесь поделиться в социальной сети.
Базовые Open Graph теги включают:
  • og:title = заголовок, например, "Как добавить Facebook Open Graph мета теги к блогу"
  • og:url = URL сообщения, например, "http://it.nata.cv.ua/2016/04/how-to-add-facebook-open-graph-to.html"
  • og:description =  описание сообщения
  • og:image = URL изображения размером минимум 200×200 пикселей
  • og:type = article (если не указывать, то по умолчанию будет “веб-сайт”)
Чтобы задать параметры мета тегов выполните следующие шаги:
1. Откройте меню Blogger > Dashboard > Template > Edit HTML
2. В редакторе в самом верху найдите следующий код, начинающийся с html xmlns:
<html 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'>
3. Добавьте xmlns:og='http://ogp.me/ns#' перед закрытием этого тега. Если нужных строк вы не нашли, то просто вставьте следующий код после <head>:
<html 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'
xmlns:og='http://ogp.me/ns#'>
4. На предыдущем шаге вы добавили тег протокола фейсбука, который необходим для дальнейшего добавления Open Graph мета тегов в блог. Найдите тег <head> и добавьте после него следующий код:
<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 property='og:image:width' content='1200'/>
<meta property='og:image:height' content='630'/>
<b:else/>
<meta content='logo-link' 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>
<meta content='app_id' property='fb:app_id'/>
<meta content='fb_admins' property='fb:admins'/>
5. В коде вы должны заменить "logo-link" на путь к изображению, представляющему логотип вашего блога. Изображение должно быть размерами минимум 200 х 200 пикселей, максимальным сжатием 3:1, формата PNG, JPEG или GIF. Кроме этого необходимо в коде заменить параметры app_id и fb_admins на значения, которые предоставляет фейсбук при создании приложения. Как именно создавать в фейсбуке приложение описано в оригинале статьи.

Некоторые мои замечания:
- мета тег fb_admins я в код вообще не добавляла,
- не добавляла также и теги для размера картинки (og:image:width и og:image:height)



0 коммент.:

Примечание. Отправлять комментарии могут только участники этого блога.