OG image generator for Qwik

Quick start

The safest workflow is: generate a 1200x630 image, host it at an absolute HTTPS URL, then set og:image (and twitter:image). Finally, validate what bots see.

export const head: DocumentHead = {\n  meta: [{ property: 'og:image', content: 'https://example.com/og.png' }],\n};

Generate a starting image

Use one template consistently across your site. Consistency improves recognition and makes your previews look intentional.

• Start here: open the preset editor.
• Share for approval: preview-only link.
• Need sizing rules? OG image size guide.

Validate the live URL

Platforms cache previews. Before you chase ghosts, confirm that the page HTML contains correct OG tags on the public URL.

• Validate a URL to see what tags are present.
• Follow the debug checklist if the image still does not render.
• Audit your sitemap if you want site-wide coverage.

Related

• Framework guide: /learn/how-to-add-og-image
• Meta tags tool: Meta Tag Generator
• Use cases: OG images by use case