handyman
Hazuu Tools

Meta Tags Generator

Generate HTML meta tags for SEO, Open Graph, and Twitter Cards. Preview your Google listing and copy ready-to-use code.

0/60
0/155

Comma-separated keywords

Recommended: 1200x630px

codeGenerated Meta Tags
code_blocks

Fill in the form and click "Generate"

travel_exploreGoogle Search Preview
languagehttps://example.com

Page Title

Meta description will appear here. Write a compelling description under 155 characters.
info

About Meta Tags Generator

Meta tags are snippets of HTML that live inside a page's <head> element, invisible to visitors but essential for search engines and social platforms. The title tag and meta description shape how your listing looks in Google results. The robots directive tells crawlers whether to index the page or follow its links. The canonical URL tells Google which version of a URL is the authoritative one. Together these tags form the technical foundation that controls how a page is discovered, ranked, and displayed.

Meta Tags Generator turns this form-filling exercise into a one-minute task. You enter your page title, description, keywords, author, robots setting, and canonical URL in the Basic SEO section — character counters flag when you exceed Google's recommended limits of 60 and 155 characters respectively. A collapsible Open Graph section lets you override the title, description, and image URL for Facebook, LinkedIn, and other platforms that read og: properties. The Twitter Card section adds twitter:card, twitter:title, twitter:description, twitter:image, and twitter:site tags for X (formerly Twitter). A live Google SERP preview updates as you type so you can judge the snippet before publishing.

Every tag is generated entirely in your browser using JavaScript. Nothing you type is sent to a server, stored, or logged — your page titles, URLs, and descriptions stay on your own machine. The tool is free, requires no account, and has no usage limits. Once you click Generate, copy the block of HTML and paste it into your site's <head> section in any CMS, static site generator, or hand-coded template.

star

Key Features

check_circle

Three tag sets in one form

Generates Basic SEO tags, Open Graph tags for Facebook and LinkedIn, and Twitter Card tags from a single interface — no need to visit three separate tools or remember each attribute name.

check_circle

Character counters with limits

Live counters track your page title (recommended max 60 characters) and meta description (recommended max 155 characters), turning red when you exceed the limit so you can trim before publishing.

check_circle

Live Google SERP preview

A search-result mockup updates as you type, showing your clickable blue title, green URL, and grey description snippet exactly as Google would render them.

check_circle

Smart fallback values

If you leave the Open Graph title or Twitter title blank, the tool falls back to your Basic SEO page title automatically. Same for descriptions and URLs — fewer fields to fill for simple pages.

check_circle

Syntax-highlighted output

The generated HTML is colour-coded with tag names, attribute names, and attribute values in distinct colours, making it easy to spot errors at a glance before you paste into your codebase.

check_circle

Client-side only, no account needed

All generation happens in your browser. Your titles, descriptions, and URLs are never transmitted to any server, so sensitive draft content and private staging URLs stay private.

help

How to Use

01

Fill in SEO Details

Enter your page title, meta description, keywords, author, robots directive, and canonical URL in the Basic SEO section.

02

Add Social Tags

Expand the Open Graph and Twitter Card sections to customize how your page appears when shared on social platforms.

03

Generate & Copy

Click "Generate" to produce the HTML meta tags, preview how the page looks in Google, then copy the code into your site's <head>.

code_blocks

Example

Filling in the Basic SEO section and clicking Generate produces a complete block of ready-to-paste HTML meta tags, including charset, viewport, canonical, Open Graph, and Twitter Card tags.

Form inputs
Page Title: Hazuu Tools – Free Online Developer Utilities
Meta Description: A growing collection of free browser-based tools for developers and designers. No sign-up, no limits.
Keywords: free developer tools, online utilities, browser tools
Robots: index, follow
Canonical URL: https://hazuu.tools/
OG Image: https://hazuu.tools/og-image.png
Twitter Handle: @hazuutools
Generated HTML
<title>Hazuu Tools – Free Online Developer Utilities</title>
<meta name="description" content="A growing collection of free browser-based tools for developers and designers. No sign-up, no limits." />
<meta name="keywords" content="free developer tools, online utilities, browser tools" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://hazuu.tools/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Hazuu Tools – Free Online Developer Utilities" />
<meta property="og:description" content="A growing collection of free browser-based tools for developers and designers. No sign-up, no limits." />
<meta property="og:image" content="https://hazuu.tools/og-image.png" />
<meta property="og:url" content="https://hazuu.tools/" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Hazuu Tools – Free Online Developer Utilities" />
<meta name="twitter:description" content="A growing collection of free browser-based tools for developers and designers. No sign-up, no limits." />
<meta name="twitter:image" content="https://hazuu.tools/og-image.png" />
<meta name="twitter:site" content="@hazuutools" />
<meta name="twitter:creator" content="@hazuutools" />
lightbulb

