Social Share Link Preview

What are Open Graph Meta Tags?

Open Graph meta tags are special HTML <meta> elements that describe a web page for social platforms and messaging apps. When someone pastes your link on Facebook, X (Twitter), LinkedIn, Slack, or iMessage, the platform fetches your page and reads these tags to build a rich preview card—title, description, and image—instead of showing a bare URL.

Where they came from

Open Graph was introduced by Facebook in 2010 so that any website could define how its links appear when shared on Facebook. The protocol uses property="og:..." and content="..." in the HTML. Other platforms (Twitter, LinkedIn, Discord, etc.) adopted the same or similar tags, so today OG meta tags are the standard way to control link previews across the web.

Why they matter

Without OG tags, a platform may guess a title and description from your page content or show a generic favicon and URL. That often looks poor or misleading. With proper og:title, og:description, and og:image, you control exactly what people see when your link is shared, which improves clicks and trust.

How they work

When a user shares your URL, the platform’s crawler requests your page and parses the HTML. It looks for <meta property="og:..." content="..."> in the <head>. The crawler does not run JavaScript; it only reads the static HTML. So OG tags must be present in the initial HTML response (e.g. from the server or from a pre-rendered build).

The most commonly used tags are:

• og:title — Headline for the preview (often your page title).
• og:description — Short summary; many platforms show one or two lines.
• og:image — Absolute URL to the preview image (e.g. 1200×630 px).
• og:url — Canonical URL of the page (helps avoid duplicate content issues).
• og:site_name — Name of your site or app (optional but useful).
• og:type — e.g. website or article.

Who uses them

Facebook, X (Twitter), LinkedIn, Pinterest, Slack, Discord, Telegram, WhatsApp, iMessage, and many other apps use Open Graph (or a compatible subset) to render link previews. Some also support Twitter Card tags (twitter:title, twitter:image, etc.). Providing both OG and Twitter tags gives the best result across platforms; this tool focuses on OG, which covers the majority of use cases.

How to Add Meta Tags in HTML

Open Graph meta tags belong in the <head> of your HTML document. Each tag is a single <meta> element with property and content attributes.

Step 1: Open your page’s HTML or template

If you write plain HTML, open the .html file and find the <head> section. If you use a framework (Next.js, React, etc.), use the appropriate place for global or per-page meta (e.g. metadata in Next.js App Router, or a shared layout head).

Step 2: Add the meta tags inside <head>

Insert one <meta> per Open Graph property. Use the exact property names and put the value in content. The image URL must be absolute (include https://).

<meta property="og:type" content="website">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A short description for the preview.">
<meta property="og:image" content="https://yoursite.com/og-image.jpg">
<meta property="og:site_name" content="Your Site Name">

Step 3: Verify and re-share

After publishing, use this tool or a validator (e.g. Facebook Sharing Debugger, Twitter Card Validator) to confirm the preview. Many platforms cache the first fetch; if you change the tags, you may need to use the platform’s “refresh” or “rescrape” option so the new image and text appear when the link is shared again.