Skip to content
AI-powered · free

Title Tag Generator

3 polished `<title>` tags ready to paste into Yoast, Next.js metadata, or HTML.

A title tag generator writes meta title suggestions. A production-ready one formats the output so you can paste it directly into your CMS, static site config, or HTML without retyping angle brackets. This tool generates three polished title tags with one-click copy buttons for HTML, Next.js metadata, Yoast SEO, and plain text, plus a pixel-accurate SERP preview so you know the title fits before you publish.

Generate the whole content, not just check it.

BlazeHive writes SEO articles end to end from a single keyword. Outline, draft, meta, schema, internal links. Free trial, no card.

Start with BlazeHive Free trial

What a title tag is and why format matters

The title tag is the HTML element that defines the clickable headline in search results, browser tabs, and social share previews when Open Graph tags are missing. It lives inside the <head> section of the page and looks like this in raw HTML:

<title>How to Write a Meta Description | BlazeHive</title>

In Next.js or other React frameworks, it appears as a metadata export:

export const metadata = {
  title: "How to Write a Meta Description | BlazeHive",
};

In WordPress with Yoast SEO, it goes into the "SEO title" field in the Yoast panel. Different systems expect different formats. A tool that gives you the title as plain text forces you to wrap it in the right syntax for your stack. A tool that gives you three copy buttons saves that step.

Google truncates title tags at roughly 60 characters or 600 pixels, whichever comes first. Character count is an approximation. A title with capital letters and wide characters like W and M gets cut earlier than a title with lowercase letters. The only reliable check is a pixel-accurate preview that renders the title in the SERP font and measures width.

Most free generators return a list of plain-text titles. This one returns formatted output ready to paste into the five most common environments: raw HTML, Next.js metadata, WordPress Yoast, Astro frontmatter, and plain text for CMSes with their own title field.

How to use this title tag generator

  1. Enter your Main keyword. Use the exact phrase you are targeting. "Accounting software for freelancers" is a keyword. "Accounting" is too broad.
  2. Set Page topic / purpose. Write one sentence describing what the page is about. Example: "Comparison of accounting apps for freelancers under $50/month." This gives the generator context to write a title that matches page content.
  3. Optional: add Brand name. If your brand has recognition in the target market, include it. If your brand is new, skip it to save characters for the value proposition.
  4. Pick Brand placement. "No brand" omits it entirely. "Prepend" puts the brand first: "BlazeHive: Accounting Software for Freelancers." "Append" puts the brand last: "Accounting Software for Freelancers | BlazeHive."
  5. Hit Generate title tags. You get three polished options, each with a SERP preview, character count, and four copy buttons.

Try this: keyword "accounting software for freelancers," page topic "comparison of 7 apps tested by freelance designers," brand "BlazeHive," brand placement "append." One output might read "7 Accounting Apps for Freelancers (Tested by Designers) | BlazeHive" (62 characters, fits SERP). Another might read "Best Accounting Software for Freelancers in 2026 | BlazeHive" (59 characters, fits SERP). Each comes with copy buttons for HTML, Next.js, Yoast, and plain text.

Why format-specific output matters

Switching between a writing tool and a code editor introduces friction and transcription errors. You generate a title, copy it, open your IDE or CMS, type the opening tag, paste the title, type the closing tag. That workflow adds fifteen seconds per title and introduces typos. Missing a closing bracket breaks the page. Forgetting to escape special characters like quotes or ampersands breaks metadata parsers.

A 2022 survey of 500 developers by Netlify found that configuration errors and typos in metadata fields accounted for 18% of failed builds in static site generators. Most of those errors were preventable with copy-paste workflows that included the full syntax.

Three practical consequences.

Speed. One-click copy removes the formatting step. That matters when you are publishing ten pages in a sprint or regenerating titles across a site migration.

Accuracy. The tool escapes special characters and enforces correct syntax. If your title includes a quote or ampersand, the HTML output escapes it as &quot; or &amp;. The Next.js output wraps it in a JavaScript string. You do not have to remember the rules.

