Влияние протокола Open Graph на SEO

Что такое теги Open Graph?

Метатеги, или протокол Open Graph, были созданы Facebook и позволяют отображать любую веб-страницу в соцсетях в обогащённом формате. Эти HTML-теги отвечают за показ контента (заголовок, описание, изображение страницы и т. д.) страницы, которой делятся в соцсетях. Если этих тегов нет или они не заданы, информация будет показана случайным образом: возьмётся случайная фотография, неописательный заголовок или описание…

Для чего они нужны?

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

Протокол Open Graph изначально применялся в Facebook, а сейчас распознаётся и в LinkedIn. При этом теги Twitter действуют исключительно внутри этой соцсети.

Теги следующие:

og:title:

«Title» отвечает за то, чтобы сообщить поисковой системе, о чём страница. Поэтому он должен быть ясным, лаконичным и уникальным на каждой странице. Максимальная длина — 67 символов.

Пример:

<meta property="og:title" content="Что такое теги Open Graph?"/>

og:description

«Meta description» — то, что более развёрнуто описывает страницу и рассказывает о ней. Он не должен превышать 155 символов и может содержать фразу или CTA, который побуждает пользователя кликнуть по результату. Он тоже должен быть уникальным для каждой страницы.

Пример:

<meta property="og:description" content="Знаете ли вы, как выглядит ваш сайт, когда им делятся в соцпрофилях? Теги Open Graph отвечают за показ всей информации."/>

og:url:

Отображается URL веб-страницы, причём его можно показать в сокращённом виде. Старайтесь использовать этот тег с максимально чистым URL, уникальным на каждой странице.

Пример:

<meta property="og:url" content="/blog/open-graph" />

og:image

Нужно указать URL изображения, чтобы его можно было показать на каждой странице. Это, безусловно, один из самых недооценённых и один из самых важных тегов. Google Discover, Google News, Facebook, Twitter, LinkedIn… все они подхватят это изображение как крючок для пользователя, и, если оно хорошего качества, вы можете получить массу визитов. В противном случае, если оставить поле пустым, может показаться фото автора, пустое поле… Выбирайте, что лучше! ;)

Пример:

<meta property="og:image" content="/blog/images/open-graph.jpg" />

og:video

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

<meta property="og:video" content="http://example.com/bond/trailer.swf" />

og:type

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

Пример:

<meta property="og:type" content="article" />

og:site_name

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

<meta property="og:site_name" content="SEO Alive" />

Какие бывают социальные метатеги

Сегодня теги, созданные Facebook, используются и в остальных соцсетях, например в LinkedIn. Twitter применяет так называемые Twitter Cards. С этими тегами у вас есть три варианта:

• ›

  «Photo» для изображений

• ›

  «Player» для видео и

• ›

  «Summary» для всего остального.

В этом случае, как и с карточками Open Graph, если ничего не оптимизировано, будет показан контент по умолчанию и неоптимизированный.

Инструменты для проверки тегов

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

Twitter Card Validator

Инструмент проверки от Twitter — Twitter Card Validator. Перед публикацией, если хотите убедиться, что всё отображается корректно, не стесняйтесь ввести URL, которым собираетесь поделиться. Он также очень полезен, если вы обновили изображение страницы, а лента всё ещё показывает старое. Повторный анализ сработает как «сброс кэша».

Facebook Debugger

Инструмент отладки от Facebook известен как Facebook Debugger. С его помощью можно увидеть, какая информация используется и как выглядит страница вашего сайта, когда ею делятся. Кроме того, если какое-то из полей заполнено неверно или отсутствует, появится предупреждение.

Google Structured Data Testing Tool

Google тоже даёт нам инструмент проверки структурированных данных — Google Structured Data Testing Tool. Он очень полезен, чтобы понять, какую разметку Google считывает со страницы. Разметку распознают поисковые системы, и это помогает сделать сайт «семантическим» за счёт внедрения микроразметки Schema, подходящей под каждый случай.

Rich Pins Validator

Pinterest не мог остаться в стороне и предлагает свой валидатор пинов, также известный как Rich Pins Validator. Он работает так же, как валидатор Twitter: нужно пройти процесс одобрения, чтобы получить функциональность Rich Pin и заодно проверить разметку данных.

Как оптимизировать эти теги в WordPress?

Как вы, возможно, знаете, одно из главных преимуществ WordPress — его гибкость и огромное сообщество. Благодаря этому такие процессы, как добавление тегов open-graph на наши страницы и в статьи, занимают считаные секунды за счёт плагинов.

Способов много. На наш взгляд, проще всего сделать это через плагин SEO Rank Math.

Рекомендуемая статья >** **[Подробный SEO-туториал по Rank Math](/ru/blog/rank-math)

Всё, что нужно, — зайти в SEO-раздел нужной страницы или статьи, нажать на вкладку «Social», и там мы увидим опцию настройки изображения. Во многих случаях, если мы загрузили изображение записи, оно подхватится автоматически.

Советы и улучшения

Ниже несколько советов, основанных на опыте, которые помогли нам добиться очень хороших результатов.

Оптимизируйте изображения

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

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

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

• ›

  Twitter: 120x120px для маленького и 4096x4096px для большого

• ›

  Facebook: самое маленькое — 200px, самое большое — 1200px

Всегда используйте Open Graph

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

Рекомендуемое руководство -> [Метатеги в SEO](/ru/blog/meta-tags)

Тестируйте и экспериментируйте

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

Выводы

Это мелкие детали, благодаря которым ваш бренд будет отлично выглядеть в глазах пользователей. Учтите, что эти теги необходимы, чтобы правильно показать вашу страницу и привлечь визиты. Они также облегчают поисковым системам понимание вашего сайта. Так что SEO-оптимизация включает и внимание к соцсетям.

Помните ещё, что социальные сигналы, то есть трафик из соцсетей, могут положительно влиять на SEO-стратегию, так что каждый клик из соцсетей на вес золота!

Есть вопросы или предложения? Будем рады помочь!

Источники:

• ›https://ogp.me/ - Официальный сайт протокола Open Graph