How to Optimize Next.js for SEO with @power-seo/core

If you build sites with Next.js, you already know SEO is not optional. Google has to find your pages, read them, and trust them. But here is the problem. Most Next.js SEO advice online is either too basic or too vague. You get told to "add meta tags" without anyone showing you how to do it right, at scale, without breaking things.

I have spent a lot of time digging into this gap, and I want to walk you through it with you, like a friend explaining over coffee. We will cover the real SEO mistakes developers make in Next.js, and how a single library called @power-seo/core can fix most of them in one go.

By the end of this guide, you will know exactly how to optimize Next.js for SEO, what checklist to follow before every deploy, and how to use @power-seo/core to build pixel-accurate meta tags, validate titles, check keyword density, and even rate-limit your SEO API calls. Let's get into it.

Why Next.js SEO Is Harder Than It Looks

Next.js gives you speed and flexibility. But SEO in Next.js is not automatic. You still need to:

• Build proper meta tags for every page
• Make sure your title and description fit Google's search result width
• Avoid thin content that Google ignores
• Set canonical URLs correctly so you don't get duplicate content penalties
• Control how robots crawl and index your pages

Most teams handle this with scattered code. One developer writes raw HTML strings for meta tags. Another copies a snippet from Stack Overflow for canonical URLs. Nothing is consistent. Nothing is type-safe. And nobody checks if the title actually fits in Google's search results.

This is exactly the gap that @power-seo/core fills. It is a zero-dependency TypeScript library that gives you typed, tested utilities for every part of technical SEO. It works in Next.js, Remix, Vite, Node.js, Cloudflare Workers, and Vercel Edge.

Common SEO Mistakes in Next.js

Let's talk about the mistakes I see again and again. If you fix these, you are already ahead of most sites.

Mistake 1: Titles That Get Cut Off in Search Results

Most developers check title length by counting characters. That is wrong. Google truncates titles based on pixel width, not character count. A short title with wide letters like "W" can get cut off sooner than a long title with narrow letters like "i".

@power-seo/core solves this with validateTitle(). It measures the real SERP pixel width using Arial font metrics, the same font Google renders in search results.

import { validateTitle } from '@power-seo/core';

const title = validateTitle('Best Running Shoes for Beginners — 2026 Guide');
// { valid: true, severity: 'info', charCount: 46, pixelWidth: 316.8 }

Now you know, with real numbers, if your title will get cut off before you publish.

Mistake 2: Meta Descriptions Written by Guesswork

Same problem applies to meta descriptions. The constant META_DESCRIPTION_MAX_PIXELS is set at 920, and the recommended character range is between 120 and 160 characters. Use validateMetaDescription() to check this automatically.

import { validateMetaDescription } from '@power-seo/core';

const meta = validateMetaDescription('Discover expert-reviewed running shoes for beginners.');
// { valid: true, severity: 'warning', charCount: 52, pixelWidth: 335.3 }

If the description is too short, you’ll get a warning prompting you to expand it. This helps you write stronger meta descriptions, optimize Next.js for SEO, and avoid publishing weak snippets that can hurt your click-through rate.

Mistake 3: Missing or Inconsistent Open Graph and Twitter Tags

Social sharing matters for traffic. If your Open Graph and Twitter Card tags are missing or wrong, your shared links look broken on social media. @power-seo/core builds these for you with full support for article, profile, book, video, and music Open Graph types.

import { buildMetaTags } from '@power-seo/core';

const tags = buildMetaTags({
  description: 'Master SEO in Next.js with structured data and meta tags.',
  openGraph: {
    type: 'article',
    title: 'Next.js SEO Guide',
    images: [{ url: 'https://example.com/og.jpg', width: 1200, height: 630 }],
  },
  twitter: { cardType: 'summary_large_image', site: '@mysite' },
});

This single function call gives you a typed array of meta tags ready for your framework to render.

Mistake 4: Broken or Duplicate Canonical URLs

Duplicate content confuses search engines. If your canonical URLs are not normalized, you can end up with multiple URLs competing against each other for the same ranking. resolveCanonical() handles this cleanly.

import { resolveCanonical } from '@power-seo/core';

resolveCanonical('https://example.com', '/blog/post');
// => "https://example.com/blog/post"

You also get normalizeUrl(), stripTrackingParams(), and toSlug() to keep every URL clean and consistent across your site.

Mistake 5: Thin Content That Never Ranks

Google does not like thin content. The recommended minimum word count to avoid this penalty is 300 words, with 1000 words recommended for blog posts. Most teams never check this before publishing. You can catch it automatically with getTextStatistics().

import { getTextStatistics } from '@power-seo/core';

const stats = getTextStatistics('<h1>Hello</h1><p>This is a test sentence. And another one.</p>');
// {
//   wordCount: 9,
//   sentenceCount: 2,
//   paragraphCount: 1,
//   syllableCount: 11,
//   characterCount: 42,
//   avgWordsPerSentence: 4.5,
//   avgSyllablesPerWord: 1.22
// }

Mistake 6: Keyword Stuffing or Keyword Neglect

Too many keywords looks spammy. Too few means Google does not understand your topic. The optimal keyword density range, as defined in the library, is between 0.5% and 2.5%, with 1.5% as the sweet spot.

import { calculateKeywordDensity } from '@power-seo/core';

const density = calculateKeywordDensity('react seo', bodyHtml);
// { keyword: 'react seo', count: 4, density: 1.8, totalWords: 450 }

You can even check where your keyphrase appears, in the title, the first paragraph, image alt text, and the URL slug, using analyzeKeyphraseOccurrences().

Mistake 7: Sloppy Robots Directives

Robots meta tags are easy to get wrong when you build them as plain strings. One typo and you accidentally block a page from indexing. buildRobotsContent() removes that risk.

