Надайте зображення для обміну посиланнями WhatsApp

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

Стандарти 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: назва

Максимум 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 х 200 ^*

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

^* @RichDeBourke згадав про це мені, але, очевидно, WhatsApp збільшив максимальний розмір зображення (розміри, а також розмір файлу). Я робив кілька тестів: він працює не кожен раз на кожному пристрої. Я тестував зображення 2.x Mb і навіть це, здавалося, працювало 9/10 разів. <300 Кб - це найбезпечніший підхід, але вам слід добре використовувати великі зображення станом на 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: Twitter

Для найкращої підтримки у Twitter прочитайте це .

Крок 10: Facebook

Для найкращої підтримки у Facebook прочитайте це .

Крок 11: фавікон

Для найкращої підтримки favicon для всіх браузерів та пристроїв читайте це .

Бонусний крок 12: відео / аудіо

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

У мене була така ж проблема, і проблема полягала в розмірі малюнка. Whatsapp не підтримує зображення з розміром більше 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 і повинне бути назване "logo-tvojeite.png" (колись воно працювало для мене ДОВІТЬ ТАКЕ)

Не забудьте вставити посилання на whatsapp на своєму веб-сайті:

<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>

Зробіть це, і ви добре зробите!

Тут я задокументував ідеальне детальне рішення - 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 х 200 пікселів.

Фавікон: невелика піктограма розмірами 32 х 32 пікселів.

На вищенаведеній сторінці у вас є необхідні технічні характеристики, обмеження кількості символів та зразки тегів. Здійснюйте подання пропозицій, як тільки вважаєте це задовільним.

Я хотів би звернути увагу на той факт, що простий <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" />

(Я б додав це як коментар, але мені поки що не дозволено. Модератори можуть перенести це, якщо це більше).

Я намагався це зробити і сам, і я додав усі правильні метатеги:

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

сподіваємось, це допомагає комусь іншому.

Попрацювавши в помилці, з’ясував, що в 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>

Я рекомендую завжди дивитись на https://developers.facebook.com/tools/debug/sharing, щоб перевірити свої властивості, оскільки Facebook часто змінює свою політику, сумісність та API.

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

У мене була така ж проблема, ось вирішити.

Це має відображатися, якщо ви додаєте мета og: image

Проблема полягає в тому, що whatsapp не відображатиме зображення, якщо ви вводите без http: // і закінчуєте з / Наприклад, він показує зображення та опис, якщо ви вводите http://google.com/ але не з google.com

Сподіваюся, це комусь допоможе.

Я хотів би додати відповідь до цього потоку, щоб конкретно зазначити, які з вищезазначених потоків допомогли мені вирішити проблему та порядок їх дотримання, щоб правильно зрозуміти першопричину та виправити її раз і назавжди:

Мені вдалося отримати мій попередній перегляд під час обміну посиланням у соціальних мережах із цим рішенням.

Я дотримувався різних варіантів у цій темі та нижче - це найближча до правильної відповіді, і всі вони сприяли досягненню кінцевого результату:

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

Це, сподіваємось, заощадить комусь час, необхідний для прокрутки та пошуку правильного набору відповідей та зусиль, необхідних для всіх випробувань та помилок.

Я спробував кілька пропозицій під цією темою та з моїх зовнішніх пошуків, але це була для мене зовсім інша проблема. Моя конкретна інструкція щодо використання зображення, позначеного тегом og: image, була перекрито тегами відкритого графа, що надаються плагіном Jetpack. ви можете знайти мою детальну відповідь тут . Однак я подумав, що варто додати кроки коротко у цій більш дотриманій темі. Сподіваюся, що це комусь допоможе.

Facebook Sharing Отладчик допоміг мені визначити основну причину і звідти, я пішов за наступні дії:

1. Налагоджуйте веб-сайт за допомогою налагоджувача вище. Просто введіть URL-адресу та натисніть налагодження. Це повинно скласти список попереджень, і як тільки ви прокрутите вниз до відкритих розділів тегів графіків, ви зможете побачити значення, які отримуються для вашого веб-сайту. На цьому слід зосередити увагу тег зображення: og:.
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

Вам потрібні такі теги, щоб отримати попередній перегляд зображення 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 пікселів рекомендується.

Якщо ви хочете мати зображення поруч із URL-адресою свого веб-сайту, яким хтось поділився на WhatsApp, вам слід нанести метатаг на сторінку, на яку посилається URL-адреса, наприклад:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>

У тому ж випуску було додано og: image, і воно не працювало, поки URL-адреса закінчується знаком косої риски (/). Після видалення косої риски з URL - зображення завантажується .. Цікава помилка ...

Наступні дії допомогли в моєму випадку.

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

<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

зрозумів, що мій django (python) фреймворк відображає шлях зображення відносно. Мені довелося внести зміни в шлях зображення з повною URL-адресою. (включаючи http: //). потім воно почало працювати

Додаткова корисна інформація:

Ви можете надати декілька og: зображень, а 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/