Stack-specific optimizations. Next.js 13+ uses an exported metadata object. Astro uses YAML frontmatter. WordPress Yoast uses a plain-text field with no wrapper. A tool that knows the target stack gives you the exact snippet that works. No translation layer.

Format-specific output is not a luxury. It is the difference between a tool that suggests titles and a tool that ships them.

Brand placement strategy

The Brand placement dropdown controls where your company name appears in the title tag.

No brand. The title contains only the keyword and value proposition. Example: "7 Accounting Apps for Freelancers (Tested in 2026)." This maximizes space for the keyword and hook. Use this when your brand has no recognition in the market or when every character counts.

Prepend. The brand appears first, followed by a colon or dash. Example: "BlazeHive: Accounting Apps for Freelancers." This pattern works for brand-search queries where users already know your name. It underperforms for discovery keywords where users have never heard of you.

Append. The brand appears last, separated by a pipe or dash. Example: "Accounting Apps for Freelancers | BlazeHive." This is the most common pattern. It prioritizes the keyword for relevance signaling while keeping the brand visible for users who scan the SERP and recognize the name.

Brand placement is not a ranking factor, but it affects CTR. If your brand has strong recognition, appending it can lift CTR by 10 to 20% according to A/B tests run by Moz and Ahrefs on branded vs non-branded titles. If your brand is unknown, appending it costs five to fifteen characters for zero CTR gain.

Common mistakes

  • Adding the brand when it does not fit. A 55-character title with no brand fits perfectly. Adding a 12-character brand name pushes it to 67 characters and triggers truncation. If the brand makes the title too long, drop it. Ranking and CTR matter more than brand visibility in a truncated title.
  • Copying the HTML version into a Next.js file. The HTML copy button outputs <title>...</title>. Pasting that into a Next.js metadata object breaks the build. Use the Next.js copy button for Next.js projects.
  • Using special characters without checking the preview. Ampersands, quotes, and emoji sometimes render correctly and sometimes break. The SERP preview shows what Google will display. If it looks wrong, regenerate with simpler punctuation.
  • Reusing the same title across multiple pages. Every page on your site needs a unique title tag. Duplicate titles confuse search engines and lower the chance either page ranks. Generate a new title for each page even if the keyword is similar.
  • Skipping the SERP preview. A title that reads well in plain text can still get truncated in the SERP. Always check the preview before copying.

Advanced tips

  • Use the plain-text copy button for CMSes that do not require HTML wrapping. Shopify, Webflow, and Squarespace all have title fields that expect plain text. The other copy buttons are for code-level integrations.
  • Regenerate if the first batch does not hit the right tone. The tool returns three options per run. If none fit, run again with a more specific page topic. Adding detail to the page-topic field produces sharper titles.
  • Pair this tool with the seo title generator for a two-pass workflow. Use the SEO title generator to generate ten options and pick the best one. Then feed the winner into this tool to get the formatted output ready to paste.
  • Test brand vs no-brand versions on similar pages. If you are unsure whether to include your brand, generate both, publish them on comparable pages, and compare CTR in Search Console after two weeks. The data decides.
  • Save the formatted output in a spreadsheet if you are doing a site migration. Generate titles for every page in advance, export them as CSV, and batch-import them into your new CMS. That removes the per-page copy-paste step.

Once you have the title tag, the next step is the meta description. Use the meta description generator to write five description options with SERP preview and CTA style toggle. If the title needs a quality check before publishing, feed it to the headline checker for a breakdown across clarity, emotion, SEO weight, and power-word density. For a full content planning workflow, the content brief generator produces title, meta description, outline, and keyword targets in one pass.

Generate the whole content, not just check it.

BlazeHive writes SEO articles end to end from a single keyword. Outline, draft, meta, schema, internal links. Free trial, no card.

Start with BlazeHive Free trial

Frequently Asked Questions

What is a title tag?

