Предоставьте изображение для обмена ссылками WhatsApp
Как мы можем включить изображение на нашем веб-сайте для отображения в WhatsApp, когда мы делимся такой ссылкой?
9 ответов:
стандарты 2018
это занимает несколько шагов, чтобы получить идеальный предварительный просмотр для WhatsApp, Twitter, Facebook и закладки иконки для ПК и мобильных устройств. Если вы любите читать перейти к ogp.me - но обязательно прочитайте шаги 1-6 в этом ответе, чтобы получить лучший предварительный просмотр WhatsApp.
Шаг 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: ОГ: изображение
изображение (JPG или PNG) размером менее 300 КБ и минимальным размером 300 х 200 пикселей рекомендуется
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
Шаг 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
для лучшей поддержки Twitter читать этой.
Шаг 10: Facebook
для лучшей поддержки Facebook читать этой.
Шаг 11: favicon
для лучшей поддержки favicon для всех браузеров и устройств чтения этой.
бонус Шаг 12: видео/аудио
также можно обмениваться аудио / видео. Facebook и twitter, например, очень хорошо делятся видео. Читайте ogp.me.
Я думаю, что в 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>сделайте это, и вы будете хорошо сделано!
У меня была та же проблема, и проблема заключалась в размере изображения. Whatsapp не поддерживает изображение размером более 300 КБ.
таким образом, наиболее важным свойством для отображения изображения на Whatsapp является:
<meta property="og:image" content="url_image">и размер изображения для отображения должен быть менее 300 КБ.
Если проблема сохраняется, Прочитайте также ответ для этот же вопрос
Я задокументировал идеальное подробное решение здесь -https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Есть семь шагов, которые необходимо сделать, чтобы получить идеальный предварительный просмотр.
название: добавить ключевое слово богатый заголовок на вашу веб-страницу с максимумом 65 письмена.
мета описание: опишите свою веб-страницу максимум в 155 письмена.
og: название: максимум 35 символов.
og:url: полная ссылка на ваш адрес веб-страницы.
og: описание: максимум 65 символов.
og: изображение: изображение (JPG или PNG) размером менее 300 КБ и минимум размер 300 x 200 пикселей рекомендуется.
favicon: небольшой значок размером 32 х 32 пикселей.
на приведенной выше странице у вас есть необходимые спецификации, ограничение символов и примеры тегов. Не голосуйте как только вы найдете его удовлетворительным.
У меня была такая же проблема, вот решение.
Это должно быть показано, если вы добавляете meta og: image
проблема в том, что whatsapp не будет показывать изображение, если вы набираете без http: / / и заканчиваете / Например, он показывает изображение и описание, Если вы наберете http://google.com/ но не с google.com
надеюсь, что это поможет кому-то.
Я пытался сделать это сам, и я добавил все правильные мета-теги:
<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 .
надеюсь, это поможет кому-то еще.
Если вы хотите иметь изображение рядом с url с вашего сайта кто-то поделился на WhatsApp, вы должны поставить метатег на странице, где URL ссылки, как это:
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
была такая же проблема, добавил og:image и он не работал, пока url-адрес заканчивается косой чертой (/). После удаления косой черты из URL-изображения загружаются.. Интересный баг...
поработав в Багге, выяснил, что в IOS, элементы в голове могут остановить Поиск WhatsApp og: image /og: описание / имя=описание. Так что попробуйте сначала поставить их на вершине все остальное.
это не работает
<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>