OG Image Guides

How to Add OG Images to a Gatsby Site

Gatsby sites use gatsby-head, react-helmet, or siteMetadata for OG tags. Here is how to add social cards to every page in your Gatsby project.

How to Add OG Images to a Nuxt 3 App

Nuxt 3 provides useHead and useSeoMeta composables for setting OG tags. Here is the cleanest way to add social cards to every page in your Nuxt app.

How to Add OG Images to a Ghost CMS Site

Ghost CMS supports OG images through its built-in og_image helper and custom theme partials. Here is how to control social cards across every post and page.

How to Add OG Images to a Webflow Site

Webflow has built-in Open Graph fields in page settings and CMS collection templates. Here is how to set social cards for every page without touching code.

How to Add OG Images to a Framer Site

Framer Sites has an SEO panel for setting OG images per page and in CMS collections. Here is how to get proper social cards on every page of your Framer site.

How to Add OG Images to a Hugo Site

Hugo uses front matter and layout partials to set OG meta tags. Here is how to add social cards to every page of your Hugo site without a plugin.

How to Add OG Images to a Jekyll Site

Jekyll uses front matter and Liquid templates to set OG tags. Here is how to add proper social cards to every page of your Jekyll site, including GitHub Pages.

How to Add OG Images to an Eleventy Site

Eleventy front matter and layout chains make OG image setup flexible. Here is how to add social cards to every page of your 11ty site with or without a plugin.