Open Graph Generator — Control How Your Links Look on Social Media

Learn what Open Graph tags are, how og:title, og:image, and og:description control social media link previews, how to add Twitter Cards, and how to generate all OG tags with a free tool.

By sadiqbd · June 6, 2026

Open Graph Generator — Control How Your Links Look on Social Media

When your content gets shared on social media, Open Graph controls what it looks like

Share a link on Facebook, LinkedIn, WhatsApp, or Twitter without Open Graph tags and you get an unpredictable result — a random image from the page, a snippet of text that makes no sense out of context, or no image at all. Add Open Graph tags and you control exactly what appears: the title, description, image, and type of preview that shows when anyone shares your URL.

An Open Graph tag generator produces the correct HTML for all essential OG tags based on your inputs — ready to paste into your page's <head>.

What Open Graph Is

Open Graph Protocol (OGP) was originally created by Facebook in 2010 to enable "rich objects" in the social graph — structured metadata that tells social platforms how to represent a shared URL. It's now supported by virtually every social platform and messaging app that generates link previews.

The basic premise: rather than guessing what title, description, and image to show for a URL, social platforms read standardised <meta property="og:..."> tags from the page.

The Core Open Graph Tags

<!-- Required -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description for social sharing" />
<meta property="og:image" content="https://example.com/images/social-preview.jpg" />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:type" content="website" />

<!-- Recommended -->
<meta property="og:site_name" content="sadiqbd.com" />
<meta property="og:locale" content="en_US" />

<!-- Image details (important for quality previews) -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />

og:title

The title shown in the social preview — can differ from your HTML <title> tag. Often the same, but social titles can be slightly longer or have different phrasing since they're not constrained by SERP character limits.

og:description

The description shown under the title in the preview. 1–3 sentences, written for a social audience. Can differ from the meta description.

og:image

The most visually impactful tag. The image shown in the share preview.

Image requirements:

