МТТ

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

Россия+7 (495) 960-65-87
Шрифт:
1 19256

Мы уверены, что вам не один раз приходилось сталкиваться с проблемой некрасивого оформления поста, когда делишься ссылкой в социальной сети или в мессенджерах типа 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 выглядит так:

< head>

< 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= "Ссылка на саму веб-страницу, которая и будет добавляться в соц. сеть" />

< /head>

ВАЖНО. Для популярных 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 и др.

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

Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Антон Бобров
    2
    комментария
    0
    читателей
    Антон Бобров
    больше года назад
    Очень хочется расширенную и актуальную (!) статью про микро-разметку. Ссылочки на валидаторы, рекомендуемые типы разметки для разных сайтов (инет-магазы, и тд)
    -
    1
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Кейс: как продвинуть сайт производителя мебели на заказ в Москве
Art Moderator
2
комментария
0
читателей
Полный профиль
Art Moderator -
Рейтинг «Известность бренда SEO-компаний 2017»: народное голосование
Гость
1
комментарий
0
читателей
Полный профиль
Гость - 1) Ingate 2) Ашманов 3) Кокос 4) Russian Promo 5) Netpeak
32 инструмента в помощь SEO-специалисту
Chaser
1
комментарий
0
читателей
Полный профиль
Chaser - Рекомендую бесплатную альтернативу Frog и Netpeak - SiteAnalyzer ( site-analyzer.ru/ ) Странно что не включили в обзор
Второе дыхание ссылочного продвижения
Rookee.ru
24
комментария
0
читателей
Полный профиль
Rookee.ru - Еще лучше, когда продвижение осуществляется комплексно :)
Исследование: влияние smart-ссылок на продвижение по СЧ-запросам
Анатолий Шевчик
1
комментарий
0
читателей
Полный профиль
Анатолий Шевчик - +1097988
Контекст под SEO. Как поисковая реклама помогает позициям в органической выдаче
Сергей Дембицкий «Sima-Land.ru»
22
комментария
0
читателей
Полный профиль
Сергей Дембицкий «Sima-Land.ru» - Боже мой, неужели SEO-маги вернулись??? Открыть в роботс utm-метки для индексации и наплодить дублей...что? А расчеты в конце статьи про бюджет на SEO и контекст...откуда эти пропорции? Как по мне, SEO-магия вне Хогвартс. Спасибо, развеселили!
Все, что нужно SEO-специалисту. Обзор инструментов
Администратор Сайта
1
комментарий
1
читатель
Полный профиль
Администратор Сайта - Шаришь в seo! Сервис реально хороший
Какая боль: ТОП 10 типичных ошибок в SEO
Alex Fri
1
комментарий
0
читателей
Полный профиль
Alex Fri - Отличная статья, прикольные гифки - вносят разнообразие и прекрасно визуализируют контент))
4 способа быстро собрать теги для сайта
Рустем Низамутинов
5
комментариев
0
читателей
Полный профиль
Рустем Низамутинов - Расписал и закинул в Google Docs, а то здесь в комментариях ссылки на активны. docs.google.com/document/d/1r0TZLNrQyYLdIzDQsD5YKlMG41HUGQgEep3bxE_ij-M/edit?usp=sharing
Яндекс: как мы модерируем объявления
Гость
5
комментариев
0
читателей
Полный профиль
Гость - Это ж Яндекс, чего вы ожидали-то? Коммерческая структура с раздутым штатом, задачей которой является заработать больше денег. Любыми методами. Задача всех пользователей посадить на Директ, даже если придется разрушить суть рунета, реализуется по полной программе. Все возражающие караются и выпиливаются. И каждый из сотрудников делает все возможное и невозможное, чтобы реализовать любую дурацкую идею - за это еще и премию выхватить можно. Даже если потом придется выполнять "откат", премиальные уже заплачены. Так было с одним из фильтров Яндекса, так было с купленным им сайтом Кинопоиска, который из русскоязычной энциклопедии кино был превращен за безумные деньги в банальный платный онлайн-кинотеатр.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
322
Комментариев
262
Комментариев
234
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
86
Комментариев
80
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55
Комментариев
54
Комментариев
53

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