Is There Any Fumadocs Resource About SEO? (Search Engine Optimization)

[LucaL1fe]

Hi there,

I'm considering migrating from Docusaurus to Fumadocs for both my blog and documentation. However, I've been unable to find any resources online about handling SEO in Fumadocs.

It would be incredibly helpful to have a blog post or step-by-step guide similar to what Docusaurus offers: [Docusaurus SEO Guide](https://docusaurus.io/docs/seo)

Specifically, I'd love to see documentation covering:

• Keywords for individual blog posts – How do I set them up? Exists soemthing like frontmatter (would be really cool)
• Global keywords – How do I configure site-wide SEO keywords?
• Sitemap optimization – Best practices for generating and optimizing sitemaps
• robots.txt configuration – How to properly set this up
• Other SEO best practices – Meta tags, Open Graph, structured data, etc.

At the end of the day, we all write blogs and documentation so that people can find and read them. SEO plays a crucial role in making that happen, and having clear guidance would make Fumadocs even more appealing for content creators.

Thanks for considering this!

[fuma-nama]

You can see the docs of your React framework for SEO, see https://nextjs.org/learn/seo for Next.js

[LucaL1fe]

Okay, I'll make defently make the switch! If the maintainer of an open source project responds in under an hour, I have to try it out. Huge appreciation, and thank you very much!

[LucaL1fe]

Wow, that worked really well! Both the Documentation and Blog are now fully migrated (just 3 hours). I can't believe it! 🎉🎉🎉 After dinner or tomorrow, I'll dive into the SEO rabbit hole. Once that's done, I'll share an update here. 😇👍

[LucaL1fe]

Update: Full SEO Implementation with Fumadocs + Next.js

First, I want to clarify: ALL SEO optimizations that other tools provide are also possible with Fumadocs. My initial concern that I might miss something was unfounded. It doesn't come out of the box, but you can add everything you need.

My / Fumas Recommendation

Go through the complete Next.js SEO Guide and implement everything step by step. Always make it dynamic

---

Most important I Implemented (Step by Step)

1. robots.txt (Dynamic)

Guide

Create app/robots.ts:

import type { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/dashboard/', '/api/', '/auth/'],
    },
    sitemap: 'https://yoursite.com/sitemap.xml',
  }
}

2. Sitemap (Dynamic with Fumadocs Integration)

Guide

Create app/sitemap.ts:

import type { MetadataRoute } from 'next'
import { source, blog } from '@/lib/source'

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = 'https://yoursite.com'

  // Static pages
  const staticPages: MetadataRoute.Sitemap = [
    { url: baseUrl, lastModified: new Date(), changeFrequency: 'weekly', priority: 1 },
    { url: `${baseUrl}/pricing`, lastModified: new Date(), priority: 0.9 },
  ]

  // Docs pages (from Fumadocs)
  const docsPages = source.getPages().map((page) => ({
    url: `${baseUrl}${page.url}`,
    lastModified: new Date(),
    changeFrequency: 'weekly' as const,
    priority: 0.7,
  }))

  // Blog posts (from Fumadocs)
  const blogPages = blog.getPages().map((page) => ({
    url: `${baseUrl}${page.url}`,
    lastModified: new Date(),
    priority: 0.6,
  }))

  return [...staticPages, ...docsPages, ...blogPages]
}

3. Canonical Tags (Important!)

Guide

Always add canonical tags - even without duplicate content, it's best practice:

// In generateMetadata for docs/blog pages:
export async function generateMetadata({ params }) {
  const page = source.getPage(params.slug);

  return {
    title: page.data.title,
    description: page.data.description,
    alternates: {
      canonical: page.url,  // Add this!
    },
  };
}

4. Metadata (Title & Description)

Guide

• Title: What users see on Google + ranking keywords
• Description: Not used for ranking, but affects click-through rate

Root layout example:

export const metadata: Metadata = {
  metadataBase: new URL('https://yoursite.com'),
  title: "Your Site - Main Keyword",
  description: "Description for click conversion...",
  keywords: ["keyword1", "keyword2"],
};

5. Open Graph (Social Sharing)

Guide

Not for SEO ranking, but essential for social media shares:

openGraph: {
  title: page.data.title,
  description: page.data.description,
  type: 'article',
  url: page.url,
},
twitter: {
  card: 'summary_large_image',
  title: page.data.title,
  description: page.data.description,
},

6. JSON-LD Structured Data

Guide

Helps search engines understand your content. I created reusable helpers:

// lib/seo/jsonld.tsx
export function JsonLd({ data }: { data: object }) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  );
}

export function generateBlogPosting(post) {
  return {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.description,
    author: { '@type': 'Person', name: post.author },
    datePublished: post.date,
  };
}

export function generateTechArticle(page) {
  return {
    '@context': 'https://schema.org',
    '@type': 'TechArticle',
    headline: page.title,
    description: page.description,
  };
}

export function generateBreadcrumbList(items) {
  return {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: item.name,
      item: item.url,
    })),
  };
}

Usage in pages:

<JsonLd data={generateBreadcrumbList(breadcrumbs)} />
<JsonLd data={generateBlogPosting({ title, description, author, date, slug })} />

7. Dynamic OG Images

Create app/blog/[slug]/opengraph-image.tsx for auto-generated social images per blog post.

---

What Fumadocs Provides Out of the Box

• Open Graph support
• Auto-generated OG images for docs - customizable via frontmatter:

  ---
  title: My Page
  description: Page description
  ogTitle: Custom OG Title      # optional override
  ogDescription: Custom desc    # optional override
  ---

• Good URL structure (/docs/section/page)
• Proper heading hierarchy

What You Need to Add Manually

• robots.ts
• sitemap.ts (with Fumadocs source integration)
• Canonical tags
• JSON-LD structured data
• Dynamic OG images

---

Bonus: Performance SEO

Also check out all the other stuff from https://nextjs.org/learn/seo like:

• Dynamic Imports - Code splitting for heavy components
• Font Optimization - Use next/font
• Third-party Scripts - Use next/script with proper strategy

Hope this helps!