Guide complet dei tag Open Graph - og:title, immagine e Twitter Cards (2026)

Quand quelqu'un colle tuo URL in Facebook, LinkedIn, Slack, Discord o iMessage, questi apps non devinent non a partir della pagina visible. Elles cherchent dei tag Open Graph in il head HTML : titre, description, image, type e URL canonique. Bien faites, la carte ressemble a un apercu designe. Absentes, vous avez una immagine al hasard, un titre coupe, o aucune carte. Questa guida parcourt il protocole, i tag qui comptent, la difference con il title HTML e la meta description, e i errori qui rompono l'apercu. Per del markup a coller, utilisez il Generateur di tag Open Graph - tutto tourne in il navigateur, rien non e envoye.

Que sono i tag Open Graph

Open Graph e un petit vocabulaire di meta tags. Ogni tag e una paire nom/valeur in il head del document. Le nom utilise il prefisso og:. Les crawler dei apps sociales fetchent l'URL publique, lisent questi tag e construisent una carte : immagine in haut o su il cote, titre, description, e souvent il nom del site. Le protocole e non presso Facebook. C'est devenu il format di partage par defaut su presque tutto il web.

• Facebook e Instagram lisent og:* in premier per i apercus di lien.
• LinkedIn, Slack, Discord, Telegram e iMessage reutilisent i memes balises.
• X (Twitter) puo retomber su Open Graph, mais twitter:* gagne quando i deux existent.
• Les motori utilisent ancora il title HTML e la meta description per la SERP. OG sert ai partages, non al link bleu su Google.

Une tag ressemble a meta property="og:title" content="Votre titre di partage". La property e la cle. Le content e la valore. Les caracteres speciaux della valore devono etre echapper per que il HTML reste valide. Le generateur s'occupe di cet echappement.

Les quatre tag dont ogni pagina a besoin

L'objet di base Facebook demande quatre properties. S'il in manque une, o si elle e vide, beaucoup di crawler inventent un fallback - o affichent una carte cassee.

• og:title - il titre della carte. Court e precis. Il puo differer del title HTML que vous voulez su Google.
• og:type - il type d'objet. website e il defaut per una home o una landing. articolo convient a un articolo di blog.
• og:image - una URL https absolue verso l'image. Les chemins relatifs (/images/og.png) falliscono : il crawler n'a non di contexte di page.
• og:url - l'URL canonique di cet oggetto. Elle deve matcher l'URL publique condivisa, con https e l'hote prefere (www o apex).

Ces quatre-la sono il minimum. Une carte con seulement un titre e senza immagine a l'air inachevee. Une carte con immagine e un titre vague gaspille il clic.

Extras recommandes

• og:description - una o deux phrases sotto il titre. Visez environ 70 a 200 caracteres. Questo non e forcement la stesso stringa que tuo meta description.
• og:site_name - tuo marque. LinkedIn e Slack l'affichent souvent sotto il titre per que la source soit claire.
• og:locale - lingua e regione con un underscore, par esempio en_US, es_ES o pt_BR. Utilisez-le quando la pagina non e in anglais.

Vous pourrez piu tard aggiungere dei champs riches del type (article:author, product:price:amount). Commencez par il set di base. Un oggetto di base complet bat un oggetto product a meta rempli.

Valeurs og:type que vous utiliserez vraiment

Le type dit al crawler come traiter l'URL. Un mauvais type rompe rarement la carte, mais il change quels extras ont del sens e come certaines apps groupent l'objet.

• website - homes, index di categorie e landings genericas.
• article - billets, news e guides how-to. Associez una URL datee e una immagine unique.
• product - una fiche produit o una pagina di prix. Titre clair e immagine hero.
• profile - pagina di personne o d'auteur.

En cas di doute, website e sur. N'inventez non di types custom. Les crawler ignorent i noms inconnus.

Regles og:image

L'image e la premiere chose vue. Une immagine faible o absente e la raison la piu courante d'un partage quelconque.

• Utilisez 1200 x 630 pixels per una carte paysage. Questo ratio (environ 1.91:1) e celui que Facebook e LinkedIn attendent.
• Restez au-dessus di 600 x 315 per que il crawler non bascule non verso una miniature minuscule.
• L'URL deve etre absolue e https. Hebergez il file su un CDN pubblico o tuo origine. Un mur di login o un blocage robots.txt cache l'image.
• Gardez il file raisonnable (bien sotto 8 Mo). PNG o JPEG conviennent. Evitez WebP si d'anciens caches Facebook devono ancora il fetch.
• Placez il sujet al centre. Certaines apps recadrent i cotes su mobile.

Twitter Cards vs Open Graph

X puo lire og:title, og:description e og:image. Il a anche ses propres tag twitter:*. Si i deux sono presentes, twitter:* gagne su X e og:* gagne partout ailleurs. C'est per cela que la plupart dei pagine emettent i deux.

• twitter:card - summary_large_image quando vous avez una immagine large, o summary sinon.
• twitter:title, twitter:description, twitter:image - in general i memes valori que i og:* correspondants.
• Vous n'avez non besoin d'un handle Twitter per una carte large-image basique.