import { buildRobotsContent } from '@power-seo/core';

buildRobotsContent({ index: false, follow: true, maxSnippet: 150, maxImagePreview: 'large' });
// => "noindex, follow, max-snippet:150, max-image-preview:large"

Your Next.js SEO Checklist Using @power-seo/core

Here is the checklist I follow now on every project. Run through this before any page goes live.

1. Build meta tags with buildMetaTags() instead of writing raw HTML.
2. Validate every title with validateTitle() to check pixel width, not just character count.
3. Validate every meta description with validateMetaDescription().
4. Set canonical URLs with resolveCanonical() on every page.
5. Strip tracking parameters from shared URLs with stripTrackingParams().
6. Check word count and readability with getTextStatistics() before publishing.
7. Run calculateKeywordDensity() on your target keyphrase.
8. Build robots directives with buildRobotsContent() instead of string concatenation.
9. Add hreflang tags with buildHreflangTags() if you run a multi-language site.
10. Use createTitleTemplate() so every page title follows the same site-wide format.

How to Install and Set Up @power-seo/core

Getting started takes one command:

npm install @power-seo/core

or with yarn:

yarn add @power-seo/core

or with pnpm:

pnpm add @power-seo/core

Once installed, you can import only the functions you need. The package is tree-shakeable, meaning your final bundle only includes what you actually use.

Here is a full quick-start example you can drop into a Next.js route or layout component:

import { buildMetaTags, buildLinkTags, validateTitle, resolveCanonical } from '@power-seo/core';

const tags = buildMetaTags({
  description: 'Master SEO in Next.js with structured data and meta tags.',
  openGraph: {
    type: 'article',
    title: 'Next.js SEO Guide',
    images: [{ url: 'https://example.com/og.jpg', width: 1200, height: 630 }],
  },
  twitter: { cardType: 'summary_large_image', site: '@mysite' },
});

const links = buildLinkTags({
  canonical: resolveCanonical('https://example.com', '/nextjs-seo'),
});

const titleCheck = validateTitle('Next.js SEO Best Practices Guide');
console.log(titleCheck.valid); // true
console.log(titleCheck.pixelWidth); // ~291 (well under 580px limit)

Setting Up Title Templates Across Your Site

Consistency matters for branding and SEO. Instead of writing the site name into every title manually, use a title template.

import { createTitleTemplate, applyTitleTemplate } from '@power-seo/core';

const makeTitle = createTitleTemplate({ siteName: 'My Site', separator: '—' });
makeTitle('About Us'); // => "About Us — My Site"
makeTitle('Contact', { separator: '|' }); // => "Contact | My Site"

This one setup keeps every title on your site formatted the same way, which helps both users and search engines recognize your brand.

Blocking Bad Content Before It Goes Live

One of my favorite use cases is putting these checks inside a CI pipeline. This stops weak content from ever reaching production.

import { calculateKeywordDensity, getTextStatistics } from '@power-seo/core';

const stats = getTextStatistics(bodyHtml);
const density = calculateKeywordDensity(keyphrase, bodyHtml);

if (stats.wordCount < 300) {
  console.error(`✗ Word count too low: ${stats.wordCount} (minimum 300)`);
  process.exit(1);
}

if (density.density < 0.5 || density.density > 2.5) {
  console.error(`✗ Keyword density out of range: ${density.density}% (target 0.5–2.5%)`);
  process.exit(1);
}

This turns SEO quality control into an automated gate, not a manual checklist someone forgets to run.

Handling Rate Limits for SEO API Integrations

If you pull data from Google Search Console, Semrush, or Ahrefs, you need to respect their rate limits. @power-seo/core includes a built-in token bucket for this.

import { createTokenBucket, consumeToken, getWaitTime, sleep } from '@power-seo/core';

const bucket = createTokenBucket(60); // 60 requests per minute

async function callApi() {
  if (!consumeToken(bucket)) {
    const waitMs = getWaitTime(bucket);
    await sleep(waitMs);
  }
  // make your rate-limited API call
}

This small detail saves you from getting blocked by third-party SEO APIs during bulk audits.

Final Thoughts

Next.js SEO does not need to be guesswork. Every mistake we covered here, truncated titles, weak descriptions, broken canonicals, thin content, keyword stuffing, and messy robots tags, has a clear fix inside @power-seo/core.

Start small. Pick one page on your site. Run validateTitle() on it. Run getTextStatistics() on the body content. See what comes back. I think you will be surprised how many small issues show up once you actually measure them instead of guessing.

If you want to build an SEO checklist into your workflow for good, install @power-seo/core today and start with the checklist above. Your rankings will thank you for it.

Frequently Asked Questions About Optimize Next.js for SEO

Does Next.js have built-in SEO support? 

Next.js gives you the building blocks, like the Metadata API and server-side rendering, but it does not validate your titles, check keyword density, or build Open Graph tags for you. That part is on you, which is why a library like @power-seo/core helps.

What is the biggest SEO mistake in Next.js?

 The biggest mistake is treating meta tags as an afterthought. Many developers write raw strings without checking title pixel width, canonical consistency, or robots directives. This causes truncated titles, duplicate content, and accidental noindex issues.

Is @power-seo/core only for Next.js? 

No. It is framework-agnostic. It runs in Next.js, Remix, Gatsby, Vite, plain Node.js, and edge runtimes like Cloudflare Workers and Vercel Edge.

Does @power-seo/core add any dependencies to my project? 

No. It ships with zero runtime dependencies, so installing it does not pull in any extra packages.

Can I use this for keyword research? 

Not for finding new keywords, but it is great for checking how well you have used a keyphrase you already chose. Use analyzeKeyphraseOccurrences() to see if your keyphrase appears in the title, first paragraph, image alt text, and slug.