Taguri meta Open Graph — ce trebuie să știi

Ce sunt tagurile meta Open Graph?

Open Graph (OG) este un set de meta‑taguri plasate în secțiunea head a paginii HTML care furnizează platformelor sociale informații structurate despre o pagină: titlu, descriere, imagine, tip de conținut și altele. Scopul principal este să oferi platformelor sociale date clare pentru a genera o previzualizare coerentă atunci când cineva partajează URL‑ul.

Taguri esențiale și exemple

Mai jos sunt tagurile OG pe care le vei folosi cel mai frecvent. Include-le în head, înainte de închiderea tagului </head>, ideal în codul HTML generat server‑side.

Exemplu minim funcțional (înlocuiește valorile între ghilimele): <meta property="og:title" content="Titlul paginii"> <meta property="og:description" content="Descrierea scurtă"> <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png"> <meta property="og:url" content="https://exemplu.ro/pagina">

og:title

Titlul afișat în previzualizare. Păstrează-l clar, reprezentativ pentru pagină și diferit de titlul <title> atunci când vrei un mesaj adaptat social media.

og:description

Descrierea care însoțește titlul în feed. Folosește un rezumat scurt orientat spre click‑through; evită repetițiile cu meta description dacă vrei mesaje diferite pe social.

og:image (+ og:image:alt, og:image:width, og:image:height)

Imaginea principală pentru previzualizare. Indică și text alternativ (og:image:alt) pentru accesibilitate și poți furniza lățime/înălțime pentru încărcare mai rapidă. Exemple:

<meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png"> <meta property="og:image:alt" content="Descriere alternativă a imaginii"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630">

og:url, og:type, og:site_name, og:locale

Og:url ar trebui să reflecte versiunea canonică a paginii. Og:type (de exemplu article, website) semnalează natura conținutului; og:site_name afișează numele site‑ului; og:locale poate controla limba/regiunea vizibilă în unele platforme.

Implementare practică și bune practici

Reguli practice care reduc surprizele când linkul tău este partajat:

Plasează tagurile OG în head și generează‑le server‑side (SSR) pentru pagini dinamice; multe platforme sociale nu execută JavaScript complex pentru a obține meta‑taguri.Asigură‑te că og:url corespunde adresei canonice și urmărește redirecționările 301/302 pentru consistență.Furnizează og:image:alt pentru accesibilitate și pentru situațiile în care platforma afișează text alături de imagine.Folosește imagini găzduite pe domenii accesibile public (evită hostare pe subdomenii sau resurse care necesită autentificare).Dacă ai variante locale/lingvistice, generează og:locale și og:url distincte pentru fiecare versiune.Evita injectarea tagurilor OG exclusiv prin JavaScript după încărcare; platformele pot vedea codul HTML inițial, nu versiunea redată de client.

Verificare și depanare (instrumente și comenzi)

Folosește combinația de verificări server‑side și vizuale. Pașii de bază:

Verifică HTML‑ul „raw”: curl -L -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" https://exemplu.ro/pagina — această comandă urmează redirecționările și setează user‑agentul folosit frecvent de Facebook pentru a vedea ce cod HTML primește crawler‑ul. Reține că -I arată doar antete, iar -L urmează redirecții.Folosește Chrome DevTools → Elements pentru a inspecta head și a vedea dacă tagurile OG sunt prezente în DOM redat de server.Verifică antetele HTTP relevante cu curl -I https://exemplu.ro/pagina pentru x‑robots‑tag sau coduri de stare care pot bloca accesul.Folosește instrumentele oficiale ale platformelor: Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) pentru a forța re‑preluarea previzualizării de către Meta și a vedea erori de parsare.Testează partajarea într‑un mediu privat (mesaj direct) pe platforma țintă pentru a vedea efectiv previzualizarea finală, deoarece unele platforme aplică reguli proprii de trunchiere sau crop.Dacă imaginea nu apare, verifică permisiunile serverului, antetele CORS și codul de stare al imaginilor (curl -I https://yourdomain.com/wp-content/uploads/your-image.png).

Greșeli frecvente și cum le rezolvi

Lipsa tagurilor OG: platformele vor alege automat conținut din pagină, rezultând previzualizări inconsistente. Rezolvare: adaugă tagurile esențiale în head.Taguri generate doar prin JavaScript client: crawlerul social nu vede tagurile. Rezolvare: generează meta tagurile server‑side sau folosește prerendering/SSR.og:url diferit de canonical: poate duce la previzualizări care arată altă adresă. Rezolvare: aliniază og:url cu eticheta canonical și cu redirecționările.Imaginea este blocată de robots.txt sau de antete: platforma nu o poate prelua. Rezolvare: permite accesul la directorul imaginilor și verifică codurile de acces.Previzualizarea nu s‑a actualizat în cache: folosește Debugger‑ul platformei (de exemplu Facebook Sharing Debugger) pentru a solicita o re⁠inspectare.

Considerații legate de indexare, SEO și politici de platformă

Tagurile OG controlează doar cum arată o previzualizare pe platformele sociale; ele nu sunt un semnal direct de ranking pentru motoarele de căutare. Totuși, o previzualizare mai atrăgătoare poate crește rata de click‑through din social, ceea ce poate influența traficul către site. Dacă paginile care distribuie linkuri sunt blocate din index sau inaccesibile, valoarea acelui trafic potențial este redusă.

Respectă drepturile de autor pentru imaginile folosite în og:image și asigură‑te că ai permisiunile necesare pentru redistribuire.

Resurse utile

Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/ — folosește‑l pentru a vedea cum parsează Meta meta‑tagurile și pentru a forța re‑preluarea.Verifică html direct cu curl și Chrome DevTools pentru a confirma ce conținut este livrat crawler‑ilor sociali.

Dacă vrei să aprofundezi partea tehnică a site‑ului (crawlability, indexare, performanță), poți consulta resurse interne.

FAQ