Что такое метатег Open Graph — подробный обзор

Представьте себе: вы создали информативный контент на своем веб-сайте и поделились им в социальных сетях. Теперь вы ждете увеличения трафика, лайков и репостов.

Надеемся, это было так просто!

Но это не так!

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

Вводит метатеги Open Graph, чтобы упростить вам задачу!

В наши дни метатеги OG очень популярны. Интересно, что это? Прочитайте блог до конца, чтобы получить полное представление.

Что такое метатег Open Graph

Метатег OG — это фрагмент кода, который управляет отображением URL-адресов в социальных сетях. Он является частью протокола Facebook OG, а также используется другими платформами социальных сетей, такими как LinkedIn и Twitter.

С помощью тега OG вы можете контролировать, как информация передается со стороннего сайта на Facebook при публикации страницы. Таким образом, вместо пиксельного изображения или зашифрованных фрагментов ваши сообщения будут содержать информацию в организованном порядке.

Вот так выглядит наш блог «Почему выбирают Magento для разработки интернет-магазина» на Facebook с тегом OG:

Какие метатеги Open Graph использовать

В официальном документе Facebook перечислено целых 17 тегов OG. Мы сделали это легко для вас. Вам просто нужно 5 тегов, чтобы информировать Facebook об основах вашей страницы. Мы обсудим это ниже со ссылкой на этот блог: Почему лучше выбрать собственный веб-сайт электронной коммерции, а не готовое решение.

1. о:название
синтаксис:

<meta property=”og:title” content=”Почему стоит выбрать собственный веб-сайт электронной коммерции, а не готовое решение” />

Здесь вы определяете заголовок контента. Он служит той же цели, что и метатег заголовка для вашего контента на странице результатов поисковой системы. Если Facebook не может найти тег og:title на странице, он использует метазаголовок. Вы имеете полное право использовать разные заголовки для мета-заголовка и og:title. Если вы хотите дать привлекательный заголовок своей странице исключительно в социальных сетях и привлечь больше кликов, вы можете дать ей броский заголовок.

Хотя ограничений на количество символов нет, лучше сохранить тот же лимит, что и в мета-заголовке: в пределах 60 символов. Если заголовок длиннее 100 символов, Facebook автоматически сократит его до 88. Держите заголовок достаточно привлекательным, чтобы вызывать клики пользователей.

2. о:описание
синтаксис:

<meta property="og:description" content="Пользовательский веб-сайт электронной коммерции или готовое решение — блог предлагает сравнительное исследование между ними. Проверьте это.

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

Facebook может отображать до 300 символов в этом разделе. Однако лучше ограничить содержание до 200 символов. Краткое и четкое описание поможет людям с первого взгляда получить представление и щелкнуть ссылку, чтобы узнать больше.

3. ог:изображение
синтаксис:

<meta property="og:image" content="https://webguru-india.com/blog/wp-content/uploads/2021/03/Why_Choose_a_-Custom_Ecommerce_Website_over_A_Ready_Solution.jpg" />

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

Если вы не укажете изображение с помощью og:image, Facebook может показать рекламный баннер, скопированный со страницы, или вообще ничего! Это серьезно повлияет на контент, и люди могут его прокрутить.

Обычно профессионалы в любом известном агентстве по маркетингу в социальных сетях рекомендуют разрешение для изображения OG 1200 × 627 пикселей [соотношение 1,91: 1]. Кроме того, убедитесь, что размер изображения не превышает 5 МБ.

4. ог: тип
Синтаксис:

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

Этот тег описывает тип объекта, которым вы делитесь: изображение, видео или сообщение в блоге. Вот несколько примеров типов контента:

• Сайт на основе: сайт, статья, блог
• Место: город, страна
• Бизнес: компания, ресторан, гостиница
• Люди: актер, политик, писатель
• Развлечения: фильм, игра, книга, еда

И более!

Этот тег играет важную роль. Скажем, ваш пост о фильме или книге с кнопкой «Нравится». Он определит, появится ли контент в разделе интересов пользователя.

5. ог: URL
Синтаксис:

<meta property="og:url" content="https://webguru-india.com/blog/why-choose-a-custom-ecommerce-website-over-a-ready-solution/" />

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

Помните, что предоставленный вами URL-адрес не отображается в ленте новостей Facebook. Будет видно только доменное имя.

[здесь поставьте знак со стрелкой и напишите – og:title [Почему вы выбрали пользовательский веб-сайт электронной коммерции, а не готовое решение], og:image [изображение], og:description [если вы планируете…используйте h…] и og: адрес [webguru-india.com] ]

Преимущества метатегов Open Graph

Зачем мучиться с внедрением тегов OG? Вот причины, по которым поставщики услуг цифрового маркетинга уделяют особое внимание использованию тегов OG, прежде чем делиться контентом в социальных сетях:

• Улучшите внешний вид сообщений в социальных сетях

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

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

• Улучшенная видимость в поиске Facebook

Тег OG помогает Facebook понять, о чем контент. Это, в свою очередь, помогает повысить узнаваемость вашего бренда в поиске Facebook. С другой стороны, когда люди ищут что-то на Facebook, они просматривают некоторые результаты, прежде чем нажимать на конкретный результат. Контент, оптимизированный с помощью тегов OG, с большей вероятностью привлечет их внимание.

Посмотрите на следующую картинку:

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

Кроме того, если кто-то поделится ссылкой на публикацию, оптимизированную с помощью метатегов Open Graph, через прямое сообщение в Facebook Messenger, WhatsApp или iMessage, тег OG поможет создать фрагмент.

• Подходит для различных платформ

В то время как Facebook создал открытый график, теперь он используется другими платформами социальных сетей, включая Twitter, LinkedIn и Pinterest. Таким образом, вы можете создать тег один раз и оптимизировать свое присутствие на различных платформах.

• Оптимизируйте присутствие бренда в Google Discover

Google Discover — это инструмент рекомендаций по контенту на основе искусственного интеллекта, расположенный под панелью поиска Google в приложении Chrome. Он рекомендует новости, статьи, видео, рекламу, спортивные результаты и т. д. на основе поведения пользователей. Вы можете узнать больше о Google Discover здесь.

Если вы хотите оптимизировать свой контент, чтобы его можно было найти в ленте Discover, тег OG может сыграть решающую роль. Вот интересный факт. Команда Ahrefs недавно заметила связь между метатегами Open Graph и Google Discover. Они обнаружили, что опечатка, существующая в og: title поста («Пример создания чернил»), была представлена ​​​​в Google Discover. Однако опечатки не было в самом названии статьи («Пример создания ссылок»).

Как проверить теги OG

Чтобы помочь вам отслеживать теги OG, в Facebook есть специальный инструмент под названием Sharing Debugger. Что оно делает? Мы объясним ниже.

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

Кроме того, он очищает кеш Facebook. Почему это важно? Предположим, вы размещаете ссылку на Facebook, а затем обнаруживаете ошибку в миниатюре. Итак, вы возвращаетесь, чтобы внести необходимые изменения в теги OG, и снова публикуете их на Facebook.

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

Время подводить итоги

По состоянию на март 2021 года теги OG используются 54,6% всех веб-сайтов. Это означает, что почти половина сайтов до сих пор их не использует. Оптимизация метатегов OG может занять некоторое время, но это того стоит. Теги помогут вам выделиться из толпы, повысить видимость в результатах поиска Facebook, привлечь внимание людей и увеличить число кликов.

Используете ли вы теги OG перед тем, как поделиться контентом в социальных сетях? Если нет, начните внедрять его в ближайшее время!