Meta Tag Generator
This free meta tag and Open Graph generator turns your page title, description, URL and share image into SEO meta tags, Open Graph tags and Twitter card tags. Character counters keep you within the recommended lengths, and live previews show the link in Google, on Facebook, LinkedIn and X, and in chat apps. Copy the HTML, a Next.js metadata export or JSON-LD — free, in your browser.
Page details
The absolute URL people share (og:url).
1200×630 px (1.91:1), under 5 MB, absolute https URL. The preview just loads this URL in your browser — nothing is fetched or uploaded by this tool.
Leave empty to use the page URL.
Your draft is saved in this browser only.
Live previews
Search result
example.com
https://example.com
Your page title
Your meta description appears here. Aim for 120–160 characters that tell searchers exactly what they will get.
Facebook / LinkedIn post
example.com
Your page title
Your meta description appears here. Aim for 120–160 characters that tell searchers exactly what they will get.
X / Twitter card (large image)
From example.com
Chat unfurl (Slack / Discord style)
example.com
Your page title
Your meta description appears here. Aim for 120–160 characters that tell searchers exactly what they will get.
Previews are approximations of each platform's layout. Real apps may crop images and cut text differently, and they cache previews — after changing tags, use the platform's own debugger to refresh them.
- Add a title — it is the headline in search results and every link preview.
- Add a description — without one, Google and social apps pick text from the page.
- Add an image (1200×630 px recommended) — links with an image get far more clicks in social feeds.
<!-- Primary meta tags -->
<meta name="robots" content="index, follow" />
<!-- Open Graph (Facebook, LinkedIn, Slack, Discord…) -->
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<!-- X / Twitter -->
<meta name="twitter:card" content="summary_large_image" />Paste inside the <head> of your page, replacing any existing title and description tags.
How to create meta tags
- Write the title and description. Enter a page title and a meta description. The counters turn green in the recommended ranges: about 50–60 characters for the title and 120–160 for the description.
- Add the URL and share image. Enter the absolute page URL and the URL of a 1200×630 px share image, plus alt text, site name, og:type, X/Twitter handle and card type.
- Check the previews. See how the link will look as a search result, a Facebook or LinkedIn post, an X card and a Slack or Discord unfurl, and fix anything flagged in the warnings.
- Copy the code. Copy the HTML for your page's <head>, the Next.js metadata export, or a schema.org WebPage JSON-LD snippet. Your draft is saved in your browser for next time.
Which meta tags matter, and where they show
| Tag | What it does | Used by |
|---|---|---|
| <title> | Headline in search results and browser tabs | Google, Bing, browser tab |
| meta name="description" | Snippet text under the search result title | Google, Bing |
| link rel="canonical" | The preferred URL when the same content has several URLs | Search engines |
| meta name="robots" | Whether the page may be indexed and its links followed | Search engines |
| og:title / og:description | Title and text of a shared link card | Facebook, LinkedIn, Slack, Discord, WhatsApp |
| og:image | The preview image (1200×630) | All social and chat apps |
| og:url / og:type / og:site_name | Canonical share URL, content type and brand name | Facebook, LinkedIn |
| twitter:card | Card layout: summary or summary_large_image | X (Twitter) |
| meta name="theme-color" | Browser UI colour and chat embed accent | Mobile browsers, Discord |
Meta keywords are not in the list on purpose: Google has ignored meta name="keywords" for well over a decade, so adding it only reveals your keyword strategy to competitors.
Writing titles and descriptions that earn the click
- Lead with the main keyword. Put what the page is about first and your brand last, e.g.
Subnet Calculator — IPv4 & IPv6 | Brand. - Make every title unique. Duplicate titles across pages make it hard for search engines to tell which page to rank.
- Answer the searcher in the description. Say what they get and why it is better — free, fast, no signup — in one or two sentences. Google may rewrite descriptions that don't match the query, so keep them specific.
- Write social copy for people, not robots. og:title can be punchier than the SEO title, and the image does most of the work in a feed: use readable text, high contrast and nothing important near the edges.
No share image yet? Design a 1200×630 Open Graph image in the free NJHTools design editor, download it as PNG or JPG, host it on your site and paste its absolute URL into the Image URL field above.
Related tools
Frequently Asked Questions
How long should a meta title and description be?↓
Keep titles to about 50–60 characters and descriptions to about 120–160 characters. Google truncates by pixel width rather than a fixed character count, so these ranges are a safe guide that keeps the important words visible on desktop and mobile.
What are Open Graph tags?↓
Open Graph tags are meta tags such as og:title, og:description, og:image and og:url that tell Facebook, LinkedIn, Slack, Discord, WhatsApp and many other apps what title, text and image to show when someone shares your link. Without them, apps guess, often picking the wrong image or text.
Do I need Twitter card tags if I have Open Graph tags?↓
X (Twitter) falls back to Open Graph for the title, description and image, but it needs twitter:card to choose the layout. Add twitter:card set to summary_large_image for a big image card; twitter:site credits your account. This generator outputs both sets.
What size should an og:image be?↓
Use 1200 × 630 pixels (an aspect ratio of 1.91:1), as a PNG or JPG under about 5 MB, served from an absolute https URL. Keep text and logos away from the edges because some apps crop the image to a square or a narrower ratio.
Why doesn't my new image or title show when I share the link?↓
Social platforms cache link previews, sometimes for days. After updating your tags, re-scrape the URL with the platform's own tool, such as Facebook's Sharing Debugger or LinkedIn's Post Inspector. Also check that the image URL is public and absolute and that the page isn't blocked by robots or a login.
Does this tool fetch or upload my page?↓
No. Everything is generated in your browser from what you type. The previews simply display your image URL in an image element, so your browser loads it directly; the tool never fetches your page or sends your data to a server. Your draft is stored only in your browser's local storage.
Last updated: