1.8 KiB
1.8 KiB
OG and Social Preview Images
Required Meta Tags
Open Graph requires og:title, og:type, og:url, and og:image. Image dimensions and alternative text supplement those fields. Set the page type appropriately and keep the canonical page URL consistent.
<meta property="og:title" content="Product guide" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/guides/product" />
<meta property="og:image" content="https://example.com/images/product-guide.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Product dashboard showing the project overview" />
Dimensions above describe the example asset, not a universal platform requirement. Verify current format, crop, and size requirements for the intended consumer. Add platform-specific card metadata through the existing framework integration when needed; confirm its current contract with technical-research.
Delivery and Validation
- Put metadata in the delivered document head using the existing metadata API; avoid duplicate or conflicting tags.
- Use stable absolute HTTPS image URLs. Public previews must load without authentication and return the correct image content type. Keep private assets private.
- For recurring pages, reuse a template populated with page metadata. Prefer existing build-time generation or cache generated outputs; avoid adding a rendering service for a few static images.
- Check the actual response, metadata, crop, text readability, and target preview tool. Allow for consumer caching when validating updates. Social-preview metadata does not itself guarantee search ranking improvements.
Source: Open Graph protocol.