Предоставьте изображение для обмена ссылками 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: 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 .

У меня была та же проблема, и проблема заключалась в размере картинки. 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-yoursite.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: title: максимум 35 символов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я попытался сделать несколько предложений в этой теме и из своих внешних поисков, но это была совсем другая проблема для меня. Моя конкретная инструкция по использованию изображения, обозначенного тегом 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

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

Если вы хотите, чтобы рядом с 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 было время получить изображение и описание из метаданных og.

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

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

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

Вы можете предоставить несколько 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/