Previzualizare gratuită Open Graph și carduri sociale

Ce este link unfurling și de ce contează?

Când lipești un URL pe Facebook, Twitter, LinkedIn, Slack, Discord, iMessage sau WhatsApp, platforma trimite un crawler la acel URL, citește meta tag-urile din head-ul paginii și redă un card de previzualizare cu un titlu, o descriere și o imagine. Acea previzualizare se numește unfurl, card de link sau card social, în funcție de platformă. Este primul lucru pe care îl vede orice vizualizator înainte de a decide dacă dă click. Un card bine redat crește ratele de click cu o marjă semnificativă față de un simplu link albastru, iar un card defect distruge complet angajamentul.

Sistemul funcționează pe baza protocolului Open Graph, publicat de Facebook în 2010 pentru a oferi platformelor de distribuire o modalitate standardizată de a extrage o previzualizare curată. Open Graph definește un namespace de meta tag-uri prefixate cu og: — og:title, og:description, og:image, og:url, og:type și o lungă serie de câmpuri opționale pentru video, audio, articole și produse. Twitter și-a construit propriul protocol Twitter Card deasupra, în 2012, cu un namespace twitter: care suprascrie Open Graph când ambele sunt prezente. LinkedIn, Slack, Discord și majoritatea aplicațiilor de mesagerie citesc Open Graph direct și adaugă propriile particularități pe deasupra.

Fiecare platformă aplică propria logică de randare. Facebook și LinkedIn redau un card hero cu imaginea în partea de sus, titlul bold dedesubt, descrierea în gri și domeniul gazdă cu majuscule mici la bază. Cardul summary_large_image al Twitter redă o imagine hero cu gazda URL dedesubt. Slack redă un atașament compact cu o miniatură mică inline. Discord redă un card care integrează orice embed video sau audio când tipul este setat. iMessage redă un card în format vertical cu o imagine pătrată. Același set de meta tag-uri le alimentează pe toate, dar rezultatul vizual variază suficient de mult încât previzualizarea pe fiecare suprafață separat este singura modalitate de a depista problemele.

Costul unui unfurl defect este real. Un tweet de campanie fără imagine obține o fracțiune din angajamentul unui tweet cu card. O postare LinkedIn care se unfurlează la o pictogramă generică de glob în loc de imaginea hero a articolului arată nefinalizată. Un canal Slack în care un link se unfurlează la o imagine 404 subminează încrederea în link însuși. Niciunul dintre acestea nu este catastrofal în sine, dar într-o echipă de marketing sau conținut care lansează zeci de link-uri pe săptămână, pierderea cumulativă este semnificativă.

Cum se folosește acest instrument de previzualizare

Instrumentul de previzualizare redă un URL pe toate platformele majore simultan, astfel că poți identifica problemele specifice fiecărei platforme fără a testa pe fiecare în parte.

Pasul 1 — Lipește URL-ul. Introduci un URL complet în câmpul de intrare. Crawler-ul preia pagina, citește head-ul și extrage fiecare tag Open Graph și Twitter Card relevant. Dacă pagina necesită autentificare sau se află în spatele provocării bot a Cloudflare, preluarea eșuează, iar instrumentul de previzualizare afișează eroarea, astfel că știi că unfurl-ul va eșua și pe platformele reale.

Pasul 2 — Scanează toate cele cinci carduri de platformă. Facebook, LinkedIn, Twitter, Slack și Discord se redau unul lângă altul. Caută imagini lipsă, text trunchiat și decupaje de raport de aspect care taie imaginea ta hero. Instrumentul semnalează tag-urile obligatorii lipsă în roșu și dimensiunile suboptime în chihlimbar.

Pasul 3 — Editează și previzualizează din nou. Actualizezi meta tag-urile în pagina sursă și dai click pe Refresh. Instrumentul preia o copie proaspătă fără niciun cache, astfel că vezi imediat noua stare. Odată ce arată corect aici, distribuirile live pe platformele actuale vor corespunde — presupunând că nu uiți să invalidezi cache-urile Facebook și LinkedIn după actualizare.

Particularitățile de randare specifice fiecărei platforme

Aceleași meta tag-uri produc carduri diferite pe platforme diferite deoarece fiecare are propriul motor de randare. Cunoașterea diferențelor economisește timp când ceva arată greșit pe o platformă, dar corect pe altele.

Facebook

