Próbowałem odpowiedzieć na to pytanie: Prześlij zdjęcie do udostępniania linków do WhatsApp

Stworzyłem prostą stronę HTML z podstawowymi metatagami Facebooka:

<!--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" />        

Linter Facebooka sprawdza poprawność, a na Facebooku pokazuje się idealnie, ale kiedy próbuję udostępnić przez WhatsApp, obraz się nie wyświetla.

Próbuję tego na WhatsApp na Androida

→ To jest adres URL przykładowej strony internetowej

Wierzę trzeba dodać itempropdo og:imagetagu meta, mają rozmiar obrazu do zestawu 256x256, a także, że nie zaszkodzi, aby dodać site_name, typea updated_time właściwości zarówno :)

<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" />

Możesz zobaczyć te metatagi w akcji, na przykład w Mapach Google .
Po zmianie metatagów może być konieczne odczekanie czasu na zaktualizowanie możliwych pamięci podręcznych.

Możesz debugować / zweryfikować metatagi Open Graph z debugera Facebooka.
Jeśli widzisz tam wszystkie swoje tagi, to witryny / aplikacje, w których tagi nie wyświetlają się prawidłowo, mogą mieć inne wymagania dotyczące tagów Open Graph.

EDYCJA:
Jeśli zamierzasz określić obraz za pomocą HTTP-Securelinku, musisz użyć og:image:secure_urlzamiast og:image.

EDIT2:
Należy również określić, og:typeponieważ jest to jeden z czterech podstawowych parametrów wymaganych.
<meta property="og:type" content="website" />powinien poprowadzić cię we właściwym kierunku.

Miałem ten sam problem, a problemem był rozmiar obrazu. Whatsapp nie obsługuje obrazów o rozmiarze większym niż 300 KB.

Dlatego najważniejszą właściwością wyświetlania obrazu na Whatsapp jest:

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

A wielkość obrazu na wyświetlaczu musi być mniejsza niż 300 KB

Też stawiam czoła temu problemowi Wreszcie rozwiązałem go

<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />

Moja własność obrazu

1. Wymiar: 300X200
2. Rozmiar: <300 KB
3. URL: http://twojadomena.com/yourfolder/imagename.png

Upewnij się, że w nazwie obrazu nie ma spacji, jeśli masz dwa słowa, użyj znaku podkreślenia

Po miesiącach spędzonych na próbach rozwiązania tego problemu w końcu rozwiązałem problem. Oto moje rozwiązanie:

<!-- 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">

Skopiuj powyższe, wklej w obszarze nagłówka strony. ZAMKNIJ swoją aplikację Whatsapp, otwórz ponownie, a następnie przetestuj. Nie ma potrzeby czyszczenia pamięci podręcznej i NIE MUSI CZYŚCIĆ DANYCH.

Błogosławieństwa dla wszystkich!

Znalazłem rozwiązanie tutaj Link do podglądu Whatsapp opublikowany 2 marca 16

I powinieneś zobaczyć, jak działa

Istnieją dwa rodzaje kodu. First meta og: image inside <head>

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

Schemat miniatury ze schema.org w <body>

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

Mam nadzieję, że to pomoże. Dzięki.

Nie wiem o minimalnej liczbie metatagów wymaganych do pracy z WhatsApp, znalazłem to gdzieś i zadziałało to bezbłędnie. Uwaga: rozdzielczość obrazu to 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>

Wyczyść dane WhatsApp i pamięć podręczną (lub użyj innej WhatsApp)!

Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

Bądź ostrożny ! Przed wykonaniem tej czynności wykonaj kopię zapasową wiadomości.

Następnie wynik: przed i po wyczyszczeniu danych i pamięci podręcznej WhatsApp

Dodatkowe przydatne informacje:

Możesz podać kilka obrazów og:, WhatsApp użyje ostatniego. Pomoże to rozwiązać problem, który np. Facebook chce mieć stosunek 1,91: 1 i WhatsApp 1: 1

https://stackoverflow.com/a/61078968/8486854

W odpowiedzi na https://stackoverflow.com/a/35785393/1518500

Wypróbuj zaktualizowaną wersję 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>

lub używając formatu json-ld z Google

<script type="application/ld+json">
 {
"@context": "http://schema.org/",
"@type": "ImageObject",
 "url": "ImgURLhere",
    "height": 800,
    "width": 1200

 }
 </script>

Dla wszystkich, którzy nadal mają ten problem i jak dla mnie żadne z zamieszczonych rozwiązań nie wyszło.

Miałem podobny problem. Obraz był poprawnie wyświetlany we wszystkich innych oknach udostępniania. Tylko WhatsApp nie mógł wyświetlić obrazu, mimo że debugger Facebooka ma poprawnie tag og: image.

