Open Graph and Twitter Card Tags: Image Sizes, Examples and How to Test Link Previews

Short answer: add og:title, og:description, og:image and og:url to your page's <head>, plus twitter:card set to summary_large_image. Use a 1200 × 630 image. That gives a full-size preview on Facebook, LinkedIn, X, WhatsApp, Slack and Discord. Our free Open Graph Generator and Twitter Card Generator write the tags for you and show the preview before you publish.

When someone shares a link, the app fetches the page and reads a few meta tags to build the preview card: the title, the short description and the image. Without them, the app guesses, and you usually get no image, the wrong text or a bare URL.

• Open Graph (og: tags) was created by Facebook and is now read by almost every app: Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, iMessage and Pinterest.
• Twitter Cards (twitter: tags) are read by X. X falls back to the Open Graph title, description and image when its own tags are missing, so the one tag X really needs from you is twitter:card.

These tags do not change your Google ranking directly. They change how your links look when people share them, and a good preview gets far more clicks.

Put these inside <head> on every page, with that page's own values:

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/my-post">
<meta property="og:title" content="How to Do X in 5 Minutes">
<meta property="og:description" content="One or two sentences that make people want to click.">
<meta property="og:image" content="https://example.com/images/my-post-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="What the image shows">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">
<meta name="twitter:creator" content="@author">
<meta name="twitter:title" content="How to Do X in 5 Minutes">
<meta name="twitter:description" content="One or two sentences that make people want to click.">
<meta name="twitter:image" content="https://example.com/images/my-post-1200x630.jpg">
<meta name="twitter:image:alt" content="What the image shows">

Open Graph tags use property=, Twitter tags use name=. Since X reads Open Graph as a fallback, you can drop twitter:title, twitter:description and twitter:image when they would be the same as the og: values.

• One image for everything: 1200 × 630 works for Open Graph and for X large cards.
• Keep important text in the middle. Some apps crop the edges or show a square version.
• Use JPG, PNG or WebP and keep the file small (a few hundred KB) so previews load fast. X rejects images over 5 MB or larger than 4096 × 4096.
• Make it public. The image URL must load without a login, and must not be blocked by robots.txt or a firewall.

Both our generators check this for you: they load the image, measure it and warn you if it is too small, the wrong shape or not an absolute URL.

Apps cache the preview the first time a link is shared. After you change your tags, you have to ask them to read the page again:

You can also check before publishing: our Open Graph Generator shows the link preview and our Twitter Card Generator shows the X card as you type. Both can also load the tags a live page already has, so you can see what is wrong with an existing page.

• WordPress: SEO plugins such as Yoast SEO, Rank Math and All in One SEO add Open Graph and Twitter tags automatically. Set a default image in the plugin, and a custom one per post in its "Social" tab.
• Shopify, Wix, Squarespace: the tags are built in. Set the social image in each page's SEO or sharing settings.
• Next.js, Nuxt, Astro and custom sites: output the tags in the page head on the server. Generate them once with our tools and fill in each page's values from your data.

Our free Open Graph Generator and Twitter Card Generator:

• Write the complete tag set from a simple form
• Show a live preview of the card as you type
• Load the existing tags from any live URL so you can fix them
• Check the image size, shape and URL and tell you what to fix
• Suggest AI-written titles and descriptions if you want ideas
• Copy the tags in one click

1200 × 630 pixels (a 1.91:1 ratio). Facebook needs at least 200 × 200, but small images show as a small thumbnail instead of a large card.

Only twitter:card. X uses og:title, og:description and og:image when the twitter: versions are missing.

Not directly: Google does not rank pages by them. They make shared links look better, which brings more clicks and visitors from social media and chat apps.

Facebook cached the preview. Open the Sharing Debugger, paste your URL and click "Scrape Again".

Yes: put one image in og:image and another in twitter:image. X uses twitter:image when it is present.