Facebook citește og:title, og:description, og:image și og:url și redă un card hero cu imaginea în partea de sus, titlul bold dedesubt, descrierea în gri și domeniul gazdă cu majuscule mici la bază. Imaginea este decupată la un raport de aspect de 1,91:1 dacă nu se potrivește. Facebook memorează rezultatul agresiv în cache — prima dată când un URL este distribuit, crawler-ul extrage tag-urile, iar distribuirile ulterioare reutilizează cardul memorat în cache timp de ore sau zile. Pentru a actualiza, lipești URL-ul în Sharing Debugger și dai click pe Scrape Again. Nu există altă modalitate fiabilă de a invalida cache-ul. Crawler-ul Open Graph se identifică prin user agent-ul facebookexternalhit.

Twitter

Twitter citește mai întâi twitter:card, twitter:title, twitter:description, twitter:image și twitter:site, revenind la echivalentele og: când tag-ul twitter: lipsește. Valoarea twitter:card determină alegerea layout-ului: summary produce o miniatură mică pătrată la stânga titlului și descrierii, ocupând aproximativ un tweet de spațiu vertical; summary_large_image produce o imagine hero mare deasupra titlului cu gazda URL dedesubt, dublând spațiul vizual. Validarea Twitter Card s-a mutat în Twitter Ads în 2022, deci validatorul de carduri standalone a dispărut, dar platforma respectă în continuare protocolul exact ca înainte.

LinkedIn

LinkedIn citește Open Graph identic cu Facebook și redă un card hero similar. Crawler-ul este LinkedInBot și memorează rezultatele în cache aproximativ șapte zile, cu excepția cazului în care le invalidezi prin Post Inspector la linkedin.com/post-inspector. LinkedIn necesită ca og:image să aibă cel puțin 1200 pe 627 de pixeli (observă limita inferioară ușor diferită) și sub 5MB. Imaginile servite prin HTTP sunt ignorate în tăcere. LinkedIn ignoră, de asemenea, indiciile og:image:width și og:image:height la validare, deci testează întotdeauna cu o preluare reală.

Slack

Slack citește Open Graph, dar redă un atașament mai compact în mod implicit. og:title devine titlul link-ului, og:description devine corpul, iar og:image devine o miniatură mică inline pe lateral. Spațiile de lucru pot configura comportamentul unfurl per canal și per aplicație, ceea ce înseamnă că același link poate apărea ca un card complet într-un canal și ca un URL text simplu în altul. Slack deduplică, de asemenea, unfurl-urile într-o fereastră scurtă de timp, astfel că reintroducerea aceluiași URL după editarea meta tag-urilor arată adesea versiunea memorată în cache. Conturile bot și webhook-urile de intrare au setări de unfurl separate care poate trebuie să fie activate explicit.

Discord

Discord redă carduri Open Graph ca embed-uri în mesaj, cu imaginea redată inline ca hero. Respectă, de asemenea, og:video și integrează playere video direct când acestea sunt prezente, ceea ce face Discord una dintre puținele platforme mainstream unde tag-urile Open Graph video sunt valoroase. Culorile cardului provin din theme-color din head-ul meta când nu este specificată altă culoare. Crawler-ul este Discordbot și, spre deosebire de Facebook sau LinkedIn, Discord nu memorează agresiv în cache — majoritatea editărilor se reflectă în câteva minute.

Cerințele de dimensiune a imaginii per platformă

Cel mai frecvent motiv pentru care un card retrogradează la o miniatură sau nu se redă este imaginea. Fiecare platformă are propriile dimensiuni preferate și dimensiuni minime.

Facebook și LinkedIn preferă 1200 pe 630 de pixeli la un raport de aspect de 1,91:1. Ambele vor reda un card cu imagini până la 600 de pixeli pe latura lungă, dar retrogradează la un layout cu miniatură mică sub acel prag. Dimensiunea fișierului ar trebui să rămână sub 5MB. Atât PNG, cât și JPG funcționează; WebP este suportat de Facebook, dar nu consistent de LinkedIn, deci folosește PNG sau JPG pentru og:image.

Twitter preferă 1200 pe 675 de pixeli pentru summary_large_image, un raport de 16:9 ușor mai lat. Minimul este 300 pe 157, dar orice imagine sub 600 de pixeli lățime produce o scădere vizibilă a calității. Pentru cardurile summary, imaginea este pătrată și decupată la 144 pe 144 în feed; proiectează pentru ca centrul imaginii să transmită sensul.

