Podaj obraz do udostępniania linków WhatsApp


186

Jak możemy dołączyć obraz do naszej witryny, aby wyświetlał się w WhatsApp, gdy udostępniamy taki link?

wprowadź opis zdjęcia tutaj


jeśli będzie to wiele stron dla różnych osób, możesz także spróbować shareocial.in
Tirthraj Rao

1
Możesz przetestować dom swoich stron na iframely.com/embed
Piotr Kowalski,

Sprawdź, jak renderuje to Facebook: developers.facebook.com/tools/debug
Noam

Odpowiedzi:


365

Standardy 2020

Aby uzyskać idealny podgląd WhatsApp, Twitter, Facebook i ikon zakładek na PC i urządzeniach mobilnych, trzeba wykonać kilka kroków. Jeśli lubisz czytać, przejdź do ogp.me - ale koniecznie przeczytaj kroki 1–6 w tej odpowiedzi, aby uzyskać najlepszy podgląd WhatsApp.

Uwaga: niektóre aplikacje lub witryny używają pamięci podręcznej, a nawet przechowują podgląd strony internetowej w swojej bazie danych. Oznacza to, że na przykład podczas testowania linku w WhatsApp lub Facebooku najprawdopodobniej nie zauważysz żadnej różnicy. Użycie innego linku (innej strony) załatwi sprawę. Ale jak tylko raz użyjesz tego linku, ta sekcja „uwaga” zaczyna się od nowa.


Krok 1: tytuł

Maksymalnie 65 znaków

<title>your keyword rich title of the website and/or webpage</title>

Krok 2: opis

Maksymalnie 155 znaków

<meta name="description" content="description of your website/webpage, make sure you use keywords!">

Krok 3: og: tytuł

Maksymalnie 35 znaków

<meta property="og:title" content="short title of your website/webpage" />

Krok 4: Og: URL

Pełny link do bieżącego adresu strony internetowej

<meta property="og:url" content="https://www.example.com/webpage/" />

Krok 5: og: opis

Maksymalnie 65 znaków

<meta property="og:description" content="description of your website/webpage">

Krok 6: Og: obraz

Obraz (JPG lub PNG) o rozmiarze mniejszym niż 300 KB i minimalnych wymiarach 300 x 200 *

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

* @RichDeBourke wspomniał mi o tym, ale najwyraźniej WhatsApp zwiększył swój maksymalny rozmiar obrazu (wymiary, a także rozmiar pliku). Zrobiłem kilka testów: nie działa konsekwentnie za każdym razem na każdym urządzeniu. Testowałem obrazy 2x Mb i nawet to zdawało się działać 9/10 razy. <300 KB jest najbezpieczniejszym podejściem, ale powinieneś być w porządku, używając większych zdjęć na dzień 18-02-2020. Polecam jednak utrzymanie rozmiaru pliku poniżej 2 MB. I zdecydowanie przerzuć swój obraz przez TinyPNG lub inny algorytm kompresji obrazu, jeśli jeszcze tego nie zrobiłeś.



Jeśli wykonałeś powyższe kroki, możesz teraz zobaczyć podgląd w WhatsApp! Należy jednak pamiętać o powyższej sekcji „Uwaga” .



Krok 7: Og: Wpisz

Aby obiekt był reprezentowany na wykresie, musisz określić jego typ. Oto lista dostępnych typów globalnych: http://ogp.me/#types . Możesz także określić własne typy.

<meta property="og:type" content="article" />

Krok 8: Og: lokalizacja

Ustawienia regionalne zasobu. Możesz także użyć og: locale: alternate, jeśli masz dostępne tłumaczenia na inne języki.

Jeśli nie określisz og: locale, domyślnie będzie to 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" />

Krok 9: Twitter

Aby uzyskać najlepsze wsparcie na Twitterze, przeczytaj to .


Krok 10: Facebook

Aby uzyskać najlepsze wsparcie na Facebooku, przeczytaj to .


Krok 11: favicon

