De ce arată greșit previzualizarea linkului tău și cum o repari cu Open Graph

Distribui un link către noua ta pagină de destinație, iar previzualizarea apare fără imagine, cu titlul paginii de pornire sau cu un banner de acum două campanii. Pagina în sine este în regulă. Previzualizarea se construiește din altceva: câteva rânduri de cod din secțiunea de head a paginii, pe care cei mai mulți nu le văd niciodată.

Acest articol acoperă cele șase cauze din spatele majorității previzualizărilor defecte, în ordinea în care merită verificate. Dacă vrei ca etichetele să fie scrise pentru tine, generatorul gratuit Open Graph le creează, le escapează corect și le verifică în raport cu limitele de mai jos.

Cum se construiește o previzualizare a linkului

Când un link este lipit într-o postare sau într-un mesaj, aplicația trimite un crawler către pagină. Crawler-ul citește etichetele <meta> din <head> și desenează cardul pe baza lor. Aceste etichete provin din protocolul Open Graph, care numește patru ca fiind obligatorii:

• og:title: titlul paginii, așa cum trebuie să apară în card.
• og:type: ce fel de pagină este, de obicei website sau article.
• og:image: imaginea.
• og:url: URL-ul canonic al paginii, pe care protocolul îl numește identificatorul ei permanent.

Adaugă og:description și ai cardul. Un set complet și minimal arată așa:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Cauza 1: etichetele lipsesc

Fără etichete og:, fiecare aplicație trebuie să se bazeze pe ce altceva găsește în pagină, cum ar fi <title> sau prima imagine, iar alegerea depinde de aplicația respectivă. Așa se face că un link poate arăta bine într-un loc și greșit în altul. Soluția este să declari cele patru etichete obligatorii plus o descriere pe fiecare pagină pe care te aștepți să o distribuie lumea, nu doar pe pagina de pornire. O pagină de produs distribuită cu etichetele paginii de pornire afișează cardul paginii de pornire.

Cauza 2: URL-ul imaginii este relativ

Asta se ratează ușor, pentru că pagina arată bine în propriul tău browser. content="/images/og.jpg" funcționează pentru un browser care se află deja pe site-ul tău, dar crawler-ul este în afara lui. Scrie adresa completă, care începe cu https:// și cu domeniul tău. Același lucru este valabil și pentru og:url.

Cauza 3: imaginea are dimensiunea sau proporția greșită

Fiecare platformă spune ce vrea, iar întâmplător toate sunt de acord asupra unei imagini late:

• LinkedIn spune în ghidul său pentru a face un site ușor de distribuit că imaginea trebuie să aibă cel puțin 1200 × 627 de pixeli, la un raport recomandat de 1.91:1, și să nu depășească 5 MB.
• Bunele practici de distribuire ale Meta recomandă imagini de cel puțin 1080 de pixeli lățime pentru ecrane de înaltă rezoluție și de cel puțin 600 de pixeli lățime pentru afișarea reclamelor cu link pe imagine.
• Cardul cu imagine mare de la X acceptă un raport de 2:1, de la 300 × 157 până la 4096 × 4096 de pixeli, sub 5 MB, în format JPG, PNG, WEBP sau GIF, și nu acceptă SVG, potrivit documentației sale pentru dezvoltatori (pagina originală redirecționează acum, așa că acest link trece prin Internet Archive).

O dimensiune servește pentru toate trei: 1200 × 630. Depășește minimul de 1200 × 627 al LinkedIn, este mai lată decât cei 1080 ai Meta, iar raportul ei este 1200 ÷ 630 = 1.905, la mai puțin de 5% de 2:1 al X. O imagine pătrată sau înaltă va fi decupată într-un card lat, așa că păstrează partea importantă în centru. Calculatorul de raport de aspect arată ce păstrează o decupare centrală.

Declară și dimensiunea în etichete. Meta cere og:image:width și og:image:height, ca crawler-ul său să poată reda imaginea imediat, în loc să o descarce și să o proceseze mai întâi. Ghidul pentru webmasteri al Meta o spune simplu: specifică înălțimea și lățimea, ca imaginea să se încarce corect de prima dată când pagina este distribuită.

Cauza 4: etichetele sunt adăugate de JavaScript

Unele constructoare de site-uri și aplicații single-page adaugă etichete meta după ce pagina se încarcă, în browser. Un crawler care citește HTML-ul trimis de serverul tău s-ar putea să nu ruleze niciodată acel cod, deci nu vede etichetele. Verifică sursa paginii (View Source, nu inspectorul, care arată pagina după ce au rulat scripturile). Dacă etichetele nu se află în sursă, crawler-ul probabil nici nu le poate vedea. Soluția ține de setările site-ului tău sau de șablonul de pe server.

