Предоставьте изображение для обмена ссылками WhatsApp

187

Как мы можем включить изображение на нашем веб-сайте для отображения в WhatsApp, когда мы публикуем такую ​​ссылку?

введите описание изображения здесь

maxdaniel98
источник
если он будет состоять из нескольких страниц для разных людей, вы также можете попробовать Shareocial.in
Tirthraj Rao
1
Вы можете проверить дом ваших страниц на iframely.com/embed
Петр Ковальский
Проверьте, как Facebook это отображает: developers.facebook.com/tools/debug
Noam

Ответы:

371

Стандарты 2020

Требуется несколько шагов, чтобы получить идеальный предварительный просмотр для 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: изображение

Изображение (JPG или PNG) размером менее 300 КБ и минимальными размерами 300 x 200 *

<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">

* @RichDeBourke упомянул об этом мне, но, видимо, WhatsApp увеличил максимальный размер изображения (размеры и размер файла). Я сделал несколько тестов: он не работает последовательно каждый раз на каждом устройстве. Я тестировал изображения размером 2.x Мб, и даже это, казалось, работало 9/10 раз. <300KB - самый безопасный подход, но вы можете использовать большие изображения с 18-02-2020. Я бы порекомендовал сохранить размер файла ниже 2 МБ. И определенно бросьте свое изображение через TinyPNG или любой другой алгоритм сжатия изображений, если вы этого еще не сделали.



Если вы выполнили шаги, описанные выше, теперь вы можете увидеть свой предварительный просмотр в 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: Твиттер

Для лучшей поддержки Твиттера прочитайте это .


Шаг 10: Facebook

Для лучшей поддержки Facebook прочитайте это .


Шаг 11: фавикон

Для лучшей поддержки favicon для всех браузеров и устройств прочитайте это .


Бонусный шаг 12: видео / аудио

Также есть возможность поделиться аудио / видео. Например, Facebook и Twitter очень хорошо обмениваются видео. Читайте ogp.me .

Дерк Ян Спилман
источник
11
Обратите внимание, что он может не работать, если ваш сайт работает по протоколу https с самозаверяющим сертификатом. Проверено на Facebook и WhatsApp
Indraraj
2
@Indraraj спасибо за то, что поделились, это также можно найти в документах Facebook для разработчиков
Derk Jan Speelman
2
<meta charset = "utf-8"> <meta http-экв = "X-UA-совместимый" content = "IE = edge"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, максимальный масштаб = 1, масштабируемый пользователем = нет "> <title> </ title> <meta name =" description "content =" "> <meta property =" og: title "content =" "/> <meta property = "og: url" content = "" /> <meta property = "og: description" content = ""> <meta property = "og: image" content = "mappointer.png"> <meta property = "og: image: width" content = "" /> <meta property = "og: image: height" content = "" /> Я поместил все вышеупомянутые теги.
BALU KB
2
@DerkJanSpeelman теперь работает нормально. Спасибо. я забыл оставить размер изображения 300 * 200.
BALU KB
1
@DerkJanSpeelman Я не понимаю, этот сайт: jornada.unam.mx/ultimas/2018/06/19/… имеет более 35 символов, и предварительный просмотр изображения работает. где я могу найти правильную спецификацию?
elios264
19

У меня была та же проблема, и проблема заключалась в размере картинки. Whatsapp не поддерживает изображения размером более 300 КБ.

Поэтому наиболее важным свойством для отображения изображения в Whatsapp является:

<meta property="og:image" content="url_image">

И размер изображения для отображения должен быть менее 300 КБ .

Если проблема не устранена, прочитайте также ответ на этот похожий вопрос

Cedriga
источник
3
+1 за информацию об ограничении размера, но это не правильно. Приложение Whatsapp извлекает первые 300 000 байтов (заголовок Http: «Range: bytes = 0-299999»)
Адриано Торнаторе
7
Как люди узнают о предельном размере 300 000 байт или 300 КБ (маленький k)? Я искал источник в Интернете , но не смог найти этот предел размера на сайте WhatsApp или на сайте Open Graph Protocol ogp.me .
ʕ ᵔᴥᵔ ʔ
url_image должен быть обслужен https
tito.icreativos
13

Я думаю, что в 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>

Сделай это, и все будет хорошо!

Алехандро Бразилия
источник
изображение не отображается для меня, у вас есть другое решение?
Кейур Шах
1
Это также возможно с большими изображениями! В ответ на @Cedriga говорит изображения не может быть больше , чем 300Кб, он прав.
Дерк Ян
1
Это определенно не имя. И я могу подтвердить, что JPG работает.
workwise
1
Я считаю, что ссылка на WhatsApp - это не то, чего нам не хватает, и да, как сказал @workwise, и PNG, и JPG точно работают.
Аашима
9

Я задокументировал идеальное подробное решение здесь - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Чтобы получить идеальный предварительный просмотр, нужно сделать семь шагов.

Заголовок: добавьте богатый заголовок ключевого слова на свою веб-страницу длиной не более 65 символов.

Описание мета: Опишите вашу веб-страницу длиной не более 155 символов.

og: title: максимум 35 символов

