🔒 Runs in your browser — nothing is uploaded✓ Free, no signup
Meta Tag & Open Graph Generator
Fill in your page details to get the meta, Open Graph and X card tags for your <head> — and preview how the page looks in Google results and social shares.
Page details
Preview
Acme Notes
example.com
Acme Notes — Simple, Private Note Taking
Write, organise and search your notes from any device. Free to start, with end-to-end encryption and offline support.
Previews are approximate — each platform changes its layout from time to time.
HTML tags
Paste these inside the <head> of your page.
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Acme Notes — Simple, Private Note Taking</title> <meta name="description" content="Write, organise and search your notes from any device. Free to start, with end-to-end encryption and offline support." /> <link rel="canonical" href="https://example.com/" /> <meta name="theme-color" content="#7c3aed" /> <!-- Open Graph (Facebook, LinkedIn, WhatsApp, Slack) --> <meta property="og:type" content="website" /> <meta property="og:title" content="Acme Notes — Simple, Private Note Taking" /> <meta property="og:description" content="Write, organise and search your notes from any device. Free to start, with end-to-end encryption and offline support." /> <meta property="og:url" content="https://example.com/" /> <meta property="og:site_name" content="Acme Notes" /> <meta property="og:locale" content="en_US" /> <!-- X (Twitter) --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Acme Notes — Simple, Private Note Taking" /> <meta name="twitter:description" content="Write, organise and search your notes from any device. Free to start, with end-to-end encryption and offline support." />
When should you use the Meta Tag Generator?
- Adding meta tags to a new website or landing page
- Making links look good when shared on Slack, LinkedIn, WhatsApp or X
- Checking title and description length for Google
How to use the Meta Tag Generator
- 1
Write a title and description
The counters turn amber or red when they're likely to be cut off.
- 2
Add a URL and image
Use your canonical URL and a 1200 × 630 share image.
- 3
Check the previews
Switch between Google, Facebook/LinkedIn and X.
- 4
Copy the tags
Paste them inside the <head> of your page.
Examples
Open Graph tags
Title
Acme Notes — Simple, Private Note Taking
Generated (excerpt)
<meta property="og:type" content="website" /> <meta property="og:title" content="Acme Notes — Simple, Private Note Taking" /> <meta name="twitter:card" content="summary_large_image" />
Common errors and how to fix them
Social sites show an old preview- They cache previews. Use the platform's debugger (such as Facebook's Sharing Debugger or LinkedIn's Post Inspector) to refresh it.
The image doesn't appear- og:image must be a full https:// URL that's publicly reachable — not a relative path.
More from Web & Network
Free tools that run in your browser — no signup, nothing uploaded.
URL Parser & Query String Parser
Break a URL into protocol, host, path, query parameters and hash.
IP Address Converter
Convert IPv4 between dotted, decimal, hex and binary, and expand IPv6.
HTTP Status Codes List
Every HTTP status code explained in plain English — searchable.
User Agent Parser & Checker
See your user agent and parse any UA string into browser, OS and device.
IP Subnet / CIDR Calculator
Calculate network, broadcast, host range and mask for any IPv4 CIDR.
Cookie & Set-Cookie Parser
Parse Cookie and Set-Cookie headers into a readable table with security checks.
CORS & Security Headers Generator
Generate CORS and security headers for Nginx, Apache, Express, Next.js and more.
What Is My Screen Resolution?
See your screen resolution, viewport size and device pixel ratio instantly.
JavaScript Keycode Finder
Press any key to see its event.key, event.code and keyCode.
Meta Tag Generator FAQ
Meta tags (og:title, og:description, og:image…) that tell Facebook, LinkedIn, Slack, WhatsApp and others what title, text and image to show when your link is shared.
X reads Open Graph tags as a fallback, but twitter:card is needed to choose the large-image layout.
Aim for about 50–60 characters for the title and 150–160 for the description, so Google doesn't cut them off.
1200 × 630 pixels (1.91:1) works across Facebook, LinkedIn and X's large card. Keep it under 5 MB.
No — Google ignores the keywords meta tag, so it isn't generated.
No. Everything runs in your browser, so your page details never leaves your device.