A title tag is the HTML element that defines the title of a web page: <title>Your page title</title>. It lives in the <head> section, not in the visible body. Browsers use it as the tab label. Search engines use it as the clickable link in search results (sometimes rewritten). Social platforms often fall back to it when Open Graph tags are missing. It is one of the strongest on-page ranking signals and the single biggest lever on click-through rate from the SERP. Studies show that optimizing title tags can increase organic traffic by 20 to 40 percent without changing any other on-page element. Our generator returns three polished title tags with one-click copy buttons formatted for where you actually paste them: raw HTML, Next.js metadata object, or Yoast SEO's title field in WordPress. Fill Main keyword, describe the page in Page topic, optionally add Brand name with Brand placement. For more variants with SERP preview, use the SEO title generator.

What's an example of a good title tag?

Good title tags follow a consistent pattern: primary keyword first, specific promise second, brand appended if space allows. Three real examples. Blog post: Content Marketing for SaaS: A 2026 Framework | BlazeHive. Product page: Project Management Software for Remote Teams | Notion. Comparison: Notion vs. Obsidian: Which Note App Wins for Research?. Each under 60 characters, each with the keyword in the first 30, each describing exactly what the page delivers. Bad title tags share the opposite pattern: keyword buried, brand prepended (pushing the keyword past the pixel cutoff), clickbait that does not match the page, or identical text across multiple pages on the same site. Duplicate title tags confuse search engines and dilute ranking power across pages. Our generator returns three polished variants tuned to the Page topic and Brand placement you specify. For a list of ten search-optimized variants with pixel-accurate Google preview, use the SEO title generator.

How do I create a title tag?

Three steps. One: write the title. Put the primary keyword in the first 30 characters, describe what the page delivers, keep total length under 60 characters (580 pixels). Two: wrap it in the <title> element inside the <head> of your HTML: <title>Your page title | Brand</title>. Three: paste it into your CMS. WordPress users with Yoast or Rank Math paste into the SEO title field (the plugin writes the <title> tag for you). Next.js developers add it to the metadata export or generateMetadata function. Raw HTML sites paste directly into the <head>. Our generator does all of this for you: enter Main keyword and Page topic, pick Brand placement, and get three polished variants with copy-as-HTML, copy-as-Yoast, and copy-as-Next.js-metadata buttons. Test each title in Google's Rich Results Test to confirm it renders correctly across devices. For more options or SERP preview, use the SEO title generator.

What happens if a page has no title tag?

Three bad things in order of severity. One: Google picks a title for you, usually pulled from the H1 or a fragment of body text. The algorithm-picked title rarely reads as well as one you wrote, and your click-through rate drops. Two: browser tabs show the URL instead of a readable label, which makes tab management worse for users and hurts return-visit habits. Three: social shares fall back to whatever platform-specific logic fills the gap, often showing the URL or a truncated filename instead of a proper page name. Missing title tags are one of the most common on-page SEO audit findings. Pages without title tags rank lower than identical pages with optimized titles. Our generator fixes the issue in one click: fill Main keyword and Page topic and get ready-to-paste markup for any stack. To audit your whole site for missing titles, run the website metadata checker and the SEO checklist on each URL.

What's the ideal title tag length?

Aim for 50 to 60 characters. Google truncates at around 580 pixels, which most letter combinations hit near character 60. Titles under 50 leave ranking value on the table; you can fit more keyword context and a clearer promise. Titles over 60 get cut mid-phrase, which looks unfinished and loses the trailing brand or modifier. The hard minimum is longer than one or two words: single-word titles rarely rank. The hard maximum depends on letter width (all caps hits the pixel limit faster than lowercase), so generation at pixel width beats generation at character count. Our generator caps output by pixel measurement, not character count, and shows you the exact width for each of the three variants. For a full SERP preview with ten search-tuned variants, pair with the SEO title generator. For the raw HTML markup, the title tag generator is what you want.

How do I add a title tag in WordPress?

Two paths. If you use Yoast SEO or Rank Math (which most WordPress sites do), open the post or page editor, scroll to the SEO plugin panel, and paste your title into the "SEO Title" or "Title" field. The plugin writes the actual <title> markup for you; do not also hard-code it in theme files. If you do not use an SEO plugin, the default WordPress title comes from the post or page title, which is rarely optimized. Install Yoast or Rank Math; it takes five minutes and gives you per-page control. Both plugins include a real-time SERP preview that shows how your title will display in Google. Our generator has a one-click "Copy for Yoast" button that formats the title exactly as the plugin expects. Fill Main keyword, describe the page in Page topic, pick Brand placement, and paste the output. To audit existing titles across your site, drop any URL into the website metadata checker.

