2016-02-28

Внедряем разметку Open Graph на blogspot для красивого постинга в соц.сети

open graph blogspot
Как сделать красивые ссылки в соцсетях, когда делятся вашими записями? Для этого нужно внедрить разметку Open Graph, которая предназначена для постинга в социальные сети. Встречался ли вам такой эффект, когда вы делитесь ссылкой в социальной сети определенной страницей, при этом картинка в анонс встраивается совсем “левая”, не относящаяся к теме, например, рекламный баннер; заголовок – название блога; а описание – текст из футера блога. Если такая проблема именно с вашим блогом, то это легко исправить, главное внедрить разметку Open Graph. В этой статье мы будем внедрять разметку Open Graph в блог Blogspot / Blogger. Встроив разметку Open Graph, вы сможете делать красивые публикации ваших записей в социальных сетях. Самое сложное это настроить Open Graph для Facebook, поэтому в этой статье я остановлюсь на этом подробно.
..
Читайте также про настройку микроразметки Schema.org для Blogspot
Перед тем, как перейти к настройке open Graph, ознакомьтесь с его основными мета-тегами:
  • og:title: Прописывается заголовок вашей записи, блога и т.п..
  • og:url: Это условие прописывает url (ссылку) на вашу запись, блог.
  • og:image: Это условие поможет установить нужную картинку в пост ленты социальной сети.
  • og:type: Определяет тип вашего контента, например, статья или видео.

Настройка Open graph для Blogger

  1. Идем в панель управления blogspot –> Шаблон –> изменить html (или в редактор шаблона блогов),
  2. находим тег <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'>
  3. Добавляем к этому тегу xmlns:og='http://ogp.me/ns#', в результате должно получиться следующее:
    <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, который позволяет двигаться дальше, чтобы добавить 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 x 200 пикселей и которая отражает тематику вашего сайта. Именно она будет встраиваться в запись ленты фейсбук, когда кто-нибудь захочет поделиться главной страницей вашего сайта. Эта картинка должна в идеале иметь соотношения сторон 3:1 и формат PNG, JPEG или GIF.
    Также вам нужно заменить 'app_id' и 'fb_admins' на соответствующие значения. Как их узнать читайте дальше в следующих ппунктах данной статьи.
  6. Перейдите на страницу https://www.facebook.com/insights/
    Нажмите на кнопку “add domen”, у вас появится окно с метатегом, который выглядит так <meta property="fb:admins" content="XXX">, но не торопитесь заполнять пока форму. Скопируйте метатег и вставьте его значение вместо 'fb_admins'.
    мета тег facebook open graph
  7. Не заполняйте форму, так как у вас неизбежно выскочит ошибка. Это нужно будет сделать позднее.
  8. Вначале нам нужно получить id приложения. Перейдите на https://developers.facebook.com/apps.
    Зарегистрируйтесь в качестве разработчика:
    зарегистрироваться на facebook developer
    регистрация на facebook developer
  9. Добавьте новое приложение, нажав на кнопку “Add a new app”.
    Добавьте ваш веб-сайт, на котором вы настраиваете Open Graph. Для этого нажмите на значок WWW (website):
    добавить новое приложение facebook
    Введите домен вашего сайта:
    добавить новвый сайт facebook
    Выберите категорию и нажмите на кнопку “Создайте идентификатор приложения”:
    создать новое приложение facebook
    Далее вы получите Javascript. В этом скрипте выделен зеленым цветом ваш номер appId, в моем случае - это 170081493506939 (смотри скриншот ниже). Его мы вставим вместо 'app_id' в коде, который мы добавляли в четвертом пункте.
    В строку Tell us about your website введите адрес вашего сайта. Завершите настройку – для этого можно просто проскролить вниз.
    скрипт app id facebook
    2016-02-28_14-09-46
  10. Теперь вернемся к настройке приложения, которое мы не закончили в шестом пункте. Снова перейдите на https://www.facebook.com/insights/ и уже пропишите домен и завершите настройку, нажав на кнопку “Получить статистику”.
    добавить статистику для вашегосайта
    Если вы все сделали правильно, то действие будет завершено. Обновите страницу, и вы увидите
    Проверьте себя – посмотрите на код, который получился у меня после правки:
    open graph протокол на blogger

Только через некоторое время вы можете попробовать поделиться вашими сообщениями в социальных сетях, так как данные кэшируются. Есди у вас нет желания ждать, то вы можете ускорить обновление информации при помощи инструмента Debugger. Введите десь адрес вашего сайта, и после получения сведений, нажмите на кнопку “Fetch new scrape information”.
Примечание: для того, чтобы описание вашего поста соответствовало содержанию, нужно приписать к каждому сообщению description. Читайте про настройку description на blogspot. А также у вас не должны быть настроены динамические теги description к статьям блога.

12 комментариев :

-Аdmin- комментирует...

