Несколько слов о том, что такое метатеги и для чего они нужны.
При отправке ссылок на ваш сайт в мессенджерах и социальных сетях, платформа «просматривает» ваш сайт и определяет, какую информацию отобразить в ссылке.
Если социальная сеть находит настроенные метатеги, она отобразит информацию, содержащуюся в них. Если же таковых нет, вы, по сути, предоставляете платформе право решать, как отображать ссылку на ваш ресурс — информация для отображения выбирается автоматически.
Иными словами, настройка метатегов позволяет повысить привлекательность отображения ссылок на ваш сайт, в частности на рабочее пространство Picvario, в социальных сетях и мессенджерах. Используя теги вы сами выбираете отображаемую информацию в ссылках.
Вот так будет выглядеть ссылка на Picvario до настройки метатегов. В ней общие формулировки, ничего не говорящие про ваш бренд. И нет изображения.
А вот так после. Сразу видно, что это медиабиблиотека именно вашей компании.
Чтобы настроить метатеги
- Перейдите в Настройки системы.
- В открывшемся меню перейдите в раздел Внешний вид.
- Для добавления метатегов нажмите Добавить поля. После этого появятся два поля: key и value.
Где key — наименование метатега, value — значение метатега.Существует два основных типа тегов: Open Graph tags (og) и Twitter card tags (twitter).
Open Graph используется большинством социальных сетей и мессенджеров (Facebook, Telegram, WhatsApp и прочие). Twitter имеет собственные теги, но, если они не заполнены, могут быть использованы теги типа OG при их наличии. Подробнее про соотношение двух типов тегов читайте по ссылке.Больше о метатегах вы можете узнать по ссылкам, в том числе ознакомиться с их полным перечнем:
— Open Graph tags
— Twitter card tagsНа текущий момент для Picvario протестирована работа следующих метатегов:
Open Graph
og:type Тип основного контента на странице, например, «article» – статья, «movie» – кино и т.д. По умолчанию значение website. og:site_name Позволяет отображать заданное название сайта вместо доменного имени.
Пример: Picvario вместо picvar.io.og:url Настройка этого тега позволяет перенаправлять пользователя на «каноническую» страницу, без лишних параметров. Например, https://yoursite.com/page.html? param=value станет https://yoursite.com/page.html og:image Ссылка на изображение.
Позволяет задать изображение, которое будет отображаться в ссылке.og:title Задает заголовок страницы. og:description Краткое описание страницы, подзаголовок. Twitter
twitter:card Необходимый элемент, который сообщает, к какому типу относится карточка. Значение по умолчанию «summary». twitter:image Ссылка на изображение.
Позволяет задать изображение, которое будет отображаться в ссылке.twitter:title Задает заголовок страницы. twitter:description Краткое описание страницы, подзаголовок. twitter:url Настройка этого тега позволяет перенаправлять пользователя на «каноническую» страницу, без лишних параметров. Например, https://yoursite.com/page.html? param=value станет https://yoursite.com/page.html Рассмотрим пример заполнения базовых тегов, а именно: наименования, описания и изображения.
Ключ Пример значения Примечание title Test description for og Заголовок страницы description Special og title Краткое описание страницы og:image Ссылка на изображение, которое будет отображаться в ссылке В og:image необходимо указать прямую ссылку на изображение. Вы можете создать ее непосредственно в Picvario. Как это сделать, читайте в статье по ссылке.
Для изображений рекомендуются следующие параметры:
— Open Graph — минимально допустимый размер изображения составляет 200 x 200 px. Рекомендуется использовать изображения не менее 1200×630 px для наилучшего отображения на устройствах с высоким разрешением. Размер файла не более 8 MB. С более подробными рекомендации от Facebook вы можете ознакомиться по ссылке.
— Twitter — от 300×157 px до 4096×4096 px. Форматы: JPG, PNG, WEBP и GIF. Если GIF анимированный, будет использоваться только первый кадр. Размер файла не более 5 MB. С более подробными рекомендации от Twitter вы можете ознакомиться по ссылке.Вот так будет выглядеть ссылка после настройки метатегов из примера выше.
Значения мета-тегов кэшируются в браузере и памяти мессенджеров. Чтобы увидеть внесенные изменения, очистите кэш или откройте ссылку на ваше рабочее пространство Пикварио в режиме «инкогнито».