Open Graph în WordPress: imagine și titlu la distribuire

Ai publicat un ghid cu o ilustrație clară, dar în conversație apare logo-ul vechi. Pe pagina articolului totul pare corect. Problema poate fi în alt strat: imaginea socială este diferită de imaginea principală, adresa fișierului nu este accesibilă anonim sau platforma folosește încă o versiune memorată. Tutorialul propune un diagnostic pe probe, fără eliminarea generală a cache-ului.

Materialul tratează distribuirea socială, nu rescrierea titlului în Google. Pentru acel proces există ghidul despre meta title. Nici Open Graph, nici o imagine bine aleasă nu garantează vizibilitate organică. Obiectivul de aici este ca un link public să fie descris coerent și lizibil atunci când este distribuit.

1. Separă imaginea editorială de imaginea socială

Imaginea principală poate fi un SVG detaliat, potrivit pentru explicații în articol. Cardul social are alt context: este mic, poate fi decupat și trebuie să comunice subiectul rapid. Noi propunem un fișier raster separat, cu titlu scurt, forme simple și fără text important la margine. Aceasta este o alegere editorială, nu o dimensiune universală impusă tuturor platformelor.

Pentru seria noastră de lucru folosim o compoziție de 1200 × 630 pixeli. Păstrăm o zonă liberă în jurul textului și verificăm o previzualizare redusă înainte de publicare. Nu micșorăm mecanic diagrama completă a articolului; legenda ei poate deveni ilizibilă. Designul materialelor sociale are nevoie de această verificare separată.

Numește fișierele după subiect și versiune, fără date personale. De exemplu, o actualizare majoră poate folosi un nume nou, în loc să suprascrie un fișier distribuit anterior. Păstrează legătura dintre articol și imagine într-un registru, ca editorul să nu selecteze accidental fotografia unui alt ghid.

2. Citește setul minim de metadate

Specificația Open Graph definește patru proprietăți de bază: og:title, og:type, og:image și og:url. Pentru imagine pot exista proprietăți suplimentare, inclusiv tip, dimensiuni și descriere alternativă. ^[1] Aceste valori apar în documentul HTML, nu în numele fișierului încărcat în Media.

Exemplul următor este demonstrativ. Adresa folosește domeniul rezervat example.com și trebuie înlocuită într-o implementare reală. Nu adăuga manual aceste taguri peste un plugin care le generează deja.

<meta property="og:title" content="Ghid de diagnostic pentru cache WordPress">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/ghid-cache/">
<meta property="og:image" content="https://example.com/media/ghid-cache-social-v2.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Traseul cererii între browser, CDN și WordPress">

Citește valorile ca un ansamblu. Un titlu de articol cu URL-ul homepage-ului descrie incoerent destinația. O imagine corectă asociată altei pagini poate produce un card înșelător. Web Inspector poate sprijini examinarea răspunsului; păstrează și sursa pentru comparația după remediere.

3. Alege un singur responsabil pentru generare

Pe un site WordPress, tema, pluginul SEO și un modul social pot încerca să emită aceleași proprietăți. Yoast recomandă verificarea dublurilor și păstrarea unei singure surse pentru Open Graph. Activarea funcției se găsește în setările funcțiilor site-ului, în zona de distribuire socială. ^[2]

Înainte să dezactivezi ceva, identifică responsabilul pentru fiecare tag. Caută în sursă toate aparițiile og:image și verifică blocul din jurul lor. Nu presupune că prima valoare din editor este cea folosită de crawler. Două imagini pot fi intenționate într-o anumită configurație; contradicția dintre proprietăți trebuie analizată, nu doar numărată.

În procedura noastră, o singură componentă construiește setul principal. Alte module îi furnizează date prin integrarea documentată. Nu eliminăm întregul plugin de securitate sau cache ca să dispară un tag redundant. O corecție de integrare custom trebuie să fie limitată la ieșirea problematică și testată pe toate template-urile afectate.

4. Configurează imaginea și titlul pe obiectul corect

Yoast permite personalizarea imaginii, titlului și descrierii sociale pentru un articol sau o pagină în zona dedicată din editor; există și setări pentru alte tipuri de obiecte. ^[3] Verifică întotdeauna ce editezi: articolul, categoria și homepage-ul nu sunt același obiect, chiar dacă afișează temporar același conținut.

Într-un exemplu ipotetic, categoria afișează ultimul ghid publicat, iar editorul schimbă imaginea ghidului pentru a repara cardul categoriei. Intervenția nu vizează sursa corectă. Deschide URL-ul distribuit, identifică obiectul WordPress și modifică numai setarea lui. Apoi verifică imaginea pe articol, ca să nu introduci o regresie secundară.

Păstrează titlul social fidel paginii. Poate fi mai compact decât H1, dar nu trebuie să promită un calculator sau un rezultat care nu există. Redactarea promisiunii paginii și descrierea pentru căutare sunt complementare; nu copia automat același text în orice câmp doar pentru a le completa.

5. Verifică fișierul ca vizitator anonim

