# OG images overview

When someone shares a link to your page on KakaoTalk, Slack, X or Facebook, the app shows the image in the page's `og:image` tag. Mocco draws that image for you: you pick a template, give it your texts, and put the image's URL in the tag. Mocco renders the card the first time a crawler asks for it and serves the stored image after that.

Every card is 1200×630 pixels, with the text kept inside the middle so that KakaoTalk's 2:1 crop doesn't cut it. Korean breaks between words, never inside one, and Hanja, Japanese and emoji are drawn too.

## Templates

| Template | Fields | For |
| --- | --- | --- |
| `simple` | `brand` (1–60 characters), `accent` (optional, a colour like `#2563eb`), `title` (1–120), `subtitle` (optional, up to 160) | Landing and product pages |
| `article` | `brand` (1–60), `accent` (optional), `eyebrow` (optional, up to 60: the section or category), `title` (1–120), `description` (optional, up to 200) | Articles, posts and docs |

`brand` is the name at the top of the card and `accent` colours the rule above it. Machines can read the same list from `GET /v1/og/templates` on the Mocco API, with no key.

## The signing secret

An image URL carries a signature made with your project's **OG signing secret**, so only you can issue images for your project and nobody can put their own text on your cards. A URL whose signature doesn't match is refused.

1. Open your project and go to **API keys**. The **OG image signing** card shows whether the project has a secret.
2. An owner or admin chooses **Generate secret**. Mocco shows the secret and an example URL **once**. Copy the secret to your server, for example as `MOCCO_OG_SECRET`. Never put it in a browser or an app: anyone with it can sign image URLs for your project.
3. **Rotate secret** replaces it at once. Every URL signed with the old secret stops working right away, so sign your URLs again with the new one.

Members who aren't owners or admins see only whether a secret exists and when it was last rotated.

## Getting an image URL

- **In the console:** the **OG images** page (on the **API keys** tab, **Open the template gallery**) previews a template as you fill it in and copies a signed URL. See [Sign image URLs](https://www.mocco.club/docs/en/articles/v7iw2i-sign-urls#in-the-console).
- **On your server:** sign URLs with `@mocco/node` or the recipe, for pages that are built or served dynamically. See [Sign image URLs](https://www.mocco.club/docs/en/articles/v7iw2i-sign-urls).
- **From CI:** render images ahead of time with an API key, so the first crawler doesn't wait. See [Pre-render images from CI](https://www.mocco.club/docs/en/articles/irw7vm-pre-render).
- **From an agent:** the MCP tool `mocco_og_url` returns a signed URL, and `mocco_og_templates` lists the templates and their fields.

Then check how your page unfurls with the [OG preview](https://www.mocco.club/docs/en/articles/w9vc8r-check-a-page).