og: url: полная ссылка на адрес вашей веб-страницы.

og: описание: максимум 65 символов.

og: image: рекомендуется изображение (JPG или PNG) размером менее 300 КБ с минимальным размером 300 x 200 пикселей.

favicon: маленькая иконка размером 32 х 32 пикселя.

На приведенной выше странице у вас есть необходимые спецификации, ограничение по количеству символов и примеры тегов. Сделайте upvote, как только вы найдете это удовлетворительным.

GZONE
источник
Идеальный ответ на то , что я ищу это очень имп: og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
Amol
Эти параметры имеют решающее значение, и я думаю, что основное внимание должно быть уделено тегу og: image. Рекомендуется ограничение размера 300 КБ и минимальное разрешение 300 x 200 пикселей. Помните, что размеры указаны в пикселях.
Аашима
7

Я хотел бы обратить внимание на тот факт, что простое <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" />

(Я бы добавил это как комментарий, но мне пока не разрешено. Модераторы могут свободно перемещать это, если это более уместно.)

Анна Кляйнер
источник
Я думаю, что лучше, если кто-то дает квалифицированный путь, чем прибегать к относительным путям. Предложение одного в вашем ответе сработало для меня.
Аашима
Я думаю, вам нужно использовать изображение .jpg, изображение .png просто не будет работать с WhatsApp.
Андрей См
4

Я тоже пытался сделать это и добавил все нужные метатеги:

<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 .

надеюсь, это поможет кому-то еще.

jony89
источник
Работает нормально для меня .. Спасибо!
Абхишек Кумбхани
4

Поработав над ошибкой, обнаружил, что в 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>
Ким Сант
источник
Мои 2 цента, и я надеюсь, что это кому-то поможет. В моем случае это twitter:imageпустой, отключение WhatsApp от получения og:image. Попытка удаления других <meta>тегов может помочь в отладке функций социального обмена.
Солнечный Пан
Я предполагаю, что WhatsApp читает до конца и останавливается после обнаружения чего-то неожиданного (div, empty twitter: image). Идея состояла в том, чтобы сказать людям поставить мету og:imageсверху и убедиться, что она читается
Ким Сант,
3
Зачем вам помещать <div> в раздел <head>?
Томас Гонсалес
Я работал в компании, которая очищает и «перекраивает» ваш контент с помощью красивого UX, SEO и т. Д. Если вы очищаете голову от клиента и добавляете только метаданные og: ниже, это не работает. Мне нравилось делать мысленный реверс-инжиниринг того, как WhatsApp обрабатывает HTML, больше не занимаясь отладкой yala yala yala!
Ким Сант
4

Я бы рекомендовал всегда заходить на https://developers.facebook.com/tools/debug/sharing, чтобы проверить ваши свойства, так как Facebook часто меняет свои политики, совместимость и API.

Если вы работаете с ботами Messenger или другими приложениями FB, вам может понадобиться свойство fb: app_id, чтобы изображения ссылок работали в Whatsapp. Больше на сайте веб-мастеров разработчиков Facebook. https://developers.facebook.com/docs/sharing/webmasters

Braconnot_P
источник
Многие люди используют Yoast SEO в Wordpress. Он добавляет og: image к сообщениям, только если вы добавляете изображение facebook на вкладке Yoast SEO в каждом сообщении.
Braconnot_P
2

У меня была такая же проблема, вот решить.

Должен появиться, если вы добавите meta og: image

Проблема в том, что WhatsApp не будет отображать изображение, если вы введете без http: // и оканчиваете на /. Например, оно отображает изображение и описание, если вы введете http://google.com/, но не с google.com.

Надеюсь, это кому-нибудь поможет.

jurgel
источник
2

Я хотел бы добавить ответ в эту ветку, чтобы конкретно указать, какие из вышеперечисленных тем помогли мне решить проблему и порядок, в котором они могут следовать, чтобы правильно понять основную причину и исправить ее раз и навсегда:

Я смог получить свой богатый предварительный просмотр , делясь ссылкой в ​​социальных сетях с этим решением.

Я следил за различными вариантами в этой теме, и ниже приведены наиболее близкие к правильному ответу, и все они внесли свой вклад в конечный результат:

  1. Необходимые теги (Основной тег для фокусировки - og: image)
  2. Параметры изображения
  3. Инструмент, который обязательно поможет
  4. Как правильно указать путь к изображению
  5. Основная причина и решение

Надеемся, что это сэкономит кому-то время, необходимое для прокрутки и поиска правильного набора ответов, а также усилий, необходимых для всех проб и ошибок.

aashima
источник
2

Я попытался сделать несколько предложений в этой теме и из своих внешних поисков, но это была совсем другая проблема для меня. Моя конкретная инструкция по использованию изображения, обозначенного тегом og: image, была переопределена тегами открытого графика, предоставленными плагином Jetpack. мой подробный ответ вы можете найти здесь . Тем не менее, я подумал, что стоит добавить шаги вкратце в этой более понятной теме. Надеюсь, это кому-нибудь поможет.