Aby uzyskać najlepszą obsługę ulubionych dla wszystkich przeglądarek i urządzeń, przeczytaj to .


Dodatkowy krok 12: wideo / audio

Możliwe jest również udostępnianie audio / wideo. Na przykład Facebook i Twitter bardzo dobrze udostępniają filmy. Czytaj ogp.me .


11
Pamiętaj, że może nie działać, jeśli Twoja witryna działa na https z certyfikatem z podpisem własnym. Zweryfikowano na Facebooku i
WhatsApp

2
@Indraraj dzięki za udostępnienie, można to również znaleźć w dokumentach Facebooka dla programistów
Derk Jan Speelman

2
<meta charset = "utf-8"> <meta http-equiv = „Zgodny z X-UA” content = „IE = edge”> <meta name = „viewport” content = „width = szerokość urządzenia, początkowa skala = 1, maximum-scale = 1, skalowalny przez użytkownika = no "> <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 = "" /> wstawiłem wszystkie powyższe znaczniki.
BALU KB

2
@DerkJanSpeelman teraz działa dobrze. Dziękuję Ci. zapomniałem zachować wymiar obrazu jako 300 * 200.
BALU KB,

1
@DerkJanSpeelman Nie rozumiem, ta strona: jornada.unam.mx/ultimas/2018/06/19/... ma więcej niż 35 znaków i podgląd obrazu działa. gdzie mogę znaleźć poprawną specyfikację?
elios264

19

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

Więc najważniejszą właściwością do 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 .

Jeśli problem będzie się powtarzał, przeczytaj również odpowiedź na to podobne pytanie


3
+1 dla informacji o limicie rozmiaru, ale nie jest poprawne. Aplikacja Whatsapp pobiera pierwsze 300 000 bajtów (nagłówek HTTP: „Range: bytes = 0-299999”)
Adriano Tornatore,

7
Skąd ludzie wiedzą o limicie wielkości 300 000 bajtów lub 300 kB (mały k)? Szukałem źródła w internecie, ale nie mógł znaleźć ten limit rozmiaru na stronie WhatsApp lub na stronie Open Graph Protocol ogp.me .
ʕ ᵔᴥᵔ ʔ

url_image musi być podany https
tito.icreativos

12

Myślę, że w WhatsApp nie ma białej listy, ponieważ znalazłem rozwiązanie, które działało dla mnie. Wykonaj następujące czynności. wstaw 3 metatagi:

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

Twój obraz musi być w formacie .png i wymiarze 600 x 600 pikseli, a jego nazwa musi mieć nazwę „logo-twoja.png” (kiedy to zadziałało, PO PROSTU LUBIĘ TO)

Nie zapomnij wstawić linku do WhatsApp na swojej stronie:

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

Zrób to, a będziesz dobrze zrobiony!


obraz nie wyświetla się dla mnie, czy masz inne rozwiązanie?
Keyur Shah,

1
Jest to również możliwe przy większych obrazach! W odpowiedzi z @Cedriga mówi obrazy nie mogą być większe niż 300 KB, on ma rację.
Derk Jan Speelman

1
To zdecydowanie nie jest nazwa. I mogę potwierdzić, że JPG działa.
workwise

1
Link do WhatsApp nie jest tym, czego brakuje nam, wierzę i tak, jak powiedział @workwise, zarówno PNG, jak i JPG na pewno działają.
aashima

9

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

Tytuł: Dodaj bogaty w słowa kluczowe tytuł do swojej strony internetowej o maksymalnej długości 65 znaków.

Opis meta: Opisz swoją stronę internetową maksymalnie 155 znaków.

og: tytuł: Maksymalnie 35 znaków.

og: url: Pełny link do twojego adresu strony.

og: opis: maksymalnie 65 znaków.

og: image: Zalecany jest obraz (JPG lub PNG) o rozmiarze mniejszym niż 300 KB i minimalnym wymiarze 300 x 200 pikseli.

favicon: mała ikona o wymiarach 32 x 32 pikseli.

