> ## Documentation Index > Fetch the complete documentation index at: https://metamanager.dev/docs/llms.txt > Use this file to discover all available pages before exploring further. # Social cards > Generate a link preview image for every page, drawn from that page's own title, in your colours. `missing_og_image` is one of the most common things MetaManager reports. Until now the answer was a `` tag pointing at an image you still had to design and host. This draws it instead. Add one line to your template and every page gets a card built from that page's real title and description: ```html theme={null} ``` Replace `{{ current_url }}` with whatever your framework calls the current page URL. That is the whole integration — no backend code, no signing, nothing to generate at build time. To see one before setting anything up, the [home page](https://metamanager.dev/#cards) draws a card for any URL you give it. Those are drawn in our colours and carry our mark — a real card uses yours and carries neither. ## Layouts Four are available. Choose a default under **Social cards**, and override it for any individual page with `&tpl=`: ```html theme={null} ``` | Name | What it draws | | :-------- | :------------------------------------------------------ | | `classic` | Title and description, your mark above. The default. | | `minimal` | The title alone, set large. No description. | | `split` | An accent panel beside the text. | | `quote` | The description as a pull quote, credited to the title. | | `banner` | Your page's own image behind the words. | `split` fills a large panel with your accent colour, so its text colour is chosen automatically from that colour's brightness — a colour picked for a thin rule does not always work behind text, and this is the one place that matters. A name we do not recognise falls back to your saved default, so a typo in one page's tag costs you that page's layout and nothing else. ## Languages and scripts Cards draw in the page's own script. Japanese, Chinese (Simplified and Traditional), Korean, Cyrillic, Greek and the extended Latin alphabets all render from the page's real title, with no configuration. ### Putting your own image on the card The `banner` layout draws a picture behind the text. Name it explicitly: ```html theme={null} ``` We fetch it once when the card is drawn and cache it with the card, so it costs one request per page per day rather than one per share. PNG, JPEG, WebP and GIF, up to 4 MB — enough for an unoptimised photograph straight from a stock library. A card carrying a photograph comes back as **JPEG**; every other card is a PNG. That is not a preference, it is arithmetic: the same photographic card is 896 KB as a PNG and 64 KB as a JPEG, and 896 KB is past the point our own checker calls a preview image too heavy. Flat cards go the other way, so they stay PNG. **You have to name it.** We will not go looking for a picture in your markup: the first image on a page is a logo, an avatar or a tracking pixel about as often as it is the one you meant, and a card is not the place to find that out. A card whose image cannot be fetched — wrong address, too large, too slow, not an image — draws without it rather than failing, and says why in an `x-mm-degraded` header. The dashboard preview and the demo on our home page both tell you directly, because a browser cannot check an image's size on another domain for itself. The text is legible either way: `banner` puts a gradient between the picture and the words, because an image chosen for how it looks is rarely one chosen as a background. ### Adjusting a layout Four settings change how any of the four layouts draws, in your account or per page: | Parameter | Values | Default | | :-------- | :-------------------------- | :------ | | `ts` | `s`, `m`, `l` — title size | `m` | | `align` | `left`, `center` | `left` | | `desc` | `0` to hide the description | shown | | `mark` | `0` to hide your mark | shown | ```html theme={null} ``` Settings you choose in the dashboard apply to every card; a parameter on one card overrides just that one, leaving your other choices alone. An unrecognised value falls back to the default rather than failing — a typo costs you a setting, never the card. `minimal` never draws a description, so `desc` does nothing there. The dashboard greys the control out rather than letting you set something that will not happen. ### Reading a page in a particular language If your site serves different languages from one URL, add `&l=` so we read the one you mean: ```html theme={null} ``` We send no language unless you ask, so by default a multilingual site is read in whichever language its own edge prefers. This controls the language we *read* — the typeface is always chosen from the text we get back. Arabic, Hebrew and the Indic scripts are **not** drawn. Those pages get a plain card showing the site's address instead of the title. This is a limitation of how we lay out text, not of the fonts. We place words left to right without reshaping them, which for Arabic produces a card where every word is correct but the sentence reads backwards — wrong in a way that looks right. A card that says less is better than one that misrepresents your page, so we decline instead. These cards carry an `x-mm-degraded` response header naming the reason. ## Setting it up In your account, under **Social cards**: 1. **Verify your site.** Add your domain and put the `` tag we show you on its home page. We check it with the same checker you already use. 2. **Choose your colours.** Background, text and accent. *Use my favicon* pulls your site's icon in as the card's mark. 3. **Copy the snippet** into your template. The key in the URL is public — it sits in your page source where anyone can read it. That is why step 1 exists: a card is only ever drawn for a domain you have verified, so a copied key is useless to whoever copies it. ## What the card shows Your site name and icon, the page's title, its description, and an accent rule in your colour. Everything comes from the page itself, so the card cannot drift out of step with what it is previewing. If a page has no title — the case that probably brought you here — the card falls back to the page's URL rather than drawing nothing. ## What it costs | | Free | Pro | | :--------------------------- | ---: | ----: | | Cards drawn per month | 100 | 5,000 | | MetaManager mark on the card | Yes | — | **Cards drawn, not link previews served.** A card is drawn once and then cached, so a page shared a thousand times costs one card. Redrawing happens about daily, so an edited title appears within a day without you doing anything. Going over the allowance does not break your previews. Cards keep being drawn — they just carry the mark until the next month starts. ## Changing your colours later Save new colours and the next redraw picks them up, everywhere, without editing a single page. The same is true of upgrading: moving to Pro removes the mark from the next redraw of every card you have. ## Rolling the key **Rolling the key breaks every page still using the old one.** Cards already drawn keep serving until they expire, but nothing new is drawn — so update your template in the same sitting. Roll it if the key ends up somewhere it should not be. Bear in mind it is designed to be public, and on its own it cannot draw cards for a domain you have not verified.