Здравствуйте, автор! всё делал по вашей инструкции, но не получается. при финальной проверке выдаёт ошибку. Поэтому, хочу уточнить кое-какие непонятные моменты в статье.
Во первых, насчёт 6-го пункта : "скопируйте <meta property="fb:admins" content="XXX"> и вставьте вместо 'fb_admins'. Что именно копировать и вставлять то? полностью вот эту строку, которую выдаёт фейсбук - <meta property="fb:admins" content="XXX"> или само цифровое число? Там, насколько я понимаю, цифры - это номер ID аккаунта пользователя, этот ID можно узнать посмотрев свой профиль, не обязательно заходить сюда - https://www.facebook.com/insights/.

Далее. Насчёт пункта 9. Введите домен сайта. Какой именно домен нужно вводить, если у меня блог привязан к домену blogspot? то есть - он международный, он может быть и с .ru на окончании и с .com и к примеру .de - если для Германии.

Flint Rid комментирует...

Нет кнопки создать домен, есть только создать страницу и создать приложение((

Иванова Наталья комментирует...

нужно создать приложение

-Аdmin- комментирует...

Наталья, доброго дня! чё-то у меня в последние несколько дней - перестал работать опенграф как положено при постинге статей в ФБ и ВК. Конкретнее - не подхватывается текст из Description статьи, а подхватывается начальный вступительный текст статьи. А должен подхватываться именно из Description - краткое описание статьи.
Раньше работало всё ок, настройки никакие не менял. Проверьте у себя - как у вас статьи из блога постятся в соц.сети?

Иванова Наталья комментирует...

Да, я заметила, что опен граф некорректно работает с description. Код в этой записи указан верно, дело в шаблоне. На моем тестовом блоге со стандартным шаблоном этот код работает отлично.

-Аdmin- комментирует...

Да не, причём тут шаблон то? я ж говорю - у меня недавно началось это... Раньше опенграф нормально работал и в старом стандартном шаблоне и в новом. Я его настроил уже очень давно. Вот буквально на днях заметил косяк. С чем он связан - не пойму, думал - может в самой системе опенграф что-то поменялось?
Или может один из скриптов в блоге - нарушает работу опенграфа (может такое быть)?

Иванова Наталья комментирует...

Ну и что, что недавно. Я заметила, что микроразметка schema.org статей на блогах, на которых не работает опен граф, неправильно показывает description. Именно микроразметку и нужно править. Микроразметка у меня также была правильная, но все меняется, и видимо Blogger вновь привнес свои изменения, и теперь снова придется искать ошибки, вносить изменения, приспосабливаться.

-Аdmin- комментирует...

"Ну и что, что недавно" - как это что?) Это как раз основная мысль. Смысл в том, что у меня работал опенграф нормально, а недавно вот перестал работать нормально. Я и пытаюсь понять - в чём проблема может быть? Вы думаете, что в разметке шема.орг? Или всё таки может скрипты тоже виноваты? Я недавно скрипт подключил в сайдбар, может из-за него?

А если в шема орг, то как эту шему до ума довести?)) Подскажите, плиз, если знаете, Наталья.

Иванова Наталья комментирует...

Я не думаю, что дело в скриптах или в других изменениях. Я давно вообще блогом не занималась, и все было нормально, как с опен граф, так и со schema org. Скорее всего изменения коснулись самого Blogger, что-то стало отражаться по-другому. Как пока это исправить не знаю.

Иванова Наталья комментирует...

Вообще, мне не кажется это такой большой проблемой

Kesha комментирует...

Здравствуйте, есть ли возможность для каждой страницы блога устанавливать отдельное изображение? Как я понимаю, поскольку оно в голове, то нет... А очень жаль.
У меня ещё вопрос, я что-то наудалял по глупости, думал, что несущественное, теперь у меня в соответствии с настройками шаблона выглядит только заголовок сообщения, а у страниц все заголовки белые, без форматирования, хотя в режиме просмотре при редактировании всё как должно быть. Что теперь делать, не представляю. Гляньте, пожалуйста, если можно https://messenger-wowapp.blogspot.ru/
И ещё, при тестировании сайта на ошибки регулярно получаю сообщение, что отсутствует заголовок Н1. Как мне исправить эту ошибку? В гаджете Заголовок страницы у меня был одно время вариант "изображение Вместо заголовка и описания", чтобы не загромождать верх. Сейчас убрал, но ошибка не исчезла.

Иванова Наталья комментирует...

Kesha, а куда вы хотите устанавливать это отдельное изображение для каждой страницы блога?
Для форматирования заголовков страниц пропишите ваши данные в код вида:
h3.post-title { здесь цвет, размер заголовка и пр; }

Пример: h3.post-title { margin-top: 20px;
font-family: Times New Roman;
font-size: 30px;
color: #B10000; }

Ошибка возникает, потому что тега H1 у вас нет. На главной странице тегом H1 обычно прописывают заголовок блога, а на страницах сообщений - заголовки сообщений (статей).

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML