Generator de etichete meta Open Graph

Etichetele Open Graph sunt micile fragmente de HTML care decid cum arată pagina ta atunci când cineva o distribuie pe Facebook, LinkedIn, Slack, Discord sau X (Twitter). Completează mai jos un titlu, o descriere, un URL, o imagine și câteva opțiuni, urmărește cum se actualizează instantaneu previzualizarea cardului de distribuire și copiază etichetele <meta> generate direct în <head>-ul paginii tale. Totul se întâmplă în browserul tău — nimic nu este trimis către un server.

Ce este acest instrument?

Open Graph este un protocol, creat inițial de Facebook, care permite oricărei pagini web să se descrie pe sine printr-un set mic de etichete <meta property="og:..."> plasate în <head>-ul HTML-ului. Când cineva lipește linkul tău într-o aplicație socială, un client de chat sau un instrument de mesagerie, aplicația respectivă citește aceste etichete pentru a construi cardul de previzualizare — titlu, descriere și imagine miniaturală — în loc să ghicească pornind de la conținutul paginii.

Twitter (X) folosește un set de etichete înrudit, dar separat, <meta name="twitter:...">, pentru a controla specific cum arată previzualizarea unui link pe platforma sa. Majoritatea site-urilor setează ambele: etichete Open Graph pentru compatibilitate largă și etichete Twitter Card pentru a ajusta fin previzualizarea pe X (de exemplu, alegând un card cu imagine mare în locul unui card mic de rezumat).

Fără aceste etichete, un link distribuit fie nu afișează deloc o previzualizare, fie platforma încearcă să ghicească un titlu și o imagine din conținutul brut al paginii tale — alegând adesea un titlu greșit, o imagine aleatorie din text sau nimic. Setarea explicită a og:title, og:description și og:image îți oferă control total asupra modului în care este prezentat conținutul tău înainte ca cineva să dea clic.

De ce să-l folosești?

Previzualizare live — vezi exact cum va arăta cardul de distribuire în timp ce tastezi, înainte de a publica ceva.
Generează dintr-o dată atât etichete Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name), cât și etichete Twitter Card.
Acoperă câmpurile pe care platformele chiar le citesc: titlu, descriere, URL canonic, imagine, nume site, tip de conținut și stil card Twitter.
Rulează complet în browser — titlul, descrierea și URL-urile tale nu părăsesc niciodată browserul tău.
Gratuit, fără autentificare, fără limită de utilizare — copiază rezultatul și lipește-l în codul tău HTML.

Cum se folosește

