TechnicalCollectible prompt

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.

Claude CodeCursorv0

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

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.

Nvoka logo

Curated by Nvoka

Claude CodeCursorv0Lovable
Add to my library

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 filled

Your 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.
See all