Generator de taguri meta Open Graph

Etichetele din care este construită o previzualizare de link

Când cineva lipește linkul tău într-o postare sau un mesaj, aplicația trimite un crawler la pagină și citește câteva etichete <meta> din <head>. Aceste etichete provin din protocolul Open Graph, care enumeră patru ca obligatorii:

• og:title: titlul așa cum ar trebui să apară în previzualizare.
• og:type: ce este pagina. website se potrivește majorității paginilor, iar article se potrivește unei postări de blog. Protocolul definește și tipuri precum profile, book, video.movie și music.song.
• og:image: URL-ul imaginii care reprezintă pagina.
• og:url: URL-ul canonic, pe care protocolul îl numește ID-ul permanent al obiectului.

Protocolul definește și etichete opționale, iar generatorul le scrie pe cele utile: og:description, og:site_name și detaliile imaginii og:image:width, og:image:height și og:image:alt. În privința textului alternativ, protocolul este direct: dacă o pagină specifică og:image, ar trebui să specifice og:image:alt, iar acel text descrie ce se află în imagine, nu este o legendă.

Ce adaugă X: twitter:card

X citește și Open Graph. Referința sa pentru markup-ul cardurilor (documentația pentru dezvoltatori a X, legată aici prin Internet Archive deoarece pagina originală acum redirecționează) enumeră soluția de rezervă pentru fiecare etichetă: twitter:title revine la og:title, twitter:description la og:description, twitter:image la og:image și twitter:image:alt la og:image:alt. Așa că singura etichetă care merită adăugată este twitter:card, care alege aspectul. Dacă o lași deoparte, aceeași referință spune că X poate reveni la un card summary mic, chiar dacă tu îl voiai pe cel mare:

• summary_large_image: o imagine pe toată lățimea deasupra titlului. Pagina X pentru cardul cu imagine mare spune că imaginile acceptă un raport de 2:1, cu dimensiuni minime de 300 × 157 și un maximum de 4096 × 4096 pixeli, sub 5MB, în JPG, PNG, WEBP sau GIF. SVG nu este acceptat.
• summary: un card mai mic cu o imagine pătrată. Pagina X pentru cardul summary spune că imaginea acceptă un raport de 1:1, de la 144 × 144 până la 4096 × 4096 pixeli, și este decupată la un pătrat pe toate platformele.

Aceeași referință listează cardurile app și player, care au nevoie de câmpuri suplimentare pentru App Store sau playerul video, așa că sunt omise aici. Documentează și limitele folosite de verificările de mai sus: 70 de caractere pentru un titlu, 200 pentru o descriere și 420 pentru textul alternativ.

Dimensiunile imaginilor indicate de platforme

• LinkedIn: ghidul său pentru a face un site partajabil cere og:title, og:image, og:description și og:url și indică o dimensiune maximă a fișierului de 5 MB, un minim de 1200 × 627 pixeli și un raport recomandat de 1.91:1.
• Meta: bunele sale practici de partajare recomandă folosirea imaginilor 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 anunțurilor de tip link cu imagine. Aceeași pagină cere og:image:width și og:image:height, astfel încât crawlerul să poată randa imaginea imediat, fără a trebui să o descarce și să o proceseze mai întâi.

O imagine de 1200 × 630 îndeplinește toate aceste cerințe: are cel puțin 1200 × 627 pentru LinkedIn, este mai lată de 1080 pentru Meta și are raportul 1.905:1, în limita de 5% față de 2:1 al X’ului.

Verific-o și reîmprospătează previzualizările vechi

Aplicațiile memorează în cache ceea ce au extras, așa că repararea tag-urilor nu repară o previzualizare care era deja stocată. Ambele rețele mari îți oferă un instrument pentru asta:

• Sharing Debugger de la Meta arată tag-urile pe care le extrage crawlerul său, cu orice erori sau avertismente, și declanșează o nouă extragere. Ghidul pentru webmasteri de la Meta îl descrie, iar pagina cu bune practici notează că altfel conținutul extras se actualizează într-o perioadă standard de 24 de ore.
• Post Inspector de la LinkedIn reîmprospătează un URL din cache. Pagina de ajutor de la LinkedIn notează că reîmprospătarea afectează doar postările noi: postările care includ deja URL-ul păstrează previzualizarea veche.

Ce nu face acest instrument

Nu îți preia pagina sau imaginea, deci nu poate vedea ce este de fapt live, iar previzualizarea de mai sus este o schiță text, nu o randare. Scrie tag-urile; site-ul tău tot trebuie să le servească în <head>-ul paginii, în codul HTML pe care îl primește crawlerul. Tag-urile adăugate mai târziu de JavaScript s-ar putea să nu fie văzute niciodată. Și nu scrie cardurile app sau player, nici proprietățile suplimentare pe care le definesc tipuri precum book sau video.movie.

Dacă preferi să nu scrii asta de mână

Hermoso înseamnă marketing pe pilot automat: cercetează reclamele care deja funcționează pe piața ta, creează reclame cu imagini și video în ton cu brandul, programează postările și rulează campanii plătite pe propriile tale conturi de reclame. Funcționează în aplicația web sau în Claude, ChatGPT și Cursor prin serverul MCP.

Instrumente gratuite: Constructor de linkuri UTM · Generator de coduri QR · Ghid de dimensiuni pentru rețele sociale

Întrebări frecvente

Ce taguri Open Graph sunt obligatorii?

Protocolul Open Graph listează patru proprietăți obligatorii: og:title, og:type, og:image și og:url. Tagurile og:description, og:site_name și lățimea, înălțimea și alt pentru og:image sunt opționale, dar merită adăugate.

Am nevoie de twitter:title și twitter:image dacă am taguri og:?

Nu. Referința de markup pentru carduri de la X spune că twitter:title, twitter:description, twitter:image și twitter:image:alt revin la echivalentele lor og:. Tagul care merită adăugat este twitter:card, care alege aranjamentul cardului.

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

LinkedIn cere cel puțin 1200 × 627 pixeli la 1.91:1 și sub 5 MB. Meta sugerează cel puțin 1080 pixeli lățime. Cardul cu imagine mare de la X suportă 2:1 de la 300 × 157 la 4096 × 4096. O imagine de 1200 × 630 se potrivește la toate trei.

De ce linkul meu încă arată o imagine veche după ce am schimbat tagurile?

Aplicația a reținut în cache scanarea veche. Trece URL-ul prin Sharing Debugger de la Meta sau Post Inspector de la LinkedIn ca să-l preia din nou. LinkedIn notează că postările care deja partajează URL-ul păstrează previzualizarea veche.

De ce ghilimelele și ampersandurile sunt modificate în rezultat?

Sunt escapate HTML ca tagul să rămână valid. Un titlu precum Tom & Jerry's "Sale" devine Tom & Jerry's "Sale" în atributul content, iar browserele și crawlerele îl citesc înapoi ca textul original.

Instrumentul îmi încarcă imaginea?

Nu. Nimic din ce scrii nu e trimis nicăieri, iar URL-ul imaginii nu e preluat niciodată, de aceea previzualizarea arată un substituent în loc de imagine.