Introdu titlul paginii tale și o descriere scurtă (vizează sub ~60 de caractere pentru titlu, ~155–160 pentru descriere).
Introdu URL-ul canonic al paginii și URL-ul absolut al imaginii de previzualizare (URL-urile imaginilor trebuie să fie complet calificate, de ex. https://example.com/image.jpg, nu o cale relativă).
Opțional, setează numele site-ului, alege un og:type (website, article, product, profile, video, music) și alege un tip de Twitter Card (summary sau summary_large_image).
Verifică cardul de previzualizare live pentru a confirma că titlul, descrierea și imaginea arată bine împreună.
Dă clic pe „Copiază” și lipește etichetele <meta> generate în <head>-ul paginii tale, înainte de eticheta de închidere </head>.

Exemplu

Intrare

Titlu: „10 instrumente gratuite pentru dezvoltatori pe care chiar le vei folosi”
Descriere: „O listă selectată de instrumente bazate pe browser pentru JSON, expresii regulate, UUID-uri și altele — fără instalare necesară.”
URL: https://example.com/blog/dev-tools
Imagine: https://example.com/images/dev-tools-cover.jpg

Rezultat

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

În rezultat sunt incluse doar câmpurile pe care le-ai completat, deci dacă lași numele site-ului gol, og:site_name este pur și simplu omis din rezultat.

Greșeli frecvente de evitat

og:image lipsește complet — fără el, majoritatea platformelor fie nu afișează nicio imagine de previzualizare, fie revin la o imagine aleatorie preluată de pe pagină, ceea ce de obicei arată defect și neprofesionist.
Folosirea unei căi de imagine relative precum /images/cover.jpg în loc de un URL complet precum https://example.com/images/cover.jpg — crawlerele sociale, în general, nu pot rezolva căile relative.
Raport de aspect greșit al imaginii — o imagine pătrată sau pe verticală este decupată stângaci atunci când platformele o forțează în cadrul orizontal de 1,91:1; proiectează întotdeauna imaginea de distribuire aproape de 1200×630.
Titluri sau descrieri care sunt trunchiate — menține og:title sub ~60 de caractere și og:description sub ~155–160 de caractere, astfel încât să nu fie tăiate cu puncte de suspensie pe majoritatea platformelor.
Uitarea de a actualiza previzualizările stocate în cache — după modificarea etichetelor og pe o pagină live, vechea previzualizare poate persista în cache-ul Facebook sau LinkedIn până când forțezi manual o nouă scanare cu instrumentele lor de depanare.

Unde este folosită fiecare etichetă

og:title, og:description și og:image sunt cele trei etichete pe care aproape orice platformă le citește pentru a construi o previzualizare. og:url indică crawlerelor cu ce link canonic să asocieze previzualizarea, ceea ce contează dacă același conținut este accesibil prin mai multe URL-uri. og:site_name afișează o etichetă mică (cum ar fi numele publicației sau al mărcii) deasupra titlului pe unele platforme, cum ar fi Facebook.

og:type schimbă ce tip de obiect reprezintă pagina pentru crawlerele care acceptă modelul de obiecte mai bogat al Open Graph — de exemplu, article activează og:article:published_time și og:article:author pe platformele care le citesc, deși majoritatea previzualizărilor sociale ignoră aceste câmpuri suplimentare și folosesc doar tripleta de bază titlu/descriere/imagine.

twitter:card controlează aspectul specific pe X: summary afișează o miniatură pătrată mică lângă text, în timp ce summary_large_image afișează o imagine pe toată lățimea deasupra textului — a doua variantă este aproape întotdeauna alegerea mai bună pentru conținut cu o imagine de copertă relevantă.

Întrebări frecvente

Ce dimensiune ar trebui să aibă og:image?

1200×630px este dimensiunea recomandată — este suficient de mare pentru afișaje cu densitate mare de pixeli și corespunde raportului de aspect de aproximativ 1,91:1 la care Facebook, LinkedIn și X decupează imaginea. Menține fișierul sub 5–8MB, folosește JPG sau PNG și asigură-te că URL-ul imaginii este o adresă absolută completă, nu o cale relativă — majoritatea crawlerelor nu rezolvă corect căile relative ale imaginilor.

De ce nu apare previzualizarea mea când distribui linkul?

Cele mai frecvente cauze sunt: og:image lipsă, un URL de imagine relativ în loc de absolut, crawlerul blocat de robots.txt sau platforma afișează o versiune stocată în cache a unei previzualizări vechi. Atât Facebook, cât și LinkedIn stochează agresiv în cache previzualizările scanate — folosește Sharing Debugger de la Facebook sau Post Inspector de la LinkedIn pentru a forța o nouă scanare după ce actualizezi etichetele.

Care este diferența dintre etichetele og: și etichetele twitter:?

Etichetele og: (og:title, og:description, og:image etc.) fac parte din standardul Open Graph, citit de Facebook, LinkedIn, Slack, Discord, WhatsApp și majoritatea celorlalte platforme. Etichetele twitter: reprezintă formatul propriu al Twitter/X. Dacă twitter:title sau twitter:image lipsesc, X revine automat la eticheta og: echivalentă — dar setarea explicită a ambelor îți oferă mai mult control, inclusiv posibilitatea de a alege summary_large_image pentru o imagine de previzualizare mare.

Ce og:type ar trebui să folosesc?

„website” este opțiunea implicită sigură pentru majoritatea paginilor, inclusiv paginile de start și conținutul general. Folosește „article” pentru postări de blog și articole de știri (deblochează etichete suplimentare specifice articolelor, precum ora publicării), „product” pentru pagini de comerț electronic și „profile” pentru pagini personale sau de profil de utilizator. Tipul afectează în principal ce proprietăți Open Graph suplimentare sunt valide, nu cum arată cardul de previzualizare de bază.

Acest instrument îmi stochează sau trimite datele undeva?

Nu. Toată generarea are loc local, în browserul tău, folosind JavaScript simplu. Nimic din ce scrii nu este transmis, înregistrat sau stocat — închiderea filei șterge totul.