Несколько слов о том, что такое метатеги и для чего они нужны.
При отправке ссылок на ваш сайт в мессенджерах и социальных сетях, платформа «просматривает» ваш сайт и определяет, какую информацию отобразить в ссылке.
Если социальная сеть находит настроенные метатеги, она отобразит информацию, содержащуюся в них. Если же таковых нет, вы, по сути, предоставляете платформе право решать, как отображать ссылку на ваш ресурс — информация для отображения выбирается автоматически.
Иными словами, настройка метатегов позволяет повысить привлекательность отображения ссылок на ваш сайт, в частности на рабочее пространство 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:card | Необходимый элемент, который сообщает, к какому типу относится карточка. Значение по умолчанию «summary». |
| twitter:image | Ссылка на изображение. Позволяет задать изображение, которое будет отображаться в ссылке. |
| twitter:title | Задает заголовок страницы. |
| twitter:description | Краткое описание страницы, подзаголовок. |
| twitter:url | Настройка этого тега позволяет перенаправлять пользователя на «каноническую» страницу, без лишних параметров. Например, https://yoursite.com/page.html? param=value станет https://yoursite.com/page.html |
Рассмотрим пример заполнения базовых тегов, а именно: наименования, описания и изображения.
| Ключ | Пример значения | Примечание |
| title | Special og title | Заголовок страницы |
| description | Test description for og | Краткое описание страницы |
| og:image | https://aristova.pcvr-stg-api.smartex-it.com/api/v1/storage/shared_link_ original/oS9W65Q5jRZTJ3EaXdyWn8/Logo%20Picvario.png | Ссылка на изображение, которое будет отображаться в ссылке |
В 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 вы можете ознакомиться по ссылке. Вот так будет выглядеть ссылка после настройки метатегов из примера выше.
Значения мета-тегов кэшируются в браузере и памяти мессенджеров. Чтобы увидеть внесенные изменения, очистите кэш или откройте ссылку на ваше рабочее пространство Picvario в режиме «инкогнито».
