Перенесем бесплатно ваш интернет-магазин на inSales без потери трафика с любой CMS-платформы
Реклама. ООО «Инсейлс Рус»‎ ИНН 771484376 erid: 2RanymBvZGt

Добавление тегов 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 рекомендуем создать обращение в техническую поддержку.

Оставить оценку

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

Оценки: 0

Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!
Недавно просмотренные статьи
Продолжая пользоваться сайтом,
вы соглашаетесь с использованием cookie