Как мы можем включить изображение на нашем веб-сайте для отображения в WhatsApp, когда мы разделяем ссылку вроде этого?
Предоставить изображение для обмена ссылками WhatsApp
Ответ 1
Стандарты 2019 года
Требуется несколько шагов, чтобы получить идеальный предварительный просмотр для WhatsApp, Twitter, Facebook и значки закладок для ПК и мобильных устройств. Если вам нравится читать, перейдите на ogp.me, но обязательно прочитайте шаги 1–6 в этом ответе, чтобы получить лучший предварительный просмотр WhatsApp.
Обратите внимание: некоторые приложения или веб-сайты используют кэш или даже сохраняют предварительный просмотр веб-сайта в своей базе данных. Это означает, что когда вы тестируете свою ссылку, например, в WhatsApp или Facebook, вы, скорее всего, сразу не увидите никакой разницы. Использование другой ссылки (другой страницы) поможет. Но как только вы воспользуетесь этой ссылкой один раз, этот раздел "обратите внимание" начнется снова.
Шаг 1: заголовок
Максимум 65 символов
<title>your keyword rich title of the website and/or webpage</title>
Шаг 2: описание
Не более 155 символов
<meta name="description" content="description of your website/webpage, make sure you use keywords!">
Шаг 3: og: title
Максимум 35 символов
<meta property="og:title" content="short title of your website/webpage" />
Шаг 4: og: url
Полная ссылка на текущий адрес веб-страницы
<meta property="og:url" content="https://www.example.com/webpage/" />
Шаг 5: og: описание
Максимум 65 символов
<meta property="og:description" content="description of your website/webpage">
Шаг 6: og: image
Изображение (JPG или PNG) размером менее 300 КБ и минимальными размерами 300 x 200
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
Если вы выполнили шаги, описанные выше, теперь вы можете увидеть свой предварительный просмотр в WhatsApp! Тем не менее, помните о разделе "заметка".
Шаг 7: og: введите
Чтобы ваш объект был представлен на графике, вам нужно указать его тип. Вот список доступных глобальных типов: http://ogp.me/#types. Вы также можете указать свои собственные типы.
<meta property="og:type" content="article" />
Шаг 8: og: locale
Локаль ресурса. Вы также можете использовать og: locale: alternate, если у вас есть другие языковые переводы.
Если вы не укажете og: locale, по умолчанию используется en_US.
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
Шаг 9: Твиттер
Для лучшей поддержки Twitter прочитайте это.
Шаг 10: Facebook
Для лучшей поддержки Facebook прочитайте это.
Шаг 11: значок
Для лучшей поддержки favicon для всех браузеров и устройств прочтите это.
Бонусный шаг 12: видео/аудио
Также есть возможность поделиться аудио/видео. Например, Facebook и Twitter очень хорошо обмениваются видео. Прочитайте ogp.me.
Ответ 2
У меня была та же проблема, и проблема заключалась в размере картинки. Whatsapp не поддерживает изображение размером более 300 КБ.
Поэтому наиболее важным свойством для отображения изображения в Whatsapp является:
<meta property="og:image" content="url_image">
И размер изображения для отображения должен быть менее 300 КБ.
Если проблема не устранена, прочитайте также ответ на этот похожий вопрос
Ответ 3
Я думаю, нет белого списка в whatsapp, так как я нашел решение, которое сработало для меня. Сделайте следующее. вставить 3 метатега:
<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>
<meta property="og:title" content="Your Title"/>
<meta property="og:description" content="Your description."/>
Ваше изображение должно быть в формате .png и размере 600x600px и должно быть названо 'logo-yoursite.png' (как только это сработало для меня ТОЛЬКО КАК ЭТО)
Не забудьте вставить ссылку на whatsapp на свой сайт:
<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>
Сделайте это, и все будет хорошо!
Ответ 4
Я записал здесь идеальное подробное решение - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Чтобы получить идеальный предварительный просмотр, нужно выполнить семь шагов.
Название: добавьте ключевое слово с богатым названием на свою веб-страницу, максимум 65 символы.
Описание Meta: Опишите свою веб-страницу максимум 155 символы.
og: title: не более 35 символов.
og: url: полная ссылка на ваш адрес веб-страницы.
og: description: Максимум 65 символов.
og: изображение: изображение (JPG или PNG) размером менее 300 КБ и минимум размер 300 x 200 пикселей.
favicon: Маленькая иконка размером 32 x 32 пикселя.
На приведенной выше странице вы найдете требуемые спецификации, лимиты символов и образцы. Сделайте upvote, как только вы найдете это удовлетворительным.
Ответ 5
Я тоже пытаюсь сделать это сам, и я добавил все нужные метатеги:
<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />
но пока не удалось увидеть изображение при совместном использовании ссылки в WhatsApp.
Я обнаружил, что WhatsApp также выполняет какое-то кэширование изображения и информации о url, не знаю, как долго.
Чтобы проверить, что я вставил правильные теги, я просто попробовал другой URL-адрес, например: http://domain.com вместо http://www.domain.com.
надеюсь, это помогает кому-то другому.
Ответ 6
Поработав над ошибкой, обнаружил, что в IOS элементы в HEAD могут остановить поиск WhatsApp в og: image/og: description/name = description. Поэтому постарайтесь сначала поставить их поверх всего остального.
Это не работает
<head>
<div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
<meta property="og:description" content="description" />
<meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>
Эта работа:
<head>
<meta property="og:description" content="description" />
<meta property="og:image" content="http://cdn.some.com/random.jpg" />
<div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
</head>
Ответ 7
Я бы порекомендовал всегда заходить на https://developers.facebook.com/tools/debug/sharing, чтобы проверить ваши свойства, так как Facebook часто меняет политику, соответствие и API.
Если вы работаете с ботами Messenger или другими приложениями FB, вам может понадобиться свойство fb: app_id, чтобы изображения ссылок работали в Whatsapp. Подробнее на сайте разработчиков для Facebook. https://developers.facebook.com/docs/sharing/webmasters
Ответ 8
У меня была та же проблема, вот что нужно решить.
Он должен появиться, если вы добавите meta og: image
Проблема заключается в том, что whatsapp не будет показывать изображение, если вы печатаете без http://и заканчиваете с/ Например, он отображает изображение и описание, если вы набираете http://google.com/, но не с google.com
Надеюсь, что это поможет кому-то.
Ответ 9
Если вы хотите иметь изображение рядом с URL-адресом вашего веб-сайта, который кто-то поделился с WhatsApp, вам нужно поставить метатег на страницу, на которую ссылается URL, например:
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
Ответ 10
Имел ту же проблему, добавил og: изображение, и это не сработало, в то время как URL-адрес заканчивается знаком косой черты (/). После удаления косой черты с URL-адреса загрузите изображение. Интересная ошибка...
Ответ 11
Следующие действия помогли в моем случае.
Помещение изображения под тем же хостом.
<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />
Передача необходимого изображения в WhatsApp специально путем определения его пользовательского агента по ведущей подстроке, пример
WhatsApp/2.18.380 A
Подождите несколько секунд, прежде чем нажать кнопку "Отправить", чтобы у WhatsApp было время получить изображение и описание из метаданных og.
Ответ 12
Даже после этих попыток. Изображения с моего сайта загружались несколько раз, а иногда нет. После проверки с помощью https://developers.facebook.com/tools/debug/sharing
Я понял, что мой фреймворк django (python) отображает путь к изображению относительно. Мне пришлось внести изменения в путь изображения с полным URL-адресом. (включая http://). тогда это начало работать
Ответ 13
Для предварительного просмотра изображения в WhatsApp необходимы следующие теги:
<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />
Как сказано в документации Facebook, если вы укажете размер изображения og:, он будет выбираться быстрее, а не асинхронно в противном случае.
PNG рекомендуется для формата изображения. Рекомендуется по крайней мере 600x600 пикселей.