Он делает несколько шагов, чтобы получить идеальный просмотр для WhatsApp, щебетать, Facebook и закладки иконки для ПК'ов и мобильных устройств. Если вы любите читать перейти к НГП.меня - но обязательно прочитайте шаги 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: о.:титул
Максимум 35 символов
<meta property="og:title" content="short title of your website/webpage" />
Шаг 4: ОГ:URL-адрес
Полная ссылка на данный адрес веб-страницы
<meta property="og:url" content="https://www.example.com/webpage/" />
Шаг 5: ОГА:описание
Максимум 65 символов
<meta property="og:description" content="description of your website/webpage">
Шаг 6: OG:изображение
Изображения(JPG или PNG) размером не более 300КБ и минимальными размерами 300 х 200
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
<БР>
Если вы выполнили описанные выше шаги, вы можете увидеть предварительный просмотр в WhatsApp! Быть в курсе и"Пожалуйста, обратите внимание на" раздел, хотя.
<БР>
Шаг 7: ОГ:тип
Для того, чтобы ваш объект, чтобы быть представленным на графике, вы должны указать его тип. Здесь's в список глобальных типов: http://ogp.me/#types. Вы также можете определить свои собственные типы.
<meta property="og:type" content="article" />
Шаг 8: ОГ:язык
Язык ресурса. Вы также можете использовать ОГ:язык:альтернативная если у вас есть другие переводы язык.
Если вы Don'т указать ОГ:язык, по умолчанию язык.
<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: видео/аудио
Это's также можно обмениваться аудио/видео. Facebook и Twitter, например, обмениваться видео очень хорошо. Читать НГП.меня.
У меня был тот же вопрос, и проблема была размер картинки. В WhatsApp не'поддержка t картинки с размером больше 300КБ.
Поэтому самое важное свойство для отображения изображения на WhatsApp является:
<meta property="og:image" content="url_image">
И размер изображения должен быть меньше 300КБ.
Если проблема не устранена, Читайте также ответ на этот аналогичный вопрос
Я думаю, нет белого списка в 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 и должен быть назван 'логотип-веб-узел.ПНГ' (после того, как он работал на меня просто так)
Не забудьте вставить ссылку на WhatsApp на свой сайт:
<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>
Сделайте это и вы'll быть хорошо сделано!
Я здесь описаны идеальные подробное решение - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Есть семь шагов необходимо сделать, чтобы получить идеальный просмотр.
название : добавить ключевое слово богатых заголовок веб-страницы с максимум 65 персонажи.
мета описание : описание вашего веб-страницы в максимум 155 персонажи.
ОГ:название : максимум 35 символов.
ОГ:URL-адрес : полная ссылка на адрес веб-страницы.
О. Г.:Описание : максимум 65 символов.
OG:изображение : изображение(JPG или PNG) размером менее 300КБ и минимальные размер 300 x 200 пикселей рекомендуется.
значок : значок размеры 32 х 32 пикселей.
В приведенном выше разделе, у вас требуемым характеристикам, лимит символов и образцов теги. Не голосуйте как только вы найдете его удовлетворительным.
Я'вэ пытался сделать это сам, так же и я'ве добавил все нужные мета-теги :
<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.
Я've обнаружил, что WhatsApp делает какое-либо кэширование изображения и URL-адрес информацию, не знаю, как долго.
Чтобы проверить, что я'вэ вставлены правильные теги, я просто пробовал разные URL-адреса, например : http://domain.com вместо http://www.domain.com .
надеюсь, это поможет кому-то еще.
Я'd рекомендую всегда смотреть на https://developers.facebook.com/tools/debug/sharing для проверки свойства Facebook часто меняет его'ы политики, стандарты и API.
Если вы работаете с ботами Messenger или других приложений ФБ, вам могут понадобиться собственность в FB:app_id для изображений ссылка на работу в WhatsApp. Больше на разработчиков Facebook вебмастеров сайта. https://developers.facebook.com/docs/sharing/webmasters
После работы в Багг, выяснили, что в iOS, элементов в голову может остановить WhatsApp для поиска ОГ:изображения /О. Г.:Описание / название=описание. Так что попробуйте сначала поставить их на ко всему прочему.
это не't работа
<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>
У меня была такая же проблема, вот решение.
Следует показать, если вы добавите мета OG:изображение
Проблема в WhatsApp не показывают изображения, если вы вводите без http:// и заканчивается / Например, он появляется изображение и описание Если вы http://google.com тип/ но не с google.com
Надеюсь, что это помогает кто-то.
Вам нужны следующие теги, чтобы получить 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 документы говорится: если вы указываете ОГ:размер изображения будет извлечена быстро, а не асинхронно иначе.
ПНГ рекомендуется для формата изображения. 600х600 пикселей не менее рекомендуется.
Следующие действия помогли в моем случае.
Положить изображение под тот же хост.
<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />
Передавая нужный образ в WhatsApp специально для выявления его агент пользователя от ведущих подстроки, пример
WhatsApp/2.18.380 A
Ждем несколько секунд перед нажатием кнопки Отправить, так что WhatsApp будет иметь время, чтобы получить изображение и описание от ОГ метаданных.
Даже после этих попыток. Мой сайт изображений были выбраны несколько раз, а иногда нет. После проверки с https://developers.facebook.com/tools/debug/sharing
понял, что мой Джанго (питон) основы визуализации относительно пути Изображения. Мне пришлось внести изменения в путь изображения с полным url. (включая http://). потом он начал работать
Если вы хотите сделать фотографию рядом с URL-адрес с вашего сайта кто-то на WhatsApp, вы должны поставить на странице, где URL-адрес ссылки на, как этого метатега:
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>