Skip to main content
SlapMyWeb
Skip to tool
SEO

Open Graph Tag Generator

Generate Open Graph meta tags with a live Facebook/LinkedIn preview. Paste the HTML in your page head and every shared link looks pixel-perfect.

1200 x 630 image preview
example.com
Page Title
Page description will appear here.
<head>
<meta property="og:type" content="website"/>
<meta property="og:locale" content="en_US"/>

What is Open Graph Tag Generator?

Open Graph tags are HTML meta elements that control how your website appears when shared on Facebook, LinkedIn, Discord, Slack and other platforms. Without them, social networks guess what image, title and description to show, often getting it wrong. The Open Graph Tag Generator lets you fill in a simple form, preview the exact Facebook card in real time, and copy production-ready HTML meta tags to paste into your page head. All processing happens in your browser — nothing is sent to a server.

How to Use Open Graph Tag Generator

  1. 1

    Fill in your page details

    Enter the title, description, image URL, page URL, type, site name and locale for your page.

  2. 2

    Check the live preview

    The Facebook card preview updates in real time so you can see exactly how your link will appear when shared.

  3. 3

    Copy the HTML

    Click the Copy button to grab the generated meta tags and paste them inside the <head> of your HTML document.

Features

  • Live Facebook/LinkedIn card preview
  • Supports all 7 core OG properties
  • Type dropdown with website, article, product, video
  • Locale support for international pages
  • HTML-escaped output safe for any document
  • 100% client-side — no data sent to servers

Related Tools

Frequently Asked Questions

What size should the og:image be?+
Facebook recommends 1200x630 pixels. Images smaller than 600x315 may not display as a large card. Use PNG or JPG format for best compatibility.
Do I need og:url if I already have a canonical tag?+
Yes. og:url tells social platforms which URL to associate shares with, while the canonical tag tells search engines. They should usually match, but they serve different purposes.
What og:type should I use?+
Use "website" for homepages and general pages, "article" for blog posts and news, "product" for e-commerce product pages, and "video" for video content pages.
Will these tags work on LinkedIn too?+
Yes. LinkedIn reads the same Open Graph tags as Facebook. Your card will look similar on both platforms. LinkedIn may crop images slightly differently.
How do I test my OG tags after adding them?+
Use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) to scrape your URL and preview the card. LinkedIn has a similar Post Inspector tool.
Is my content sent to any server?+
No. Everything runs in your browser. The image URL is only used in a CSS background-image for the preview and in the generated HTML output.