OG images for any site, set up by your coding agent

Add Open Graph preview images from getwowlink to this site (yourproduct.com).

How it works: getwowlink renders a preview image for any page of the site from that page's path. The image lives at

https://getwowimg.com/a1b2c3d4e5/<page path>.png

where <page path> is the path of the page the tags are on, as it appears in the URL (percent-encoded, no query string, no leading or trailing slash), and "index" for the home page. For example, https://yourproduct.com/blog/hello-world uses https://getwowimg.com/a1b2c3d4e5/blog/hello-world.png. Every page must pass its own path, computed when the page is rendered — not one hardcoded URL for the whole site.

Task: make every page's <head> contain exactly one of each of these tags, all pointing at that page's image:
- og:image, plus og:image:width 1200 and og:image:height 630
- twitter:card = summary_large_image
- twitter:image

Remove or override any existing og:image / twitter:image tags so they don't conflict. Don't add dependencies.

For example, /blog/launch-week should end up with:

<meta property="og:image" content="https://getwowimg.com/a1b2c3d4e5/blog/launch-week.png" />
<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://getwowimg.com/a1b2c3d4e5/blog/launch-week.png" />

When done, check a couple of different pages: og:image must be https://getwowimg.com/a1b2c3d4e5/ followed by that page's own path and .png.