×
Россия +7 (495) 139-20-33

Зачем использовать Open Graph разметку на сайте?

Россия +7 (495) 139-20-33
Шрифт:
1 30705

Мы уверены, что вам не один раз приходилось сталкиваться с проблемой некрасивого оформления поста, когда делишься ссылкой в социальной сети или в мессенджерах типа Skype. Парсер подхватывает тег title и первую картинку со страницы. Но бывает, что title или не читабелен, или отсутствует, хотя это базовый элемент внутренней SEO-оптимизации сайта.

Изображением может оказаться иконка или любая другая нерелевантная картинка. Иногда парсер вовсе не подгружает изображение. Знакомая картина, не правда ли?

В поисках решения проблемы далеко ходить не пришлось. Нам помогла разметка Open Graph, позволяющая настроить отображение анонса страницы сайта в социальной сети (в нашем случае – категорий и страниц конкретных товаров) именно так, как мы этого хотим.

12.png

Ссылки на товары в Skype

Давайте разберемся, что это за зверь такой – Open Graph, какую пользу он приносит интернет-магазину (да, в общем, и любому другому ресурсу), и как правильно добавить OG-разметку к себе на сайт.

Откуда появился Open Graph?

Open Graph – это словарь микроданных, который был разработан специалистами Facebook специально для решения проблемы с «кривым» отображением ссылок в ленте соцсети.

Благодаря OG владелец веб-ресурса может обеспечить корректный и привлекательный показ ссылки на свой сайт в социальной сети. А это, в свою очередь, оказывает влияние на кликабельность ссылки и, в нашем случае, на продажи.

34.png

Ссылки на товары Вконтакте

КСТАТИ. Несмотря на то, что Open Graph разрабатывался Facebook «под себя», его используют и другие социальные сети (ВКонтакте, Одноклассники, Twitter). Так что, внедрив такую разметку на свой сайт, вы одномоментно решите проблему с некорректным показом ссылок в большинстве популярных соцсетей и сервисов.

Как использовать Open Graph разметку?

Все довольно просто: чтобы получить красивое превью ссылки ВКонтакте, Facebook, Одноклассниках и в других социальных сетях, в код страницы (в теге head) необходимо внедрить мета-теги Open Graph.

Причем 5 из них можно назвать обязательными, остальные (полный список можно найти на сайте разработчика) – второстепенными, но позволяющими повысить информативность превью ссылки (например, добавить контакты владельца контента, адрес и пр.).

Итак, пример куска кода с обязательными тегами (свойствами) OG выглядит так:

meta property="og:title" content="Здесь вы прописываете название, которое хотите видеть в превью ссылки в социальной сети"

meta property="og:description" content="Здесь укажите описание материала (например, краткую характеристику товара или категории интернет-магазина). Размер – до 295 симв."

meta property="og:image" content="Здесь указывается ссылка на картинку, которая будет отображаться в превью"

meta property="og:type" content="article"/> - этот параметр определяет тип добавляемого материала (в данном случае - статья).

meta property="og:url" content= "Ссылка на саму веб-страницу, которая и будет добавляться в соц. сеть"

ВАЖНО. Для популярных CMS существуют даже свои плагины, позволяющие внедрить разметку Open Graph для Facebook, VK и прочих соцсетей самостоятельно, без привлечения специалистов и долгого «рытья» в коде. Это значительно облегчает интеграции OG даже для неопытных пользователей.

Аналоги Open Graph

OG не одинок в мире микроданных. Помимо него используется еще множество различных словарей микроразметки. Наиболее яркими представителями можно назвать следующие:

56.png

Как устроен мир семантической разметки

  • Микроформаты (Microformats.org). Этот проект можно рассматривать как набор инструментов, заточенных под определённые нужды (например, для разметки товаров используется микроформат hProduct, для кулинарных рецептов – свой hRecipe). Главная особенность Microformats – более сложное внедрение, поэтому этот словарь применяется сегодня все реже.
  • Schema.org – словарь, активно поддерживаемый поисковиками (создавался с целью обеспечения возможности формирования специальных сниппетов в поисковой выдаче). Главная особенность этого инструмента – гибкость, которая достигается за счет обилия свойств, которые можно описать в коде микроразметки. Всего словарь насчитывает более миллиона характеристик и свойств.
  • Dublin Core. Этот словарь разрабатывался с прицелом на различного рода электронные библиотеки и базы данных, и активно используется специалистами музейной сферы, библиотечного дела и пр. Он, в отличие от других, даже стандартизирован в РФ ГОСТом Р 7.0.10-2010.

И это лишь малая часть словарей, используемых сегодня для облегчения жизни владельцам сайтов, оптимизаторам и конечным пользователям. Внедрение Open graph разметки гарантированно улучшит превью ссылок Вконтакте, Skype, Facebook, Google+, Twitter, Pinterest, LinkedIn и др.

Обязательно внедряйте микроданные на сайт, чтобы ваши ссылки в соцсетях имели красивый вид с правильным изображением и актуальным содержанием!

