refactor(image): retain focused SEO and performance guidance

shared/skills/image/references/og-social-preview-images.md

@@ -1,23 +1,26 @@
-# OG & Social Preview Images
-
-The image that appears when your URL is shared on social media, Slack, Discord, etc.
+# 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:image" content="https://yoursite.com/og/page-name.jpg" />
+<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 name="twitter:card" content="summary_large_image" />
-<meta name="twitter:image" content="https://yoursite.com/og/page-name.jpg" />
+<meta property="og:image:alt" content="Product dashboard showing the project overview" />
 ```
 
-## Dynamic OG Images
+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`.
 
-Generate OG images programmatically for pages with dynamic content (blog posts, user profiles):
+## Delivery and Validation
 
-- **Vercel OG** (`@vercel/og`) — generates images at the edge using JSX
-- **Satori** — converts HTML/CSS to SVG (powers Vercel OG)
-- **Cloudinary** — URL-based text overlay on template images
+- 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.
 
-**Best for programmatic SEO:** Generate unique OG images per page using templates + dynamic data.
+Source: [Open Graph protocol](https://ogp.me/).