Open Graph Generator: Create OG Tags for Social Sharing

When someone shares your link on Facebook, LinkedIn, Slack, or Discord, the platform fetches your Open Graph tags to build a rich preview card. Without these tags, shared links appear as plain text URLs with no image, no title context, and no reason for anyone to click. Open Graph tags give you direct control over that preview.

What Are Open Graph Tags?

Open Graph (OG) is a protocol created by Facebook in 2010 that turns any web page into a rich object in a social graph. The tags are placed in your HTML <head> section as meta elements with the property attribute:

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description of your page">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

These five tags form the foundation of every social share preview. When a platform encounters your link, it reads these tags and renders a card with your specified title, description, image, and link.

Essential OG Properties

og:title

The headline shown in the share preview. This can differ from your HTML <title> tag, letting you optimize separately for search engines and social platforms.

Length: 60-90 characters for best display across platforms
Tip: Be more conversational than your SEO title; social feeds are informal

og:description

The supporting text beneath the title in the preview card.

Length: 150-200 characters
Tip: Frame it as a value proposition — tell people what they get by clicking

og:image

The image displayed in the share card. This single element has the biggest impact on click-through rates.

Recommended size: 1200 x 630 pixels (1.91:1 aspect ratio)
Minimum size: 600 x 315 pixels
Format: JPEG or PNG (avoid SVG — most platforms do not render it)
Tip: Use a full absolute URL including https://

og:url

The canonical URL for the page. This consolidates share counts when the same page is accessible from multiple URLs.

og:type

Describes the type of content. Common values:

Type	Use For
`website`	Homepage, landing pages
`article`	Blog posts, news articles
`product`	E-commerce product pages
`profile`	Personal or company profiles

For articles, you can add supplementary tags like article:published_time, article:author, and article:section to provide richer metadata.

Platform-Specific Behavior

Facebook and Messenger

Facebook uses OG tags natively since it invented the protocol. Images render as large cards when they meet the 1200x630 minimum. Facebook caches OG data aggressively — use the Facebook Sharing Debugger to clear the cache after updating your tags.

LinkedIn follows the OG standard closely. It strongly favors images at the 1.91:1 ratio and truncates descriptions more aggressively than Facebook. Keep LinkedIn descriptions under 150 characters for clean display.

Slack and Discord

Both platforms render OG previews in chat. Slack uses og:image but falls back to the first image on the page if missing. Discord renders images in an embed-style card and supports larger images well.

Twitter/X

Twitter has its own twitter:card meta tags, but falls back to OG tags when Twitter-specific tags are absent. If you only set OG tags, Twitter will still generate a preview card from them.

How to Use Our Open Graph Generator

Enter your page title — write something compelling for social feeds
Write a description — focus on what the reader gains by clicking
Add your image URL — use a full absolute URL to an image at 1200x630
Set the canonical URL — the primary URL for this page
Choose the content type — website, article, product, or profile
Add optional properties — site name, locale, and article metadata
Copy the generated tags — paste them into your HTML <head>

Common Mistakes to Avoid

Missing og:image. Links without images get dramatically fewer clicks on every platform.
Using relative URLs. All OG values must be absolute URLs starting with https://.
Image too small. Below 600x315 pixels, platforms either skip the image or render a tiny thumbnail.
Not testing after changes. Platforms cache OG data. After updating tags, use platform debugging tools to force a fresh scrape.
Identical OG and SEO titles. You have an opportunity to tailor your messaging for each context. Social titles can be more casual and direct.

Practical Tips

Create a default OG image for your site so every page has at least a branded fallback.
Include text on your OG images — titles and short phrases overlaid on visuals perform well in feeds.
Test your OG tags with Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, and Twitter’s Card Validator before launch.
Update OG tags when you make significant content changes; stale previews misrepresent your page.

Frequently Asked Questions

Do Open Graph tags affect SEO rankings? OG tags do not directly influence search engine rankings. However, pages with rich social previews get more shares and clicks, which increases traffic and can indirectly improve your SEO signals.

What happens if I don’t add OG tags? Platforms will attempt to scrape your page title and first image as fallbacks. The result is usually a poorly formatted preview with a mismatched image or no image at all.

Can I use different titles for SEO and social sharing? Yes. Your HTML <title> tag is for search engines, and og:title is for social platforms. Optimizing each separately is considered best practice.

How often should I update my OG image? Update it whenever your content or branding changes significantly. For blog posts, create a unique OG image for each article to stand out in social feeds.

Try our free Open Graph Generator to create perfect social sharing previews for your website.