Open graph telegram не работает

Как сбросить кеш VK, FB и Telegram для Opengraph-изображений

Бывает так, что вы расшарили ссылку на свой сайт в соцсетях, после чего изменили на сайте картинку-превью или заголовок, а соцсети не подтягивают новые данные. Это происходит потому, что сервисы один раз получают информацию о ссылке и сохраняют её у себя в кеше, и в следующий раз уже берут информацию из своего кеша. Как заставить соцсети обновить информацию о своей ссылке?

Сбросить кеш в Фейсбуке

Переходим по ссылке — это дебаг-панель Фейсбука. В форме сверху указываем ссылку на свой сайт и загружаем результат. Для обновления данных нужно нажать кнопку «Повторить скрапинг».

Дебаг-панель для сброса кеша Фейсбука

Сбросить кеш Вконтакте

Открываем страницу, прокручиваем вниз к форме для указания ссылки, заполняем её и жмём «Выполнить». В случае успеха вы увидите надпись response: 1. После этого можете расшаривать Вконтакте вашу ссылку с новой превью.

Пример сброса кеша Вконтакте. Результат выполнения — успешно (response: 1)

Сбросить кеш для Телеграма

Пишем боту @WebpageBot, далее просто следуем инструкциям: отправьте ссылку боту, дальше он сам всё сделает. В ответном сообщении пришлёт обновлённые данные и кнопки для повторного обновления данных на случай, если вы в режиме реального времени вносите изменения и занимаетесь отладкой.

Пример работы бота

Источник

Почему нет превью ссылок в телеграм

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

Технические аспекты превью ссыллок в телеграме

Все просто после добавление ссылки в текстовое поле ввода, роботы телеграм переходят по указанной вами ссылке и парсят код на странице.

Вот как выглядит превью для этого сайта:

После публикации выглядит так:

Однако бывает, что роботы TG не получают контент по адресу, ответим почему чуть ниже.

Как же сделать превью ссылок в Телеграм

Для этого нужно всего лишь добавить разметку Open Graph на свой сайт. Это можно сделать собственноручно или воспользоваться плагином, если вы используете CMS.

Open Graph — это очень популярная микроразметка страницы от Facebook, которая помогает формировать и держать под контролем превью страницы сайта в социальных сетях и других веб-сервисов.

Разметка используяется для красивого оформления записей.

Почему бывает такое что превью нет

На момент написания статьи была такая проблема:

Присутствует разметка Open Graph, но телеграм все равно не загружает превью ссылки моего сайта.

Причина оказалась, в том что роскомнадзор блокирует ip адреса для телеграма. То есть, если ваш сайт расположен в России, то ему закрыт доступ в телеграм. Он не сможет получить доступ к вашему сайту.

Для этого необходимо заменить страну размещения сайта, если ваш хостинг не поддерживает такой услуги, то могу порекомендовать вот этот.

Устраняем проблему с ссылками в Телеграм — последний шаг

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

Если все равно нет превью, значит телеграм закеширировал результаты по данной странице. Чтобы очистить кеш перейдите в бот Webpage Bot.

Отправьте ссылку и нажмите update preview again.

Вот и всё. Если все получилось поставь лайк! Если нет, то значит проблема в другом. Пишите мне в Вконтакте разберемся вместе!

Источник

How do you clear the Open Graph cache of an URL on Telegram?

When I send a new link on Telegram, it automatically reads Open Graph data of the URL and generates a preview of the page.

When the Open Graph data of the same page changes, though, Telegram doesn’t update its preview: it has cached the old Open Graph data!

How do you clear the Open Graph cache?

Preview Example:

For the URL https://asp.net/ Telegram is reading the following tags:

And is generating the following preview:

4 Answers 4

Use @webpagebot

You can send the link [up to 10] you want to update to this Bot and it will scan your site and generate the new image thumbnail , site name and description .

Note: You may need to restart your Telegram client to see the updates

Images are cached too. Update them the same way. Be sure they’re specified using Open Graph but note you do not need to use the prefix attribute on your html tag to define the OG namespace.

Second solution:

Use a pattern like the following pattern for your web address:

Then replace previous number with a new one to force telegram update og data.

Источник

Media Skunk

блог Михаила Калашникова о медиа и технологиях

Как заставить ссылки на сайт нормально отображаться в мессенджерах

Приложения-мессенджеры дают нам все больше возможностей использовать их как канал доставки – широковещательные чаты, боты, кнопки для расшеривания контента. Впрочем, вы наверняка в курсе. Кто не в курсе, может почитать обзор на MediaToolbox.ru .

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