Facebook Sharing Отладчик помог мне определить основную причину и оттуда, я последовал за следующие действия:

  1. Отладка вашего сайта с помощью отладчика выше. Просто введите URL и нажмите «Отладка». Это должно дать вам список предупреждений, и как только вы прокрутите вниз до разделов открытых тегов графика, вы сможете увидеть значения, которые выбираются для вашего сайта. На что следует обратить внимание - тег og: image .
  2. Прокрутите далее вниз до ссылки «Посмотрите точно, что наш скребок видит для вашего URL» и найдите тег og: image, чтобы найти злодея в вашей истории.
  3. Теперь просто выберите способ удаления возникающего переопределения. В моем случае я нашел следующую функцию полезной. Он изменяет используемый по умолчанию образ в любое время, когда Jetpack не может определить изображение для использования.

Изменяет используемый по умолчанию образ в любое время, когда Jetpack не может определить изображение для использования.

function custom_jetpack_default_image() {
    return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

Я должен добавить, что рекомендуются такие параметры изображения, как минимум 300 x 200 пикселей и размер <300 КБ. И, пожалуйста, следуйте этим инструкциям, если такие общие инструкции не работают для вас, потому что, скорее всего, ваша проблема похожа на мою. Кроме того, иногда самым простым решением может быть просто удалить плагин (при условии, что вы убедитесь, что можете обойтись без него).

В конце вы должны увидеть что-то вроде - введите описание изображения здесь

Надеюсь это поможет.

NS

Ночной Рассказчик
источник
1

Вам нужны следующие теги, чтобы получить предварительный просмотр изображения 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: image, он будет загружаться быстрее, а не асинхронно.

PNG рекомендуется для формата изображения. Рекомендуется не менее 600x600 пикселей.

moreirapontocom
источник
В моем случае у меня есть 1200 * 628 пикселей изображения, что означает, что я должен предоставить, как <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="628" />я прав? Нужно ли нам указывать ширину и высоту изображения (которое имеет это изображение) в тегах или что-то еще, что бы ни называли пиксели изображения. Если мы упомянем ширину и высоту в метатегах, оно будет отображаться в этих измерениях? Пожалуйста, уточните @moreirapontocom
siluveru kiran kumar
0

Если вы хотите, чтобы рядом с URL-адресом вашего веб-сайта, которым кто-то поделился в WhatsApp, была добавлена ​​картинка, вы должны поместить метатег на страницу, на которую ссылается URL, например:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
maxdaniel98
источник
3
Здравствуй! Я пробовал это, и работает префектом с отладчиком URL-адреса Facebook, однако в сообщении WhatsApp по-прежнему не отображается мой ответ. Вот еще кто-то, у кого такая же проблема: stackoverflow.com/questions/25100917/…
Лепи
@AkhilSekharan правильный ответ можно найти здесь: stackoverflow.com/a/32154775/501206
stevenw00
Спасибо Стив. Я уже пробовал этот способ и пришел к выводу, что у WhatsApp есть внутренний белый список доменов, который может отображать миниатюру. Например, YouTube
Ахил Секхеран
2
Я пришел к такому же выводу ... FB отладчик: 100% хорошо. Богатый предварительный просмотр: 100% нормально (включая Watsapp). Когда я пытаюсь поделиться с WhatsApp, изображение не отображается. URL в моем случае robotiqu.es ... нет ответа год спустя?
Хуанхо
изображение не отображается для меня, может кто-нибудь есть решение @Juanjo
Keyur Shah
0

Возникла та же проблема, добавлено og: image, и она не работала, в то время как URL заканчивается знаком косой черты (/). После удаления косой черты из URL - изображение загружается .. Интересная ошибка ...

Yedidia
источник
0

Следующие действия помогли в моем случае.

Помещение изображения под тем же хостом .

<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />

Передача необходимого изображения в WhatsApp специально путем определения его пользовательского агента по ведущей подстроке, пример

WhatsApp/2.18.380 A

Подождите несколько секунд, прежде чем нажать кнопку «Отправить», чтобы у WhatsApp было время получить изображение и описание из метаданных og.

Baur
источник
Если я наберу URL-адрес и подожду некоторое время, после этого он получит предварительный просмотр. Если я нажму кнопку «Отправить», появится сообщение «Если я наберу URL-адрес и нажму кнопку« Отправить » без какой-либо задержки (до получения информации о метатегах)», то предварительный просмотр не отображается.
Силуверу Киран Кумар
0

Даже после этих попыток. Изображения с моего сайта загружались несколько раз, а иногда нет. После проверки с помощью https://developers.facebook.com/tools/debug/sharing

Я понял, что мой фреймворк django (python) рендерит путь изображения относительно. Мне пришлось внести изменения в путь изображения с полным URL-адресом. (включая http: //). тогда это начало работать

Сиддарам Х
источник
0

Дополнительная полезная информация:

Вы можете предоставить несколько og: images, WhatsApp будет использовать последний. Это поможет решить проблему, связанную с тем, что, например, Facebook хочет соотношение 1,91: 1 и WhatsApp 1: 1.

<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />

https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/

https://css-tricks.com/essential-meta-tags-social-media/

SinunHenkka
источник