Si vous non publiez que dell'Open Graph, X affichera souvent quando stesso una carte. Si vous non publiez que dei tags Twitter, Facebook e LinkedIn n'afficheront rien. Open Graph e la base condivisa. Les tags Twitter sono la couche extra per X.

OG vs title HTML vs meta description

Trois chaines, trois jobs. Les melanger, e avoir un bon extrait SERP e una carte Slack faible - o l'inverse.

• Title HTML - il titre del risultato di ricerca e l'onglet del navigateur. Ciblez ici i requetes transactionnelles o informatives.
• Meta description - l'extrait SERP sotto questo titre. Google puo il reecrire.
• og:title e og:description - la carte sociale. Ecrivez per quelqu'un qui a gia il lien, non per un mot-cle.

Une pagina d'outil puo garder un title HTML transactionnel (Generateur di tag Open Graph gratuit) e un og:title piu clair (Generer dei tag Open Graph per cet article). Un billet puo faire l'inverse. Verifiez l'extrait SERP con il Verificateur di meta-description e apercu SERP. Verifiez la carte di partage con i tag OG.

Exemple concret

Un articolo su Open Graph lui-meme pourrait utilizzare questi valori. Une fois collees in il head dell'URL publique, un crawler devrait voir un oggetto complet.

• og:title - Les tag Open Graph expliquees
• og:description - Questo que font og:title, og:image, og:url e og:type, piu Twitter Cards e dimensione d'image.
• og:type - article
• og:url - https://www.toolsminify.com/blog/open-graph-tags-complete-guide
• og:image - un PNG o JPEG 1200 x 630 in https
• og:site_name - ToolsMinify
• og:locale - fr_FR
• twitter:card - summary_large_image, con il stesso titre, description e image

Guillemets e esperluettes in un titre devono devenir " e & in l'attribut content. Si vous ecrivez i tag a la main e que la pagina non parse plus, cet echappement e il premier endroit a regarder.

Erreurs courantes

• og:image o og:url relatives. Les deux devono etre absolues.
• og:url qui non matche non il link partage (http vs https, apex vs www, prefisso di locale manquant).
• Une immagine sotto 200 x 200, o un recadrage 1:1 que LinkedIn met ensuite in boite.
• Balises in il body al lieu del head. Les crawler regardent il head.
• Bloquer l'image o la pagina in robots.txt. Les crawler sociaux devono anche i fetch.
• Cache Facebook perime. Apres un changement, rescrapez l'URL in il Sharing Debugger. Les altri apps ont loro propre cache.
• og:title in double e in conflit. La premiere gagne in general, e questo non sera non celle que vous voulez.
• Mettre dei secrets o un brouillon inedit in og:description. Les tag sono publiques dei que l'URL l'est.

Domande frequenti

Les tag Open Graph sont-elles un facteur di ranking Google ?

Pas directement. Google utilise il title HTML, la meta description e il contenuto per la recherche. Les tag OG aident a partager la pagina con una carte propre. De meilleurs partages possono amener dei link e dei visites. C'est un effet indirect, non un interrupteur di ranking.

Quelles tag Open Graph sono requises ?

Commencez par og:title, og:type, og:image e og:url. Ajoutez og:description, og:site_name e og:locale quando vous i avez. Des tag vuoti sono pires que dei tag absentes.

Quelle dimensione per og:image ?

1200 x 630 pixels e il format paysage habituel. Restez au-dessus di 600 x 315. Utilisez una URL https absolue. Centrez il sujet per que il recadrage mobile non coupe non il testo dell'image.

Faut-il dei Twitter Cards si j'ai gia Open Graph ?

X puo lire i tag OG, mais twitter:card piu titre, description e immagine vous donnent un controle explicite su questo reseau. Facebook e LinkedIn ignorent twitter:* e ont sempre besoin di og:*. Emettez i deux quando vous pouvez.

Pourquoi Facebook affiche-t-il ancora l'ancienne immagine ?

Facebook met in cache il premier scrape. Changez l'URL dell'image (ou attendez), puis passez l'URL in il Sharing Debugger Facebook per demander un nouveau scrape. LinkedIn e Slack ont dei caches similaires. Changer seulement i byte del file a la stesso URL non basta souvent pas.

Ou incollare il HTML ?

Dans il head del document HTML public, o in l'API di metadata di tuo framework per qu'il rende in il head. Les tag devono etre visibles su l'URL exacte definie comme og:url. Per il pas-a-pas del generateur, voir Comment utilizzare il Generatore di tag Open Graph.

Construire i tag in il navigateur

Remplissez titre, description, URL e image, puis copiez il HTML in direct. Rien non e envoye :

• Generateur di tag Open Graph - construire og:* e dei Twitter Cards opzionaleles, con apercu social.
• Comment utilizzare il Generatore di tag Open Graph - guide non a non del stesso outil.
• Verificateur di meta-description e apercu SERP - verifier l'extrait di recherche, non la carte di partage.
• Generatore di slug - slugs d'URL propres per la pagina que vous allez partager.
• Tous i strumenti SEO - l'index complet della categorie.