When someone shares a link, apps show a preview with a title, a description and an image. These come from Open Graph tags in your page’s head.
index.html
HTML
<meta property="og:type" content="website">
<meta property="og:title" content="Juniper Books">
<meta property="og:description" content="New and used books on Maple Street.">
<meta property="og:image" content="https://www.example.com/images/share.jpg">
<meta property="og:url" content="https://www.example.com/">
<meta name="twitter:card" content="summary_large_image">What each tag does
| Tag | Purpose |
|---|---|
og:title | The headline in the preview |
og:description | The short text under it |
og:image | The preview picture (use an absolute address) |
og:url | The preferred address |
og:type | website, article and so on |
twitter:card | The card layout (summary or summary_large_image) |
Image tips
Use an image of about 1200 by 630 pixels, with the important part in the middle. It must be reachable by a public absolute address, not a file on your computer.
You may not write these by hand
Content management systems and SEO plugins generate these tags for you. It is still useful to know what they are, and to be able to check them with each platform’s sharing debugger.
warning
Relative image addresses
Social sites cannot resolve
images/share.jpg. Use the full address that starts with https://.