Minimum size: 600×315px (Facebook minimum)
Recommended size: 1200×630px (the standard for most platforms)
Aspect ratio: 1.91:1 for standard rectangular previews
Format: JPG or PNG; avoid GIF and WEBP for maximum compatibility
File size: Under 8MB (Facebook limit)
Must be an absolute URL (https://)

og:url

The canonical URL of the page. Should match the canonical tag. This prevents different URL variants (with/without www, with/without tracking parameters) from generating separate cached previews.

og:type

The type of content. Values include:

website — default for most pages
article — for blog posts and news articles (enables article-specific tags)
product — for e-commerce product pages
video.movie — for video content
profile — for person profiles

Twitter Card Tags

Twitter (now X) has its own separate metadata system — Twitter Cards — that works alongside Open Graph:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Description for Twitter previews" />
<meta name="twitter:image" content="https://example.com/images/social-preview.jpg" />
<meta name="twitter:site" content="@yourtwitterhandle" />

Card types:

summary — small image preview (1:1 ratio)
summary_large_image — large banner image preview (1.91:1 ratio) — most commonly used
app — for mobile apps
player — for video/audio

If Twitter Card tags are absent, Twitter falls back to Open Graph tags. Including both ensures optimal rendering on both platforms.

How to Use the Open Graph Generator on sadiqbd.com

Enter your page URL — the canonical URL of the page
Enter your OG title — the social preview title
Enter your OG description — 1–3 sentence social description
Enter your OG image URL — the full URL to your 1200×630 social image
Select content type — website, article, product
Enter site name — your website/brand name
Generate — the tool produces complete HTML for all OG and Twitter Card tags

Real-World Examples

Tool page with custom OG image

sadiqbd.com's EMI Calculator page:

<meta property="og:title" content="Free EMI Calculator — Calculate Your Monthly Loan Payment" />
<meta property="og:description" content="Find your exact monthly loan installment in seconds. Enter loan amount, interest rate, and tenure. Free, instant, no sign-up needed." />
<meta property="og:image" content="https://sadiqbd.com/images/og/emi-calculator.jpg" />
<meta property="og:url" content="https://sadiqbd.com/calculators/emi" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="sadiqbd.com" />
<meta name="twitter:card" content="summary_large_image" />

When someone shares this URL on WhatsApp or LinkedIn, they see the custom image and compelling description — driving higher click-through from the share.

Blog post with article type

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2024-06-10T10:00:00Z" />
<meta property="article:author" content="https://sadiqbd.com/author/sadiqur" />
<meta property="article:section" content="Finance" />
<meta property="article:tag" content="EMI Calculator" />
<meta property="article:tag" content="Loan" />

Article-specific OG tags enable richer previews on platforms that support them (article date, author attribution).

Diagnosing a broken share preview

A user reports your page looks bad when shared on Facebook — wrong image, truncated title. Checking the OG tags reveals:

og:image is missing → Facebook chose a random small image from the page
og:title is absent → Facebook used the HTML <title> tag, which includes the brand name awkwardly
og:description is missing → Facebook pulled random text from early in the page

Add all three required OG tags to fix the share preview.

Designing Social Preview Images

The OG image is the first thing people see when a link is shared. It directly affects whether they click. Some guidance:

What works:

Clear, readable text overlay on the image (title or key benefit)
Brand logo positioned consistently (corner or bottom)
High contrast — social feeds are visually busy; the image needs to stand out
Relevant visual that matches the content topic

What to avoid:

Text so small it's unreadable at feed thumbnail size
Generic stock photos with no connection to the content
Images with important content near the edges (some platforms crop)
Dark images with dark text (low contrast)

Consistent template approach: Create a template with your brand colours and font, then generate OG images for each page by swapping the title text. This is faster than custom images for every page and maintains visual brand consistency.

Verifying Open Graph Tags

Facebook Sharing Debugger: developers.facebook.com/tools/debug/ — paste any URL to see how Facebook scrapes and renders the OG tags. Use "Scrape Again" to clear cached previews after changes.

LinkedIn Post Inspector: linkedin.com/post-inspector/ — same function for LinkedIn previews.

Twitter Card Validator: cards-dev.twitter.com/validator — verify Twitter Card rendering.

Source view: View page source and search for og: to verify tags are present and correctly formatted.

Tips for Open Graph Implementation

Use unique OG images for important pages. Generic images produce generic previews. Pages you want shared should have custom OG images that are visually compelling.

Keep og:title under 60 characters for most platforms. Different platforms truncate differently — shorter titles work universally.

Set og:url to the canonical URL. When users share from pages with tracking parameters, og:url ensures the share uses the clean canonical URL, preventing duplicated cached previews.

Refresh Facebook's cache after changes. Facebook caches OG data aggressively. After updating tags, use the Facebook Sharing Debugger's "Scrape Again" feature to refresh the cache immediately.

Frequently Asked Questions

Do Open Graph tags affect SEO? Not directly as a ranking signal. But they significantly affect click-through rates from social shares — well-crafted OG tags mean more traffic from the same number of shares. More traffic and engagement indirectly supports rankings.

What if I don't have a custom OG image? Platforms fall back to any image they can find on the page, or show no image. A missing OG image produces an inconsistent, often poor-looking preview that reduces click-through from social shares.

Does og:description replace the meta description? No — they serve different purposes. The meta description is for search engine results pages. The og:description is for social share previews. Platforms don't use meta description for social previews; og:description is required for controlled social presentation.

Can different pages use the same OG image? Technically yes, but it reduces the relevance and specificity of your share previews. Important pages deserve tailored images.

Is the Open Graph generator free? Yes — completely free, no sign-up required.

Open Graph tags turn every shared link into a controlled, branded experience. The generator makes getting the syntax right instant — the creative work of image and copy is still yours to do, but the HTML is handled.

Try the Open Graph Generator free at sadiqbd.com — generate all OG and Twitter Card tags for any page instantly.