// generate og meta tags for social sharing in seconds
Generate og:title, og:description, og:image, og:type and more Open Graph meta tags for perfect social sharing previews on Facebook, Twitter, LinkedIn.
Ready to generate
Fill in the fields and click Generate OG TagsEnter your page title, description, URL, image URL, and content type in the form.
Click "Generate OG Tags" to instantly create all Open Graph and Twitter Card meta tags.
Copy the generated code and paste it inside your HTML <head> section.
Open Graph tags are HTML meta tags that control how your content appears when shared on social networks like Facebook, LinkedIn, and Twitter. Without them, social platforms guess what image and text to show — often with poor results.
Open Graph (OG) tags are HTML meta tags in your page's <head> that tell social media platforms how to display your content when it's shared. They control the title, description, image, and type shown in link previews on Facebook, LinkedIn, Slack, and more.
The recommended size is 1200×630 pixels with an aspect ratio of 1.91:1. Keep the file size under 8MB. Facebook and most platforms scale this down for display but use the full resolution for preview generation.
The HTML <title> tag is used by browsers and search engines. The og:title tag is specifically for social media platforms. They can be different — your page title might be optimized for SEO while your OG title is written to maximize social engagement.
No — they complement each other. Twitter Card tags (twitter:title, twitter:image, etc.) are specifically for Twitter/X. However, Twitter will fall back to OG tags if Twitter Card tags are missing. It's best practice to include both.
Aim for 150–160 characters. Facebook truncates descriptions around 200 characters, LinkedIn around 150. Write a compelling sentence that makes people want to click — social descriptions don't affect SEO rankings directly but do impact click-through rates.
Place all OG meta tags inside the <head> element of your HTML, ideally near the top. Social media crawlers read the entire <head> block, so order doesn't matter much — but putting them early ensures they're parsed even if crawlers time out.
Social platforms cache link previews aggressively. Use the platform's debug/scraping tool to force a refresh: Facebook Sharing Debugger, Twitter Card Validator, or LinkedIn Post Inspector. These tools re-scrape your URL and clear the cache.
Use website for general pages, homepages, and landing pages. Use article for blog posts, news articles, and editorial content. Other types like video.movie or music.album are for specialized content platforms and enable richer integrations on some networks.
When someone shares your webpage on Facebook, LinkedIn, Twitter, or Slack, those platforms need to know what image to display, what title to show, and what description to use. Without Open Graph tags, they'll guess — and often get it wrong. Our free Open Graph Tag Generator helps you build all the essential OG meta tags in seconds, with a live social card preview so you can see exactly how your link will look before it goes live.
💡 Looking for SEO-optimized themes and HTML templates? MonsterONE offers unlimited downloads of website templates, landing pages, and UI kits — great for launching projects that need proper OG tag setup from day one.
Open Graph (OG) is a protocol originally created by Facebook in 2010, now adopted universally across the web. By adding specific <meta> tags with the property="og:*" attribute to your HTML <head>, you give social media crawlers precise instructions about your content. The protocol defines a set of properties including title, description, image, URL, content type, locale, and site name.
Here's what a complete set of Open Graph tags looks like in practice:
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Example Site">
<meta property="og:locale" content="en_US">Studies consistently show that social posts with rich link previews receive significantly higher engagement than plain URL links. When your OG image is crisp, your title is compelling, and your description is clear, users are far more likely to click. Conversely, broken previews — a missing image, truncated title, or generic description — signal low quality and reduce click-through rates dramatically.
Open Graph tags also affect how your content appears in messaging apps. Slack, Discord, iMessage, WhatsApp, and Telegram all use OG tags to generate link unfurls. If you're running a marketing campaign or sharing content with a community, well-crafted OG tags ensure your link makes a strong impression every time it's shared.
While there are dozens of OG properties defined in the spec, most websites only need a core set. The four required properties are og:title, og:type, og:image, and og:url — these are the minimum Facebook requires to properly display a link preview. Beyond that, og:description and og:site_name are highly recommended additions that significantly improve how your content appears.
The og:title property should be 60 characters or fewer for best display across platforms. Unlike your SEO page title, it doesn't need to include your brand name — focus on making it descriptive and click-worthy. The og:description should be 150–160 characters: a single strong sentence explaining what the user will get from clicking the link.
Your og:image is the most visually impactful element of any link preview. Use an image sized at 1200×630 pixels (1.91:1 aspect ratio) for the best compatibility across all platforms. This ensures your image renders correctly on both desktop and mobile without cropping. Keep file size under 8MB — ideally under 1MB for fast loading by social crawlers. Use JPEG for photographs and PNG for graphics with text or transparent elements.
Avoid images with important information in the corners or edges, as some platforms apply slight cropping. Text overlaid on images should use high-contrast colors and readable fonts. For articles, a header image with your brand watermark and the article's main visual performs best. For product pages, use a clean product shot on a solid background.
Twitter/X has its own meta tag system called Twitter Cards, which uses name="twitter:*" instead of property="og:*". The two systems serve the same purpose but Twitter's crawler reads its own tags first, falling back to OG tags if Twitter-specific tags aren't found. Our generator includes both sets of tags so your content looks great everywhere.
The twitter:card property defines the card format. summary_large_image is the most impactful choice for most content — it shows a large image preview above the title and description. summary shows a smaller square thumbnail to the left of the text. Unless you have a specific reason to use the smaller format, summary_large_image will generate more engagement.
After adding OG tags to your page, verify them using platform-specific debugging tools. The Facebook Sharing Debugger (developers.facebook.com/tools/debug) lets you enter any URL and see exactly how Facebook reads your OG tags, including any errors or warnings. It also lets you refresh the cache if you've recently updated your tags. The LinkedIn Post Inspector (linkedin.com/post-inspector) does the same for LinkedIn. Twitter's Card Validator has been deprecated, but you can test by pasting a URL into a tweet draft to see the preview.
Our tool's live preview gives you an approximation of how your card will look, but we recommend running your URL through the official platform debuggers before publishing, since they render the actual scraped data from your live page.
For static websites, adding OG tags manually to each page's HTML is straightforward. For dynamic websites — CMSes, e-commerce stores, or web apps — you'll want to generate OG tags programmatically using your page's data. WordPress, for example, handles this through the Yoast SEO or Rank Math plugins. In PHP, you can echo the tags using your page variables. In React or Next.js, use the next/head component or a library like react-helmet to inject tags server-side.
The key rule is that OG tags must be present in the initial HTML response — JavaScript-rendered OG tags are often invisible to social media crawlers that don't execute JavaScript. If your site is a SPA, ensure your server renders at least the <head> content with proper OG tags for each unique URL.