冠

Posted on Oct 9

How I Built an SEO-Friendly AI Video Ideas Hub in Next.js

#nextjs #seo #ai #webdev

I am building an AI video product with Next.js, and recently I needed a scalable way to publish creative video concepts and trending formats.

The obvious solution was to create an /ideas/ page.

My first implementation, however, was not a good one.

I filled the page with a large grid of prompts, examples, categories, and visual cards. It looked busy, but it did not provide a clear information architecture. More importantly, most of those ideas did not yet have their own pages.

I eventually replaced that design with a much simpler content hub.

This post explains the structure I chose, the SEO decisions behind it, and how I kept it compatible with the rest of my Next.js landing-page system.

The problem with building a large gallery too early

A large gallery can look impressive, but it creates several problems when the content library is still small:

Cards may lead to pages that do not exist.
Similar descriptions can create repetitive content.
The hub competes with future detail pages.
Updating trends becomes difficult.
The design no longer matches the rest of the website.

Instead of pretending that I already had a complete ideas library, I decided to publish one useful entry and make the structure expandable.

The first featured format is “Hotel Lobby AI.” Future concepts can be added as new cards when their corresponding content is ready.

The page structure

I reused the same module system as the other product pages on the site.

The final structure is:

A focused hero section
A featured ideas section
An explanation of what AI video ideas are
A three-step workflow
Benefits of planning the idea first
Use cases
A prompt-writing guide
Frequently asked questions
A final call to action

Only the featured ideas section is unique to this page. Everything else uses components already available in the project.

A simplified version of the content configuration looks like this:

{
  "page_type": "introduction",
  "modules": [
    {
      "id": "hero",
      "type": "hero",
      "source": "hero"
    },
    {
      "id": "featured-ai-video-ideas",
      "type": "ideas",
      "source": "featuredIdeas"
    },
    {
      "id": "what-are-ai-video-ideas",
      "type": "intro",
      "source": "what"
    },
    {
      "id": "how-to-use-ai-video-ideas",
      "type": "steps",
      "source": "how"
    },
    {
      "id": "faq",
      "type": "faq",
      "source": "faq"
    }
  ]
}

This keeps presentation logic in reusable components while the page content remains data-driven.

Designing the featured idea card

The first version of the card was too large. It looked more like a banner than an entry in a growing content library.

I reduced it to a compact horizontal card containing:

One temporary illustration
A category label
The idea name
A short explanation
One clear action

On mobile, the same card becomes a vertical layout.

The important decision was not to create fake cards simply to fill the grid. The page currently displays one idea because only one idea is ready. When another guide is complete, I can add another item to the data without redesigning the page.

Separating the hub from future detail pages

The /ideas/ route targets the broad intent behind “AI video ideas.”

Future trend pages can target narrower searches, such as:

/ideas/hotel-lobby-ai/
/ideas/ai-product-video-ideas/
/ideas/ai-video-ideas-for-youtube/

Each child page should have a distinct purpose. It should not repeat the hub description with a different title.

A detail page should include:

A clear explanation of the format
Required inputs
A practical workflow
Prompt examples
Limitations
Usage and permission considerations
A relevant generator link

Until a detail page exists, the hub should not link to an empty or placeholder URL.

Metadata and canonical URLs

The Ideas page has its own title, description, canonical URL, and social metadata.

return {
  title: "AI Video Ideas & Creative Prompts | MyAIVideo",
  description:
    "Find practical AI video ideas for YouTube, TikTok, Reels, marketing and storytelling.",
  alternates: {
    canonical: "https://myaivideomaker.com/ideas/"
  },
  robots: {
    index: true,
    follow: true
  }
};

I also avoided publishing alternate-language URLs before translated versions exist.

Unsupported locale routes redirect to the English page instead of returning duplicated English content under multiple locale paths.

Structured data

The page uses structured data that matches its visible content:

CollectionPage
ItemList
BreadcrumbList
FAQPage

The ItemList currently contains one entry. Its item count will grow only when new visible idea cards are added.

This is preferable to declaring items or pages that visitors cannot actually access.

Sitemap and internal links

The new URL was added to the sitemap:

<url>
  <loc>https://myaivideomaker.com/ideas/</loc>
  <changefreq>weekly</changefreq>
  <priority>0.8</priority>
</url>

I also added contextual links from:

The main navigation
The homepage
The footer
The text-to-video page

This allows visitors and crawlers to discover the hub without relying only on the sitemap.

What I learned

The main lesson was simple: a content hub should reflect the content that actually exists.

A smaller page with one real entry is better than a large gallery of artificial placeholders.

The reusable module approach also makes future expansion safer. I can add new trend pages and cards without changing the overall layout, metadata logic, or responsive behavior.

If you want to inspect the current implementation, here is the AI Video Ideas hub.

What approach do

DEV Community