# Share image (/docs/components/renderings/share-image)

> Spec: written ahead of the package. Not in the published packages: og

> The 1200 × 630 picture a shared link shows, drawn from the page's title and description, or the Product record, in the page's Theme.

`og(page, { theme })` draws the share image of a page: 1200 by 630 pixels, as an SVG string and as a PNG. The page's `meta.image` points at the file, and `renderPage` writes the share tags from it.

## What it draws

| Part | From |
| --- | --- |
| The Brand | The `nav` section's `brand`: its mark and its text |
| The title | The page's `title`, at most 64 characters, so it sets in two lines at most |
| The line beneath | The page's `description`, cut at a word to two lines |
| The paint | The Theme: its paper, ink, accent, display typeface and divider policy |
| The address | `meta.canonical`, less its scheme |

For a product, `og(product)` draws from the [Product record](https://next.mdxui.dev/docs/components/product-record) in place of a page: its name, its summary and its Theme.

## How it maps

The head half ships today. A record with a `meta.image` of a URL, a width and a height renders the `og:image` and `twitter:image` tags. [Document and head](https://next.mdxui.dev/docs/components/renderings/document-and-head) traces each tag to its field. The image itself is drawn by hand.

## Status

**Spec · og.**

`og` is not in `@mdxui/site@7.0.0-alpha.0`. A record with no `meta.image` shares as its title and description alone.

## Related

  - [Document and head](https://next.mdxui.dev/docs/components/renderings/document-and-head): The tags that point at it.
  - [The Product record](https://next.mdxui.dev/docs/components/product-record): What a product's image reads.
  - [Renderings](https://next.mdxui.dev/docs/components/renderings): Every output format of one record.