Привет. Вот вы уже создали свой сайт, и все вроде бы выглядит не плохо, однако вот не задача, в соц. сетях сайт при публикации ссылки выглядит отвратно. А даже если и выглядит терпимо, однако ваш личный тест перфекцихуизма все равно запись не проходит. Есть решение — Open Graph разметка.
Сразу давайте «с места в карьер» — простой вариант:
<!-- Open Graph -->
<meta property="og:url" content="url адрес сайта">
<meta property="og:title" content="Заголовок записи">
<meta property="og:description" content="Описание записи">
<meta property="og:site_name" content="Название проекта / сайта">
<meta property="og:image" content="Прямой путь до картинки">
<meta property="og:type" content="article">Расширенный вариант (рекомендуется):
<!-- Open Graph Full -->
<meta property="og:locale" content="ru_RU">
<meta property="og:type" content="article">
<meta name="twitter:url" content="url адрес сайта">
<meta name="twitter:domain" content="домен без http(s)">
<meta property="og:url" content="url адрес сайта">
<meta property="og:site_name" content="Название сайта">
<meta property="og:title" content="Заголовок записи">
<meta name="twitter:title" content="Заголовок записи">
<meta property="og:description" content="Описание записи">
<meta name="twitter:description" content="Описание записи">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="Прямой путь до картинки">
<meta name="twitter:image:src" content="Прямой путь до картинки">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="twitter:site" content="@">
<meta name="twitter:creator" content="@...">Просто скопируйте и вставляйте между тегами <head></head>, далее заполняйте нужным текстом поля content="" и все, теперь будет работать как надо.
Этот способ для ленивых, однако если хочется настроить все максимально результативно, то используем сайт https://yandex.ru/support/webmaster/open-graph/. Это официальная документация от yandex, и более детального я ничего не нашел. Тут все по полочкам разложено и можете все настроить без особых проблем.
Мои рекомендации
Длина заголовка — используйте не более 75 символов. Некоторые рекомендуют до 95 и до 144, однако на практике при создании динамического сайта в заголовок подставляется название сайта, от чего в социальных сетях может быть обрезка до «N»-го кол-ва символов. Поэтому лучше использовать до 75.
Описание записи — рекомендую брать максимум 144 символа. Учитесь писать емко и лаконично, а не как я. Facebook рекомендует, к примеру, до 297 символов, однако тут решать уже Вам.
Название сайта — тут все понятно, URL — тоже (однако обязательно используем полный путь с http:// или https:// так же и для картинки).
Изображение — тут все куда веселее, однако не так то и сложно. В общем, используем размер строго до 968×504px. Я выбираю всегда точный размер. Во-первых, соц. сети любят резать фотки с разных сторон, чтоб этого не произошло важно использовать пропорции, что указал ранее ну и размер в идеале тот же. Во-вторых, не будет у вас ничего мылится. Facebook рекомендует 1200×630px, но зачем, когда можно взять фотку меньшего размера и веса, а к тому же быть уверенным, что ни с одной стороны ничего не срежется.
КЭШ в соц. сетях
На мой взгляд это боль, однако она легко решается. Была ситуация с сайтом заказчика. Там проводятся ежегодные тренинги и соответственно раз в год меняем длиннющий лендинг. Прошлые делал не я, но текущий уже собран моими силами. И заказчик, попросил сделать меня так, чтоб старой информации не осталось при вставке ссылки, ибо было все по-прежнему.
Решается это дело очень просто:
Facebook — заходит по адресу: https://developers.facebook.com/tools/debug/og/object/ вставляем свою ссылку и нажимаем на кнопку «Получить новую информацию о URL». Все, сделано, можете так же там посмотреть, что было и что стало.
Вконтакте — тут так же есть специальная ссылка: https://vk.com/dev/pages.clearCache. Тут как я понял, листаем в самый низ, где пример, вставляем ссылку и нажимаем выполнить. Хоть там и написано «Пример запроса», однако все сработало. Отпишитесь, как у вас.
Telegram — для этого дела есть специальный bot, который и сделает все за нас. Почти все. В общем в поиске вводим @webpagebot, нажимаем «запустить» вставляем ссылку, которую нужно и нажимаем enter на клавиатуре. С телефона все точно так же. На всякий случай можно перезапустить Telegram чтоб все точно заработало. Но это не точно.
На этом собственно и все. Пишите примеры того, как вы оформили разметку, а так же, получилось ли у Вас почистить кэш в соц сетях. И не забывайте делиться данной записью, мне будет приятно!
