Разметка Open Graph: что это такое и как её внедрить

Привлечение высококачественного трафика – первостепенная задача для любого коммерческого проекта в Глобальной сети. Ведь «горячая» аудитория будет активно взаимодействовать с контентом, размещённым на страницах вашего сайта. А это значит, что поведенческие факторы существенно вырастут благодаря этому трафику. И, как следствие, начнёт увеличиваться и индекса качества сайта, напрямую влияющий на положение ресурсов внутри органической выдачи. Иными словами – большие потоки горячего трафика приводят к возможности получать ещё больше заинтересованных пользователей по самым актуальным ключевым вхождениям.

Один из наиболее качественных источников с активной аудиторией – это социальные сети. Именно там сосредоточены самые интересные, с коммерческой точки зрения, потоки трафика.

Чтобы привлекать пользователей из социальных сетей и мотивировать их переходить по внешним ссылкам, придётся очень постараться. Одним из инструментов, способных вам в этом помочь, является протокол Open Graph. Он был разработан для лучшей интеграции внешних источников в среду социальной сети.

Что такое Open Graph

Open Graph – это стандарт микроразметки, созданный для формирования полноценного превью из ссылки на внешний ресурс. Таким образом, после копирования URL-адреса в поле сообщения, автоматически создаётся графический элемент из изображения и небольшого анонса контента, размещённого на целевой странице.

Протокол Open Graph сегодня использует большинство социальных сетей и популярных мессенджеров. Среди них вашего внимания стоят: Вконтакте, Одноклассники, Linkedin, Pinterest, Skype, Whatsapp, Viber, Telegram.

Погружение в протокол позволит вам самостоятельно контролировать содержание превью. Возможность влиять на то, какие изображения или видео попадут в тело поста в социальных сетях, открывает широкие перспективы для улучшения кликабельности контента. Это же касается и текстовой составляющей превью.

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

Игнорирование микроразметки Open Graph вынудит социальные сети самостоятельно собирать превью из содержания целевой страницы. При этом корректность его отображения может быть весьма относительной. Зачастую, вместо изображения из статьи, для обложки выбирается логотип сайта, а заголовок оказывается слишком длинным или частично обрезанным.

В общем, разнообразных проблем бывает предостаточно. Поэтому, если вы активно занимаетесь развитием и продвижением своего ресурса, никогда не обходите стороной подобные инструменты.

Структура разметки (синтаксис)

Для корректной работы, теги Open Graph необходимо размещать в виде свойства в HTML-тег <meta>: <meta property=”og:тег” content=”значение”>. При этом находиться он должен в секции <head>...</head>.

Основные теги Open Graph:

og:title – тег заголовка. Он полностью идентичен обычному <title> и содержит в себе SEO-заголовок, который будет отправлен в социальные сети в качестве названия страницы. Старайтесь не вставлять в этот тег слишком длинные ключевики. Для превью будет лучше сделать его коротким и максимально информативным. Тогда количество переходов окажется выше.
og:type – указатель типа контента, размещённого на целевой странице. Это может быть веб-сайт, видео, статьи или что-нибудь ещё. Грамотная работа с техническими параметрами улучшает восприятие контента внутренними алгоритмами социальных сетей.
og:url – ссылка на канонический адрес посадочной страницы. То есть именно в этот тег помещается ссылка на лендинг, который вы продвигаете.
og:description – небольшое описание лендинга. Оно отображается в превью под заголовком. Поэтому подумайте над подходящим содержанием. Именно от него во многом будет зависеть кликабельность публикации.
og:image – в теге изображения указывается URL-адрес обложки страницы. Именно она попадёт в итоговое превью, формирующееся для социальных сетей. Поддерживаются следующие форматы: .png, .jpeg, .gif. Рекомендованное разрешение составляет 1200 x 630 пикселей, при максимальном объёме в 5 Мбайт. Такой формат позволит картинке выделяться и привлекать внимание. Все любят крупные изображения, на которых всё хорошо видно. Особенно актуально это для пользователей мобильных устройств. А именно они составляют основную аудиторию социальных сетей.
og:image:url – адрес альтернативного изображения.
og:image:secure_url – адрес с безопасным протоколом.
og:image:width – ручное задание ширины изображения. Указывается в пикселях.
og:image:height – высота изображения, также указывается в пикселях.
og:image:type – тип изображения.
og:locale – языковые настройки. Задаются в формате: язык_страна.
og:site_name – тег названия сайта. Не путать с заголовком!
og:audio – используется при необходимости добавления аудиофайла в тело публикации.
og:video – указание URL-адреса видео, интегрируемого в превью.

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