Cauza 5: caracterele speciale au stricat eticheta

Un titlu cu ghilimele duble în interior, cum ar fi The "only" linen you need, închide atributul content="..." prea devreme, iar restul titlului se pierde. Caracterele care contează într-un atribut trebuie escapate: " devine ", & devine &, iar < devine <. Browserele și crawler-ele le transformă înapoi în caracterele originale atunci când citesc eticheta. Generatorul face asta în locul tău, și acesta este unul dintre motivele pentru care merită să-l folosești.

Cauza 6: aplicația și-a amintit versiunea veche

Ai reparat etichetele, ai redistribuit, iar cardul vechi tot apare. Asta este cache-ul. Aplicațiile păstrează ce au extras și îl reutilizează, iar ambele rețele mari îți oferă un instrument prin care poți cere o nouă citire:

• Facebook: lipește URL-ul în Sharing Debugger al Meta. Ghidul pentru webmasteri al Meta spune că arată ce etichete a extras crawler-ul, cu eventualele erori sau avertismente, și declanșează o nouă extragere. Bunele practici ale Meta adaugă că, altfel, conținutul extras se actualizează în mod obișnuit la fiecare 24 de ore.
• LinkedIn: trece URL-ul prin Post Inspector. Pagina de ajutor a LinkedIn este clară în privința limitei: reîmprospătarea schimbă previzualizarea doar pentru postările noi. Postările care includ deja URL-ul păstrează pe cea veche.

Această observație despre LinkedIn trebuie reținută înaintea unei lansări. Verifică previzualizarea înainte ca prima postare să plece, pentru că o postare veche nu poate fi reparată reparând pagina.

Eticheta twitter:card: o linie, nu patru

X citește și Open Graph. Referința pentru marcajul cardurilor a X indică un fallback pentru fiecare etichetă: twitter:title revine la og:title, twitter:description la og:description, twitter:image la og:image, iar twitter:image:alt la og:image:alt. Așadar nu trebuie să repeți totul. Singura linie pe care o adaugi este twitter:card: summary_large_image pentru o imagine pe toată lățimea sau summary pentru una pătrată și mică. Dacă o lași afară, aceeași referință spune că X poate afișa în schimb un card de sumar mic, motiv pentru care o imagine mare ajunge uneori ca miniatură. Aceeași referință limitează titlul la 70 de caractere, descrierea la 200 și textul alternativ la 420.

O verificare de cinci minute înainte de lansare

1. Vezi sursa paginii și găsește etichetele og:. Toate cele patru obligatorii, plus o descriere.
2. Verifică dacă og:image și og:url încep cu https://.
3. Deschide URL-ul imaginii separat, într-un browser. Ar trebui să se încarce, la 1200 × 630 sau aproape de această dimensiune.
4. Lipește URL-ul în Sharing Debugger și Post Inspector și citește cardurile.
5. Abia apoi distribuie-l.

Unde se potrivește Hermoso

Hermoso este un agent de marketing cu AI: cercetează reclamele care deja funcționează pe piața ta, creează reclame de imagine și video în linie cu brandul tău, programează postările în conturile tale și rulează campanii plătite în conturile tale de publicitate. O previzualizare bună a linkului este ceea ce face ca aceste postări să merite un clic. Hermoso funcționează în aplicația web sau în Claude, ChatGPT și Cursor, prin serverul său MCP.

Întrebări frecvente

De ce linkul meu nu arată nicio imagine pe Facebook sau LinkedIn?

De obicei, eticheta og:image lipsește, folosește o cale relativă în loc de o adresă https:// completă sau trimite către o imagine prea mică. LinkedIn cere cel puțin 1200 × 627 de pixeli. După ce o repari, trece URL-ul prin Sharing Debugger-ul Meta sau prin Post Inspector-ul LinkedIn, ca să-l preia din nou.

Ce dimensiune ar trebui să aibă o imagine Open Graph?

1200 × 630 de pixeli funcționează în toate rețelele mari. Respectă minimul LinkedIn de 1200 × 627 la un raport de aproximativ 1.91:1, este mai lată decât cei 1080 de pixeli recomandați de Meta și se apropie de raportul de 2:1 acceptat de X pentru cardurile cu imagine mare.

Cum actualizez previzualizarea unui link pe LinkedIn?

Repară etichetele de pe pagină, apoi introdu URL-ul în Post Inspector-ul LinkedIn. Previzualizarea reîmprospătată se aplică doar postărilor noi. Postările care conțin deja URL-ul păstrează vechea previzualizare.

Am nevoie de etichete twitter: dacă am etichete og:?

Doar twitter:card. X revine la og:title, og:description, og:image și og:image:alt atunci când lipsesc versiunile twitter:.