Apprendre
Open Graph and X Cards: Build Reliable Link Previews
Social previews are generated from server-accessible metadata and cached aggressively. Correct tags need a crawlable URL, valid image, and a deliberate refresh workflow.
Lancez un audit DomainLens frais et utilisez le rapport comme liste de priorités.
The minimum useful preview
Many platforms can fall back from Open Graph values for an X card. Add platform-specific title, description, image, or creator/site fields only when they intentionally differ. More tags do not repair a blocked image or generic message.
<meta property="og:type" content="article">
<meta property="og:title" content="Canonical Tag Problems: A Debugging Guide">
<meta property="og:description" content="Trace conflicting canonical signals and validate the fix.">
<meta property="og:url" content="https://example.com/guides/canonical-problems">
<meta property="og:image" content="https://example.com/images/canonical-guide.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Canonical signals converging on one URL">
<meta name="twitter:card" content="summary_large_image">Align the preview with the canonical page
| Field | Rule |
|---|---|
| og:title | Clear page-specific promise; not necessarily identical to SEO title |
| og:description | Short context that makes sense outside the site |
| og:url | Absolute canonical URL without tracking parameters |
| og:image | Absolute HTTPS URL returning an actual supported image |
| og:image dimensions | Real intrinsic width/height |
| og:image:alt | Purpose/content of the image, not marketing keywords |
| og:type | Accurate broad type such as website or article |
Design the image for hostile crops and small screens
- Use a high-quality 1200×630 landscape source for broad compatibility, while accepting that platforms may crop.
- Keep essential text/logo away from edges and test at small rendered sizes.
- Do not place the article’s full headline in the image when the title already appears beside it.
- Serve a stable image URL with correct Content-Type, reasonable bytes, public access, and no bot-blocking challenge.
- Give each important page a relevant visual rather than one generic site banner.
Dynamic sites must render metadata on the server
Social crawlers may not execute your application JavaScript. Resolve CMS/entity data and emit preview tags in the first HTML response. For deleted or private entities, return the correct status instead of leaving the app shell’s default home-page preview.
- Ensure only one component/layout owns each property.
- Use production absolute URLs and escape user-authored values safely.
- Invalidate page and edge caches when metadata or images change.
- Test direct requests without cookies, sessions, or browser headers.
Debug a stale or missing preview
- 1Fetch the shared URL as an anonymous client and follow redirects to the canonical 200 page.
- 2Inspect raw source for one complete metadata set; do not rely only on the browser DOM.
- 3Fetch og:image directly and verify status, MIME type, dimensions, bytes, TLS, and robots/CDN access.
- 4Use the sharing platform’s debugger/validator to see parsed values and request a refresh when supported.
- 5If a cached image must change immediately, publish a versioned image URL and update og:image.
- 6Retest the real share composer because validators and production caches can differ.
Audit with DomainLens
DomainLens checks Open Graph and social-card metadata alongside canonical and response status. Use it to catch missing/duplicate values and inconsistent URLs, then validate the external image and each platform’s cache. Apply the image alt-text decision guide to og:image:alt rather than copying the headline.