Open Graph (og:) tags control how a link looks when shared on Facebook, LinkedIn, WhatsApp, Slack, and most messaging apps. The four essentials are og:title, og:description, og:image (1200×630), and og:url. Add og:type=article for blog posts. Without OG tags, social platforms have to guess what to show, and the guess is often poor.
What are Open Graph tags and how do you add them?
Open Graph (og:) tags are HTML meta tags placed in your page's <head> that control how links appear when shared on Facebook, LinkedIn, WhatsApp, and Slack. Add the four essentials (og:title, og:description, og:image at 1200×630px, and og:url), plus og:type, which the Open Graph protocol lists as required: "website" for most pages and "article" for blog posts.
Open Graph tags control how your web pages appear when someone shares a link on Facebook, LinkedIn, WhatsApp, Slack, or almost any other platform. Without them, platforms guess, and they often pick the wrong title or image. With them, you choose the title, description, and image that appear every time your content is shared.
What are Open Graph tags?
Open Graph is a protocol originally created at Facebook and now read by most social networks and messaging apps. It uses HTML meta tags in your page's <head> section to define how the page should appear when shared as a link preview. The tags look like this:
<meta property="og:title" content="Your Page Title Here">
<meta property="og:description" content="Your description here.">
<meta property="og:image" content="https://yourdomain.com/image.jpg">
<meta property="og:url" content="https://yourdomain.com/page">
When someone pastes your URL into a social post or messaging app, the platform reads these tags and builds the preview card you see. Without the tags, the platform scrapes whatever it can find, which is often the wrong title, a random image, and a generic site description.
The essential Open Graph tags
og:title
The title that appears in the preview card. This can differ from your HTML title tag, and often should: a social title can be more conversational than a search title. Keep it short all the same. X's card reference caps twitter:title at 70 characters, and our OG Checker flags an og:title longer than 60.
og:description
The description text under the title in the preview. X's card markup allows up to 200 characters for the description, and many previews show fewer, so put the reason to click first. Write it as a one-sentence summary of why the page is worth opening.
og:image
The image that appears in the preview card, and the largest part of it. The recommended size is 1200×630 pixels. On Facebook, an image smaller than 600×315 shows up as a small square thumbnail, and anything under 200×200 is below Meta's minimum. The Open Graph image size guide covers each platform's crop and file limits.
og:url
The canonical URL of the page. It should match the actual page URL, not a redirect. Meta describes og:url as the canonical URL and aggregates likes and shares at that address, so when the same content is shared through several URL variants, they count toward one page. It should also match your canonical tag.
og:type
The type of content: "website" for most pages and "article" for blog posts. The Open Graph protocol also defines book, profile, and music and video types. Meta defaults to "website" if the tag is omitted. For blog posts, using "article" enables additional tags like the publication date (article:published_time).
Twitter Cards: the OG tags for Twitter/X
X (formerly Twitter) uses its own tag set. When twitter:title, twitter:description or twitter:image is missing, it falls back to the matching Open Graph tag, but twitter:card has no Open Graph equivalent. A full set gives you the most control:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Your description">
<meta name="twitter:image" content="https://yourdomain.com/image.jpg">
The summary_large_image card type displays a large header image. Use summary if you prefer a small square thumbnail instead.
How to generate and add OG tags
Our free meta tag generator builds complete Open Graph and Twitter Card tags alongside your standard SEO meta tags. Fill in the fields under the Social/OG tab, click generate, and copy the complete HTML block into your page's <head>.
If you're using a CMS, most have SEO plugins (Yoast for WordPress, built-in fields for others) that handle Open Graph tags through a UI, no HTML editing required.
The most common OG tag mistake
Setting og:image to an image that's too small. Facebook recommends at least 1200×630 and shows anything under 600×315 as a small square, so a 300×200 thumbnail gives you a cramped preview instead of a full-width card. If you're adding OG tags and the image doesn't look right, size is usually the first thing to check.
Testing your Open Graph tags
Facebook has a Sharing Debugger tool at developers.facebook.com/tools/debug that shows how your page will appear when shared and lets you force a refresh of cached data. LinkedIn's equivalent is the Post Inspector, and our OG Checker previews Facebook/LinkedIn, X and Slack cards from one URL. Test before launching any important page.
Frequently asked questions
Do Open Graph tags affect SEO rankings?
Google doesn't list Open Graph tags as a ranking factor. Its title link documentation does name og:title as one of the sources Google may use for the title shown in results. The main effect is on social sharing: better previews can earn more clicks and shares, which is traffic in its own right.
What happens if I don't add Open Graph tags?
Social platforms scrape whatever they find, often the page title tag, the first paragraph of text, and an arbitrary image from the page. The result can be badly cropped, carry the wrong description, and look unfinished, which gets fewer clicks.
Should og:title be the same as my HTML title tag?
Not necessarily. Your HTML title tag is written for a search result. Your og:title can be more conversational since it appears in a social card. Many sites use the same title for both, which works fine, but it's worth customising if social traffic matters to you.
How often does Facebook cache my OG tags?
Meta refreshes link data on its own every 30 days. If you update your tags and the old preview keeps appearing in shares, use Facebook's Sharing Debugger to force a fresh scrape: paste your URL, click Debug, then click "Scrape Again." If you changed the image, give the new one a new file URL, because Meta caches images by URL.
The bottom line
Open Graph tags take a few minutes to add and decide how every share of your page looks. Add them to every important page, use the right image size, and test before launching. Our free meta tag generator builds the complete OG and Twitter Card tag set alongside your standard SEO meta tags. No account required.
FAQ
What's the ideal og:image size in 2026?
1200×630 pixels (1.91:1 aspect ratio). Facebook and LinkedIn recommend 1.91:1, and X's large card uses 2:1, which trims only 15 pixels from the top and bottom of a 1200×630 image. Keep the file well under 5 MB (a few hundred KB is plenty). Use JPG for photos, PNG for text-heavy graphics.
What's the difference between og: and twitter: tags?
X reads twitter:title, twitter:description and twitter:image when present and falls back to the matching og: tags otherwise. twitter:card has no og: equivalent, so add that one line even if you skip the other twitter: tags.
