Добавление тегов Open Graph (og) для социальных сетей

Специальные метатеги Open Graph определяют, как контент будет отображаться при публикации ссылок в социальных сетях и мессенджерах. Если пользователь делится ссылкой на сайт в соцсетях (например, ВКонтакте, Telegram, LinkedIn и других), браузер обращается к Open Graph тегам, чтобы корректно отобразить превью страницы.

Преимущества использования Open Graph тегов:

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

Несмотря на то, что большинство популярных платформ используют Open Graph теги для отображения превью ссылок, каждая социальная сеть может интерпретировать теги по-разному и использовать свои собственные дополнительные правила. Подробнее можно узнать в документации социальной сети или проверить через инструменты отладки отображения ссылок.

1. Основные Open Graph теги
2. Теги Open Graph в inSales

Основные Open Graph теги

1. og:title - заголовок контента, который будет отображаться в превью ссылки.

Пример:

 <meta property="og:title" content="Как увеличить трафик на сайте с помощью SEO">

2. og:description - краткое описание страницы, которое отображается под заголовком в превью ссылки.

Пример:

 <meta property="og:description" content="Практическое руководство по улучшению SEO-показателей сайта и привлечению целевой аудитории.">

3. og:image - ссылка на изображение, которое будет отображаться вместе с превью ссылки.

Рекомендации:

• формат: JPG или PNG,
• размер: минимум 1200x630 пикселей (для лучшего отображения).

Пример:

 <meta property="og:image" content="https://вашсайт.ru/images/seo-guide.jpg">

4. og:url - предпочитаемый URL для отображения ссылки. Используется, чтобы указать канонический адрес страницы.

Пример:

<meta property="og:url" content="https://вашсайт.ru/blog/seo-sovety">

5. og:type - тип контента. Определяет, как будет интерпретироваться страница (например, статья, видео, веб-страница и т. д.).

Наиболее распространённые значения:

• website — веб-сайт,
• article — статья,
• video — видео.

Пример:

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

Теги Open Graph в inSales

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

Шаблоны созданы:

• для главной страницы
  

  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ account.url }}">
  <meta property="og:title" content="{{ account.title }}">
  <meta property="og:image" content="{{ logotype_image }}">

  Скопировать
• для страниц карточек товара
  

  <meta property="og:title" content="{{ product.title | escape }}">
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ account.url }}{{ product.url }}">
  <meta property="og:image" content="{{ product.first_image.original_url }}">

  Скопировать
• для страниц категорий
  

  <meta property="og:title" content="{{ collection.title | escape }}">
  <meta property="og:image" content="{{ collection.image.original_url }}">
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ account.url }}{{ collection.url }}">

  Скопировать
• для страниц SEO-фильтра 
  

  <meta property="og:title" content="{{ filter.title | escape }}">
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ account.url }}{{ collection.url }}/{{ filter.handle }}">

  Скопировать
• для страниц статей
  

  <meta property="og:title" content="{{ page.title | escape }}">
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ account.url }}{{ page.url }}">

  Скопировать
• для страниц блога
  

  <meta property="og:title" content="{{ blog.title | escape }}">
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ account.url }}{{ blog.url }}">

  Скопировать
• для обычных страниц
  

  <meta property="og:title" content="{{ article.title | escape }}">
  <meta property="og:image" content="{{ article.image.original_url }}">
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ account.url }}{{ article.url }}">

  Скопировать

Подробнее о значении переменных

В inSales метатеги редактируются в разделе <head></head> с помощью кода шаблона сайта. Для изменения тегов Open Graph рекомендуем создать обращение в техническую поддержку.