Meta Tag Generator

Generate SEO, Open Graph and X (Twitter) card tags with live Google, Facebook and X previews. Copy the code. Free and private.

Your page details

Page title (33/60)

✔ Good length.

Description (94/160)

✔ Good length.

Page address (canonical URL)

Share image address

A picture of 1200 × 630 pixels looks best.

Site name

X (Twitter) username

Author (optional)

Language and region

Page type

X (Twitter) card

Let search engines show this pageLet them follow its linksInclude charset and viewport

More options

Keywords (optional)

Theme colour (optional)

Your code

<!-- Basic tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NinjaFunction | Free Online Tools</title>
<meta name="description" content="Free online tools for developers, designers and students. Fast, private and no sign-up needed.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://ninjafunction.com/">

<!-- Open Graph (Facebook, LinkedIn, WhatsApp) -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://ninjafunction.com/">
<meta property="og:title" content="NinjaFunction | Free Online Tools">
<meta property="og:description" content="Free online tools for developers, designers and students. Fast, private and no sign-up needed.">
<meta property="og:image" content="https://ninjafunction.com/images/og-developer-tools.jpg">
<meta property="og:site_name" content="NinjaFunction">
<meta property="og:locale" content="en_US">

<!-- X (Twitter) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ninjafunction">
<meta name="twitter:title" content="NinjaFunction | Free Online Tools">
<meta name="twitter:description" content="Free online tools for developers, designers and students. Fast, private and no sign-up needed.">
<meta name="twitter:image" content="https://ninjafunction.com/images/og-developer-tools.jpg">

Paste this between the head tags of your page.

Previews

Google search result

ninjafunction.com

NinjaFunction | Free Online Tools

Free online tools for developers, designers and students. Fast, private and no sign-up needed.

Facebook, LinkedIn and WhatsApp

ninjafunction.com

NinjaFunction | Free Online Tools

Free online tools for developers, designers and students. Fast, private and no sign-up needed.

X (Twitter)

ninjafunction.com

NinjaFunction | Free Online Tools

Free online tools for developers, designers and students. Fast, private and no sign-up needed.

The previews are close to how the sites show your page, but each site may change its look.

About This Tool

NinjaFunction's Meta Tag Generator writes the head tags a web page needs: title, description, robots, canonical link, Open Graph tags and X (Twitter) card tags. Helpful hints show if the title or description is too short or too long, and live previews show how the page may look in Google results and when shared on Facebook, LinkedIn and X. Copy the code in one click. The tags are written in your browser, so nothing you enter is sent to a server.

🔑 How to Use

Fill in your page details: the title, description, page address and the address of a share image.
Follow the hints. They tell you if the title or description is too short or too long, and if an address looks wrong.
Choose the extras: page type, X card style, and whether search engines may show the page.
Check the three previews to see how your page may look on Google, Facebook and X.
Click Copy code and paste it between the head tags of your page.

💡 Pro Tips

✔ Write for people first. A clear title and a helpful description get more clicks than a list of keywords.
✔ Give every page its own title and description. Repeated text makes pages harder to tell apart in search.
✔ Use https:// addresses for the page and the image.
✔ Need the image first? Make one with the Image Resizer at 1200 × 630.

The Tags This Tool Writes

Tag	What it does
`title`	The title shown in the browser tab and as the headline in search results
`meta description`	The short text under the title in search results
`meta robots`	Tells search engines whether to show the page and follow its links
`link canonical`	The main address of the page, to avoid duplicate pages
`og:title, og:description, og:image`	The card shown when the link is shared on Facebook, LinkedIn or WhatsApp
`twitter:card`	The card shown when the link is shared on X

Title and Description Tips

Put the main idea first. The end of a long title may be cut off.
Say what the visitor gets, for example "free", "step by step" or "in your browser".
Add your name last, such as "| NinjaFunction", so the useful words come first.
Do not copy the title into the description. Use the description to add detail.

Where to Put the Code

Paste the code between the <head> and </head> tags of your page. In WordPress and most website builders, an SEO setting or plugin has boxes for the same details. If you also need a sitemap for search engines, use the Sitemap.xml Generator.

Frequently Asked Questions

What are meta tags?

Meta tags are small pieces of code in the head of a web page. They are not shown on the page itself, but search engines and social networks read them to learn the page title, a short description and which picture to show when the page is shared.

How long should the title and description be?

Keep the title to about 50 to 60 characters and the description to about 120 to 160 characters. Search engines usually cut longer text with three dots. The counters and hints in the tool show where you stand.

What is Open Graph?

Open Graph is a set of tags that started at Facebook. Facebook, LinkedIn, WhatsApp, Slack and many other apps use them to build the card with a picture, title and description when someone shares your link.

What size should the share image be?

Use a picture of 1200 × 630 pixels, which is the 1.91 to 1 shape that most sites show. Use a full web address that starts with https://, and keep the file reasonably small.

Do I still need the keywords tag?

No. Google has ignored the keywords tag for many years. The tool only adds it if you type something, in case another system you use still reads it.

What does noindex do?

Noindex asks search engines not to show the page in results, and nofollow asks them not to follow its links. Use noindex for thank-you pages, private pages or tests. A page that should be found must stay on index.

Is my information sent to a server?

No. The tags are written in your browser, so nothing you type is sent or stored.