Главное Свежее Вакансии Образование
😼
Выбор
редакции
1 748 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как улучшить отображение сайта в соцсетях

Небольшая деталь, о которой часто забывают

Красивая ссылка на сайт

Вы замечали как отображаются ссылки в переписке Вконтакте? Кто-то из друзей скидывает вам ссылку на сайт, и она может выглядеть хорошо, а может — не очень. Ниже два примера.


Хорошо выглядит та ссылка, которая отображает картинку, адрес и краткую информацию о сайте (пример справа). Всё это называется умным словом сниппет (snippet — кусочек, отрывок, фрагмент).

Сниппет не может сам получиться красивым, для этого в коде прописываются специальные параметры. Если не указать, какая картинка должна отображаться в ссылке, то Вконтакте или Facebook сам выберет её на сайте. Если картинка неправильных пропорций, то в сниппете она может быть плохого качества или просто растянуться.

У каждой соцсети свои параметры отображения, поэтому для каждой прописываются настройки. Если текст можно просто дублировать, то изображение надо сделать в заданных пропорциях для каждого сайта.

Проверка изображения сниппета

Проверить как отображается свой сайт несложно.

Вконтакте просто киньте ссылку на свой сайт в сообщениях и сразу увидите как отображается сниппет.

Для проверки сниппета в Facebook откройте Facebook Debugger. Введите адрес страницы и нажмите на кнопку «Получить новую информацию о URL».

Внизу страницы в пункте «При перепосте это будет включено» отобразится предпросмотр ссылки.


Как сделать сниппет для своего сайта

1. Подготовьте две картинки, одну для Facebook (1200 × 628 px), вторую для Вконтакте (537 × 240 px).

2. Загрузите картинки на свой или какой-нибудь сторонний сервер. Главное, чтобы у вас была ссылка с прямым доступом к этим изображениям. Например, вот пример с нашего сайта: https://furnas.ru/6053b43d4b83b82f20b7b8f632d9f721.png

3. В html-код всех страниц вашего сайта раз добавьте между тегами <head> </head> следующий код:

<meta property="vk:image" content="{ссылка_на_картинку_для _вк}"/>
<meta property="og:image" content="{ссылка_на_картинку_для _facebook}"/>

4. Проверьте, что всё получилось. Facebook сразу не обновляет данные, зайдите на Facebook Debugger, введите адрес сайта и нажмите на кнопку «Получить новую информацию о URL». Так Facebook обновит данные о вашем сайте.

Можем помочь сделать

Для тех, кто дочитал статью сделаем небольшой подарок. Мы можем бесплатно сделать для вас картинки нужного размера и разместить на своем сервере, просто зайдите на sharemaster.tilda.ws и оставьте заявку.

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Андрей
Важная деталь, спасибо за информацию
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.