Deschide adresa completă din og:image într-o fereastră nelogată. Imaginea trebuie să fie realmente accesibilă, nu doar vizibilă pentru administrator. Verifică răspunsul HTTP, tipul resursei și eventualele redirecționări. O pagină HTML cu un mesaj de autentificare nu devine imagine numai pentru că URL-ul se termină în .png.

Controlează dacă o regulă anti-hotlink, o provocare de securitate sau o restricție pentru directoare afectează accesul. Nu dezactiva global protecțiile ca prim pas. Creează o probă pe URL-ul exact și cere identificarea regulii care intervine. Diagnosticul unui răspuns 403 explică separarea autentificării de blocarea prin firewall.

Verifică și fișierul real: dimensiuni, lizibilitate, orientare și absența transparenței nedorite. Un logo alb pe fundal transparent poate deveni aproape invizibil într-un card deschis. Media Studio și ghidul de redimensionare ajută pregătirea imaginii, dar acceptarea finală trebuie făcută și la dimensiunea mică de afișare.

6. Urmărește cele trei copii de cache

Poți avea un HTML vechi în cache-ul paginii, o imagine veche în CDN și o previzualizare veche la platforma socială. Modificarea unei singure copii nu le actualizează obligatoriu pe celelalte. Yoast descrie verificarea cache-ului site-ului și folosirea instrumentelor de depanare socială pentru a solicita o preluare nouă. ^[4]

Lucrează în ordine. Mai întâi confirmă că sursa anonimă conține noul URL al imaginii. Apoi deschide acel fișier și verifică dacă este versiunea aprobată. Abia după aceste două probe folosește instrumentul platformei pentru reîmprospătarea cardului. Nu solicita repetat recitirea aceleiași versiuni greșite.

Pentru WordPress și Cloudflare, diagnosticul HIT, MISS și BYPASS rămâne util. Un HIT nu dovedește că metadatele sunt actuale; arată proveniența răspunsului. Nu introduce no-store pentru întregul blog ca să repari o singură previzualizare. Invalidează țintit resursele și verifică noua copie.

7. Tratează parametrii și redirecționările cu grijă

Același articol poate fi distribuit cu parametri de campanie. În fișa noastră de test, verificăm atât adresa curată, cât și una cu UTM. Ambele trebuie să descrie același conținut public, iar politica URL-ului de referință trebuie să fie coerentă. Nu înlocuim automat og:url cu întreaga cerere, inclusiv tokenuri sau parametri personali.

Nu considera canonicalul și og:url interschimbabile. Ele aparțin unor mecanisme diferite, chiar când folosesc aceeași adresă. Alegerea URL-ului canonic trebuie decisă separat, iar metadatele sociale trebuie să reflecte destinația aprobată. O regulă de normalizare făcută fără context poate afecta pagini multilingve sau produse distincte.

La redirecționări, verifică destinația finală și metadatele ei. Un link vechi către un articol mutat nu ar trebui să ajungă la homepage doar ca să producă un card frumos. Redirecționările permanente trebuie să păstreze relevanța traseului. Notează URL-ul inițial și final în raportul de diagnostic.

8. Construiește un set de probe pentru mobile și desktop

Alege câteva situații dificile: titlu lung, diacritice, imagine fără text, categorie, produs variabil și articol fără imagine personalizată. Verifică în ce fel arată fallbackul. Nu lăsa o eroare de selecție să trimită peste tot fotografia unui produs retras din ofertă.

Pentru fiecare probă, notează ce trebuie să rămână vizibil dacă imaginea este decupată. În compoziția noastră, titlul stă în zona centrală, iar elementele decorative pot dispărea fără pierderea sensului. O previzualizare locală nu reproduce toate platformele; folosește-o ca filtru inițial, apoi verifică rezultatul în instrumentul platformei unde distribui.

Include accesibilitatea în verificare. Textul important din imagine trebuie să existe și în titlul sau descrierea linkului, nu numai în pixeli. Proprietatea og:image:alt descrie imaginea, conform protocolului. ^[1] SEO pentru imagini tratează contextul editorial și alt textul în pagină, fără să confunde toate aceste câmpuri.

9. Automatizează numai reguli pe care le poți verifica

La un blog cu multe articole, o regulă de fallback poate economisi timp. De exemplu, imaginea specifică are prioritate, apoi urmează o imagine a categoriei, apoi una neutră a site-ului. Aceasta este o propunere de arhitectură, nu comportamentul implicit garantat al oricărui plugin.

Documentează prioritatea și excepțiile. Când un articol trece în altă categorie, ce imagine ar trebui să primească? Când fotografia socială este ștearsă din Media, există o valoare validă alternativă? Testează aceste schimbări pe staging. Nu aștepta distribuirea publică pentru a descoperi că adresa salvată nu mai există.

Păstrează generarea pe server și evită rescrierea exclusiv prin JavaScript a tagurilor principale. Nu adăuga un script public pentru fiecare articol atunci când datele sunt disponibile la randare. Controlul resurselor frontend începe cu evitarea codului inutil, nu cu amânarea lui după ce a fost adăugat fără motiv.

Atelier: o imagine veche care persistă

