Aprender
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.
Ejecuta una auditoría nueva en DomainLens y usa el informe como lista de prioridades.
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.