Как мы можем включить изображение на нашем веб-сайте для отображения в WhatsApp, когда мы публикуем такую ссылку?
html
meta-tags
whatsapp
facebook-opengraph
maxdaniel98
источник
источник
Ответы:
Стандарты 2020
Требуется несколько шагов, чтобы получить идеальный предварительный просмотр для WhatsApp, Twitter, Facebook и иконки закладок для ПК и мобильных устройств. Если вам нравится читать, перейдите на ogp.me - но обязательно прочитайте шаги 1 - 6 в этом ответе, чтобы получить лучший предварительный просмотр WhatsApp.
Обратите внимание: некоторые приложения или веб-сайты используют кэш или даже сохраняют предварительный просмотр веб-сайта в своей базе данных. Это означает, что когда вы тестируете свою ссылку, например, в WhatsApp или Facebook, вы, скорее всего, сразу не увидите никакой разницы. Использование другой ссылки (другой страницы) поможет. Но как только вы воспользуетесь этой ссылкой один раз, этот раздел «обратите внимание» начинается снова и снова.
Шаг 1: заголовок
Максимум 65 символов
Шаг 2: описание
Максимум 155 символов
Шаг 3: og: title
Максимум 35 символов
Шаг 4: OG: URL
Полная ссылка на текущий адрес веб-страницы
Шаг 5: og: описание
Максимум 65 символов
Шаг 6: og: изображение
Изображение (JPG или PNG) размером менее 300 КБ и минимальными размерами 300 x 200 *
* @RichDeBourke упомянул об этом мне, но, видимо, WhatsApp увеличил максимальный размер изображения (размеры и размер файла). Я сделал несколько тестов: он не работает последовательно каждый раз на каждом устройстве. Я тестировал изображения размером 2.x Мб, и даже это, казалось, работало 9/10 раз. <300KB - самый безопасный подход, но вы можете использовать большие изображения с 18-02-2020. Я бы порекомендовал сохранить размер файла ниже 2 МБ. И определенно бросьте свое изображение через TinyPNG или любой другой алгоритм сжатия изображений, если вы этого еще не сделали.
Если вы выполнили шаги, описанные выше, теперь вы можете увидеть свой предварительный просмотр в WhatsApp! Однако имейте в виду раздел «пожалуйста, обратите внимание» выше.
Шаг 7: og: тип
Чтобы ваш объект был представлен на графике, вам нужно указать его тип. Вот список доступных глобальных типов: http://ogp.me/#types . Вы также можете указать свои собственные типы.
Шаг 8: og: locale
Локаль ресурса. Вы также можете использовать og: locale: alternate, если у вас есть другие языковые переводы.
Если вы не укажете og: locale, по умолчанию используется en_US.
Шаг 9: Твиттер
Для лучшей поддержки Твиттера прочитайте это .
Шаг 10: Facebook
Для лучшей поддержки Facebook прочитайте это .
Шаг 11: фавикон
Для лучшей поддержки favicon для всех браузеров и устройств прочитайте это .
Бонусный шаг 12: видео / аудио
Также есть возможность поделиться аудио / видео. Например, Facebook и Twitter очень хорошо обмениваются видео. Читайте ogp.me .
источник
У меня была та же проблема, и проблема заключалась в размере картинки. Whatsapp не поддерживает изображения размером более 300 КБ.
Поэтому наиболее важным свойством для отображения изображения в Whatsapp является:
И размер изображения для отображения должен быть менее 300 КБ .
Если проблема не устранена, прочитайте также ответ на этот похожий вопрос
источник
Я думаю, что в WhatsApp нет белого списка, так как я нашел решение, которое сработало для меня. Сделайте следующим образом. вставьте 3 мета-тега:
Ваше изображение должно быть в формате .png и размером 600x600px и должно называться 'logo-yoursite.png' (после того, как оно сработало для меня, ТОЛЬКО ТО, ЧТО)
Не забудьте вставить ссылку на WhatsApp на вашем сайте:
Сделай это, и все будет хорошо!
источник
Я задокументировал идеальное подробное решение здесь - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Чтобы получить идеальный предварительный просмотр, нужно сделать семь шагов.
На приведенной выше странице у вас есть необходимые спецификации, ограничение по количеству символов и примеры тегов. Сделайте upvote, как только вы найдете это удовлетворительным.
источник
og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
Я хотел бы обратить внимание на тот факт, что простое
<meta property="og:image" content="image.png" />
, как предложено где-то выше, не работает для меня (это фактически держало меня в цикле в течение нескольких недель). То, что работает, является либо абсолютным URL:<meta property="og:image" content="https://domainname.com/image.png" />
или начиная с косой черты (если изображение находится в корневом каталоге):
<meta property="og:image" content="/image.png" />
(Я бы добавил это как комментарий, но мне пока не разрешено. Модераторы могут свободно перемещать это, если это более уместно.)
источник
Я тоже пытался сделать это и добавил все нужные метатеги:
но пока не смог увидеть изображение при обмене моей ссылкой в WhatsApp.
Я обнаружил, что WhatsApp также выполняет некоторое кэширование изображения и информации URL, не знаю, как долго.
Чтобы проверить, что я вставил правильные теги, я просто попробовал другой URL, например: http://domain.com вместо http://www.domain.com .
надеюсь, это поможет кому-то еще.
источник
Поработав над ошибкой, обнаружил, что в IOS элементы в HEAD могут остановить поиск WhatsApp в og: image / og: description / name = description. Поэтому постарайтесь сначала поставить их поверх всего остального.
источник
twitter:image
пустой, отключение WhatsApp от полученияog:image
. Попытка удаления других<meta>
тегов может помочь в отладке функций социального обмена.og:image
сверху и убедиться, что она читаетсяЯ бы рекомендовал всегда заходить на https://developers.facebook.com/tools/debug/sharing, чтобы проверить ваши свойства, так как Facebook часто меняет свои политики, совместимость и API.
Если вы работаете с ботами Messenger или другими приложениями FB, вам может понадобиться свойство fb: app_id, чтобы изображения ссылок работали в Whatsapp. Больше на сайте веб-мастеров разработчиков Facebook. https://developers.facebook.com/docs/sharing/webmasters
источник
У меня была такая же проблема, вот решить.
Должен появиться, если вы добавите meta og: image
Проблема в том, что WhatsApp не будет отображать изображение, если вы введете без http: // и оканчиваете на /. Например, оно отображает изображение и описание, если вы введете http://google.com/, но не с google.com.
Надеюсь, это кому-нибудь поможет.
источник
Я хотел бы добавить ответ в эту ветку, чтобы конкретно указать, какие из вышеперечисленных тем помогли мне решить проблему и порядок, в котором они могут следовать, чтобы правильно понять основную причину и исправить ее раз и навсегда:
Я смог получить свой богатый предварительный просмотр , делясь ссылкой в социальных сетях с этим решением.
Я следил за различными вариантами в этой теме, и ниже приведены наиболее близкие к правильному ответу, и все они внесли свой вклад в конечный результат:
Надеемся, что это сэкономит кому-то время, необходимое для прокрутки и поиска правильного набора ответов, а также усилий, необходимых для всех проб и ошибок.
источник
Я попытался сделать несколько предложений в этой теме и из своих внешних поисков, но это была совсем другая проблема для меня. Моя конкретная инструкция по использованию изображения, обозначенного тегом og: image, была переопределена тегами открытого графика, предоставленными плагином Jetpack. мой подробный ответ вы можете найти здесь . Тем не менее, я подумал, что стоит добавить шаги вкратце в этой более понятной теме. Надеюсь, это кому-нибудь поможет.
Facebook Sharing Отладчик помог мне определить основную причину и оттуда, я последовал за следующие действия:
Изменяет используемый по умолчанию образ в любое время, когда Jetpack не может определить изображение для использования.
Я должен добавить, что рекомендуются такие параметры изображения, как минимум 300 x 200 пикселей и размер <300 КБ. И, пожалуйста, следуйте этим инструкциям, если такие общие инструкции не работают для вас, потому что, скорее всего, ваша проблема похожа на мою. Кроме того, иногда самым простым решением может быть просто удалить плагин (при условии, что вы убедитесь, что можете обойтись без него).
В конце вы должны увидеть что-то вроде -
Надеюсь это поможет.
NS
источник
Вам нужны следующие теги, чтобы получить предварительный просмотр изображения WhatsApp:
Как сказано в документации Facebook , если вы укажете размер og: image, он будет загружаться быстрее, а не асинхронно.
PNG рекомендуется для формата изображения. Рекомендуется не менее 600x600 пикселей.
источник
<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="628" />
я прав? Нужно ли нам указывать ширину и высоту изображения (которое имеет это изображение) в тегах или что-то еще, что бы ни называли пиксели изображения. Если мы упомянем ширину и высоту в метатегах, оно будет отображаться в этих измерениях? Пожалуйста, уточните @moreirapontocomЕсли вы хотите, чтобы рядом с URL-адресом вашего веб-сайта, которым кто-то поделился в WhatsApp, была добавлена картинка, вы должны поместить метатег на страницу, на которую ссылается URL, например:
источник
Возникла та же проблема, добавлено og: image, и она не работала, в то время как URL заканчивается знаком косой черты (/). После удаления косой черты из URL - изображение загружается .. Интересная ошибка ...
источник
Следующие действия помогли в моем случае.
Помещение изображения под тем же хостом .
Передача необходимого изображения в WhatsApp специально путем определения его пользовательского агента по ведущей подстроке, пример
Подождите несколько секунд, прежде чем нажать кнопку «Отправить», чтобы у WhatsApp было время получить изображение и описание из метаданных og.
источник
Даже после этих попыток. Изображения с моего сайта загружались несколько раз, а иногда нет. После проверки с помощью https://developers.facebook.com/tools/debug/sharing
Я понял, что мой фреймворк django (python) рендерит путь изображения относительно. Мне пришлось внести изменения в путь изображения с полным URL-адресом. (включая http: //). тогда это начало работать
источник
Дополнительная полезная информация:
Вы можете предоставить несколько og: images, WhatsApp будет использовать последний. Это поможет решить проблему, связанную с тем, что, например, Facebook хочет соотношение 1,91: 1 и WhatsApp 1: 1.
https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/
https://css-tricks.com/essential-meta-tags-social-media/
источник