Bloggen - SEO Starter

Bloggen SEO Starter is a fast, minimal Next.js template for building SEO-optimized, content-rich websites—not just blogs. It’s the first official starter in the Bloggen.dev ecosystem, showcasing how to use general-purpose MDX architecture to power full websites, dynamic pages, and web apps with structured content.

Built with MDX powered by Fumadocs, it lets you create flexible routes like /blog, /docs, /services, or /product/x—all content-driven, fully typed, and SEO-ready out of the box.

Designrift, our theming engine, gives you powerful visual control with:

• Radix-based color palettes
• WCAG-compliant contrast
• Built-in dark mode
• Single-step theme setup and override

This template is tailored as an agency example, but easily extended for personal sites, SaaS landing pages, or documentation-heavy apps. Think of it as your baseline for building fast, indexable, and accessible websites using the full potential of the Bloggen.dev platform.

Getting Started

To get started with Bloggen SEO Starter, you have two options:

Option 1: Through npmjs (Recommended)

npx create-bloggen-app

Option 2: Manually via GitHub

1. Clone the repository:

git clone https://github.com/silverthreadlabs/bloggen-seo-starter.git

2. Navigate to the project directory:

cd bloggen-seo-starter

3. Install the dependencies:

pnpm install

4. Start the development server:

pnpm run dev

5. Open your browser and visit http://localhost:3000 to see the application in action.

Global SEO Configuration

The bloggen-seo-starter includes a powerful global SEO system that automatically handles metadata, Open Graph images, JSON-LD schemas, and more across your entire website.

Quick Setup - Site Configuration

Simply update this file to include your information and it'll be automatically used in the global SEO of your website:

lib/config/site.tsx

import { getURL } from '@/lib/utils/url';

export const siteConfig = {
    title: 'Your Site Name',
    description: 'Your site description for SEO',
    baseUrl: getURL(),
    creator: 'Your Name/Company',
    publisher: 'Your Name/Company',
    keywords: [
        'your',
        'relevant', 
        'keywords',
        'here'
    ],
    author: {
        name: 'Your Name',
        url: 'https://yourwebsite.com',
        twitterHandle: '@yourtwitterhandle'
    },
    social: {
        sameAs: ['https://yoursociallinks.com']
    }
};

Using SEO in Your Pages

For Homepage (app/page.tsx):

import { createPageMetadata } from '@/lib/seo/metadata/create-page-metadata';

export const metadata = createPageMetadata({
    path: ''
});

For About Page (app/about/page.tsx):

export const metadata = createPageMetadata({
    path: 'about',
    description: 'Custom description for your about page'
});

The system also automatically generates sitemaps and JSON-LD schemas using your siteConfig:

// Sitemap pulls from siteConfig.baseUrl and routes
const routes = siteConfig.sitemap.staticRoutes.map((route) => ({
    url: `${siteConfig.baseUrl}${route}`
}));

// Schema uses siteConfig for structured data
const homeSchema = {
    '@type': 'WebSite',
    name: siteConfig.title,
    url: siteConfig.baseUrl
};

Flexibility & Adaptability

You can adapt the starter to your existing Next.js project or adapt it any way as bloggen SEO starter doesn't have any opinions how you name or structure folders and files just that it comes with strong defaults which remain out of your way and can be cleanly overridden, extended and removed entirely. Oh no :(

Adding MDX content

📽️ Watch: How to Add Bloggen-Generated MDX Content

Once you have the SEO configured, you can create and manage your the content on your site. The example shows how easy it is to add blog posts by generating content using bloggen.dev and then integrating it into your project.

Step 1: Generate Blog Content with Bloggen.dev

1. Visit bloggen.dev
2. Navigate to the blog generation tool
3. Enter your topic along with the keywords (you wish to rank for) in the prompt box (e.g., "cats", "web development", etc.)
4. Let the AI generate your complete blog content
5. Review the generated content and frontmatter metadata in the live MDX viewer on the right panel
6. Copy the generated markdown content or download it as a .md file

Note: Although our examples use content from Bloggen.dev, the Bloggen SEO Starter doesn’t depend on it. You’re free to use any type of content as long as it’s saved as a .mdx or .md file with proper frontmatter in source.config.ts.

Step 2: Add Generated Content to Your Bloggen SEO Starter

1. Create Your Blog Post File:

   • Navigate to content/blog/ directory
   • Create a new .mdx file (e.g., cats.mdx, my-topic.mdx)
   • Paste the generated content from bloggen.dev

2. Handle Images (if your blog references images):

   • The generated content may reference cover images and OG images
   • Create a folder in public/assets/blog/[your-blog-name]/
   • Add your cover image (rename to match your frontmatter reference)

3. Preview Your Blog:

   • Your new blog will automatically appear in the blog listings at localhost:3000/blog
   • Click on your blog to view the full content

Example Generated Blog Structure

When you generate content with bloggen.dev, you'll get a complete blog post with:

