Внедряем разметку 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
..
- Идем в панель управления blogspot –> Шаблон –> изменить html (или в редактор шаблона блогов),
- находим тег <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'>
- Добавляем к этому тегу 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#'>
- Поздравляем вы успешно добавили протокол 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'/> - Вам нужно изменить в предложенном коде те отрезки, которые выделены цветом. logo-link – выделено фиолетовым цветом – это ссылка на изображение, которое является логотипом вашего сайта. Вы можете использовать любую картинку, размер которой больше, чем 200 x 200 пикселей и которая отражает тематику вашего сайта. Именно она будет встраиваться в запись ленты фейсбук, когда кто-нибудь захочет поделиться главной страницей вашего сайта. Эта картинка должна в идеале иметь соотношения сторон 3:1 и формат PNG, JPEG или GIF.
Также вам нужно заменить 'app_id' и 'fb_admins' на соответствующие значения. Как их узнать читайте дальше в следующих ппунктах данной статьи. - Перейдите на страницу https://www.facebook.com/insights/
Нажмите на кнопку “add domen”, у вас появится окно с метатегом, который выглядит так <meta property="fb:admins" content="XXX">, но не торопитесь заполнять пока форму. Скопируйте метатег и вставьте его значение вместо 'fb_admins'.
- Не заполняйте форму, так как у вас неизбежно выскочит ошибка. Это нужно будет сделать позднее.
- Вначале нам нужно получить id приложения. Перейдите на https://developers.facebook.com/apps.
Зарегистрируйтесь в качестве разработчика:
- Добавьте новое приложение, нажав на кнопку “Add a new app”.
Добавьте ваш веб-сайт, на котором вы настраиваете Open Graph. Для этого нажмите на значок WWW (website):
Введите домен вашего сайта:
Выберите категорию и нажмите на кнопку “Создайте идентификатор приложения”:
Далее вы получите Javascript. В этом скрипте выделен зеленым цветом ваш номер appId, в моем случае - это 170081493506939 (смотри скриншот ниже). Его мы вставим вместо 'app_id' в коде, который мы добавляли в четвертом пункте.
В строку Tell us about your website введите адрес вашего сайта. Завершите настройку – для этого можно просто проскроллить вниз.
- Теперь вернемся к настройке приложения, которое мы не закончили в шестом пункте. Снова перейдите на https://www.facebook.com/insights/ и уже пропишите домен и завершите настройку, нажав на кнопку “Получить статистику”.
Если вы все сделали правильно, то действие будет завершено. Обновите страницу, и вы увидите
Проверьте себя – посмотрите на код, который получился у меня после правки:
Только через некоторое время вы можете попробовать поделиться вашими сообщениями в социальных сетях, так как данные кэшируются. Если у вас нет желания ждать, то вы можете ускорить обновление информации при помощи инструмента Debugger. Введите здесь адрес вашего сайта, и после получения сведений, нажмите на кнопку “Fetch new scrape information”.
Примечание: для того, чтобы описание вашего поста соответствовало содержанию, нужно приписать к каждому сообщению description. Читайте про настройку description на blogspot. А также у вас не должны быть настроены динамические теги description к статьям блога.
Здравствуйте, автор! всё делал по вашей инструкции, но не получается. при финальной проверке выдаёт ошибку. Поэтому, хочу уточнить кое-какие непонятные моменты в статье.
Во первых, насчёт 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 — если для Германии.
Нет кнопки создать домен, есть только создать страницу и создать приложение((
нужно создать приложение
Наталья, доброго дня! чё-то у меня в последние несколько дней — перестал работать опенграф как положено при постинге статей в ФБ и ВК. Конкретнее — не подхватывается текст из Description статьи, а подхватывается начальный вступительный текст статьи. А должен подхватываться именно из Description — краткое описание статьи.
Раньше работало всё ок, настройки никакие не менял. Проверьте у себя — как у вас статьи из блога постятся в соц.сети?
Да, я заметила, что опен граф некорректно работает с description. Код в этой записи указан верно, дело в шаблоне. На моем тестовом блоге со стандартным шаблоном этот код работает отлично.
Да не, причём тут шаблон то? я ж говорю — у меня недавно началось это… Раньше опенграф нормально работал и в старом стандартном шаблоне и в новом. Я его настроил уже очень давно. Вот буквально на днях заметил косяк. С чем он связан — не пойму, думал — может в самой системе опенграф что-то поменялось?
Или может один из скриптов в блоге — нарушает работу опенграфа (может такое быть)?
Ну и что, что недавно. Я заметила, что микроразметка schema.org статей на блогах, на которых не работает опен граф, неправильно показывает description. Именно микроразметку и нужно править. Микроразметка у меня также была правильная, но все меняется, и видимо Blogger вновь привнес свои изменения, и теперь снова придется искать ошибки, вносить изменения, приспосабливаться.
"Ну и что, что недавно" — как это что?) Это как раз основная мысль. Смысл в том, что у меня работал опенграф нормально, а недавно вот перестал работать нормально. Я и пытаюсь понять — в чём проблема может быть? Вы думаете, что в разметке шема.орг? Или всё таки может скрипты тоже виноваты? Я недавно скрипт подключил в сайдбар, может из-за него?
А если в шема орг, то как эту шему до ума довести?)) Подскажите, плиз, если знаете, Наталья.
Я не думаю, что дело в скриптах или в других изменениях. Я давно вообще блогом не занималась, и все было нормально, как с опен граф, так и со schema org. Скорее всего изменения коснулись самого Blogger, что-то стало отражаться по-другому. Как пока это исправить не знаю.
Вообще, мне не кажется это такой большой проблемой
Здравствуйте, есть ли возможность для каждой страницы блога устанавливать отдельное изображение? Как я понимаю, поскольку оно в голове, то нет… А очень жаль.
У меня ещё вопрос, я что-то наудалял по глупости, думал, что несущественное, теперь у меня в соответствии с настройками шаблона выглядит только заголовок сообщения, а у страниц все заголовки белые, без форматирования, хотя в режиме просмотре при редактировании всё как должно быть. Что теперь делать, не представляю. Гляньте, пожалуйста, если можно 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 обычно прописывают заголовок блога, а на страницах сообщений — заголовки сообщений (статей).