Examples

The OG Pilot Gallery

The gallery is a set of social previews created with OG Pilot. Each card is a generated image for a real kind of page: a product, a post, an event, a podcast, a company, a book, or a profile. The point of looking through them is to see the template before you point it at your own URL. A homepage screenshot and a designed 1200 by 630 card do not compete in a chat thread. The gallery is the designed version.

Use it when you are choosing a template, not when you are debugging a live tag. If a URL is already shared and the preview is wrong, open the debugger and read the title, description, and image that platforms fetched. If you only have one link and you want a file today, generate an OG image from that URL. The gallery does not replace either step. It shows what the templates look like once the brand, the headline, and the layout are in place.

What the examples are for

Teams use the gallery in three ways. First, to pick a template that matches the page type so a product URL is not rendered as a blog card. Second, to show a client the difference between a default unfurl and a branded one without waiting on a design sprint. Third, to compare how much of the story fits in the image: the name, the date, the price, the episode, the place. Those details are why a share gets the click. A repeated site icon does not carry them.

Longer write-ups of that difference are the remakes. The Nike store scenario is a campaign whose shares were hiding the creative. The Brooklyn Botanic Garden scenario is an event page whose preview omitted the date and the place. The Office Ladies scenario is a podcast whose tile was an empty placeholder. They are modeled remakes, published so you can see the before and the generated after. The agency page is the same idea applied to a queue of client URLs.

From a sample to a URL on your site

• Read the API docs when every page should request its own image with a signed token.
• Use MCP when an agent should generate, debug, compress, or read a palette.
• Install the WordPress plugin when the CMS should write the og:image tag.
• Next.js, Rails, and Astro each have a short integration guide.
• Create an account when you are ready to connect a domain or call the API.

After you publish, fetch the page in the debugger again. Social networks cache the first image they downloaded. A gallery-quality render that never replaces the old og:image URL will not show up in the feed. Generate the card, point the tag at it, and confirm the fetched bytes match the template you chose.