Presupunem că un editor înlocuiește fișierul social păstrând același URL. Sursa articolului este neschimbată, iar cardul rămâne vechi. Prima probă este fișierul anonim. Dacă acesta arată încă versiunea veche, investighezi cache-ul resursei sau faptul că înlocuirea nu s-a aplicat. Nu acuzi imediat platforma socială.

Dacă imaginea anonimă este nouă, dar instrumentul social arată copia anterioară, păstrezi dovada preluării și soliciți reîmprospătarea acolo. Pentru actualizări editoriale importante, un nume de fișier nou poate simplifica identificarea versiunii. Nu modifica slugul articolului doar pentru a schimba fotografia cardului; ai crea o problemă de URL pentru o problemă de resursă.

După remediere, verifică un link nou și un link distribuit anterior. Unele interfețe pot păstra separat carduri deja create. Raportul trebuie să precizeze ce ai observat, nu să promită că toate conversațiile istorice vor fi redesenate. Predă editorului pașii și URL-urile, astfel încât incidentul să fie reproductibil.

Fișa de acceptanță pentru redactor și dezvoltator

Redactorul verifică promisiunea și compoziția; dezvoltatorul verifică livrarea. Păstrează aceste responsabilități separate. Un fișier poate trece testul tehnic și totuși să aibă text prea mic. Invers, o imagine excelentă poate fi inutilizabilă dacă necesită autentificare. În fișa de lucru, pune un verdict pentru fiecare dimensiune, nu o singură bifă generală.

Salvează URL-ul articolului, URL-ul imaginii, dimensiunile, versiunea și ora verificării. Adaugă furnizorul tagurilor și platforma pe care a fost testat cardul. Pentru articolele programate, verificarea publică se face după publicare; previzualizarea privată a editorului nu este un substitut pentru accesul crawlerului social.

Un test tehnic poate începe printr-o cerere GET simplă, fără cookie de administrator. Exemplul nu modifică site-ul și folosește o adresă demonstrativă. Nu lipi tokenuri private în terminale partajate sau în rapoarte trimise altor persoane.

curl --silent --show-error --location \
  --dump-header antete.txt \
  --output pagina.html \
  https://example.com/ghid-cache/

Citește documentul salvat și caută proprietățile relevante. Dacă răspunsul este o provocare de securitate, nu pretinde că ai verificat metadatele articolului. Dacă există un redirect, păstrează și destinația finală. Pentru imagine, repetă proba pe URL-ul din document și verifică tipul fișierului. Nu este nevoie de zeci de cereri pe secundă pentru acest diagnostic.

La final, testează o modificare mică și revino la valoarea aprobată. Astfel verifici că următorul editor poate actualiza cardul, nu doar că un card existent arată bine. Predă procedura împreună cu limitele observate. Pentru un site cu mai multe limbi, include câte o probă pe limbă și nu presupune că aceeași imagine cu text românesc este potrivită pentru toate versiunile.

Întrebări frecvente despre Open Graph

Trebuie să folosesc aceeași imagine peste tot?

Nu în fluxul propus aici. Imaginea editorială explică articolul, iar cea socială îl identifică într-un spațiu redus. Păstrează același subiect și o relație vizuală recognoscibilă. Nu folosi o fotografie atractivă fără legătură cu materialul doar pentru clickuri.

Pot folosi numai SVG ca imagine socială?

Pentru compatibilitate, noi pregătim și o variantă raster separată și verificăm platforma țintă. Nu presupunem că orice consumator al metadatelor acceptă toate formatele. SVG-ul rămâne util în articol, unde controlăm randarea și dimensiunile.

De ce Google arată alt titlu decât cardul social?

Sunt contexte diferite, cu mecanisme distincte. Verifică title, H1 și Open Graph separat înainte să modifici setările. Nu încerca să repari un rezultat Google schimbând numai fotografia socială sau să repari un card schimbând schema întregului site.

Cum știu că am terminat remedierea?

Ai o sursă anonimă coerentă, un fișier accesibil și lizibil, o preluare verificată pe platforma vizată și o procedură de actualizare. Păstrează limitele testului: un singur card confirmat nu certifică toate platformele, dispozitivele și distribuțiile istorice.

Ce fac pentru o pagină care nu este publică?

Nu încerca să îi creezi o previzualizare publică prin expunerea temporară a conținutului privat. Distribuie prin mecanismul autorizat al aplicației și evită includerea tokenurilor de acces în metadate sau în rapoarte. Un card generic poate fi alegerea potrivită pentru o resursă protejată. Înainte de test, clarifică dacă pagina trebuie într-adevăr descoperită anonim; aspectul unei distribuiri nu justifică eliminarea controalelor de acces. Pentru un articol programat, așteaptă publicarea și verifică apoi URL-ul public, fără să folosești linkul privat de previzualizare al editorului.

Surse și documentație

Scenariile, calculele și fișele de verificare sunt exemple editoriale KEPA, nu rezultate ale clienților. Documentație consultată la 24 septembrie 2026. Interfețele și opțiunile pot varia între versiuni și planuri.

1. Specificația Open Graph
2. Yoast: activarea metadatelor Open Graph
3. Yoast: personalizarea metadatelor sociale
4. Yoast: diagnosticarea imaginilor sociale