Slack acceptă aproape orice dimensiune și scalează imaginea pentru a se potrivi unei miniaturi mici. Miniatura are aproximativ 80 pe 80 de pixeli în randarea laterală. Detaliile dintr-o imagine de 1200 de pixeli lățime sunt inutile în acest layout, dar aceeași imagine funcționează bine deoarece Slack scalează în loc să decupeze.

Discord redă imaginea completă inline până la cea mai mare dimensiune pe care o suportă suprafața de chat, de obicei până la 1280 de pixeli lățime pe desktop. Imaginile mai mari sunt scalate în jos cu calitate păstrată. Discord decupează imaginile înalte la un raport de aspect maxim, deci evită imaginile în format portret pentru cardurile hero.

Tag-urile og:image:width și og:image:height sunt indicii de dimensiune pe care crawler-ele le folosesc pentru a rezerva spațiu de layout înainte ca imaginea să termine de încărcat. Ele nu modifică imaginea, dar ajută previzualizarea să se redea fără o schimbare de layout. Include-le întotdeauna când sunt stabile și folosește dimensiunile reale în pixeli ale fișierului pe care îl servești.

Greșeli frecvente care afectează distribuirea

URL-uri og:image relative. Open Graph și Twitter Card necesită ambele URL-uri absolute. O cale precum /og.png este ignorată în tăcere de fiecare platformă majoră. Folosește întotdeauna forma completă https://example.com/og.png.

og:image HTTP pe o pagină HTTPS. Amestecarea URL-urilor de imagini HTTP într-o pagină HTTPS determină majoritatea platformelor să ignore imaginea. Cardul retrogradează la o miniatură sau se redă fără imagine. Toate URL-urile Open Graph ar trebui să fie HTTPS indiferent de protocolul paginii.

og:image:width și og:image:height lipsă. Fără indicii de dimensiune, crawler-ele așteaptă ca imaginea să se încarce înainte de a decide layout-ul cardului. Pe gazde de imagini lente, platforma expiră și revine la un card mai mic. Include întotdeauna indiciile când servești o imagine de dimensiuni cunoscute.

og:image identică pentru mii de pagini. O singură imagine partajată funcționează pentru pagina principală, dar face ca fiecare articol să arate identic când este distribuit. Imaginile OG dinamice șablonate, generate pe server-side din titlu și un fundal, oferă fiecărei pagini un card distinctiv fără muncă manuală.

Uitarea actualizării cache-ului Facebook după editări. Editările făcute după ce un URL a fost deja distribuit sunt invizibile până când re-extragi prin Sharing Debugger. Echipele care actualizează meta tag-urile fără a invalida cache-ul cred adesea că modificările lor nu au funcționat, când în realitate platformele afișează versiunile vechi memorate în cache.

Valoare incorectă pentru twitter:card. Setarea summary când ai o imagine hero de 1200 de pixeli lățime produce un card cu miniatură mică, risipind resursa. Setarea summary_large_image fără o imagine mare efectivă produce un card cu spațiu gol unde ar trebui să fie hero-ul. Potrivește tipul de card cu dimensiunea imaginii pe care o servești.

Descriere copiată literal din corpul paginii. Un paragraf de deschidere trunchiat ca og:description rareori convinge la click. Previzualizările de distribuire sunt text de vânzare în 200 de caractere; tratează-le ca atare și scrie text descriptiv care încadrează link-ul, nu rezumă pagina.

Cazuri limită pe care nimeni nu le menționează

Crawler-ele Open Graph văd o versiune diferită a paginii tale față de browsere. De obicei nu execută JavaScript, nu stochează cookie-uri și expiră mai repede decât o preluare obișnuită. Aplicațiile single-page care injectează meta tag-uri pe client-side prin React Helmet sau document.head produc carduri goale deoarece crawler-ul citește HTML-ul inițial redat de server înainte ca orice JS să ruleze. Soluția este să redai meta tag-urile pe server-side prin metadatele Next.js, useHead al Nuxt sau echivalent. Unele configurații CDN blochează, de asemenea, user agent-urile bot la margine, returnând un 403 pentru facebookexternalhit în timp ce servesc oamenii normal — o eroare invizibilă până când cineva distribuie link-ul și cardul nu reușește să se redea.