Na powyższej stronie masz wymagane specyfikacje, limit znaków i przykładowe tagi. Zrób głosowanie, gdy uznasz to za zadowalające.


Idealna odpowiedź na to, czego szukam To jest bardzo imp: og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
Amol

Te parametry są kluczowe i myślę, że należy skupić się na znaczniku og: image. Zalecany jest limit rozmiaru 300 KB i minimum 300px x 200px. Pamiętaj, że wymiary są w pikselach.
aashima

7

Chciałbym zwrócić uwagę na fakt, że prosty <meta property="og:image" content="image.png" />, jak sugerowano gdzieś powyżej, nie działa dla mnie (tak naprawdę od tygodni miałem to w pętli). Działa albo bezwzględny adres URL:
<meta property="og:image" content="https://domainname.com/image.png" />

lub zaczynając od ukośnika (jeśli obraz znajduje się w katalogu głównym):
<meta property="og:image" content="/image.png" />

(Dodałbym to jako komentarz, ale nie mogę tego jeszcze zrobić. Moderatorzy mogą to przenieść, jeśli jest to bardziej odpowiednie).


Myślę, że najlepiej, jeśli ktoś poda ścieżkę kwalifikowaną, niż uciekać się do ścieżek względnych. Sugestia z twojej odpowiedzi zadziałała dla mnie.
aashima

Myślę, że musisz użyć obrazu .jpg, obraz .png po prostu nie działa z WhatsApp.
Andrew Zobacz

4

Próbowałem to zrobić również sam i dodałem wszystkie właściwe metatagi:

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

ale mimo to nie mogłem zobaczyć obrazu podczas udostępniania mojego linku w WhatsApp.

Odkryłem, że WhatsApp również buforuje obraz i informacje o adresie URL, nie wiem jak długo.

Aby sprawdzić, czy wstawiłem prawidłowe tagi, właśnie wypróbowałem inny adres URL, na przykład: http://domain.com zamiast http://www.domain.com .

mam nadzieję, że pomoże to komuś innemu.


Działa dobrze dla mnie .. Dzięki!
Abhishek Kumbhani

4

Po pracy w błędach okazało się, że w IOS elementy HEAD mogą zatrzymać wyszukiwanie WhatsApp dla og: image / og: description / name = description. Spróbuj więc najpierw umieścić je na wierzchu wszystkiego innego.

To nie działa

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

Ta praca:

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

Moje 2 centy i mam nadzieję, że to komuś pomoże. W moim przypadku jest twitter:imagepusta, co uniemożliwia WhatsApp pobieranie og:image. Próba usunięcia innych <meta>tagów może pomóc w debugowaniu funkcji udostępniania społecznościowego.
Sunny Pun

Chyba WhatsApp czyta do dołu i zatrzymuje się po znalezieniu czegoś nieoczekiwanego (div, empty twitter: image). Chodziło o to, aby powiedzieć ludziom, aby umieścili meta og:imagena wierzchu i upewnić się, że jest przeczytany
Kim Sant

3
Dlaczego miałbyś umieszczać <div> w sekcji <head>?
Tomas Gonzalez

Pracowałem dla firmy, która zgarnęła i „przekształciła” twoją treść z ładnym UX, SEO itp. Jeśli zeskrobujesz głowę klientowi i dodasz tylko og: metadane poniżej, to nie działa. Podobało mi się wykonywanie inżynierii wstecznej tego, w jaki sposób WhatsApp przetwarza HTML, a nie wykonywanie debugowania yala yala yala!
Kim Sant

4

Polecam zawsze rzucić okiem na https://developers.facebook.com/tools/debug/sharing aby sprawdzić swoje właściwości, ponieważ Facebook często zmienia swoje zasady, zgodność i interfejs API.

Jeśli pracujesz z botami Messenger lub innymi aplikacjami FB, możesz potrzebować właściwości fb: app_id, aby obrazy linków działały w Whatsapp. Więcej na stronie dla webmasterów deweloperów Facebooka. https://developers.facebook.com/docs/sharing/webmasters


