Podaj obraz do udostępniania linków WhatsApp

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

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 .

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

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!

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.

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

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.

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>

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

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.

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.

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 -

Mam nadzieję że to pomoże.

NS

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.

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

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

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.

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ć

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/