How to Create Open Graph Tags for Social Sharing (Complete Guide)
TL;DR
Open graph tags control how your pages look when someone shares them on Facebook, LinkedIn, or Twitter. Without them, social platforms pull random text and images from your page, and the result is ugly.
How to Create Open Graph Tags for Social Sharing (Complete Guide)
TL;DR: Open graph tags control how your pages look when someone shares them on Facebook, LinkedIn, or Twitter. Without them, social platforms pull random text and images from your page, and the result is ugly. You can generate the correct tags in seconds with Morphkit's Open Graph Tag Generator, free, no signup needed.
You share a blog post on Facebook. Instead of a clean preview with your headline and a nice image, the link shows a tiny favicon, a cut-off sentence, and no picture at all. It looks broken. People scroll right past it.
That's what happens without open graph tags. And it's costing you clicks every single day.
What Are Open Graph Tags?
Open graph tags are short pieces of code you add to the <head> section of your HTML. They tell social media platforms exactly what title, description, image, and URL to display when someone shares your page.
Facebook created the Open Graph protocol in 2010. Since then, LinkedIn, Pinterest, Discord, Slack, iMessage, and most other platforms have adopted it. If your page has open graph tags, shared links show up with a large image, a clear headline, and a description. If it doesn't, the platform guesses. It usually guesses wrong.
Think of OG tags as instructions for social platforms. Without instructions, they're left pulling whatever random text and images they can find on the page. With instructions, you control the preview completely.
Try Open Graph Generator Free
Generate Open Graph meta tags so your pages look great when shared.
Open ToolNo signup required. Runs in your browser.
The Essential Open Graph Tags
You don't need dozens of tags. Four cover 90% of what matters.
og:title
<meta property="og:title" content="How to Create Open Graph Tags for Social Sharing" />
This is the headline that appears in the shared link preview. Keep it under 60 characters so it doesn't get truncated. It doesn't have to match your page's <title> tag exactly, but it should be close. Some people write a slightly catchier version for social.
og:description
<meta property="og:description" content="Learn how to add open graph tags to your website so shared links look professional on Facebook, LinkedIn, and Twitter." />
The supporting text below the title in the preview. Aim for 120-160 characters. This is your chance to give people a reason to click. Be specific about what they'll get.
og:image
<meta property="og:image" content="https://yoursite.com/images/og-social-sharing.jpg" />
The most important tag. A shared link with a good image gets dramatically more engagement than one without. Facebook recommends 1200 x 630 pixels. Use an absolute URL, not a relative path. The image must be publicly accessible (social platforms need to fetch it from your server).
og:url
<meta property="og:url" content="https://yoursite.com/blog/open-graph-tags-guide" />
The canonical URL of your page. This tells platforms which URL to associate with the shared content, which matters if you have multiple URLs pointing to the same page (like tracking parameters or www vs. non-www).
Bonus Tags Worth Adding
A few more tags that improve your previews:
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
The og:type tag tells platforms what kind of content this is. Use "article" for blog posts, "website" for your homepage, "product" for product pages.
Twitter Card Tags
Twitter (X) uses its own system called Twitter Cards. The tags work similarly to OG tags, but with different names. If you don't add Twitter Card tags, Twitter will fall back to your OG tags, which is fine for basics. But for full control, add both.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to Create Open Graph Tags for Social Sharing" />
<meta name="twitter:description" content="Control how your links look on every social platform." />
<meta name="twitter:image" content="https://yoursite.com/images/og-social-sharing.jpg" />
<meta name="twitter:site" content="@yourhandle" />
The twitter:card value determines the layout. Use summary_large_image for posts with a big image preview (this is what you want most of the time). Use summary for a smaller square thumbnail.
How to Add Open Graph Tags to Your HTML
All OG tags go inside the <head> section of your page, before the closing </head> tag. Here's a complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>How to Create Open Graph Tags</title>
<!-- Open Graph Tags -->
<meta property="og:title" content="How to Create Open Graph Tags for Social Sharing" />
<meta property="og:description" content="Control how your links appear on Facebook, LinkedIn, and Twitter." />
<meta property="og:image" content="https://yoursite.com/images/og-guide.jpg" />
<meta property="og:url" content="https://yoursite.com/blog/og-tags-guide" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site" />
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to Create Open Graph Tags for Social Sharing" />
<meta name="twitter:description" content="Control how your links appear on Facebook, LinkedIn, and Twitter." />
<meta name="twitter:image" content="https://yoursite.com/images/og-guide.jpg" />
</head>
<body>
<!-- Your page content -->
</body>
</html>
If you're using WordPress, most SEO plugins (Yoast, Rank Math) add these tags through their interface. For static sites or custom code, you add the tags manually. Frameworks like Next.js handle them through their metadata configuration.
How to Test Your Open Graph Tags
Adding the tags is half the job. Testing them is the other half. Two free tools make this easy.
Facebook Sharing Debugger
Go to developers.facebook.com/tools/debug/. Paste your URL and click "Debug." Facebook will show you exactly what your shared link will look like, including the image, title, and description it's pulling.
If you've just updated your tags and the old version still shows, click "Scrape Again" to force Facebook to re-fetch the page. Facebook caches OG data aggressively, so this step matters.
Twitter Card Validator
Twitter's validator at cards-dev.twitter.com/validator does the same thing for Twitter Cards. Paste your URL, preview the card, and confirm everything displays correctly.
LinkedIn Post Inspector
LinkedIn has its own tool at linkedin.com/post-inspector/. Check all three if your audience is spread across platforms.
Common Mistakes (and How to Fix Them)
These are the issues that trip people up most often.
Wrong Image Size
Facebook wants 1200 x 630 pixels minimum. Twitter wants at least 800 x 418 for summary_large_image. If your image is too small, the platform either won't display it or will show it as a tiny thumbnail instead of a full-width preview. Always design your OG image at 1200 x 630, it works across all platforms at that size.
Missing og:image Tag
This is the single most common mistake. You add the title and description but forget the image. A shared link without an image gets far less engagement. Always include one.
Using a Relative Image URL
This won't work:
<meta property="og:image" content="/images/og-image.jpg" />
Social platforms can't resolve relative paths. They need the full URL:
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />
Image Not Publicly Accessible
Your OG image has to be reachable by social platform crawlers. If it's behind authentication or on localhost, the preview won't show an image. Test by opening the image URL in an incognito browser window.
Duplicate or Conflicting Tags
Some CMS setups add OG tags automatically, and then a plugin adds a second set. Two og:title tags confuse crawlers. Inspect your page source (View Source in your browser) and search for "og:" to make sure each tag appears only once.
Stale Facebook Cache
You updated your tags but Facebook still shows the old preview. Facebook caches page data aggressively. Use the Sharing Debugger and click "Scrape Again" to clear it.
Generate Open Graph Tags Automatically
Writing these tags by hand for every page gets tedious. One typo in the image URL, one missing closing quote, and the tag breaks silently. You won't know until someone shares the link and the preview looks wrong.
Morphkit's Open Graph Tag Generator takes care of this. Fill in your title, description, image URL, and page URL, and it outputs clean, copy-ready HTML for both Open Graph and Twitter Card tags. No account needed, runs in your browser.
If you're also working on your page's SEO beyond social sharing, the Meta Tag Generator creates your full set of meta tags, including OG tags, in one place. For structured data, the Schema Markup Generator generates JSON-LD code that helps search engines understand your content. And if your page has a FAQ section, the FAQ Generator creates properly structured FAQ schema markup.
Quick Checklist
Before you publish any page, run through this:
og:titleset and under 60 charactersog:descriptionset and between 120-160 charactersog:imageset with absolute URL, image is 1200 x 630 pxog:urlset to the canonical page URLtwitter:cardset tosummary_large_imagetwitter:imageset (can be the same asog:image)- Tested in Facebook Sharing Debugger
- Tested in Twitter Card Validator
- No duplicate OG tags in page source
Get your tags right once and every shared link becomes a clean, clickable preview instead of a mystery box. Try it now: Open Graph Tag Generator — it takes about 30 seconds.