TechnicalCollectible prompt
Open Graph share images generated for every page
Act as a front-end engineer with a strong design eye. Generate an Open Graph share image for every page of {{business_name}}'s site, built with {{tech_stack}}, in this style: {{visual_style}}, using {{brand_fonts}}. Before changing anything, check which share tags the pages send today, and whether they're in the HTML the server sends. Link previews don't run JavaScript, so tags added in the browser don't count.
Image template, 1200 by 630 pixels:
- The page title as the hero, 56 to 72px, at most 3 lines, with a clean ellipsis for longer titles
- A small section label (Blog, Pricing, Case study) and the logo or wordmark in a corner
- Key content inside the center 1000 by 520 area, since some apps crop
- Brand colors on a solid or subtly textured background, text contrast at least 4.5:1
- Variants for blog posts (author and date) and products (price only if it's on the page)
How:
- Generate at build time for static pages, or at the edge with caching for dynamic ones, using a library like Satori or the host's image helper
- Load the real font files, and keep each image under 300KB
- A branded default image for any page without its own
Tags on every page: og:title, og:description, og:image as an absolute URL, og:image:alt, og:url, og:type, and twitter:card set to summary_large_image. Titles and descriptions are page-specific, not the site name everywhere.
Avoid: screenshots of the page, stock photos with a title slapped on, purple-to-blue gradients, and text too small to read in a feed.
Finish with a few sample images, how to check them in each platform's link preview inspector, and the files changed.
Technicalnvoka.com/library/nvoka-open-graph-share-images-for-every-pageScan to open
Technical
Open Graph share images generated for every page
Make every page share with its own title image, generated from your content in your brand style.
Curated by Nvoka
Claude CodeCursorv0Lovable
Make it yours
Fill in the blanks and change any word. Only your copy changes, never the card.
Fill in the blanks
0 of 4 filledYour prompt
Act as a front-end engineer with a strong design eye. Generate an Open Graph share image for every page of {{business_name}}'s site, built with {{tech_stack}}, in this style: {{visual_style}}, using {{brand_fonts}}. Before changing anything, check which share tags the pages send today, and whether they're in the HTML the server sends. Link previews don't run JavaScript, so tags added in the browser don't count.
Image template, 1200 by 630 pixels:
- The page title as the hero, 56 to 72px, at most 3 lines, with a clean ellipsis for longer titles
- A small section label (Blog, Pricing, Case study) and the logo or wordmark in a corner
- Key content inside the center 1000 by 520 area, since some apps crop
- Brand colors on a solid or subtly textured background, text contrast at least 4.5:1
- Variants for blog posts (author and date) and products (price only if it's on the page)
How:
- Generate at build time for static pages, or at the edge with caching for dynamic ones, using a library like Satori or the host's image helper
- Load the real font files, and keep each image under 300KB
- A branded default image for any page without its own
Tags on every page: og:title, og:description, og:image as an absolute URL, og:image:alt, og:url, og:type, and twitter:card set to summary_large_image. Titles and descriptions are page-specific, not the site name everywhere.
Avoid: screenshots of the page, stock photos with a title slapped on, purple-to-blue gradients, and text too small to read in a feed.
Finish with a few sample images, how to check them in each platform's link preview inspector, and the files changed.