tigtools

Previzualizare Open Graph

Introduceți conținutul etichetelor Open Graph pentru a vedea aproximativ cum poate arăta un link partajat și dacă imaginea are dimensiunea potrivită.

Rulează în browser Fără înregistrare

Browserul încarcă această imagine direct de la adresa introdusă.

Recomandat: 1200 × 630 px (1,91:1), JPG sau PNG, sub câțiva MB. Păstrați conținutul important departe de margini, deoarece unele aplicații decupează imaginea ca pătrat.

Card de link mare
Fără imagine
example.com
—
Card de link mic
Fără imagine
example.com
—

Aceste carduri sunt aproximări generice. Fiecare aplicație are propriul layout, fonturi și mod de decupare și păstrează previzualizările în cache.

Cum se folosește

  1. Introduceți og:title și og:description pe care le folosiți sau intenționați să le folosiți pe pagină.
  2. Lipiți URL-ul complet al og:image. Instrumentul îl încarcă și raportează dimensiunea reală în pixeli.
  3. Adăugați URL-ul paginii sau domeniul, apoi comparați previzualizările cardului mare și mic și remediați eventualele avertizări.

Cum funcționează

Când cineva distribuie un link, majoritatea rețelelor sociale și aplicațiilor de chat accesează pagina și citesc etichetele Open Graph: og:title, og:description, og:image și og:url. Apoi construiesc un card. O imagine lată de aproximativ 1.91:1 produce de obicei un card mare, cu imaginea sus; o imagine mică sau pătrată produce adesea un card compact, cu o miniatură lângă text.

Acest instrument prezintă două stiluri generice de card pentru a te ajuta să evaluezi lungimea și încadrarea imaginii. Verifică dimensiunea naturală a imaginii după ce browserul o încarcă: sub 200 × 200 px multe aplicații omit imaginea, sub 600 × 315 px tind să folosească macheta mică, iar un raport departe de 1.91:1 înseamnă decupare. 1200 × 630 px este dimensiunea recomandată pe scară largă, deoarece rămâne clară pe ecranele cu densitate mare.

Previzualizarea nu poate arăta exact ce va afișa o anumită aplicație. Aplicațiile diferă în câte rânduri de titlu și descriere afișează, unele ignoră descrierea, iar majoritatea păstrează în cache o previzualizare o perioadă după prima distribuire, astfel încât modificările etichetelor tale pot să nu apară imediat. Multe platforme oferă propriul instrument de depanare pentru a reîmprospăta acel cache.

Exemple

O captură de ecran folosită ca og:image

O captură de 1440 × 900 are un raport de 1,6:1. Instrumentul avertizează asupra raportului: într-un card mare, partea de sus și cea de jos ar fi decupate. Exportarea unei versiuni de 1200 × 630 evită surprizele.

Un logo ca singura imagine

Un logo de 180 × 180 este sub 200 × 200 px, astfel că multe aplicații nu ar afișa nicio imagine. Folosiți în schimb un banner mai mare și lat, care include logo-ul.

Verificarea lungimii titlului

Un og:title de 90 de caractere se afișează pe trei rânduri în previzualizarea cardului mare. Scurtarea lui la aproximativ 60 de caractere menține cardul ordonat în majoritatea aplicațiilor.

Întrebări frecvente

De ce arată linkul meu diferit pe Facebook, LinkedIn și X?

Fiecare platformă redă cardurile cu propriul aspect, decupaj și limite de text, iar unele afișează descrierea, în timp ce altele nu. Această previzualizare este o aproximare generică, nu o copie a designului vreunei platforme.

Am schimbat og:image, dar apare în continuare imaginea veche. De ce?

Platformele memorează în cache previzualizările linkurilor. Folosiți debugger-ul de partajare al platformei pentru a reîncărca pagina sau așteptați expirarea cache-ului. Schimbarea numelui fișierului imagine ajută și ea.

Pot folosi o imagine SVG sau WebP?

SVG nu este acceptat de majoritatea platformelor. WebP funcționează în multe aplicații, dar nu în toate; JPG sau PNG este cea mai sigură alegere.

De ce nu poate instrumentul să îmi încarce imaginea?

URL-ul poate necesita autentificare, poate indica o pagină HTML în loc de o imagine sau serverul poate bloca cererile din alte site-uri. Dacă browserul nu poate încărca imaginea aici, este posibil ca nici crawler-ul unei platforme sociale să nu poată.

Confidențialitate

Textul introdus rămâne în browser. Pentru a verifica imaginea, browserul o solicită direct de la URL-ul introdus (fără a trimite un referrer), astfel încât serverul vede o cerere normală de imagine. Nimic nu este trimis către TIG Tools.