---
title: "bolt.diy: The Future of Development Environments"
publishedAt: '2024-12-31'
author: 'Silverthread Labs'
image: "/assets/blog/bolt/bolt.webp"
ogImage:
  url: "/assets/blog/bolt/bolt.webp"
summary: 'Discover how bolt.diy revolutionizes development workflows by seamlessly bridging local and cloud environments, offering unprecedented flexibility and collaboration capabilities.'
tags: ['Development', 'Cloud Computing', 'DevOps', 'Productivity']
---

# bolt.diy: The Future of Development Environments

Your AI-generated content will appear here with proper markdown formatting, including:

## Headers and Subheadings
- Bullet points
- **Bold text** and *italics*
- Code blocks
- And much more structured content

Features

Developer experience first, extremely flexible code structure and only keep what you need:

Core Stack

• ⚡ Next.js App Router
  Built on the latest Next.js App Router.
• 🔷 TypeScript 5
  Latest TypeScript with strict type checking and modern language features for enhanced developer productivity and code reliability.
• 💎 Tailwind CSS v4
  Utility-first styling with the latest Tailwind release.
• ✅ Strict Mode
  Enforced React and TypeScript strict flags for predictable, bug-resistant behaviour.
• ♻️ Type-Safe Env Vars
  Automatically typed environment variables via Zod for zero surprises.
• 🛡️ Zod Validation
  Schema-based validation on both client and server to guarantee data integrity.
• 🔒 Zero-Config Security
  Built-in headers (CSP, HSTS) and hardened defaults.

Developer Experience

• 📏 ESLint 9
  Preconfigured with Next.js–friendly rules and comprehensive linting presets including @eslint/js, typescript-eslint, eslint-plugin-react, @next/eslint-plugin-next, eslint-config-prettier, eslint-plugin-import, and eslint-plugin-promise.

• 🖋️ Prettier 3
  Opinionated code formatting to keep your team's style consistent, enhanced with @trivago/prettier-plugin-sort-imports for automatic import organization and prettier-plugin-tailwindcss for optimal class sorting.

• 🧭 Absolute Imports (@/…)
  Skip long relative paths—import modules from @/ for cleaner code.

• 🏎️ Blazing-Fast Dev Server
  Built with Turbopack under the hood for minimal startup and rebuild times.

SEO & Performance

• 🌐 Global Metadata Config
  Centralized metadata and JSON-LD settings in one file.
• 🤖 Metadata Helpers
  Tiny, simple helpers for static and dynamic routes.
• 📊 Type-Safe JSON-LD
  Leverage schema-dts for fully typed structured data.
• 🎨 Dynamic OG Images
  On-the-fly Open Graph image generation via @vercel/og for perfect social previews.
• 🗺️ Sitemap & robots.txt
  Auto-generated sitemap.xml and robots.txt to guide search engines.
• 📰 RSS Feed
  Built-in RSS support for all blog posts—syndication made simple.
• 📈 Google Analytics
  One-line integration with GA4 for traffic insights and event tracking.
• ⚡ Lighthouse-Optimized
  Pre-tuned for top scores in Performance, Accessibility, Best Practices, and SEO.
• 🔤 Font Optimization
  Built-in Next.js Google Fonts integration for automatic font subsetting, preloading, and performance-optimized delivery.
• 🔗 Image Optimization
  Next <Image> component for responsive, lazy-loaded images with automatic format selection.

UI, Theming & Accessibility

• ✨ Framer Motion
  Out-of-the-box support for smooth, declarative animations with framer-motion.
• 📚 MDX Content with Fumadocs
  Generalized MDX viewer for Blog and Product pages using fumadocs.
• 🌗 Radix Colors
  Automatic Light/Dark mode Theme with radix-colors.
• 🎨 Designrift Design Tokens
  Semantic CSS variables for consistent theming and easy overrides with Designrift .
• 🔄 Reusable CVA & Radix Primitives
  Pre-built, composable components with class-variance-authority and Radix UI.
• ♿ Accessibility-First
  WCAG-compliant ARIA attributes, keyboard support, and 100% Lighthouse accessibility scores.
• 📱 Fully Responsive
  Mobile-first layouts that adapt seamlessly to tablet and desktop breakpoints.

Deployment

Click the button below to deploy this example project with Vercel:

Below are the steps to completing deployment:

1. Create a Git Repository for your project.
2. Provide the required environment variables.

Contributing Guidelines

We welcome contributions to Bloggen SEO Starter! To contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/YourFeature).
3. Make your changes and commit them (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a pull request.

Please ensure your code follows the project's coding standards and includes appropriate tests.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contact/Support

For support or inquiries, please reach out to:

• Email: silverthreadlabs@gmail.com
• Visit our website: Silverthread Labs
• Explore Bloggen: Bloggen

Thank you for using Bloggen SEO Starter! We hope it helps you enhance your blogging experience and improve your site's SEO performance.

More comprehensive starters with additional features and integrations are on the way.