Rozwiązanie, które mi się sprawdziło: korzystam z Firebase. W przypadku przesłanych treści w ich magazynie otrzymasz unikalny adres URL pobierania z tokenem multimediów. Coś jak:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = media & token = RRRRRRRR-RRRRRRRRR-RRRRRRRRRRR

Użyłem tego adresu URL w metatagu og: image. To działało w przypadku Facebooka itp., Ale wygląda na to, że WhatsApp nie mógł pobrać obrazu z tego adresu URL. Zamiast tego musisz dołączyć obraz do katalogu projektu i użyć tego linku dla tagu og: image. Teraz działa również poprawnie w WhatsApp.

Wcześniej (nie działa w WhatsApp, ale na Facebooku itp.)

<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

After (teraz działa we wszystkich testowanych współdzielonych oknach dialogowych, w tym WhatsApp)

<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

Mam nadzieję, że to może pomóc niektórym z Was :)

Udokumentowałem tutaj doskonałe szczegółowe rozwiązanie - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Aby uzyskać doskonały podgląd, należy wykonać siedem kroków.

1. Tytuł: dodaj tytuł bogaty w słowa kluczowe do swojej strony internetowej, zawierający maksymalnie 65 znaków.

2. Meta Description: Opisz swoją stronę internetową, używając maksymalnie 155 znaków.

3. og: title: Maksymalnie 35 znaków.

4. og: url: Pełny link do adresu Twojej strony internetowej.

5. og: description: Maksymalnie 65 znaków.

6. og: image: Obraz (JPG lub PNG) o rozmiarze mniejszym niż 300 KB i minimalnym rozmiarze 300 x 200 pikseli jest zalecany.

7. favicon: Mała ikona o wymiarach 32 x 32 piksele.

Na powyższej stronie masz wymagane specyfikacje, limit znaków i przykładowe tagi. Głosuj za, gdy uznasz to za satysfakcjonujące.

Mam nadzieję, że ta pomoc:

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

Zwróć uwagę na adres imgURL, który powinien być hostowany z tej samej domeny, w przeciwnym razie nie pojawi się w WhatsApp. Próbowałem załadować adres URL z amazon, podgląd obrazu nie działa.

W moim przypadku dodanie poniższego metatagu rozwiązało problem. Używałem treści arabskich i musiałem to dodać, aby obraz pojawił się na WhatsApp:

<meta property='og:locale' content='ar_AR' />

Uwaga: jeśli korzystasz z treści w języku angielskim, nie musisz dodawać tego metatagu, ponieważ angielski jest wartością domyślną.

Jeśli po tych wszystkich wskazówkach miniatura nadal się nie wyświetla, spróbuj wykonać następujące czynności:

Mój problem polegał na tym, że podwójne cudzysłowy z atrybutów og były usuwane podczas budowania na potrzeby produkcji (npm run build). Moduł Minify właśnie to robił.

Tak więc rozwiązaniem było anulowanie tego usunięcia, ustawiając atrybut removeAttributeQuotes na false:

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

W moim środowisku programistycznym ustawiłem go w pliku „webpack.prod.conf.js”. Ustaw go w swoim równoważnym pliku.

Po prostu odbuduj i teraz działa.

Wystarczy wpisać wiadomość z „http: //” na początku. Na przykład: http://www.google.com pokazuje miniaturę, ale www.google.com nie.

Dane 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"/>

