# Open Graph images > Give each page its own social card with $assets.render, the Open Graph and X meta tags, and a frontmatter image that replaces the card. When someone shares a link to your site, apps such as Slack, Discord, iMessage, and X show a preview card. The image of that card comes from the `og:image` meta tag of the page. This guide draws a card for each page with `$assets.render`, and adds the meta tags. Read [Dynamic images](/dynamic-images/) first. ## Install ```sh bun add -d satori @resvg/resvg-js ``` ## Add a font Satori reads TTF, OTF, and WOFF files, but not WOFF2. Put the fonts of your card in `assets/`. [Fontsource](https://fontsource.org) packages have WOFF files for each weight, such as `@fontsource/inter/files/inter-latin-700-normal.woff`. Copy the file into `assets/fonts/`: ```sh cp node_modules/@fontsource/inter/files/inter-latin-700-normal.woff assets/fonts/inter-700.woff ``` The font files are not copied to `public/`. Only the cards use them. ## Draw the card A card is 1200 by 630 pixels, the default size of `$assets.render`. This partial prints the title and the summary of the page, and the name and the address of the site: ```hbs [partials/og/card.hbs]

``` In dev, open the URL that `$assets.render` returns to see the card. bongo draws it again when you change the partial. ## Add the meta tags Put the tags in the `` of your layout. `og:image` must be a full URL, so give the path to `$utils.url.abs()`. It resolves against `$site.url`, so set `$site.url` to the address of the live site. ```hbs [layouts/html.hbs] {{#var path = await $assets.render('og/card')}} {{#var card = $utils.url.abs(path)}} ``` X reads the `og:` tags too. `twitter:card` tells it to show the large image. ## Name the cards Do not give an `output` path. Then each card has a name from its content, such as `card.3f9a1c2e.png`, and the name changes when the card changes. Thus your host can cache cards for a long time, and an app that shares the link gets the new card. With a fixed path, such as `og/home.png`, the URL stays the same when the card changes. Caches and apps can then show the old card. ## Change the card for some pages Give the partial values with `args`, such as a color for each section: ```hbs [layouts/html.hbs] {{#var tones = { blog: '#ff5a36', docs: '#7cc4ff' } }} {{#var tone = tones[$page.section] || '#ffd23f'}} {{#var path = await $assets.render('og/card', undefined, { args: { tone } })}} {{#var card = $utils.url.abs(path)}} ``` The partial declares the value with `{{#expect tone}}`, and uses it in a style, such as `background: {{ tone }}`. Draw cards for some pages only with `{{#if}}`, such as `{{#if $page.section === 'blog'}}`. ## Use your own image A page can name its own image in its frontmatter, in place of the drawn card: ```md [content/launch.md] --- title: Launch day image: img/launch.jpg --- ``` `` publishes that file from `assets/`. It writes a URL path, so put the origin of the site in front of it: ```hbs [layouts/html.hbs] {{#var image = $page.params.image}} {{#var origin = new URL($site.url).origin}} {{#if image}} {{#else}} {{#var path = await $assets.render('og/card')}} {{/if}} ``` Give the width, height, and type of your own image too, or leave those tags out for it.