Open Graph - панацея для соцсетей
Сегодня поисковые боты много внимания обращают на поведенческие факторы, которые формируют так называемый ИКС - индекс качества сайта. Переходы из соцсетей позволяют наращивать посещаемость сайта и в разы улучшать эти факторы. Поэтому, важно оптимизировать свое присутствие в социальных сетях. В этой статье мы расскажем как это сделать, а именно, поговорим о протоколе Open Graph, который открывает дополнительные возможности для сайта.
Что такое Open Graph?
Open Graph (OG) - это специальный веб-протокол, разработанный командой Facebook, который c помощью специальных тегов позволяет веб-странице передать социальным сетям нужную информацию о себе и улучшить формат отображения.
Open Graph структурирует информацию о странице. Например, вы можете указать какое изображение или видео появится в превью, или какие заголовок и описание должны быть показаны, и даже местоположение или язык, авторство и многое другое.
С Open Graph ваш контент становится более ярким и привлекательным в новостных лентах социальных сетей, более кликабельным. А значит больше людей увидит, щелкнет и поделится им. На сегодняшний день, протокол поддерживается всеми известными соцсетями и мессенджерами: Facebook, Вконтакте, Однокласники, Twitter, Linkedin, Pinterest, Skype, Whatsapp, Viber, Telegram.
А что если у меня нет Open Graph на сайте? В таком случае соцсети будут собирать данные о странице выборочно и могут не точно ее отобразить. Например, в качестве обложки вывести не изображение статьи, а логотип сайта или какую-нибудь другую картинку, или показать слишком длинный заголовок. Все это негативно скажется на рейтинге ваших публикаций.
Вот так выглядит пост в соцсетях без Open Graph:
Пост с прописанной микроразметкой Open Graph:
Думаю, вы уже убедились, что Open Graph вещь полезная и настоящая панацея для соцсетей!
Перейдем теперь к структуре и внедрению OG - из чего состоит разметка и как ее прописать на веб-страницах?
Структура и внедрение Open Graph
Теги Open Graph добавляются как свойство в HTML-тег <meta>: <meta property=”og:тег” content=”значение”> и помещаются в секцию: <head>...</head>
Рассмотрим основные теги:
og:title
Аналогичен html-тегу <title>. В нем указываете SEO-заголовок, который отобразится в названии страницы в соцсетях. Старайтесь, чтобы заголовок был максимум информативным и не слишком длинным.
Пример:
<meta property = "og:title" content = "Open Graph - панацея для соцсетей" />
og:type
В нем указываете тип контента: статья, веб сайт (лендинг), видео - полный список типов страницы можете просмотреть в документации.
Пример:
<meta property = "og:type" content = "article" />
og:url
Указываете канонический URL-адрес страницы.
Пример:
<meta property = "og:url" content = "https://mywebsite.com/blog/example.html" />
og:description
Указываете краткое описание страницы. Попытайтесь написать несколько релевантных предложений, которые увеличат информативность вашей публикации.
Пример:
<meta property = "og:description" content = "Что такое микроразметка Open Graph и как прописать на веб-странице? Читайте в блоге Rush Analytics" />
og:image
Указывается URL-адрес изображения, которое будет выводится в качестве обложки веб-страницы в соцсетях. Поддерживаются .png, .jpeg и .gif расширения.
Пример:
<meta property = "og:image" content = "http://www.mywebsite.com/how-to-make-og.jpg" />
Рекомендуемое разрешение для Open Graph - 1200 x 630 px. При таком размере миниатюра будет большой и хорошо выделяться. Не рекомендуется превышать вес изображения >5 Мб.
Если ваше изображение меньше 600 x 315 px, оно будет отображаться как меньшая миниатюра. Это не так привлекательно.
Также у этого тега есть связанные теги, которые передают дополнительные свойства:
- og:image:url - задается URL альтернативного изображения;
- og:image:secure_url - задается URL изображения по протоколу https;
- og:image:width — задается число пикселей в ширину изображения;
- og:image:height — задает число пикселей в высоту изображения;
- og:image:type — задается тип изображения.
Примеры:
<meta property = "og:image" content = "http://www.mywebsite.com/how-to-make-og.jpg" />
<meta property = "og:image:url" content = "http://www.mywebsite.com/how-to-make-og2.jpg" />
<meta property = "og:image:secure_url" content = "https://www.mywebsite.com/how-to-make-og.jpg" />
<meta property = "og:image:type" content = "image/png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="349" />
Другие OG-теги
Существуют и другие теги Open Graph, которые предоставляют соцсетям дополнительную информацию о вашем контенте:
- og:locale - задает языковые данные для страницы в формате язык_страна (используется ISO 639.2 и ISO 3166-1 соотвественно)
- og:site_name - указывается название сайта;
- og:audio - указывается URL аудио объекта;
- og:video - указывается URL видео объекта.
Примеры:
<meta property = "og:locale" content = "ru_RU" />
<meta property = "og:site_name" content = "Mywebsite.com" />
<meta property = "og:audio" content = "https://wwww.mywebsite.com/example.mp3" />
<meta property = "og:video" content = "https://www.mywebsite.com/video.avi" />
Все теги можно просмотреть на официальном сайте Open Graph.
Пример Open Graph на веб-странице
<!--OPEN GRAPH-->
<meta property = "og:title" content = "Open Graph - панацея для соцсетей" />
<meta property = "og:type" content = "article" />
<meta property = "og:url" content = "https://www.rush-analytics.ru/blog/open-graph-panaceya-dlya-socsetey" />
<meta property = "og:image" content = "/site/all/themes/stat/front/img/emailimages/opengraph_og.png" />
<meta property = "og:image:type" content = "image/png" />
<!--OPEN GRAPH-->
Инструмент проверки Open Graph
Контролировать работу разметки Open Graph на своем сайте можно с помощью отладчика Facebook.
У него две очень полезные функции:
- Во-первых, когда вы вводите URL страницы, которую хотите разместить в соцсетях, он покажет как будет выглядеть страница, а также любые ошибки и предложения для тегов OG, если таковые имеются.
- Во-вторых, он очищает кеш Facebook. Это очень важный момент. Представьте себе следующее: вы публикуете страницу на Facebook, но затем видите ошибку в миниатюре или в заголовке, возвращаетесь на свой сайт и редактируете теги OG, затем публикуете снова в Facebook. Но ничего не произойдет. Миниатюра останется прежней. Это из-за кеша. Отладчик Facebook позволяет обновить этот кеш на ваших URL, поэтому не забудьте использовать при необходимости.
Также можете ознакомиться с рекомендациями Facebook по OpenGraph.
Плагины для внедрения Open Graph
Если у вас нет базовых навыков в веб-программировании и вы не понимаете как добавить Open Graph на свой сайт - вам помогут специальные плагины.
Для Wordpress оптимальным решением может будет многофункциональный плагин Yoast SEO. При редактировании страницы, у вас появится возможность добавить Open Graph информацию для Facebook и Twitter:
Плагины Open Graph для CMS Joomla можно просмотреть в репозитории Joomla и подобрать на свой вкус.
Под Drupal существует специальный модуль Open Graph meta tags.
Выводы
Однозначно, протокол Open Graph является очень полезным элементом для каждого веб-сайта.
OG теги позволяют:
- повысить релевантность контента и поднять интерес к вашему сайту в соцсетях
- увеличить количество лайков и перепостов
- привлечь новых подписчиков
- улучшить кликабельность
- получать трафик на сайт
Стоит отметить, что существуют и другие виды микроразметки, которые выполняют похожую функцию и передают структурированные данные не только в Facebook, но и в поиск Яндекс/Google - это Schema.org. Есть также отдельная разметка для Twitter - Twitter Cards.
Таким образом, применяя различные виды микроразметки, вы сможете обеспечить своему сайту рост и популярность в интернете.
Русский