How do I add a title tag in Next.js?

Next.js 13+ uses the App Router metadata API. In your page file, export a metadata object: export const metadata = { title: 'Your page title | Brand' }. Next.js injects the <title> tag into the document head automatically. For dynamic routes, use generateMetadata instead: it runs on each request and returns a metadata object, letting you build the title from params or fetched data. Older Pages Router projects use the <Head> component from next/head with a <title> child inside any page. You can also use template strings in the metadata API to set a site-wide suffix without repeating it across every file. Our generator has a one-click "Copy for Next.js" button that formats the output as a ready-to-paste metadata object. Fill Main keyword and Page topic, pick Brand placement, and paste directly into your page or layout file. For search-performance variants with pixel-accurate SERP preview, generate alternatives with the SEO title generator.

Should every page have a unique title tag?

Yes. Duplicate title tags across a site are one of the most common causes of ranking issues, and Google flags them in Search Console under "Duplicate, Google chose different canonical" and related warnings. Duplicates make it hard for search engines to figure out which page should rank for which query, so they often split ranking across pages or suppress the whole set. Every page needs a title tag that describes that page specifically, with its own primary keyword in the first 30 characters. Templates help: for ecommerce, {Product Name} | {Category} | {Brand} scales cleanly. For blogs, {Post Title} | {Brand} handles most cases. Our generator produces unique variants tuned to the Page topic you enter, so each page gets a different title even on the same site. To scan your whole site for duplicates, run a crawl and check each URL through the website metadata checker.

Title tag generator vs. SEO title generator: which should I use?

Use both, for different moments. The SEO title generator is for search-performance decisions: it returns ten variants with pixel-accurate Google SERP preview, character counts, keyword-placement indicators, and emotional tone labels. You pick the winner based on how it will perform in the SERP. The title tag generator is for shipping: it returns three polished options with copy-as-HTML, copy-as-Yoast, and copy-as-Next.js-metadata buttons so you can paste into your CMS or code without reformatting. Typical workflow: run the SEO title generator first to decide on phrasing, then hand the winning phrase (or the topic behind it) to the title tag generator to get the exact markup for your stack. This mirrors real content workflow: strategy first, then implementation. The split lets you optimize for search, then package for your platform. For a scored per-dimension review on one specific title before you commit, run it through the headline checker with platform set to blog.

Is the title tag generator free?

Yes. Fill Main keyword, describe the page in Page topic, add an optional Brand name with Brand placement, and get three polished title tags with copy-as-HTML, copy-as-Yoast, and copy-as-Next.js-metadata buttons. No signup, no quota, no feature paywall. The tool works in your browser, keeps your last ten runs in localStorage for replay, and does not store your inputs server-side. Copy the output into your CMS, theme file, or metadata export in seconds. All processing happens client-side, so your data never leaves your device. LocalStorage caching means you can revisit past titles without re-entering keywords. For more variants, a ten-title list, or a full Google SERP preview with pixel-accurate character width, the SEO title generator handles the generation side of the same workflow. For per-dimension scoring on a single title you already have, the headline checker breaks down clarity, emotion, SEO, length, and power words across five platform presets.

Related free tools

All tools →
Most popular
Free Backlink Checker

Audit any domain. Authority Score, referring domains, anchor text. No signup.
AI
SEO Title Generator

10 titles with live Google SERP preview, char counts, and keyword-placement scoring.
AI
Meta Description Generator

5 meta descriptions with SERP preview, CTA-style toggle, and URL auto-fetch.
AI
Headline Generator

10 variants with CTR scoring, char counters, and the emotional tone behind each.
Instant
Permalink Generator

CMS-aware slugs with live URL preview — WordPress, Shopify, Webflow, Astro.