Add Fancy OG image to your HTML
URL Structure
The most important part of the URL is the subdomain and can be found in your account's 'sites' page.
This determines the default settings for the image generation, allowing you to only specify a small number of parameters in the URL.
The base URL path is https://<subdomain>.fancyog.com/og.jpg
URL Parameters
The URL parameters are used to specify the settings for the image generation. As most settings are set in the subdomain, there are only a few parameters available here.
| Parameter | Purpose | Notes |
|---|---|---|
| template | The template to use for the image generation | Defaults to 'default'. Lowercase string found from the generator page |
| title | Main heading in the image | |
| subtitle | Secondary heading in the image | Can usually be longer as the text is smaller. |
| mainImageUrl | URL to the main image to use in the template | Not supported in all templates. Overrides the site's default main image. |
| showLogo | Control logo visibility | Default to show. Pass in 0 to hide the logo. |
| ctaText | Call to action button text | - |
| ctaBackgroundColor | Call to action button color | - |
| ctaFontColor | Call to action text color | - |
| ctaCorner | Call to action position | Supported: tl, tc, tr, bl, br |
These parameters should be passed in the query string.
e.g. https://<subdomain>.fancyog.com/og.jpg?title=Fancy%20OG%20Docs
og:image
Once you've got your URL generation working, you can use the og:image tag to specify the OpenGraph image for the page.
e.g. <meta property="og:image" content="https://<subdomain>.fancyog.com/og.jpg?title=Fancy%20OG%20Docs" />