Работа с HTML-кодом предполагает полное соответствие с требованиями к микроразметке. То есть каждый элемент должен быть прописан корректно, иначе превью будет отображаться не так, как вы задумывали. Поэтому каждый раз, когда вы имеете дело с технической составляющей публикаций, проверяйте грамотность их написания в специализированных сервисах, таких как, например, валидатор Яндекса.

Валидатор позволяет работать, как непосредственно с HTML-кодом, скопированным или написанным вручную, так и с уже существующими страницами. Вы можете указать URL-адрес страницы, которую хотите проверить, и Яндекс самостоятельно соберёт её HTML-код.

Микроразметка – инструмент достаточно специализированный и специфический. От неё может во многом зависеть успешность вашего проекта, так что уделите ей самое пристальное внимание. Даже если в первое время она покажется вам чрезмерно сложной и непонятной, без таких инструментов невозможно представить работу современного маркетолога. Ведь он используется для продвижения контента в Глобальной сети и привлечения трафика на лендинги.

Как внедрить разметку на сайте

Внедрение разметки можно осуществлять, как в ручном режиме, так и с помощью плагинов. Если вы хотите научиться самостоятельно размечать страницы, придётся погрузиться в HTML-код достаточно глубоко. В общем виде процесс добавления Open Graph выглядит следующим образом:

Для начала пропишите в начале страницы специализированный префикс: <html prefix="og: http://ogp.me/ns#">. Он ссылается на протокол Open Graph и явно указывает, что страница включает в себя микроразметку.
Теперь вы можете прописывать необходимые теги в разделе <head>.

Существуют различные сервисы, которые предоставят вам визуальный интерфейс для работы с микроразметкой. Например, это может быть: The Ultimate Open Graph Generator. С его помощью можно просто выбирать тип объектов и прописывать их содержимое.

Заголовки, URL-адреса и файлы мультимедиа нужно добавлять вручную, но никакой работы с HTML-кодом у вас не останется. Сервис самостоятельно сегенрит для вас необходимый код, и вам останется просто добавить его в соответствующий раздел целевой страницы.

Такие инструменты особенно актуальны, когда речь идёт о массивных проектах с большим объёмом страниц. Прописывать код для каждой из них вручную – просто непосильная задача. Куда проще автоматизировать как можно больше процессов, чтобы сократить расход времени.

Плагины для популярных CMS

К счастью, маркетплейсы плагинов предлагают самый широкий выбор разнообразных вариантов автоматизации микроразметки на любой вкус. Вы можете выбрать любой подходящий через обычный поиск. В качестве примеров приведём наиболее популярные решения для разных CMS.

WordPress

Под самый популярный, на сегодняшний день, движок существует отличное комплексное решения для оптимизации и продвижения сайтов, которое, помимо всего прочего, включает в себя и инструменты для микроразметки. Называется оно Yoast SEO. Выпущен этот плагин был ещё в 2008 году и с тех пор он активно поддерживается и обновляется разработчиком.

Joomla

Работая с Джумлой можно выбрать JFBConnect. Этот плагин предназначен для реализации полноценной интеграции сайтов с социальными сетями. Он позволяет в удобной форме управлять тегами Open Graph и настраивать внешний вид превью любых публикаций. Это достаточно специализированный инструмент. Он не столь разносторонний, как Yoast SEO, тем не менее, со своими непосредственными задачами плагин справляется отлично.

Битрикс

Когда дело касается интернет-магазинов, то лучше, разумеется, будет прибегнуть к полноценным и разносторонним универсальным решениям, решающим сразу большое количество критически важных задач. Но если ваш магазин уже активно и успешно функционирует, а микроразметки на нём как небыло, так и нет, можно прибегнуть к помощи бесплатных и узкопрофильных решений.

Например, это может быть Open Graph. Инструмент позволяет в полной мере настроить интеграцию магазина с социальными сетями и оформить идеальные превью для ваших товаров и новостных постов.

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

повысить спрос на контент в социальных сетях;
улучшить показатели релевантности страниц ключевым поисковым запросам;
мотивировать аудиторию активнее взаимодействовать с публикациями, проставлять лайки, делать репосты и писать комментарии;
привлекать новую аудиторию и расширять пул подписчиков;
нарастить показатели кликабельности для всех публикаций;
получить доступ к новым каналам трафика для вашего основного проекта.

Микроразметка – это достаточно сложный в освоении, но невероятно полезный инструмент, который должен быть реализован на любом коммерческом ресурсе в Глобальной сети. Если вы не станете его использовать, то будете ощутимо проигрывать конкурентам в борьбе за органический трафик, а значит потеряете в эффективности работы и будете самостоятельно лишать себя прибыли.