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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Существует несколько вариантов поиска 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.