27 lines
1.8 KiB
Markdown
27 lines
1.8 KiB
Markdown
# 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.
|
|
|
|
```html
|
|
<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](https://ogp.me/).
|