My Tool Studio
SEOURL-first

Open Graph Generator

This Open Graph generator builds the og meta tags that control how a link looks when it is shared on Facebook, LinkedIn, X, WhatsApp, Slack, Discord, Telegram and Pinterest. Paste a URL to load the tags a page already has, or fill in title, description, URL, type, image, alt text, image size, site name and locale. Pick article, product, profile, video or book and extra fields appear, such as publish dates or price and currency. Previews for each platform update as you type. The tool checks your image for reachability, file type, file size, dimensions and shape, and you can preview a local image before uploading it. One tick adds matching twitter tags. Copy or download the result as HTML or as Next.js metadata.

Always freeNo sign upRuns in your browser

0 characters (about 60 shows in full)

0 characters (aim for 155 or fewer)

Absolute URL, ideally 1200 x 630 JPG or PNG

Describes the image for screen readers

Language_TERRITORY, e.g. en_US or hi_IN

Colours the side bar of Discord embeds

Link previews
No image
example.com
Missing og:title

Seeing an old card on Facebook? Refresh its cache with the Facebook Sharing Debugger.

Previews are close approximations. Each app changes its layout by device and version, and caches a link card after the first share.

<meta property="og:title" content="" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />

How to use

01

Load an existing page or start fresh

Paste a URL and click Auto-fill to read the og tags the page already has, falling back to its title and meta description. Or type your own values, or click Try sample to see a finished example.

02

Fill in the fields and check the image

Edit the og fields and pick a type; article and product add their own fields. When the image URL loads, width and height fill in, and warnings appear for small, oddly shaped, heavy or unreachable images.

03

Compare previews and copy the tags

Switch between the platform tabs or open All. Keep Also add matching twitter:* tags ticked for X, choose HTML or Next.js metadata, then press Copy or Download and add the code to your page.

Why Open Graph Generator

og:image sizes by platform

One 1200 x 630 image covers most platforms, since they all read og:image. The table lists what each one expects so you can check an existing image against it.

If you want a square picture for a small summary card on X, set it with twitter:image in the Twitter Card Generator, because og:image is shared by every platform.

PlatformRecommended imageNotes
Facebook1200 x 630 px (1.91:1)Under about 600 x 315 px shows as a small image
LinkedIn1200 x 627 px (1.91:1)Caches the first scrape; refresh it with Post Inspector
X, large image cardAt least 300 x 157 px, 2:1 shapeUnder 5 MB; reads twitter:image first, then og:image
WhatsApp1200 x 630 px worksReads og:image; keep the file small so it loads
Slack and Discord1200 x 630 px worksRead og tags and show a smaller card; Discord colours its side bar with theme-color
Telegram1200 x 630 px worksShows og:site_name above the title; refresh with @WebpageBot

Common questions

Which og tags does the Open Graph generator output?
og:title and og:type always, plus og:description, og:url, og:image, og:image:secure_url, og:image:width, og:image:height, og:image:alt, og:site_name and og:locale whenever they apply. Article, product, profile, video and book types add their own tags, such as article:published_time or product:price:amount. With the twitter option ticked it also adds twitter:card, title, description, image and image:alt. Empty fields are left out.
What size should an og:image be?
1200 by 630 pixels is the common choice, a 1.91:1 shape that Facebook and LinkedIn show as a large card. Images under about 600 pixels wide are often shown as a small thumbnail instead. Keep the file small, a compressed JPG or PNG well under 1 MB, because some apps do not load large preview images.
Why should I add og:image:width and og:image:height tags?
Facebook says that with these tags it can show the image on the very first share, without first downloading and measuring it. Without them, the first person to share a new URL may get a card with no image. The generator fills both from the loaded image when you leave them empty.
Does the Open Graph generator read tags my page already has?
Yes. Auto-fill uses existing og values first, then falls back to the page's title tag and meta description when the og versions are missing. It also picks up og:image:alt, width and height. Relative image paths are turned into full URLs.
Do I need twitter tags if my page already has Open Graph tags?
X falls back to og values for the title, description and image, but the card layout comes from twitter:card, which has no Open Graph equivalent. Ticking the twitter option adds that tag, set to summary_large_image when you have an image, along with matching title, description and image tags.
Which og:type should I choose for my page?
Use website for home pages, landing pages and tool pages, and article for blog posts and news. Choosing article shows fields for the publish and modified dates, author, section and tags. Product adds price, currency, availability and condition. If a page you load uses a type that is not in the list, it is kept exactly as found.
Are the Open Graph previews exactly what each platform will show?
They are close approximations, not copies. Fonts, spacing and where long titles are cut differ by platform, app version and device. The previews are for catching big problems, such as a missing image, a cropped picture or a title that runs long. For the real result, share the link once in a private chat or use each platform's debugger.
Why does Facebook still show my old image after I changed og:image?
Facebook and LinkedIn cache what they read the first time a URL is shared. After updating the tags, paste the URL into the Facebook Sharing Debugger and click Scrape Again, or into the LinkedIn Post Inspector, to refresh it. Changing the image file name also helps, because a new image URL is fetched fresh.
Can I preview an og:image before I upload it?
Yes. Click Preview a local image and pick a file from your device. It is shown in every preview and measured in your browser, without being uploaded anywhere. Once it looks right, upload it to your site and paste its full https URL into og:image, because platforms can only read images on a public address.

More SEO tools

View all

Meta Tag Generator

Build meta, OG and X tags

SEO
URL-first

Meta Tag Analyzer

Audit meta tags for one or 20 URLs

SEO
URL-first

Robots.txt Generator

Build a robots.txt with presets

SEO

Robots.txt Tester and Validator

Test URLs against any robots.txt

SEO
URL-first