Carduri sociale: etichetele Open Graph și imaginea

Ce este o previzualizare de link

Când cineva partajează un link într-o rețea socială sau într-o aplicație de mesagerie, platforma citește pagina și construiește un mic card: o imagine, un titlu, un text scurt și domeniul. Cele mai multe platforme citesc pentru asta etichetele protocolului Open Graph, care sunt elemente meta din head-ul paginii. X, fostul Twitter, citește și propriile etichete, care încep cu twitter:. Fiecare platformă își desenează singură cardul și decide cât text arată. Tu decizi ce le spune pagina platformelor.

Etichetele de bază

Protocolul Open Graph, publicat la ogp.me, numește patru proprietăți pe care ar trebui să le aibă fiecare pagină: og:title, og:type, og:image și og:url. og:url este adresa canonică a paginii. Opționale, dar utile, sunt og:description, og:site_name și og:locale, limba și regiunea etichetelor, de exemplu de_DE.

<meta property="og:title" content="Reduceri de vară: toate cănile la preț redus">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Șase căni albastre pe o masă de lemn">
<meta property="og:description" content="Până la 31 august: prețuri mai mici la căni și farfurii.">
<meta property="og:site_name" content="Magazinul Example">
<meta name="twitter:card" content="summary_large_image">

Scrie fiecare adresă complet, cu https://. Protocolul definește o adresă ca un URL care folosește http:// sau https://, așa că o cale precum /img/sale.jpg nu este o valoare validă. og:url ar trebui să corespundă linkului canonic al paginii. Dacă o etichetă apare de două ori cu valori diferite, protocolul îi dă prioritate primei.

Imaginea de partajare

Cele mai multe previzualizări arată imaginea lată. O imagine cu raportul de aproximativ 1,91 : 1, de exemplu 1200 × 630 de pixeli, este recomandată în mod obișnuit și încape în cele mai multe carduri fără decupare. Imaginile pătrate sunt adesea decupate sus și jos, așa că păstrează conținutul important la mijloc. Pentru Google Discover, Google recomandă imagini de cel puțin 1200 de pixeli lățime, o previzualizare mare permisă cu setarea max-image-preview:large și o imagine setată cu og:image sau cu marcare schema.org. Google recomandă și să eviți imaginile generice, cum ar fi logoul site-ului.

og:image:width și og:image:height indică mărimea imaginii în pixeli. og:image:alt descrie ce se află în imagine, nu este o legendă. Protocolul spune că o pagină cu og:image ar trebui să specifice și og:image:alt.

Titlul și descrierea

og:title poate fi diferit de elementul title. Nu are nevoie de numele site-ului, pentru că acesta stă în og:site_name. Platformele taie textele lungi la propria lungime, așa că pune cuvintele importante la început. Etichetele Open Graph contează și dincolo de rețelele sociale. Google numește conținutul din og:title ca una dintre sursele pentru linkurile de titlu din rezultatele căutării, ia în considerare og:site_name pentru numele site-ului și menționează og:image ca una dintre căile de a specifica o imagine preferată.

Etichete pentru X

Eticheta twitter:card alege tipul de card. Valoarea summary_large_image cere o imagine mare și lată, summary una mică. Dacă pagina ta are deja etichete Open Graph, adesea e suficient să adaugi twitter:card. Paginile pentru dezvoltatori ale X nu au putut fi citite pentru acest ghid, așa că verifică acolo regulile actuale înainte să te bazezi pe un detaliu.

Un card pentru fiecare pagină

Multe site-uri setează același titlu și aceeași imagine pentru fiecare pagină, adesea prin temă. Atunci fiecare link partajat arată la fel. Dă fiecărei pagini importante propriile og:title, og:description și og:image: unei pagini de produs fotografia produsului, unui articol imaginea lui principală. Pentru og:type, protocolul folosește, printre alte tipuri, website pentru o pagină generală și article pentru un articol. Un sistem de magazin sau de conținut poate completa aceste etichete automat din titlul, rezumatul și imaginea principală a fiecărei pagini. După o schimbare, verifică o pagină din fiecare șablon.

De ce nu se schimbă previzualizarea

Multe platforme stochează un card după ce l-au construit. Dacă schimbi mai târziu imaginea sau titlul, oamenii pot vedea încă o vreme cardul vechi. Un nume de fișier nou pentru o imagine nouă ajută, pentru că platforma vede atunci o adresă nouă. Unele platforme oferă un instrument care preia din nou pagina.

Înainte să partajezi o pagină

• Există og:title, og:type, og:image și og:url și este og:url adresa canonică?
• Este fiecare adresă completă, cu https://?
• Este imaginea suficient de lată, se încarcă și este conținutul important la mijloc?
• Sunt setate og:image:alt, og:image:width și og:image:height?
• Există o etichetă twitter:card și este titlul suficient de scurt?

Lucrează cu Do4U

Verificarea cardului social arată cum apare o pagină când linkul ei este partajat și verifică etichetele din spatele previzualizării. Introduci o adresă. Do4U citește pagina și începutul imaginii ei de partajare. Codul adună etichetele Open Graph, etichetele de card Twitter/X și variantele de rezervă, adică titlul, meta descrierea și prima imagine, precum și linkul canonic și limba. Citește din fișier formatul și mărimea reale ale imaginii și le compară cu etichetele. Primești o previzualizare neutră, un tabel cu toate etichetele, constatări cu o justificare scurtă și etichete propuse pe care le poți copia. Etichetele pe care o pagină le setează doar cu JavaScript nu sunt văzute. Nu se folosește IA, iar verificarea este gratuită, cu o limită zilnică.

Do4U găsește indicii, tu verifici și decizi. Previzualizarea este o schiță neutră: cum arată o platformă linkul decide platforma.