Nouveau
Les pubs vous déplaisent ? Aller Sans pub Auj.
Balises Open Graph Stop Your Links Looking Terrible on Slack
Mis à jour le
You spent weeks building the app. The link preview in Slack shows "Untitled" and a broken icon. That is an Open Graph problem. Here is how to fix it in 10 minutes.
ANNONCE · Supprimer ?
You spent three weeks building the app. The link preview in Slack shows “Untitled” and a thumbnail of your footer logo. This is an Open Graph problem and it takes about 10 minutes to fix.
What are Open Graph tags?
Open Graph (og:) is a protocol Facebook introduced in 2010 that every major platform now uses to generate link previews. When Slack, Twitter, LinkedIn, or iMessage unfurls your URL, they fetch the page, look for <meta> tags with the og: prefix, and use those to build the card.
No tags → they guess. They usually guess wrong.
The tags that actually matter
| Tag | Obligatoire ? | What it does |
|---|---|---|
og:title | Oui | The headline shown in the preview card |
og:description | Oui | The subtitle / summary text (keep under 200 chars) |
og:image | Oui | The preview image. Must be an absolute URL. |
og:url | Oui | The canonical URL for the page |
og:type | Recommended | Utilisez website for most pages, article for posts |
twitter:card | Recommended | Controls the Twitter/X card size. Use summary_large_image. |
twitter:title | Facultatif | Falls back to og:title on most clients |
twitter:description | Facultatif | Falls back to og:description |
twitter:image | Facultatif | Falls back to og:image |
The one that trips people up most often is og:image. It must be an absolute URL (no relative paths), ideally 1200×630px, and under 8MB. Slack in particular will silently skip images that don’t meet its size requirements. Aim for at least 600px wide or your image just won’t appear.
A complete set of OG tags
Drop this in the <head> of your page. Replace the placeholder values:
<!-- Primary Open Graph tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A clear, specific description under 200 characters. No fluff." />
<meta property="og:image" content="https://yourdomain.com/images/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />
<!-- Twitter/X card (falls back to og: tags if omitted) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A clear, specific description under 200 characters." />
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.png" />For a blog post or article, change og:type à article and add the author and publish date:
<meta property="og:type" content="article" />
<meta property="article:author" content="https://yourdomain.com/about" />
<meta property="article:published_time" content="2026-04-25T00:00:00Z" />How to verify your tags without deploying
The fastest way: paste your URL into IO Tools Open Graph Checker. It fetches the page, parses the tags, and shows you exactly what Slack (or any other platform) will see — including a preview of how the card will render. No login needed, no extension to install.
If you want to check a localhost URL or a staging environment that isn’t publicly accessible, the checker won’t be able to reach it. In that case, view source on your page and manually verify the tags are present in the <head>. Once deployed, run the checker again to confirm the live version matches.
Platform-specific validators (for when you need to force a cache refresh):
- Facebook/Meta: developers.facebook.com/tools/debug — also clears Facebook’s cache of your OG tags
- LinkedIn: linkedin.com/post-inspector — useful when your preview is stale after an update
- Twitter/X: cards-dev.twitter.com/validator — slower to update but good for confirming the card format
Slack caches aggressively. If you fix your tags and the old preview keeps showing up, you can force a re-fetch by adding a query string (e.g. ?v=2) to the URL before sharing — not ideal for production links, but fine for QA.
Generating the tags
If you want to generate a full set of meta tags interactively rather than hand-coding them, the IO Tools HTML Meta Tag Generator covers OG tags, Twitter cards, and standard meta tags in one shot. Copy the output into your <head>.
Common mistakes worth avoiding
- Relative image URLs.
/images/og.pngdoes not work. Every platform fetches OG tags from an external server that has no context for your base URL. Always use the fullhttps://path. - Using the same image for everything. A 300×300 avatar as your OG image will technically show up — as a tiny, ugly thumbnail. Make a proper 1200×630 image for each key page.
- Not setting
og:url. Without it, some platforms use the URL they fetched from, others make up their own canonical. Set it explicitly. - Forgetting to invalidate caches. Most platforms cache OG tags for 24–72 hours. If you update tags on a live page, use the platform validators above to force a fresh fetch.
- Mixing
propertyetnameattributes. OG tags useproperty=. Twitter tags usename=. Mixing them up causes some parsers to ignore the tag entirely.
Open Graph tags are one of those things that take five minutes to add and look embarrassing when missing. Fix them once, verify with the Vérificateur Open Graph, and move on.
Envie d'une expérience sans pub ?
Passez à la version sans pub
Installez nos extensions
Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide
恵 Le Tableau de Bord Est Arrivé !
Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !
ANNONCE · Supprimer ?
Outils essentiels
Tout voirANNONCE · Supprimer ?
Nouveautés
Tout voirMise à jour: Notre dernier outil was added on Mai 15, 2026
Impliquez-vous
Aidez-nous à continuer à fournir des outils gratuits et précieux
ANNONCE · Supprimer ?