Common Use Cases

  • arrow_circle_right

    Launching a new landing page

    Before going live, use the tool to generate a complete meta block — title, description, canonical, Open Graph image, and Twitter card — in one pass. Paste it into your template and the page is ready for indexing and sharing the moment it goes live.

  • arrow_circle_right

    Fixing thin or missing SEO metadata

    Audit an existing page, identify which tags are absent, fill in the form with the correct values, and generate the corrected block. This is narrower than a share-link generator, which builds platform-specific URLs but cannot generate the on-page HTML a crawler reads.

  • arrow_circle_right

    Preparing blog posts or articles for social sharing

    Blog posts benefit from a custom og:image and a Twitter Card type of summary_large_image to get a full-width image on X. The Open Graph section lets you override the SEO title and description with a more conversational headline suited to social feeds without changing your search snippet.

  • arrow_circle_right

    Configuring robots directives and canonical URLs

    Pagination pages, filtered search results, and staging environments often need noindex or canonical tags to prevent duplicate content issues. The Basic SEO section generates the exact robots meta tag and canonical link element from a dropdown and a text field, removing the risk of a typo in a hand-written tag.

  • arrow_circle_right

    Teaching or documenting HTML meta tag structure

    The syntax-highlighted output and SERP preview make the tool useful in tutorials and documentation. You can demonstrate how changing the description length affects the snippet, or show students exactly which attributes the og: namespace requires, without switching between browser DevTools and a text editor.

quiz

Frequently Asked Questions

What is a Meta Tags Generator? expand_more
A Meta Tags Generator is a tool that helps you create the HTML meta tag code needed for search engine optimization (SEO) and social media sharing. It builds standard meta tags, Open Graph tags for Facebook, and Twitter Card tags from a simple form — no manual coding required.
Why are meta tags important for SEO? expand_more
Meta tags tell search engines what your page is about. The title tag and meta description directly affect how your listing appears in search results, influencing click-through rates. The robots tag controls indexing behaviour, and canonical URLs prevent duplicate content issues.
What are Open Graph and Twitter Card tags? expand_more
Open Graph (OG) tags control how your page appears when shared on Facebook, LinkedIn, and other platforms. Twitter Card tags do the same for Twitter/X. They let you specify a custom title, description, and image so your shared links look polished and professional.
Is my data processed securely? expand_more
Yes. All tag generation happens entirely in your browser using JavaScript. No data is sent to any server. Your page titles, descriptions, and URLs remain completely private.
How is this different from a Share Link Generator? expand_more
A Share Link Generator creates pre-built social sharing URLs (for example a Twitter intent link or a Facebook sharer URL) that you add to buttons on your page. A Meta Tags Generator creates the HTML meta tags you add to your page's <head> so that when anyone shares the URL, social platforms automatically pull the correct title, description, and image from your page. The two tools are complementary: meta tags control what the share looks like; share links make it easy for visitors to click and share.
Do I need to fill in all the fields? expand_more
No. Only fill in what applies to your page. The robots meta tag is always included with the value you choose. Every other field is optional — blank fields are simply omitted from the output. For most pages, filling in the page title, meta description, canonical URL, and OG image is enough.
What should my meta description say? expand_more
Write 1–2 sentences (under 155 characters) that describe the specific value of the page — what a reader will find and why it matters. Avoid keyword stuffing. Google may rewrite the snippet anyway, but a well-written description increases the chance your original text is shown and improves click-through rates.
What is a canonical URL and when do I need one? expand_more
A canonical URL is an HTML link tag (<link rel="canonical" href="..." />) that tells Google which version of a URL is the primary one. Use it when the same content is accessible at multiple URLs (for example with and without trailing slashes, with query parameters, or on staging and production domains). Without it, Google may split ranking signals across the duplicates.
Which robots value should I choose? expand_more
"index, follow" is the default for any page you want discovered and ranked. Use "noindex, follow" on pages like tag archives, paginated results, or internal search pages that you want excluded from search but still want crawled. Use "noindex, nofollow" for staging environments or login-gated pages where you want no crawler activity at all.