Внедряем разметку 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. находим тег <html>. Он может выглядеть примерно так

    <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='https://www.google.com/2005/gml/b' xmlns:data='https://www.google.com/2005/gml/data'  xmlns:expr='https://www.google.com/2005/gml/expr'>

  3. Добавляем к этому тегу xmlns:og='http://ogp.me/ns#', в результате должно получиться следующее:

    <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='https://www.google.com/2005/gml/b' xmlns:data='https://www.google.com/2005/gml/data' xmlns:expr='https://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'.
     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 ответов к «Внедряем разметку Open Graph на blogspot для красивого постинга в соц.сети»

  1. Здравствуйте, автор! всё делал по вашей инструкции, но не получается. при финальной проверке выдаёт ошибку. Поэтому, хочу уточнить кое-какие непонятные моменты в статье.
    Во первых, насчёт 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 — если для Германии.

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

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

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

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

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

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

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

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

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

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

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

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

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