Meta Tag & OpenGraph Generator
Build the meta tags a page needs for search results and social previews: title, description, canonical URL, Open Graph and Twitter card tags. Fill in the fields, see the markup assemble as you type, and paste the block into your page head.
Enter Page Metadata Details
Google & Social Card Live Preview
https://mywebsite.com
My Awesome Website — Premium Tools
Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads.
mywebsite.com
My Awesome Website — Premium Tools
Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads.
<!-- Primary Meta Tags --> <title>My Awesome Website — Premium Tools</title> <meta name="title" content="My Awesome Website — Premium Tools" /> <meta name="description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://mywebsite.com" /> <meta property="og:title" content="My Awesome Website — Premium Tools" /> <meta property="og:description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <meta property="og:image" content="https://mywebsite.com/og-image.png" /> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:url" content="https://mywebsite.com" /> <meta property="twitter:title" content="My Awesome Website — Premium Tools" /> <meta property="twitter:description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <meta property="twitter:image" content="https://mywebsite.com/og-image.png" />
How it works
- 1
Enter the page title and description you want search engines and social platforms to show.
- 2
Add the canonical URL and the preview image URL — both must be absolute, not relative paths.
- 3
Review the generated tags, including the Open Graph and Twitter card equivalents.
- 4
Copy the block and paste it inside the head element of your page.
What people use it for
- Adding social preview tags to a landing page that currently shares as a blank card.
- Setting a canonical URL on a page that is reachable at more than one address.
- Preparing meta tags for a client site before handing it over.
- Learning which tags actually matter by seeing them generated together.
Supported formats & options
| Generated tags | title, meta description, canonical link, Open Graph (og:title, og:description, og:url, og:image), Twitter card tags |
|---|---|
| Output | Plain HTML you paste into the head element |
Key advantages & benefits
One source, three consumers
Search results, Open Graph and Twitter cards are generated together from the same input, so they cannot drift apart.
Correct tag names
Open Graph uses property attributes and Twitter uses name attributes — a distinction that is easy to get wrong by hand.
Immediate feedback
The markup assembles as you type, so you can see the finished block before pasting it.
Framework-agnostic output
Plain HTML tags that work in a static site, a template, a CMS field or a hand-written page.
Limits & things to know
- Titles and descriptions are rewritten by search engines when they judge a different snippet more useful — these tags are strong input, not a guarantee.
- The preview image must be an absolute URL that is publicly reachable. Social crawlers cannot fetch localhost, an authenticated page or a relative path.
- Social platforms cache previews. After changing tags you usually need to re-scrape the URL in the platform's own debugging tool before the new card appears.
Troubleshooting
The social card still shows old content
That is a platform-side cache. Re-scrape the URL in the platform's sharing debugger to force a refresh — changing the tags alone does not clear it.
No image appears in the preview card
Check that og:image is an absolute HTTPS URL, publicly accessible, and large enough (1200x630 is the safe standard). Small or blocked images are dropped silently.
Google shows a different description
Google generates a snippet it judges more relevant to the query. Make sure the description accurately summarises the page; it will be used more often when it matches intent.
Privacy & data handling
Tags are assembled from your input in the browser. The URLs and text you enter are not sent to our server or logged.
Meta Tag Generator — Title, Description & Open Graph Tags
Generate a complete set of SEO meta tags — title, meta description, canonical, Open Graph and Twitter Card — and copy them straight into your page head. A free meta tag generator with live length feedback so nothing gets truncated in the search snippet.
- Title and meta description with length guidance — live character counts keep you inside the roughly 60-character title and 155-character description that search engines display without cutting off.
- Open Graph tags for social sharing — og:title, og:description, og:image and og:url control exactly how a link previews on Facebook, LinkedIn, Slack and WhatsApp.
- Twitter Card markup — summary and large-image card tags so shared links render with a proper preview instead of a bare URL.
- Copy-paste ready HTML — the output is a valid block of head markup, ready for a template, a static site or a CMS SEO field.
- No sign-up, no plugin — everything is generated in your browser — a practical option when the site has no SEO plugin installed.
Free and unlimited. Generate the matching permalink with the URL Slug Generator and the site icon with the Favicon Generator.
Frequently asked questions
Where should I paste these meta tags?
Paste the generated HTML snippet inside the <head> section of your web pages.
Why does Google show a different description than mine?
Google rewrites snippets when it judges another passage more relevant to the query. A description that accurately summarises the page gets used far more often than one written purely for keywords.
What size should the og:image be?
1200x630 is the safe standard. It must be an absolute, publicly reachable HTTPS URL — social crawlers cannot fetch localhost, a relative path or a page behind authentication.
I updated my tags but the shared card is unchanged. Why?
Social platforms cache previews. Re-scrape the URL in the platform's own sharing debugger to force a refresh; changing the tags alone will not clear their cache.
Related tools
QR Code Generator
Turn any link or text into a scannable QR code
CSS Glassmorphism Generator
Generate modern glass UI effects & CSS code
Text Case Converter
Switch between UPPER, lower, Title & camelCase
Lorem Ipsum Placeholder Generator
Generate dummy placeholder text for UI layouts