What image size should I use?

For summary_large_image, an image around 1200 x 630 px works well. Use an absolute URL so social networks can fetch it.

Do I need both Open Graph and Twitter tags?

Open Graph covers most networks including Facebook and LinkedIn; Twitter adds its own card tags. Including both gives the best coverage.

Will the preview exactly match every platform?

It is a close approximation. Each network styles cards slightly differently and may cache old data, so use their debuggers to refresh.

Developer Tools

Meta Tag & Open Graph Generator

Generate SEO, Open Graph and Twitter meta tags with a live social preview.

Free foreverRuns in your browserNo sign-up

Title

Page URL

Image URL

Site name

Twitter handle

Twitter card

Description

example.com

My Awesome Page

A short, compelling description of the page for search and social.

<title>My Awesome Page</title>
<meta name="title" content="My Awesome Page">
<meta name="description" content="A short, compelling description of the page for search and social.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="My Awesome Page">
<meta property="og:description" content="A short, compelling description of the page for search and social.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:site_name" content="Example">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://example.com/page">
<meta name="twitter:title" content="My Awesome Page">
<meta name="twitter:description" content="A short, compelling description of the page for search and social.">
<meta name="twitter:image" content="https://example.com/og-image.png">
<meta name="twitter:site" content="@example">

Paste these into your page <head>. The preview approximates how the link looks when shared on social media.

About the Meta Tag & Open Graph Generator

Search engines and social networks read meta tags to show your page's title, description and preview image. Writing them by hand is fiddly.

This tool generates the standard SEO, Open Graph and Twitter Card tags from a few fields and shows a live preview of the social card.

Copy the tags straight into your page's head section.

Key features

SEO title and description tags
Open Graph and Twitter Card tags
Live social card preview
One-click copy

How to use

1Fill in the title, description, URL and image.
2Check the live preview.
3Copy the tags into your page head.

Examples

Open Graph title

Output: <meta property="og:title" content="My Awesome Page">

Each field becomes the matching SEO, Open Graph and Twitter tag.

Frequently asked questions

What image size should I use?: For summary_large_image, an image around 1200 x 630 px works well. Use an absolute URL so social networks can fetch it.
Do I need both Open Graph and Twitter tags?: Open Graph covers most networks including Facebook and LinkedIn; Twitter adds its own card tags. Including both gives the best coverage.
Will the preview exactly match every platform?: It is a close approximation. Each network styles cards slightly differently and may cache old data, so use their debuggers to refresh.