Wiele osób korzysta z Yoast SEO w Wordpress. Dodaje og: obraz do postów tylko wtedy, gdy dodasz obraz z Facebooka na karcie Yoast SEO w każdym poście.
Braconnot_P

2

Miałem ten sam problem, tutaj jest rozwiązanie.

Powinno być widoczne, jeśli dodasz meta og: image

Problem polega na tym, że WhatsApp nie wyświetla obrazu, jeśli piszesz bez http: // i kończysz na / Na przykład, wyświetla obraz i opis, jeśli wpiszesz http://google.com/ ale nie z google.com

Mam nadzieję, że to komuś pomoże.


2

Chciałbym dodać odpowiedź do tego wątku, aby wyraźnie wspomnieć, który z powyższych wątków pomógł mi rozwiązać problem i kolejność, w jakiej można je śledzić, aby właściwie zrozumieć podstawową przyczynę i naprawić ją raz na zawsze:

Udało mi się uzyskać bogaty podgląd podczas udostępniania linku w mediach społecznościowych za pomocą tego rozwiązania.

Śledziłem różne opcje w tym wątku, a poniżej znajdują się najbliższe właściwej odpowiedzi i wszystkie one przyczyniły się do wyniku końcowego:

  1. Wymagane tagi (główny tag, na którym należy się skupić - og: image)
  2. Parametry obrazu
  3. Narzędzie, które na pewno pomoże
  4. Jak poprawnie podać ścieżkę obrazu
  5. Główna przyczyna i rozwiązanie

Miejmy nadzieję, że pozwoli to komuś zaoszczędzić czas potrzebny na przewinięcie i znalezienie odpowiedniego zestawu odpowiedzi oraz wysiłku wymaganego dla wszystkich prób i błędów.


2

Próbowałem kilka sugestii w tym wątku i z moich zewnętrznych wyszukiwań, ale był to dla mnie zupełnie inny problem. Moja konkretna instrukcja użycia obrazu wskazanego przez znacznik og: image została zastąpiona przez otwarte znaczniki graficzne dostarczone przez wtyczkę Jetpack. moją szczegółową odpowiedź znajdziesz tutaj . Pomyślałem jednak, że warto w skrócie dodać kroki do tego bardziej popularnego wątku. Mam nadzieję, że to komuś pomoże.

Facebook Dzielenie Debugger pomógł mi zidentyfikować przyczynę i stamtąd Śledziłem kroki:

  1. Debuguj witrynę za pomocą powyższego debugera. Wystarczy wpisać adres URL i nacisnąć debugowanie. Powinno to dać ci listę ostrzeżeń, a po przewinięciu w dół do sekcji otwartych tagów wykresu będziesz mógł zobaczyć wartości, które są pobierane dla twojej witryny. Tym, na którym należy się skupić, jest znacznik og: image .
  2. Przewiń dalej w dół do linku „Zobacz dokładnie, co nasz skrobaczka widzi dla Twojego adresu URL” i wyszukaj tag og: image, aby znaleźć złoczyńcę w swojej historii.
  3. Teraz po prostu wybierz środki, aby usunąć występujące zastąpienie. W moim przypadku pomocna jest następująca funkcja. Zmienia domyślny obraz używany za każdym razem, gdy Jetpack nie może określić obrazu do użycia.

Zmienia domyślny obraz używany za każdym razem, gdy Jetpack nie może określić obrazu do użycia

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

Powinienem dodać, że zalecane są takie parametry obrazu, jak minimum 300px x 200px i rozmiar <300 KB. I postępuj zgodnie z tymi instrukcjami, jeśli takie ogólne instrukcje nie działają, ponieważ najprawdopodobniej Twój problem jest podobny do mojego. Czasami najprostszym rozwiązaniem może być po prostu usunięcie wtyczki (pod warunkiem, że zweryfikujesz, że możesz się bez niej obejść).

Na koniec powinieneś zobaczyć coś w stylu - wprowadź opis zdjęcia tutaj

Mam nadzieję że to pomoże.

