Сегодня поисковые боты много внимания обращают на поведенческие факторы, которые формируют так называемый ИКС – индекс качества сайта. Переходы из соцсетей позволяют наращивать посещаемость сайта и в разы улучшать эти факторы. Поэтому, важно оптимизировать свое присутствие в социальных сетях. В этой статье мы расскажем как это сделать, а именно, поговорим о протоколе Open Graph, который открывает дополнительные возможности для сайта.
Что такое Open Graph?
Open Graph (OG) – это специальный веб-протокол, разработанный командой Facebook, который c помощью специальных тегов позволяет веб-странице передать социальным сетям нужную информацию о себе и улучшить формат отображения.
Open Graph структурирует информацию о странице. Например, вы можете указать какое изображение или видео появится в превью, или какие заголовок и описание должны быть показаны, и даже местоположение или язык, авторство и многое другое.
Open Graph произвел революцию в том, как контент отображается при шеринге. Это одна из самых важных технологий для социальных сетей за последнее десятилетие, поскольку она стандартизировала способ передачи метаданных между платформами.
Джефф Буллас эксперт по цифровому маркетингу и социальным сетям
С Open Graph ваш контент становится более ярким и привлекательным в новостных лентах социальных сетей, более кликабельным. А значит больше людей увидит, щелкнет и поделится им. На сегодняшний день, протокол поддерживается всеми известными соцсетями и мессенджерами: Facebook, Вконтакте, Однокласники, Twitter, Linkedin, Pinterest, Skype, Whatsapp, Viber, Telegram.
А что если у меня нет Open Graph на сайте?
В таком случае соцсети будут собирать данные о странице выборочно и могут не точно ее отобразить. Например, в качестве обложки вывести не изображение статьи, а логотип сайта или какую-нибудь другую картинку, или показать слишком длинный заголовок. Все это негативно скажется на рейтинге ваших публикаций.
Пост в соцсетях без Open Graph:
Пост в соцсетях с Open Graph:
Думаю, вы уже убедились, что Open Graph вещь полезная и настоящая панацея для соцсетей! Отслеживать новые упоминания своего сайта в разных источниках можно с помощью инструмента SERM – он создан для того, чтобы вовремя реагировать на изменения репутации компании или сайта.
Перейдем теперь к структуре и внедрению OG – из чего состоит разметка и как ее прописать на веб-страницах?
Читайте также: Оптимизация под голосовой поиск
Структура и внедрение Open Graph
Теги Open Graph добавляются как свойство в HTML-тег <meta>: <meta property=”og:тег” content=”значение”> и помещаются в секцию: <head>...</head>
Рассмотрим основные теги:
og:title
Аналогичен html-тегу <title>. В нем указываете SEO-заголовок, который отобразится в названии страницы в соцсетях. Старайтесь, чтобы заголовок был максимум информативным и не слишком длинным.
Пример для разметки Open Ghaph:
<meta property = "og:title" content = "Open Graph - панацея для соцсетей" />
og:type
В нем указываете тип контента: статья, веб сайт (лендинг), видео – полный список типов страницы можете просмотреть в документации.
Пример для разметки Open Ghaph:
<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, оно будет отображаться как меньшая миниатюра. Это не так привлекательно.
| Социальная сеть | Рекомендуемый размер | Особенности |
| 1200 x 630 px | Соотношение сторон 1.91:1 | |
| 1200 x 675 px | Соотношение сторон 16:9 | |
| 1200 x 627 px | Макс. размер файла 5MB | |
| 1000 x 1500 px | Вертикальные изображения | |
| VK | 1200 x 630 px | Аналогично Facebook |
Также у этого тега есть связанные теги, которые передают дополнительные свойства:
- 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.
Rush-Analytics уже сегодня
7-ми дневный бесплатный доступ к полному функционалу. Без привязки карты.
Попробовать бесплатно
Пример 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-->
конверсии вашего сайта
в Яндекс-Директ
Уже скачали 1348 раз
Инструмент проверки Open Graph
Контролировать работу разметки Open Graph на своем сайте можно с помощью отладчика Facebook.
У него две очень полезные функции:
- Во-первых, когда вы вводите URL страницы, которую хотите разместить в соцсетях, он покажет как будет выглядеть страница, а также любые ошибки и предложения для тегов OG, если таковые имеются.
- Во-вторых, он очищает кеш Facebook. Это очень важный момент. Представьте себе следующее: вы публикуете страницу на Facebook, но затем видите ошибку в миниатюре или в заголовке, возвращаетесь на свой сайт и редактируете теги OG, затем публикуете снова в Facebook. Но ничего не произойдет. Миниатюра останется прежней. Это из-за кеша. Отладчик Facebook позволяет обновить этот кеш на ваших URL, поэтому не забудьте использовать при необходимости.
Также можете ознакомиться с рекомендациями Facebook по OpenGraph.
✔️ Убедитесь, что все базовые теги (title, type, url, image) присутствуют
✔️ Проверьте корректность отображения превью в основных соцсетях
✔️ Убедитесь, что изображение соответствует рекомендуемым размерам
✔️ Проверьте соответствие og и og содержанию страницы
✔️ Протестируйте работу тегов после обновления содержимого страницы
✔️ Проверьте корректность URL в теге og (должен быть каноническим)
✔️ Убедитесь в корректности отображения спецсимволов в тегах
Плагины для внедрения 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.
Таким образом, применяя различные виды микроразметки, вы сможете обеспечить своему сайту рост и популярность в интернете.
Читайте также: Как составить мета теги
