Open Graph Preview
Enter the title, description, image address and site name, or fetch them from a page, and see how the card might look when the link is shared. Copy the matching meta tags.
Worked examples
A complete card
Title: Fresh sourdough delivered Site name: Example Bakery Description: Small batch loaves baked each morning and delivered to your door. Image: https://example.com/loaf.jpg Page address: https://example.com/bread
<meta property="og:title" content="Fresh sourdough delivered"> <meta property="og:description" content="Small batch loaves baked each morning and delivered to your door."> <meta property="og:image" content="https://example.com/loaf.jpg"> <meta property="og:url" content="https://example.com/bread"> <meta property="og:site_name" content="Example Bakery"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> Title: 25 characters, fits Description: 65 characters, fits Image: Address looks fine. About 1200 by 630 pixels suits the large card. Site name: Example Bakery
All parts are set, so the large card layout is chosen.
A long title and an http image
Title: A very long title that keeps going and going so that it will almost certainly be cut off on a card Site name: (none) Description: (none) Image: http://example.com/pic.jpg Page address: (none)
<meta property="og:title" content="A very long title that keeps going and going so that it will almost certainly be cut off on a card"> <meta property="og:image" content="http://example.com/pic.jpg"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> Title: 98 characters, may be cut off (aim for 60 or fewer) Description: Missing. One or two sentences work well. Image: Uses http. Use https so the image always loads. Site name: Not set
Without an image over https and a shorter title, the checks point out what to change.
About Open Graph Preview
When a link is pasted into a chat, a feed or a message, many services turn it into a card with a picture, a title and a short description. Those details come from Open Graph tags in the page head. This preview shows how your wording and image could look as a large card, a small card and a side bar card before you publish.
Type the title, description, image address and site name yourself, or enter a page address and fetch the tags the page already has. Change any field and the cards update straight away. Checks flag a missing image, a title that may be cut off or an image address that does not use https, and the matching meta tags are ready to copy into your page.
How to use Open Graph Preview
- Type the details, or enter a page address and press Fetch tags.
- Look at the three card styles and read the checks.
- Adjust the wording until the cards read well, then copy the meta tags into your page head.
Common uses
- Checking a new page before it is shared for the first time
- Finding out why a shared link shows no picture or the wrong title
- Writing a description that is clear when it is cut short
- Giving a client a quick idea of how their link will appear
Frequently asked questions
Will the cards match exactly what each service shows?
No. Each service has its own sizes, cut-off points and rules, and they change over time. The cards are a close guide to the layout and the wording that fits.
What size should the image be?
About 1200 by 630 pixels works well for large cards. Keep important parts away from the edges, as cards crop images differently.
Why does fetching not find my tags?
The page must be public and the tags must be in the page source as it is first sent. Tags added later by scripts are not seen. You can still type the details by hand.
Which tags should I add?
Add og:title, og:description, og:image, og:url and og:site_name. A card type tag chooses between the large and small layout on services that read it.