Este nevoie de câțiva pași pentru a obține perfect previzualizare pentru WhatsApp, Twitter, Facebook și icoane marcaj pentru pc's și dispozitive mobile. Dacă vă place de lectură du-te la ogp.m - dar asigurați-vă că pentru a citi pașii 1 - 6 în acest răspuns pentru a obține cel mai bun WhatsApp previzualizare.
Vă rugăm să rețineți: unele aplicații sau site-uri folosesc cache-ul sau chiar store site-ul de previzualizare la baza lor de date. Aceasta înseamnă că atunci când te're testarea link-ul de pe WhatsApp sau Facebook de exemplu,'ll cel mai probabil, nu văd nici o diferență imediat. Folosind un alt link (altă pagină) va face truc. Dar, de îndată ce utilizați link-ul o dată, acest "vă rugăm să rețineți că" secțiunea începe peste tot din nou.
Pasul 1: titlul
Maxim 65 de caractere
<title>your keyword rich title of the website and/or webpage</title>
Pasul 2: descriere
Maximă de 155 de caractere
<meta name="description" content="description of your website/webpage, make sure you use keywords!">
Pasul 3: og:title
Maxim 35 de caractere
<meta property="og:title" content="short title of your website/webpage" />
Pasul 4: og:url
Plin link-ul de la actuala adresă de pagină web
<meta property="og:url" content="https://www.example.com/webpage/" />
Pasul 5: og:description
Maxim 65 de caractere
<meta property="og:description" content="description of your website/webpage">
Pasul 6: og:image
Imagine(JPG sau PNG), cu o dimensiune mai mică decât 300KB și dimensiuni minime de 300 x 200
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
Dacă ați finalizat pașii de mai sus, puteți vedea acum previzualizare în WhatsApp! Să fie conștienți de "plase notă" secțiune, totuși.
Pasul 7: og:type
Pentru ca obiectul să fie reprezentate în grafic, aveți nevoie pentru a specifica tipul acesteia. Aici's o listă globală de tipuri disponibile: http://ogp.me/#types. Puteți specifica, de asemenea, propriile tipuri.
<meta property="og:type" content="article" />
Pasul 8: og:locale
Locale de resurse. Puteți folosi, de asemenea, og:localizare:alternativ, dacă aveți alte traduceri disponibile.
Dacă tu nu't specifica og:locale, implicit ro.
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
Pasul 9: Twitter
Pentru cel mai bun suport Twitter citit acest.
Pasul 10: Facebook
Pentru cele mai bune Facebook sprijin citit acest.
Pasul 11: favicon
Pentru cele mai bune favicon suport pentru toate browserele și dispozitive de citit acest.
Bonus pasul 12: video/audio
L's, de asemenea, posibil pentru a partaja audio/video. Facebook și twitter, de exemplu, partaja clipuri video foarte bine. Citi ogp.m.
Am avut aceeași problemă și problema era dimensiunea imaginii. Whatsapp nu't de sprijin imagine cu o dimensiune mai mare de 300KB.
Deci cea mai importantă proprietate a afișa imaginea de pe Whatsapp este:
<meta property="og:image" content="url_image">
Și dimensiunea imaginii pentru a afișa trebuie să fie mai mică decât 300KB.
Dacă problema persistă, citiți, de asemenea, răspunsul pentru această întrebare similară]1
Cred că nu există nici o listă albă în whatsapp, așa cum am găsit o soluție care a lucrat pentru mine. Procedați după cum urmează. insert 3 meta tag-uri:
<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."/>
Imaginea trebuie să fie în .format png și 600x600px dimensiune și trebuie să fie numit 'logo-yoursite.png' (după ce a lucrat pentru mine la fel CA ASTA)
Nu uitați să introduceți link-ul de la whatsapp în site-ul dvs.:
<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>
Face acest lucru și te'll fi bine făcut!
M-am documentat perfect soluție detaliat aici - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Există șapte pași de făcut pentru a obține perfect de previzualizare.
Titlu : Adăugați cuvinte Cheie bogat titlu pentru pagina dvs. de web, cu un maxim de 65 de ani caractere.
Descriere Meta : Descrie pagina web într-un maxim de 155 caractere.
og:title : Maxim 35 de caractere.
og:url : Full link către o adresă de pagină web.
og:description : Maxim 65 de caractere.
og:image : Imagini(JPG sau PNG) de dimensiune mai mică decât 300KB și minim dimensiunea de 300 x 200 pixeli este recomandat.
favicon : O mica icoana de dimensiuni de 32 x 32 pixeli.
În pagina de mai sus, aveți specificațiile cerute, limita de caractere și proba de tag-uri. Nu upvote odată ce ați găsi satisfăcătoare.
Am'am fost încercarea de a face acest lucru pe mine însumi și am'am adăugat toate meta tag-uri :
<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" />
dar încă nu a putut vedea imaginea atunci când schimbul de link-ul meu în WhatsApp.
Am'am descoperit că WhatsApp are, de asemenea, un fel de caching de imagini și url-ul de informații, nu știu pentru cât timp.
Pentru a verifica că m-am'am introdus corect tag-uri, am încercat diferite url-ul, de exemplu : http://domain.com în loc de http://www.domain.com .
sperăm că acest lucru ajută la altcineva.
Am'd recomandăm întotdeauna au o privire la https://developers.facebook.com/tools/debug/sharing pentru a valida proprietăți ca Facebook schimbă de multe ori se's a politicilor, deziderate și API.
Dacă lucrați cu Messenger bots sau alte aplicații FB, poate ai nevoie de proprietatea fb:app_id pentru link-ul de imagini la muncă în Whatsapp. Mai multe de la Facebook dezvoltatorii webmasteri site-ul. https://developers.facebook.com/docs/sharing/webmasters
După ce a lucrat într-un bugg, a aflat că în IOS, elemente în CAP s-ar putea opri WhatsApp căutare de og:image /og:descriere / nume=descriere. Deci încercați mai întâi să le-a pus pe partea de sus de orice altceva.
Asta nu't de lucru
<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>
Acest lucru:
<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>
Am avut aceeași problemă, aici este de a rezolva.
Acesta ar trebui să fi apărut dacă adăugați meta og:image
Problema este whatsapp nu ar arăta imaginea, dacă tastați fără http:// și se termină cu / De exemplu, apar în imagine și descriere tip http://google.com/ dar nu cu google.com
Sper că vă ajută pe cineva.
Ai nevoie de urmatoarele tag-uri pentru a obține un WhatsApp imagine de previzualizare:
<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" />
Ca Facebook docs spune, dacă specificați og:image size acesta va fi preluat paravan de sudura în loc asincron în caz contrar.
PNG este recomandat pentru formatul de imagine. 600x600 pixeli, cel puțin este recomandat.
Următoarele acțiuni au ajutat in cazul meu.
Pune imaginea în aceeași gazdă.
<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />
Trecerea nevoie de imagine pentru WhatsApp în special prin detectarea utilizatorului agent de lider subșir, exemplu
WhatsApp/2.18.380 A
Așteaptă câteva secunde de fapt, înainte de apăsarea butonului trimitere, așa că WhatsApp va avea timp pentru a prelua imaginea și descrierea din og metadate.
Chiar și după aceste încercări. Site-ul meu imaginile au fost preluate de câteva ori și, uneori, nu. După validarea cu https://developers.facebook.com/tools/debug/sharing
dat seama că-mi django (python) - cadru este de redare a imaginii cale relativ. Am avut de a face modificări la calea de imagine cu url-ul complet. (inclusiv http://). apoi a început să lucreze
Dacă doriți să aveți o imagine alături de un url de pe site-ul postat cineva pe WhatsApp, trebuie să puneți o metaetichetă pe pagina unde e link-uri URL, astfel:
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>