Пытался ответить на этот вопрос: предоставьте изображение для обмена ссылками в WhatsApp
Я создал простую веб-страницу HTML с основными метатегами Facebook:
<!--FACEBOOK-->
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas />
<meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />
Линтер Facebook проверяет правильность, и в Facebook он показывает отлично, но когда я пытаюсь поделиться с WhatsApp, изображение не отображается.
Пробую в WhatsApp на Android
content="./images/logo.png"
?Ответы:
Я верю, что вам нужно добавить
itemprop
вog:image
метатег, установить размер изображения,256x256
а также не помешает добавить свойстваsite_name
,type
иupdated_time
:)<meta property="og:site_name" content="San Roque 2014 Pollos"> <meta property="og:title" content="San Roque 2014 Pollos" /> <meta property="og:description" content="Programa de fiestas" /> <meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png"> <meta property="og:type" content="website" /> <meta property="og:updated_time" content="1440432930" />
Вы можете увидеть эти метатеги в действии, например, на Google Maps .
После того, как вы изменили свои метатеги, вам может потребоваться некоторое время, чтобы обновить возможные кеши.
Вы можете отлаживать / проверять метатеги Open Graph из отладчика Facebook.
Если вы видите там все свои теги, значит, сайты / приложения, где ваши теги не отображаются должным образом, могут иметь другие требования к тегам Open Graph.
РЕДАКТИРОВАТЬ:
если вы собираетесь указать изображение по
HTTP-Secure
ссылке, вам нужно использоватьog:image:secure_url
вместоog:image
.EDIT2:
вам также необходимо указать,
og:type
поскольку это один из четырех основных требуемых параметров.<meta property="og:type" content="website" />
должен направить вас в правильном направлении.источник
itemprop="image"
. Сообщение об ошибке:Cannot GET /logos/logo_512.png
property="og:image:secure_url"
вместоproperty="og:image"
У меня была такая же проблема, и проблема заключалась в размере изображения. Whatsapp не поддерживает изображения размером более 300 КБ.
Итак, самое важное свойство для отображения изображения в Whatsapp:
<meta property="og:image" content="url_image">
И размер изображения для отображения не должен превышать 300 КБ.
источник
Я тоже сталкиваюсь с этой проблемой. Наконец, я ее решил.
<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />
Мое свойство изображения
Убедитесь, что в названии изображения нет пробела, если у вас два слова, используйте знак подчеркивания
источник
Потратив несколько месяцев на то, чтобы понять это, я наконец решил проблему. Вот мое решение:
<!-- MS, fb & Whatsapp --> <!-- MS Tile - for Microsoft apps--> <meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg"> <!-- fb & Whatsapp --> <!-- Site Name, Title, and Description to be displayed --> <meta property="og:site_name" content="The Rock Photo Studio"> <meta property="og:title" content="The Rock Photo Studio in Florida"> <meta property="og:description" content="The best photo studio for your events"> <!-- Image to display --> <!-- Replace «example.com/image01.jpg» with your own --> <meta property="og:image" content="http://www.example.com/image01.jpg"> <!-- No need to change anything here --> <meta property="og:type" content="website" /> <meta property="og:image:type" content="image/jpeg"> <!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp --> <meta property="og:image:width" content="300"> <meta property="og:image:height" content="300"> <!-- Website to visit when clicked in fb or WhatsApp--> <meta property="og:url" content="http://www.example.com">
Скопируйте вышеуказанное и вставьте в заголовок веб-сайта. ЗАКРОЙТЕ приложение WhatsApp, снова откройте, ТОГДА проверьте. Не нужно очищать кеш и НЕ НУЖНО УДАЛИТЬ ДАННЫЕ.
Всем доброго!
источник
Я нашел решение здесь Ссылка на предварительный просмотр WhatsApp, опубликованная 2 марта 16
И вы должны увидеть работу
Есть два типа кода. Первый мета-объект: изображение внутри <head>
<meta property="og:image" content="url_image">
Схема эскиза из schema.org внутри <body>
<link itemprop="thumbnailUrl" href="url_image"> <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> <link itemprop="url" href="url_image"> </span>
Надеюсь на эту помощь. Спасибо.
источник
Очистите данные и кеш WhatsApp (или используйте другой WhatsApp)!
Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.
Потом результат: до и после очистки данных и кеширования WhatsApp
источник
https://link.com/?_=92375293579
Я не знаю о минимальном количестве метатегов, необходимых для работы в WhatsApp, нашел это где-то, и это сработало для меня безупречно. Примечание: разрешение изображения составляет 256 x 256.
<head> <meta property="og:site_name" content="sitename" /> <meta property="og:title" content="title"> <meta property="og:description" content="description"> <meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg"> <link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg"> <meta property="og:image:type" content="image/jpeg"> <meta property="og:updated_time" content="updatedtime"> <meta property="og:locale" content="en_GB" /> </head> <body> <span itemprop="image" itemscope itemtype="image/jpeg"> <link itemprop="url" href="http://www.yoursite.com/yourimage.jpg"> </span> </body>
источник
Дополнительная полезная информация:
Вы можете предоставить несколько изображений og:, WhatsApp будет использовать последнее. Это поможет решить проблему, например, facebook хочет соотношение 1.91: 1 и whatsapp 1: 1.
https://stackoverflow.com/a/61078968/8486854
источник
В ответ на https://stackoverflow.com/a/35785393/1518500
Попробуйте обновленную версию для schema.org
<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> <link itemprop="url" href="imgurlHere"> <meta itemprop="width" content="1200"> <meta itemprop="height" content="800"> </span>
или используя формат json-ld из Google
<script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "ImageObject", "url": "ImgURLhere", "height": 800, "width": 1200 } </script>
источник
Для всех, у кого все еще есть эта проблема, и, как для меня, ни одно из опубликованных решений не сработало.
У меня была аналогичная проблема. Изображение отображалось правильно во всех других диалоговых окнах общего доступа. Только WhatsApp не смог отобразить изображение, хотя отладчик facebook правильно имеет тег og: image.
Решение, которое сработало для меня: я использую firebase. Для загруженного контента в их хранилище вы получаете уникальный URL-адрес загрузки с медиа-токеном. Что-то типа:
https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = media & token = YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY
Я использовал этот URL в метатеге og: image. Это сработало для Facebook и т. Д., Но похоже, что WhatsApp не может загрузить изображение с этого URL-адреса. Вместо этого вам нужно включить изображение в каталог вашего проекта и использовать эту ссылку для тега og: image. Теперь он исправно работает и в WhatsApp.
Раньше (не работал в WhatsApp, но в facebook и т. Д.)
<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">
После (теперь работает во всех протестированных общих диалогах, включая WhatsApp)
<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">
Надеюсь, это поможет некоторым из вас :)
источник
Я задокументировал идеальное подробное решение здесь - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html. Чтобы получить идеальный предварительный просмотр, нужно выполнить семь шагов.
Заголовок: добавьте на свою веб-страницу заголовок, содержащий не более 65 символов.
Метаописание: опишите свою веб-страницу не более 155 символов.
og: title: Максимум 35 символов.
og: url: Полная ссылка на адрес вашей веб-страницы.
og: description: Максимум 65 символов.
og: image: Рекомендуется изображение (JPG или PNG) размером менее 300 КБ и минимальным размером 300 x 200 пикселей.
favicon: маленький значок размером 32 x 32 пикселя.
На приведенной выше странице у вас есть необходимые спецификации, ограничение на количество символов и образцы тегов. Голосуйте за, когда сочтете это удовлетворительным.
источник
Надеюсь, это поможет:
<meta property="og:title" content="Title goes here"> <meta property="og:site_name" content="Site name"> <meta property="og:image" content="imageURLShouldBeFromSameDomainName"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="300">
Обратите внимание на imgURL, который должен размещаться в том же домене, иначе он не будет отображаться в WhatsApp. Я попытался загрузить URL-адрес из Amazon, предварительный просмотр изображения не работает.
источник
В моем случае добавление метатега ниже решило проблему. Я использовал арабский контент, и мне пришлось добавить это, чтобы изображение появилось в WhatsApp:
<meta property='og:locale' content='ar_AR' />
Примечание. Если вы используете контент на английском языке, нет необходимости добавлять этот метатег, поскольку английский является значением по умолчанию.
источник
Вам нужно только ввести сообщение с "http: //" в начале. Например: http://www.google.com показывает уменьшенное изображение, а www.google.com - нет.
источник
Данные Open Graph:
<meta property="og:title" content="Title of your website | website.com"/> <meta property="og:type" content="Most popular business directory of Bangladesh"/> <meta property="og:url" content="http://www.website.com/"/> <meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/> <meta property="og:site_name" content="@website"/> <meta property="fb:admins" content="Author"/> <meta property="og:description" content="website.com is your online business directory of Country"/>
источник
Кажется, требуются только эти 3 тега (
og:title
,twitter:description
,rel="icon"
):<meta property="og:title" content="San Roque 2014 Pollos" /> <meta name="twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" /> <link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />
Экспериментирование / игра
Для меня проще всего поэкспериментировать с CodeSandbox, выполнив следующие действия:
index.html
файлеctrl+s
), который будет форкнуть приложение и сгенерировать собственный уникальный URLТребуются цитаты
Просто убедитесь, что ВСЕГДА есть кавычки и закрывающие кавычки, потому что WhatsApp чувствителен к этому. В приведенном выше примере нет заключительной цитаты для вашего
og:description
.источник
<meta property=og:title content="Immaculate 4 Bed Townhouse Victory">
. Оно должно быть:<meta property="og:title" content="Immaculate 4 Bed Townhouse Victory">
. Если вы используете Webpack с плагином HTML, подумайте о том,minify.removeAttributeQuotes
чтобы установитьfalse
<head>
раздел в ванильное приложение. Чтобы получить необработанный HTML-код вашего веб-сайта, используйте параметр «просмотреть исходный код страницы» (в Chrome это такCTRL + U
).Для тех, кто все еще сталкивается с этим, я обнаружил, что изображения, обслуживаемые на Amazon S3, не работают для мобильного приложения WhatsApp (как для Android, так и для iOS, но настольное приложение Mac было в порядке). Вполне возможно, что это вызвано нашими настройками AWS, но я заметил эту закономерность и на других сайтах (например, этот с
og:image
попаданием в домен вродеhttps://s3.amazonaws.com
).На других платформах, которые я пробовал, проблем не возникало, только с мобильными приложениями WhatsApp. Как только я указал
<meta property="og:image" content="https://some-non-aws-location" />
на другой общедоступный URL-адрес, такой как файл Google Диска (конечно же, общий доступ), все заработало.Я также попытался зафиксировать образ в нашем репо, который размещен и развернут на AWS с пользовательским доменом, и это тоже не сработало. Так что, похоже, виновником по-прежнему является AWS. Надеюсь, это кому-то поможет!
источник
Если после всех этих советов эскиз все еще не отображается, попробуйте следующее:
Моя проблема заключалась в том, что двойные кавычки из атрибутов og удалялись при сборке для производства (сборка npm run). Модуль Minify делал это.
Итак, решение заключалось в том, чтобы отменить это удаление, установив для атрибута removeAttributeQuotes значение false:
minify: { ... removeAttributeQuotes: false, ... }
В своей среде разработки я установил его в файле «webpack.prod.conf.js». Установите его в свой эквивалентный файл.
Просто восстановите, и теперь он работает.
источник
Я выполнил все инструкции в ответах здесь, и я все еще не мог заставить его работать. Похоже, WhatsApp также требует расширения для отображения изображения.
Итак, для тега, указывающего на jpeg:
<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>
Измените API, чтобы разрешить расширение, и используйте:
<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>
а потом вроде работает ...
источник
У меня была такая же проблема, я, наконец, получил ее после некоторых попыток. Вот 8 тегов html, которые я использовал на своей веб-странице для предварительного просмотра:
В
<head>
теге:<meta property="og:title" content="ABC Blabla 2020 Friday" /> <meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" /> <meta property="og:description" content="Photo Album"> <meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/> <meta property="og:type" content="article" /> <meta property="og:locale" content="en_GB" />
В
<body>
теге:<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"> <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> <link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"> </span>
Эти 8 тегов (6 в головке, 2 в теле) работали отлично.
Подсказки:
1. Используйте точный URL-адрес местоположения изображения вместо формата каталога, т.е. не используйте images / OG_thumb.jpg
2. Расширение файла с учетом регистра: если имя расширения изображения у вашего хостинг-провайдера - «.JPG», тогда не используйте «.jpg» или «.jpeg». Я заметил, что в зависимости от комбинации хостинг-провайдера и ошибки браузера может быть или нет возникают, поэтому для безопасности проще просто сопоставить случай расширения файла.
3. После выполнения вышеуказанных шагов, если предварительный просмотр миниатюр все еще не отображается в сообщении WhatsApp, выполните следующие действия:
а. Принудительно остановите мобильное приложение (я пробовал на Android) и повторите попытку
б. Используйте онлайн-инструмент для предварительного просмотра тега OG, например, я использовал: https://searchenginereports.net/open-graph-checker
c. В мобильном браузере вставьте прямую ссылку на большой палец OG и обновите браузер 4-5 раз. например https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG
источник
Ноябрь 2020 г .: Как я понял, эти метатеги необходимы и влияют на то, что вы видите по общей ссылке в Whatsapp и
WhatsApp-thumbnail
:<head> <meta content='myTitle' property='og:title'/> <meta content="myDescription" property="og:Description"/> <meta property="og:type" content= "website" /> <meta property="og:image" itemprop="image primaryImageOfPage" content="https://i.ibb.co/1GRpwND/600px-Approve-icon-svg.png" /> </head>
и внутри
<body>
:<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>
Дополнительные объяснения:
1- Предположим, у вас есть
<meta content='example.com/page1' property='og:url'/>
и внутри тела, на которое вы ссылаетесь<a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>
,og:image
иog:description
страницыexample.com/page2
Виль быть оказаны на WhatsApp , как вы упомянули о вашей ссылке в теле (может быть очевидным).2-Когда вы
add/change
открываете какие-либо теги графиков, такие какog:description
, и снова нажимаете свой<a></a>
тег на своей странице / теле, то, что вы видите в WhatsApp, не меняется, если вы не изменитеhref="I am a new URL"
свой<a></a>
тег или не очистите кеш WhatsApp !!3-Я пробовал
Png/jpg
изображения, все размером менее 300 КБ и все размером более 300 * 300 в пикселях, а содержимое изображения былоhttps
илиhttp
URL-адресом, приведенный выше код поддерживает оба из них (нет необходимостиog:image:secure_url
).4-Каждый раз, когда вы добавляете / изменяете
og
содержимое, чтобы иметь миниатюру в WhatsApp, изменения не влияют на первую попытку !! и успешно со второй попытки. Очень странно !источник
Это решение работает для меня:
<meta property="og:title" content="Testing Title" /> <meta property="og:description" content="This is best way to view your Time Table & Join Meetings" /> <meta property="og:image" itemprop="image" content="//upload.wikimedia.org/wikipedia/commons/d/d4/JPEG_example_image_decompressed.jpg" /> <meta property="og:url" content="https://google.com/" /> <meta property="og:type" content="website" /> <meta property="og:image:type" content="image/jpeg" />
проверено на codeandbox.io
вот ссылка: https://l8ogr.csb.app/
одна глупая вещица сотворила волшебство, удалив "
http
" или "https
" из URL изображенияесли URL вашего изображения ex:
https://test.com/img.jpeg
to//test.com/img.jpeg
<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>
источник