Техническая поддержка 8 800 555 6342
Положение об оказании услуг технической поддержки
CMS.S3

Мета-теги для социальных сетей (Open Graph) #2954

В данной инструкции речь пойдет о мета-тегах для таких социальных сетей, как vk.com, facebook, twitter. Также для подобных тегов можно встретить такое обозначание, как Open Graph.

Для чего нужны мета-теги социальных сетей?

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

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

Например, Вы задали для страницы товара следующие мета-теги Open Graph: заголовок в виде "Название товара", описание в виде "Анонс товара" и загрузили изображение товара. Если после этого Вы разместите в социальной сети ссылку на этот товар, она отобразится не просто в виде кликабельного текста, а в виде полноценной ссылки-карточки с заголовком, описанием и картинкой товара.

phpo9Vw3O

Обратите внимание, что заполнение этих мета-тегов для социальных сетей (Open Graph) не влияет на продвижение групп в социальных сетях. 

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

Какие бывают мета-теги?

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

В системе управления настройки мета-тегов можно условно разделить на две группы:

  • Мета-теги конкретных объектов. То есть мета-теги, настраиваемые для каждого товара, страницы, категории товаров или иного объекта, обладающего своей страницей на сайте. К примеру, Вы можете задать для каждой страницы на своем сайте свои заголовки, описания и картинки. Данные настройки находятся в окнах редактирования объектов на вкладке с SEO-параметрами (соответственно, в "Свойствах страниц", а также в "SEO-параметрах" товаров, производителей, категорий, альбомов галерей, статей, новостей).
  • Общие мета-теги. Данная группа мета-тегов настраивается сразу для всего сайта. Тут Вы можете указать, например, название сайта, задать пропорции для картинок в карточках ссылок, информацию о страницах сайта и аккаунтах администратора сайта в социальных сетях и т.д. Данная группа настроек находится в разделе "SEO-панель".

Рассмотрим все настройки более подробно.

Как включить мета-теги?

По умолчанию описанные мета-теги отключены. Чтобы приступить к работе, сперва Вам необходимо включить их.

Для этого раскройте список "Настройки" и выберите пункт "SEO панель".

phpGLIDTx

На "SEO панели" Вам будет необходим пункт 10 - "Мета-теги для социальных сетей".

phpohcMWE

Теперь отметьте галочку "Включить мета-теги для социальных сетей" и нажмите "Сохранить изменения".

php2DOQrK

После включения мета-тегов под галочкой отобразятся общие для всего сайта настройки.

phpAhh2VA

Рассмотрим, как ими пользоваться.

Общие настройки мета-тегов

Итак, после включения мета-тегов, Вам будут доступны следующие настройки:

  • Название сайта - укажите название компании, слоган или иной текст, который может быть использован в качестве названия сайта.
  • ID страницы администратора в Facebook - если у владельца сайта (или иного сотрудника, отвечающего за связи в социальных сетях) есть контактный аккаунт в Facebook, укажите тут ID аккаунта (см. последний шаг).
  • ID страницы сайта в Facebook - если у сайта/компании есть официальная страница в Facebook, укажите тут ID страницы (см. последний шаг).
  • ID приложения сайта VK - если у сайта/компании есть официальное приложение в VK.com, укажите тут ID приложения (см. последний шаг).
  • ID приложения сайта в Facebook - если у сайта/компании есть официальное приложение в Facebook, укажите тут ID приложения (см. последний шаг).
  • Имя, логин администратора в Twitter - если у владельца сайта (или иного сотрудника, отвечающего за связи в социальных сетях) есть контактный аккаунт в Twitter, укажите тут имя аккаунта в твиттере (ту часть, что идет после символа @).
  • Тип карточки для Twitter - выберите из предложенных пунктов тот тип карточки, который Вам наиболее подходит. Ссылки, размещенные в Twitter, будут иметь вид в зависимости от выбранного типа.
  • Пропорции картинок для всех объектов - задайте пропорции для изображений, которые будут иллюстрировать ссылки на Ваш сайт.

phpM2mDIo

В конце не забудьте сохранить изменения.

phpZ2680Z

 

Мета-теги объектов (страниц, товаров, статей и т.д.)

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

После включения мета-тегов они также станут доступны для редактирования.

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

Для начала перейдите к окну редактирования нужного Вам объекта (соответственно, в нашем случае это товар) откройте вкладку "SEO-параметры".

phpD5jp5C

После блока стандартных SEO-парамеров Вы увидите перечень настроек мета-тегов для социальных сетей, а именно:

  • Заголовок страницы для социальных сетей - укажите текст, который будет выводиться в качестве заголовка ссылки в социальных сетях.
  • Описание страницы для социальных сетей - соответственно, текст описания, который будет выводиться под заголовком ссылки.
  • Титульное изображение для социальных сетей - выберите из списка картинок необходимое изображение для иллюстрирования ссылки (при необходимости предварительно загрузив его).
  • Тип объекта - выберите из списка предложенных вариантов тот тип, который наиболее подходит по тематике к содержимому страницы (или же оставьте значение по умолчанию -  "Веб-сайт").

phpaddhe0

После внесения всех изменений не забудьте нажать "Сохранить и закрыть".

php4qx5Dd

Обратите внимание!

  • Еще раз подчеркиваем, что в данной инструкции настройка мета-тегов описана на примере товара, однако, подобные настройки также доступны и для прочих объектов, имеющих SEO-параметры: для производителей, категорий товаров, альбомов фотогалерей, изображений фотогалерей, новостей, статей и категорий статей Вы можете редактировать мета-теги социальных сетей аналогичным образом, в окне редактирования нужного Вам объекта на вкладке "SEO-параметры".
  • Настройки мета-тегов социальных сетей для страниц находятся в окне редактирования страницы - вкладка "Свойства" - подвкладка "SEO-параметры".

phpinFQCy

Как найти ID социальных сетей (Facebook и VК)?

Существует несколько вариантов поиска ID. 

Facebook ID страницы администратора: зайти на страницу своего профиля, навести курсор мыши на фотографию профиля, внизу страницы в строке браузера можно будет увидеть ID пользователя, или если у администратора есть еще какие-либо загруженные изображения в профиле, то, выбрав любое из них, Вы сможете в верхней строке браузера скопировать ID (указывается после символов fbid=);

Facebook ID страницы сайта: ввести URL необходимой страницы на сайте https://findmyfbid.com/,  в следующем окне сформируется id.

Для размещения приложений на сайтах Facebook и VK могут быть полезны следующие инструкции:

ID приложения сайта в Facebook http://tatet.net/p344-kak-poluchit-app-id-dlya-sotsialnoy-seti-facebook.html;

ID приложения сайта VK  http://info-effect.ru/kak-uznat-id-prilozheniya-vkontakte.html.

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