Сегодня поисковые боты много внимания обращают на поведенческие факторы, которые формируют так называемый ИКС - индекс качества сайта. Переходы из соцсетей позволяют наращивать посещаемость сайта и в разы улучшать эти факторы. Поэтому, важно оптимизировать свое присутствие в социальных сетях. В этой статье мы расскажем как это сделать, а именно, поговорим о протоколе 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 видео объекта.
Читать статью полностью: Open Graph - панацея для соцсетей
