--- canonical: 'https://htmlcsstoimage.com/features/og-images' title: 'Dynamic Open Graph Images for Every Page | HTML/CSS to Image' description: 'Generate and cache a fresh Open Graph image for every URL. Read meta tags from each page, capture a page element or fill an HCTI template, and tailor images to link preview sizes.' --- # Give every page a link preview that stays up to date Add one stable og:image URL pattern. HCTI reads each page's meta tags, captures part of the page or fills a template, and reuses the image until the screenshot or template inputs change. ## Key capabilities - One URL pattern for every page - Page screenshot or template - Cached and preview-aware ## When to use this feature Use HCTI Dynamic Open Graph Images when a site has many public pages that need current, page-specific link preview images. Configure one URL pattern instead of calling an image-generation API from every publishing workflow. Each page can provide screenshot options or template values through meta tags, and unchanged inputs reuse the existing image. The source pages must be reachable by HCTI; use the [URL Screenshots feature](https://htmlcsstoimage.com/features/url-screenshots.md) for ordinary webpage captures that are not driven by link-preview metadata, or [Signed Image URLs](https://htmlcsstoimage.com/features/signed-image-urls.md) when the complete render request belongs in the image URL itself. ## Add one Open Graph image URL pattern Set `og:image` to an HCTI URL containing the current page path. HCTI opens that page, reads its supported meta tags, and returns the matching cached image. ```html ``` ## Choose how each image is made - **Page screenshot:** Add `hcti:` meta tags to select an element, apply page-only CSS, set timing, or provide other eligible screenshot options. - **Reusable template:** Add `html:tv:` meta tags to populate variables in a maintained HCTI template. - **Content-aware reuse:** If the resolved screenshot or template inputs have not changed, HCTI returns the existing image. - **Controlled metadata refresh:** The configuration controls when HCTI checks a page again, and origin cache headers or ETags can postpone or simplify that check. ## Supported platforms and preview sizes - [Facebook](https://htmlcsstoimage.com/features/og-images-for-facebook.md): 1200 × 630 for posts - [WhatsApp](https://htmlcsstoimage.com/features/og-images-for-whatsapp.md): 1200 × 630 for messages - [Slack](https://htmlcsstoimage.com/features/og-images-for-slack.md): 1200 × 630 for messages - [LinkedIn](https://htmlcsstoimage.com/features/og-images-for-linkedin.md): 1200 × 627 for posts - [Pinterest](https://htmlcsstoimage.com/features/og-images-for-pinterest.md): 1000 × 1500 for pins - [Bluesky](https://htmlcsstoimage.com/features/og-images-for-bluesky.md): 1200 × 627 for posts - [Twitter](https://htmlcsstoimage.com/features/og-images-for-twitter.md): 1200 × 600 for tweets - [Messenger](https://htmlcsstoimage.com/features/og-images-for-messenger.md): 1200 × 628 for messages - [Instagram](https://htmlcsstoimage.com/features/og-images-for-instagram.md): 1080 × 1080 for posts - [TikTok](https://htmlcsstoimage.com/features/og-images-for-tiktok.md): 1200 × 630 for videos - [Apple Messages](https://htmlcsstoimage.com/features/og-images-for-apple-messages.md): 1200 × 628 for messages - [Snapchat](https://htmlcsstoimage.com/features/og-images-for-snapchat.md): 1200 × 630 for snaps - [Telegram](https://htmlcsstoimage.com/features/og-images-for-telegram.md): 1200 × 630 for messages - [Reddit](https://htmlcsstoimage.com/features/og-images-for-reddit.md): 1200 × 630 for posts - [Threads](https://htmlcsstoimage.com/features/og-images-for-threads.md): 1200 × 630 for posts - [Google Chat](https://htmlcsstoimage.com/features/og-images-for-google-chat.md): 1200 × 630 for messages - [Discord](https://htmlcsstoimage.com/features/og-images-for-discord.md): 1200 × 630 for messages ## Test and configure Use the [social card previewer](https://htmlcsstoimage.com/tools/social-card-previewer) to inspect a public page's current image, title, description, fallbacks, and platform-shaped preview. Create and manage dynamic Open Graph configurations in the [HCTI dashboard](https://htmlcsstoimage.com/dashboard/og-configs). See the [setup guide](https://docs.htmlcsstoimage.com/getting-started/og-images/) and [supported metadata parameters](https://docs.htmlcsstoimage.com/getting-started/og-images/supported-parameters/) for implementation details. ## Make every important URL more useful when it is shared ### Articles and editorial content Turn each headline, author, hero image, and page design into a preview without adding image-generation logic to the publishing workflow. ### Product and marketplace pages Give every product, listing, storefront, or launch page a current preview image built from the content already on that URL. ### Documentation and changelogs Create recognizable previews for guides, release notes, and technical pages while keeping rendering settings close to the source content. ### Customer and campaign pages Use page screenshots or branded templates for landing pages, case studies, events, and other frequently shared URLs. ## Related features - [HTML to Image](https://htmlcsstoimage.com/features/html-to-image.md): HTML & CSS into an image with one API call. - [URL Screenshots](https://htmlcsstoimage.com/features/url-screenshots.md): Screenshot any website with one API call. - [Templates](https://htmlcsstoimage.com/features/templates.md): Reuse one design for consistent, dynamic images. - [Signed Image URLs](https://htmlcsstoimage.com/features/signed-image-urls.md): Dynamic images without an extra API request. ## Get started REST API requests require an HTML/CSS to Image account and should be authenticated from trusted application code. Check the API docs and pricing for current setup instructions, limits, and feature availability. - [View the full feature page](https://htmlcsstoimage.com/features/og-images) - [Browse all features](https://htmlcsstoimage.com/features.md) - [Start free](https://htmlcsstoimage.com/join) - [View pricing](https://htmlcsstoimage.com/pricing.md) - [Read the API docs](https://docs.htmlcsstoimage.com/getting-started/og-images/) - [Read the MCP docs](https://docs.htmlcsstoimage.com/integrations/mcp/)