Лучших практик оптимизации страниц для мессенджеров, похоже, еще не существует – и в документации мессенджеров ничего полезного я не нашел. К счастью, все мессенджеры, которые я тестировал, используют для отображения внешних ссылок метатеги OpenGraph: заголовок og:title, анонс og:description, картинку og:image. Понять, какие они у вас, можно в моем сервисе проверки метатегов или с помощью дебага Facebook . Некоторым проще будет посмотреть исходный код страницы – часто метатеги видны невооруженным взглядом.

С заголовком и описанием все более-менее понятно: нужно их делать максимально короткими, понятными по первым двум-трем словам. Описание должно быть не обязательным для понимания – его могут отрезать под корень.

Главная проблема возникает с картинками. Дело в том, что ровно те же картинки из OpenGraph использует сам Facebook, наш любимый источник трафика. Он предпочитает их большими (что позволяет медиа засунуть на картинку красивый текст, например) и прямоугольными (1,91х1). Мессенджеры отображают их маленькими и, как правило, квадратными. Даже если пытаются отображать их в разных пропорциях, вы не застрахованы от такого:

Один из трюков состоит в том, что метатегов og:image у странице может быть несколько. Разные сервисы в этом случае ведут себя по-разному, и появляется возможность манипулировать отображением страницы внутри мессенджера.

Попробуем скормить мессенджерам две страницы с разным порядком тегов og:image: у страницы test.php они идут по возрастанию качества (cначала квадратная картинка с шаром, потом большая с цифрой 2016), у страницы test3.php по убыванию. Сам Facebook всегда выбирает самую большую картинку из предложенных и потом ее пережимает для своих нужд – то есть в FB будет виден именно мрачный океан с цифрой 2016.

Telegram , как выяснилось, берет последнюю картинку. Смотрите, во втором случае мы заставили его отобразить квадратный шар. Обратите внимание, что он понял и тег og:site, отобразив “Media Skunk” вместо “mediaskunk.ru”.

Тот же финт сработал и для WhatsApp . Заметьте, как мало места выделено под заголовок и описание – даже наше тестовое еле влезло.

К сожалению, метод работает не для всех. FB Messenger использует, похоже, метод хранения метаданных из самого Facebook. Это значит, что:

1. Если ссылку еще никто не шарил в FB или не засовывал в debug , вообще ничего к ней не подгрузится.
2. Если уже шарили, то Messenger возьмет ту же большую картинку и попытается что-то с ней сделать. Причем в мобайле это будет квадрат со скругленным нижним левым углом, а на вебе примерно так:

Почему для двух почти идентичных страниц messenger.com решил обрезать картинку по-разному – неизвестно и останется на его совести.

Лирическое отступление. Джеральд Даррелл описывал как-то парадоксальную южноамериканскую жабу. Нормальные амфибии растут как все: чем больше головастик, тем больше жаба. У парадоксальной жабы огромные головастики, а взрослая особь совсем скромных размеров. Она такая одна.

А теперь посмотрим, что сделает с тестовыми ссылками Viber:

Да, он действительно берет первую картинку из предложенных, а не последнюю!

Чтобы квадратная картинка показывалась в мессенджерах, а красивая ландшафтная отдавалась в FB, можно сделать в метатегах сэндвич:

Конечно, гарантий нет: при очередном обновлении дизайна в отдельных мессенджерах это может сломаться. Для FB Messenger решение пока не годится, но что-то может измениться, когда FB начнет превращать его в более полноценную платформу.

Если вы знаете другое решение или изучали этот аспект в других мессенджерах (Skype, Slack, WeChat, whatever), рассказывайте, очень интересно.

Источник

Как очистить кеш Open Graph URL-адреса в Telegram?

Когда я отправляю новую ссылку в Telegram, она автоматически считывает данные URL-адреса Open Graph и создает предварительный просмотр страницы.

Однако, когда данные Open Graph той же страницы изменяются, Telegram не обновляет свой предварительный просмотр: он кэширует старые данные Open Graph!

Как очистить кеш Open Graph?

Пример предварительного просмотра:

Для URL https://asp.net/ Telegram считывает следующие теги:

И создает следующий предварительный просмотр:

4 ответа

Используйте @webpagebot

Вы можете отправить ссылку [до 10], которую хотите обновить, на этот Bot , и он просканирует ваш сайт и сгенерирует новые image thumbnail , site name и description .

Примечание. Возможно, вам потребуется перезапустить клиент Telegram, чтобы увидеть обновления

Изображения тоже кешируются. Обновите их таким же образом. Убедитесь, что они указаны с помощью Open Graph, но обратите внимание на не нужно использовать атрибут prefix на вашем <> для определения пространства имен OG.

Второе решение:

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

Затем замените предыдущий number новым, чтобы принудительно обновить данные телеграммы og .

Например, используйте это:

Вы должны поговорить с @webpage обоими и сказать ему в чате

Я решил эту проблему, используя bitly.com и изменив URL-адрес.

Зайдите на @webpagebot и отправьте ссылку (до 10), которую хотите обновить.

Источник