137 · Design & Web

Open Graph Previewer

See roughly how your page will look when its link is shared, and copy the tags that control it.

Preview of a typical link card. Each app styles cards a little differently.

1200 × 630 image

How to use the open graph previewer

  1. Enter your page’s title, description, URL and share image URL.
  2. Check the preview and the suggestions.
  3. Copy the tags into your page’s .

Getting link cards right

Most apps read Open Graph tags: og:title, og:description, og:image and og:url. Use an absolute image URL and a 1200 × 630 pixel image for a large card. Apps cache previews, so after changing tags, use each platform’s own debugging tool to refresh it.

For privacy this preview doesn’t fetch your image from the web; it shows where the image goes.

Examples

Title over 60 characters

A suggestion to shorten it

No image

Small card layout

Questions

Does it fetch my live page?

No. It previews the values you type, so you can test before publishing.