(Голосов: 5, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Ане Макаровой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Антон Бобров
    2
    комментария
    0
    читателей
    Антон Бобров
    больше года назад
    Очень хочется расширенную и актуальную (!) статью про микро-разметку. Ссылочки на валидаторы, рекомендуемые типы разметки для разных сайтов (инет-магазы, и тд)
    -
    5
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Как выбрать CMS для интернет-магазина
Колян Гусляков
2
комментария
0
читателей
Полный профиль
Колян Гусляков - Если же у вас не получилось решить данную проблему, предлагаю воспользоваться авторской сборкой от neoseo. neoseo.ru/internet-magazin-seo-magazin-model. Они предоставляют дополнительные модули для работы и взаимодействия с вашим сайтом, современный дизайн, качественную оптимизацию и продвижение. Советую попробовать, не пожалеете.
«Юзабилити-лаборатория»: оставляйте заявку на участие!
Анна Макарова
378
комментариев
0
читателей
Полный профиль
Анна Макарова - Антон, добрый день! Ваш сайт не попал в основную выборку для юзабилити-анализа, но эксперты постараются сделать по вашему сайту видеоразбор (ю-ревью). Будем держать вас в курсе )
Тест по SEO – проверь свой уровень знаний
Артем Дорофеев
8
комментариев
0
читателей
Полный профиль
Артем Дорофеев - Полный текст вопроса со скриншотом панели прикладываю. Итого, что имеем: - на скриншоте отмечено, что это фильтр МПК - сайт коммерческий - рекламы на сайте нет С вероятностью 95% это ошибка (которая уже дважды случалась в Яндексе), когда они случайно "закосили" неповинные сайты. Тогда по запросу Платону фильтр быстренько снимали. Но вопрос даже не на знание этого нюанса. В любой непонятной ситуации, прежде чем что-либо предпринимать (особенно переписывать весь контент на сайте или менять дизайн, как указано в других вариантах) - фильтр следует подтвердить. Правильный ответ: "Написать письмо в техподдержку Яндекса".
Выбираем CMS для сайта с точки зрения SEO: базовые требования
SEO.RU
6
комментариев
0
читателей
Полный профиль
SEO.RU - Спасибо за замечание, действительно была допущена неточность - возможно информация была не так давно обновилась. Данные в статье поправим на актуальные.
Автоматические SEO-аудиты: как напугать некорректными выводами
Trydogolik
25
комментариев
0
читателей
Полный профиль
Trydogolik - спасибо
Зачем подменять контент на сайте: разбираем инструмент и развенчиваем мифы
Trydogolik
25
комментариев
0
читателей
Полный профиль
Trydogolik - К мифу 1 добавлю Google optimize optimize.google.com Удобен для сотрудников со спец. знаниями и без них. Подмена контента настраивается за счет многих вариантов страниц и условий настроек распределения трафика. Варианты страниц можно легко создать копипастом. На мой взгляд удобно и бесплатно. Тот же Calibri и программисты в любом случае, пусть не за это, но где-то берут свою комиссию. (чисто мое мнение). В качестве цены отдаешь такой ресурс как личное время и копейки за внесение двух первоначальных изменений в html шаблон страниц. Но если ваша digital-кампания имеет совесть то оплата максимум час, а то и бесплатно. Интернет-маркетолог сам должен уметь это делать. Все просто + подробную инструкцию прилагают на языке пользователя. + за поддомены платить не надо, они вообще не нужны. + взаимодействие с: - Google Ads; - Google Tag; - Google Analytics просто прекрасно отслеживается по всем вариантам параллельно. Это помогает до деталей нарисовать профиль ЦА по любому "кредиту - отдельно на машину и отдельно на бизнес". Что с аналитикой у Calibri на этот счет? Сам с Calibri не разу не работал, всегда работаю с первоисточником. + к мифу 3 в том что это и есть детище поисковой системы и рекламного инструмента. Яша тоже спокоен будет так как сам везде навязывает Турбо-страницы (считаю их не удобными).- Как "-" (минус) вижу то, что может повлиять на скорость загрузки сайта. Но если у вас не конструктор, а темболее Landing Page, то о скорости можно не волноваться. Но это чисто мое мнение. В остальном согласен с автором.
Монетизируйте свой сайт вместе с VIZTROM
VIZTROM
3
комментария
0
читателей
Полный профиль
VIZTROM - Добрый день! Так как мы сейчас работаем в приватном режиме, Вы врятли можете объективно оценить нашу рекламную площадку. У нас будет официальный запуск 3 марта для вебмастеров. Приглашаем Вас присоединиться к нам и лично посмотреть наш функционал.
100+ ресурсов по SEO для изучения поисковой оптимизации с нуля
Марина Ибушева
59
комментариев
0
читателей
Полный профиль
Марина Ибушева - Спасибо за добавление. Мы уже работаем над отдельным материалом про курсы, потому что одной статьи мало, чтобы охватить все крутое по обучению)
7 способов увеличить авторитетность сайта «в глазах» поисковых систем
Grigo5
4
комментария
0
читателей
Полный профиль
Grigo5 - Понятно.
SEO must go on! Почему в кризис нельзя останавливать продвижение сайта
everystraus
0
комментариев
0
читателей
Полный профиль
everystraus - Мы даже варианты не рассматривали. Если проект неустойчив, сразу предлагали сбавить обороты до минимума, но и так, чтоб не свалиться в штопор. Именно по СЕО чаще всего.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
378
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
140
Комментариев
121
Комментариев
111
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
89
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
59
Комментариев
57

Отправьте отзыв!
Отправьте отзыв!