Tylko te 3 znaczniki wydają się być wymagany ( 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" />

Eksperymentowanie / granie

Najłatwiejszym sposobem na eksperymentowanie było dla mnie CodeSandbox, wykonując następujące kroki:

• Utwórz aplikację Vanilla za pomocą https://codesandbox.io/s/
• Zmodyfikuj odpowiednio swoje metatagi w index.htmlpliku
• Zapisz plik ( ctrl+s), co spowoduje rozwidlenie aplikacji i wygeneruje jej własny unikalny adres URL
• Wklej ten adres URL w WhatsApp, aby zobaczyć podgląd (nie musisz nawet wysyłać wiadomości)
• Wprowadź zmiany w metatagach
• Zmodyfikuj adres URL - dodaj pojedynczy znak na końcu adresu URL. Spowoduje to odrzucenie „poprzedniego podglądu w pamięci podręcznej”

Wymagane cytaty

Tylko pamiętaj, aby ZAWSZE mieć cytaty i cytaty zamykające, ponieważ WhatsApp jest na to wrażliwy. Twój powyższy przykład nie ma ceny końcowej dla Twojego og:description.

Dla każdego, kto nadal tego doświadcza, odkryłem, że obrazy wyświetlane na Amazon S3 nie działają w aplikacji mobilnej WhatsApp (zarówno na Androida, jak i iOS, ale aplikacja na komputer Mac była w porządku). Jest bardzo możliwe, że powodują to nasze ustawienia AWS, ale zauważyłem ten wzorzec również w innych witrynach (np. Tej z og:imageuderzaniem w domenę https://s3.amazonaws.com).

Nie było problemów na żadnej innej platformie, którą próbowałem, tylko aplikacje mobilne WhatsApp. Gdy tylko wskazałem mój<meta property="og:image" content="https://some-non-aws-location" /> na inny publiczny adres URL, taki jak plik na Dysku Google (oczywiście udostępniony publicznie), zadziałało dobrze.

Próbowałem również zatwierdzić obraz w naszym repozytorium, które jest hostowane i wdrażane na AWS z niestandardową domeną, ale to też nie działa. Więc AWS nadal wydaje się być winowajcą. Mam nadzieję, że to komuś pomoże!

Postępowałem zgodnie ze wszystkimi instrukcjami zawartymi w odpowiedziach tutaj i nadal nie mogłem go uruchomić. Wygląda na to, że WhatsApp wymaga również rozszerzenia, aby wyświetlić obraz.

Tak więc dla tagu wskazującego na jpeg:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>

Zmień interfejs API, aby zezwolić na rozszerzenie i używać:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>

i wydaje się, że działa ...

Miałem ten sam problem, w końcu udało mi się go uruchomić po kilku próbach. Oto 8 tagów html, których użyłem na mojej stronie internetowej, aby wyświetlić podgląd:

W <head>tagu:

<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" />

W <body>tagu:

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

Te 8 tagów (6 w głowie, 2 w ciele) działało idealnie.

Porady:

1. Użyj dokładnego adresu URL lokalizacji obrazu zamiast formatu katalogu, tj. Nie używaj images / OG_thumb.jpg

2.Rozszerzenie pliku wrażliwe na wielkość liter: jeśli nazwa rozszerzenia obrazu u dostawcy usług hostingowych to „.JPG”, nie używaj „.jpg” ani „.jpeg”. Zauważyłem, że na podstawie błędu kombinacji dostawcy hostingu i przeglądarki może, ale nie musi , więc dla bezpieczeństwa łatwiej jest po prostu dopasować rozszerzenie pliku.

3. Po wykonaniu powyższych czynności, jeśli podgląd miniatur nadal nie pojawia się w wiadomości WhatsApp, to:

za. Wymuś zatrzymanie aplikacji mobilnej (próbowałem na Androidzie) i spróbuj ponownie

b. Użyj narzędzia online, aby wyświetlić podgląd tagu OG, np. użyłem: https://searchenginereports.net/open-graph-checker

do. W przeglądarce mobilnej wklej bezpośredni link do kciuka OG i odśwież przeglądarkę 4-5 razy. np. https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

Listopad 2020: Jak się przekonałem, te metatagi są wymagane i wpływają na to, co widzisz w udostępnionym łączu w Whatsapp oraz 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>

a wewnątrz <body> :

<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>

Więcej wyjaśnień:

1 - Załóżmy, że masz <meta content='example.com/page1' property='og:url'/>i wewnątrz treści, do <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>której się odnosisz , og:imagei og:descriptionstrony example.com/page2zostanie wyrenderowane na whatsApp zgodnie z linkiem w treści (być może oczywiste).

2-kiedy add/changewszystkie otwarte znaczniki takie jak wykres og:descriptioni ponownie kliknąć swój <a></a>znacznik na swojej stronie / ciała, co widać na WhatsApp nie zmieni, chyba że zmianę href="I am a new URL"swojego <a></a>znacznika lub jasnego cache WhatsApp !!

3-próbowałem Png/jpgobrazów, wszystkie mniej niż 300 kb wielkości i wszystko większe niż 300 * 300 w pikselach i treść obrazu była https lub httpURL, powyższe wspiera kodu zarówno z nich (nie trzeba og:image:secure_url).

4-Za każdym razem, gdy dodajesz / zmieniasz ogzawartość, aby mieć miniaturę w WhatsApp, zmiany nie mają wpływu na pierwszą próbę !! i udany przy drugiej próbie. Bardzo dziwny !

To rozwiązanie działa dla mnie:

    <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" />

przetestowano na stronie Codesandbox.io

tutaj jest link: https://l8ogr.csb.app/

jedna głupia mała rzecz zrobiła tę magię, usuwając znak „ http” lub „ https” z adresu URL obrazu

jeśli adres URL obrazu to ex: https://test.com/img.jpegto//test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>