NS


1

Aby uzyskać podgląd obrazu WhatsApp, potrzebne są następujące tagi:

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

Jak głosi dokument z Facebooka , jeśli określisz rozmiar obrazu og:, zostanie on pobrany szybko, a nie asynchronicznie inaczej.

PNG jest zalecany do formatu obrazu. Zalecane jest co najmniej 600 x 600 pikseli.


W moim przypadku mam 1200 * 628 pikseli obrazu, co oznacza, że ​​muszę podać, czy <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="628" />mam rację? Czy musimy podawać szerokość i wysokość obrazu (który ma ten obraz) w znacznikach, czy też cokolwiek innego, co zrobiłyby piksele obrazu Jeśli wspomnimy o szerokości i wysokości w metatagach Będzie on wyświetlany w tych wymiarach? Proszę wyjaśnić @moreirapontocom
siluveru kiran kumar

0

Jeśli chcesz mieć zdjęcie obok adresu URL z witryny, którą ktoś udostępnia w WhatsApp, musisz umieścić metatag na stronie, do której prowadzi link, na przykład:

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

3
Cześć! Próbowałem tego i współpracuję z prefektem debugera URL Facebooka, jednak wiadomość WhatsApp nadal nie pokazuje mojego thumnaila. Oto ktoś jeszcze, kto ma ten sam problem: stackoverflow.com/questions/25100917/...
Lepi,

@AkhilSekharan poprawną odpowiedź można znaleźć tutaj: stackoverflow.com/a/32154775/501206
stevenw00

Dzięki Steve. Próbowałem już w ten sposób i doszedłem do wniosku, że WhatsApp ma wewnętrzną białą listę domen, które mogą wyświetlać miniaturę. Na przykład youtube
Akhil Sekharan

2
Doszedłem do tego samego wniosku ... debugger FB: 100% ok. Bogaty podgląd: 100% ok (zawiera Watsapp). Kiedy próbuję udostępnić przez WhatsApp, obraz się nie wyświetla. Adres URL w moim przypadku to robotiqu.es ... bez odpowiedzi rok później?
Juanjo

obraz nie wyświetla się dla mnie, czy ktoś może mieć rozwiązanie @Juanjo
Keyur Shah,

0

Miałem ten sam problem, dodano og: image i nie działało, gdy adres URL kończy się znakiem ukośnika (/). Po usunięciu ukośnika z adresu URL - obraz jest ładowany .. Ciekawy błąd ...


0

W moim przypadku pomogły następujące działania.

Umieszczanie obrazu pod tym samym hostem .

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

Przekazywanie potrzebnego obrazu do WhatsApp, w szczególności przez wykrywanie jego klienta użytkownika przez wiodący podłańcuch, na przykład

WhatsApp/2.18.380 A

Poczekaj kilka sekund, zanim faktycznie naciśniesz przycisk wysyłania, aby WhatsApp miał czas na pobranie obrazu i opisu z metadanych.


Jeśli wpiszę adres URL i poczekam trochę czasu, wyświetli się podgląd. Jeśli kliknę przycisk wysyłania, wyświetli się komunikat: Jeśli wpisam adres URL i kliknę przycisk wysyłania bez zwłoki (przed pobraniem informacji z metatagów), wówczas podgląd nie jest wyświetlany.
siluveru kiran kumar

0

Nawet po tych próbach. Obrazy z mojej strony były pobierane kilka razy, a czasem nie. Po sprawdzeniu poprawności za pomocą https://developers.facebook.com/tools/debug/sharing

zdałem sobie sprawę, że mój framework django (python) renderuje ścieżkę obrazu względnie. Musiałem wprowadzić zmiany do ścieżki obrazu z pełnym adresem URL. (w tym http: //). potem zaczęło działać


0

Dodatkowe przydatne informacje:

Możesz podać kilka obrazów og: WhatsApp użyje ostatniego. Pomoże to rozwiązać problem polegający na tym, że np. Facebook chce proporcji 1,91: 1 i 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/

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.