Elyvora US

Posted on Jan 24

The title tag formula that actually works (with real examples) | Maximise your SEO

#seo #webdev #nextjs #beginners

You've probably seen a hundred articles telling you to "write compelling titles" or "include your keyword." But when you're staring at your <title> tag at 11 PM trying to ship a feature, that advice is useless.

Here's what I've learned after obsessing over title tags for way too long.

The anatomy of a good title tag

A title tag has roughly 50-60 characters before Google truncates it. That's not a lot. You need to fit:

The primary keyword (what people actually search for)
A value proposition (why should they click?)
Your brand (optional, but helps with recognition)

The formula I use:
[Primary Keyword] - [Value/Benefit] | [Brand]

Or for blog posts:
[Primary Keyword]: [Specific Angle or Promise]

What most developers get wrong

I see this constantly in Next.js apps:

// ❌ Generic, says nothing
export const metadata = {
  title: "Blog - My Website",
};

// ❌ Keyword stuffing
export const metadata = {
  title: "Best Products Reviews Top Rated Items Shop Now Free",
};

// ❌ Too long, gets cut off
export const metadata = {
  title: "The Complete Ultimate Guide to Everything You Need to Know About Product Reviews and How to Find the Best Deals Online",
};

None of these make me want to click. They're either boring, spammy, or incomplete.

What actually works

Here's the thing—your title needs to answer one question: "What's in it for me?"

// ✅ Clear keyword + benefit
export const metadata = {
  title: "Smart Home Reviews - Honest Tech Guides | Elyvora US",
};

// ✅ Specific angle that stands out
export const metadata = {
  title: "The Keyboard Switch That Changed How I Type",
};

// ✅ Curiosity + specificity
export const metadata = {
  title: "Why I Stopped Using Notion (And What I Use Now)",
};

The best titles feel like a conversation, not a billboard.

Real examples from production

I run a tech blog where I review Amazon products. Here's how I approach titles for different page types:

Homepage:
Elyvora US - Honest Amazon Product Reviews & Tech Guides
Short, clear, tells you exactly what the site does.

Category pages:
Smart Home Devices - Top Picks & Reviews | Elyvora US
Keyword first, brand last.

Blog posts:
This is where you can get creative. Instead of "How to Set Up a Smart Home," try:
I Automated My Entire Apartment for Under $500

You can see how this plays out on our blog where each article title is crafted to be both searchable and clickable.

The technical implementation

If you're using Next.js 14+ with the App Router, here's the pattern:

// app/blog/page.tsx
export const metadata: Metadata = {
  title: "Tech Blog - Buying Guides & Product Reviews",
  description: "...",
};

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: post.title, // Already optimized in CMS
    description: post.excerpt,
  };
}

For dynamic pages, I store the optimized title in my CMS so I don't have to compute it at build time.

Quick checklist before you ship

Before publishing any page, I run through this:

Is the primary keyword in the first 30 characters?
Does it make a promise or create curiosity?
Is it under 60 characters?
Would I click this in search results?
Does it sound human (not like SEO spam)?

That last one is the most important. Read it out loud. If it sounds like something a marketer wrote in 2010, rewrite it.

The uncomfortable truth

Perfect title tags won't save bad content. But bad title tags will absolutely bury good content.

I've seen pages with great information sit at position 15 because the title was "Blog Post #47." Meanwhile, the same content with "The $30 Gadget That Fixed My Sleep Schedule" jumps to page one.

Titles are your first impression. Make them count.

This is part of a series on technical SEO for developers. The companion piece on writing meta descriptions that convert is now live.

DEV Community