Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:

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

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

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

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

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
Отправить отзыв
  • Антон Бобров
    2
    комментария
    0
    читателей
    Антон Бобров
    6 месяцев назад
    Очень хочется расширенную и актуальную (!) статью про микро-разметку. Ссылочки на валидаторы, рекомендуемые типы разметки для разных сайтов (инет-магазы, и тд)
    -
    1
    +
    Ответить
    Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
SEOnews и Serpstat запускают конкурс для интернет-маркетологов
Анна Ольяная
4
комментария
0
читателей
Полный профиль
Анна Ольяная - благодарю :)
Как построить качественную ссылочную массу сайта
Айрат Рахимзянов
39
комментариев
0
читателей
Полный профиль
Айрат Рахимзянов - Спасибо Кирилл. Сейчас восстановилась работа сервиса: take.ms/ttXrw
«Я оптимизировал сайт, а он не в ТОП! Что делать?»
Павел Горбунов
7
комментариев
0
читателей
Полный профиль
Павел Горбунов - Как можно в инструменте tools.pixelplus.ru/tools/text-natural сравнить текст со страницы конкурента и со своей страницы? Я вижу возможность только для проверки одного урла.
Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
Екатерина Иванова
1
комментарий
0
читателей
Полный профиль
Екатерина Иванова - Посмотрите на сколько упал трафик и на сколько потом вырос:упал на 10-20% на 1 месяц, а вырос в итоге в 5 раз. Одним мартовским трафиком всё падение перекрыли. Или можно ждать Яндекс неопределённое количество времени со стартовым уровнем трафика. Упущенные возможности и всё-такое.
Мир глазами поисковых систем
Александр Рунов
4
комментария
0
читателей
Полный профиль
Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
Google.ru внесли в реестр запрещенных сайтов
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
SEMrush: факторы ранжирования в Google в 2017 году
Анна Макарова
292
комментария
0
читателей
Полный профиль
Анна Макарова - Уважаемый S1, я тоже понимаю, что есть такие люди, которые заметив допущенную неточность несутся на всех парусах продемонстрировать "силу" своего ума. Спасибо вам за пристальное внимание. Это поможет нам быть лучше.
Монетизация сайта. Как, когда, сколько?
Ruslan Baybekov
2
комментария
0
читателей
Полный профиль
Ruslan Baybekov - Максим, добавили возможность вывода дохода на Яндекс Деньги и WMR.
Интеграция call tracking и CRM: углубленный анализ данных о звонках и продажах
Денис
2
комментария
0
читателей
Полный профиль
Денис - Какой смысл вообще в облачных CRM, обрезанный фугкционал, свое дописать невозможно, слив клиентов другим компаниям. Серверные бесплатные CRM куда надежней и кастамизируй как хочешь.
Дашборд Метрика 2.0 – мониторинг проблем на сайте в режиме реального времени
Константин Сокол
24
комментария
0
читателей
Полный профиль
Константин Сокол - Есть динамика трафика по разделам. Этот виджет показывает некоторые фильтры, в результате которых с поиска выпадают целые разделы.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
292
Комментариев
262
Комментариев
219
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
55
Комментариев
52
Комментариев
48
Комментариев
45

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