@vocoweb/seo

Production-ready SEO engine with auto-sitemap, dynamic OpenGraph, and zero-config blog

Features

Auto-Sitemap: Automatically scans your Next.js app directory and generates sitemap.xml
Dynamic OpenGraph: Generate social preview images with custom branding
Zero-Config Blog: Pre-wired blog system for Markdown content
Robots.txt: Easy robots.txt generation
Structured Data: JSON-LD schema support for rich results

Installation

npm install @vocoweb/seo
# or
yarn add @vocoweb/seo
# or
pnpm add @vocoweb/seo

Quick Start

1. Auto-Generated Sitemap

Create a API route at app/api/sitemap/route.ts:

import { seo } from '@vocoweb/seo/server';

export async function GET() {
    const sitemap = await seo.generateSitemap({
        appDir: './app',
        baseUrl: 'https://yourdomain.com',
    });

    return new Response(sitemap, {
        headers: { 'Content-Type': 'application/xml' },
    });
}

2. SEO Meta Tags Component

import { VocoSEO } from '@vocoweb/seo/react';

export default function Page() {
    return (
        <>
            <VocoSEO
                title="My Page Title"
                description="A compelling description for search engines"
                image="/og-image.jpg"
                type="website"
                keywords={['saas', 'seo', 'nextjs']}
            />
            <main>Your page content</main>
        </>
    );
}

3. Blog System

Create blog posts as Markdown files in content/blog/:

---
title: "Getting Started with VocoWeb SEO"
description: "Learn how to use the VocoWeb SEO package"
date: "2024-01-15"
tags: ['tutorial', 'seo']
author: "Your Name"
coverImage: "/blog-cover.jpg"
---

Your blog content here...

Render your blog:

import { VocoBlogList } from '@vocoweb/seo/react';
import { seo } from '@vocoweb/seo/server';

export default async function BlogPage() {
    const posts = await seo.getBlogPosts({
        contentPath: './content/blog',
        baseUrl: 'https://yourdomain.com',
    });

    return <VocoBlogList posts={posts} />;
}

API Reference

Server Functions

import { seo } from '@vocoweb/seo/server';

// Generate sitemap.xml
await seo.generateSitemap({
    appDir: './app',
    baseUrl: 'https://example.com',
    outDir: './public', // optional
});

// Generate robots.txt
await seo.generateRobotsTxt({
    sitemap: 'https://example.com/sitemap.xml',
    disallow: ['/api/', '/admin/'],
});

// Get all blog posts
const posts = await seo.getBlogPosts({
    contentPath: './content/blog',
    baseUrl: 'https://example.com',
});

// Get single blog post
const post = await seo.getBlogPost('post-slug', config);

// Generate canonical URL
const url = seo.getCanonicalUrl('https://example.com', '/path');

// Generate JSON-LD structured data
const jsonLd = seo.generateStructuredData('Article', {
    headline: 'Title',
    author: 'Author',
});

React Components

VocoSEO

<VocoSEO
    title="Page Title"
    description="Page description"
    image="/og-image.jpg"
    type="website" // | 'article' | 'product'
    keywords={['tag1', 'tag2']}
    author="Author Name"
    twitterCard="summary_large_image"
    noIndex={false}
    canonical="https://example.com/page"
/>

JsonLd

<JsonLd
    type="Article"
    data={{
        headline: 'Article Title',
        author: { '@type': 'Person', name: 'Author' },
        datePublished: '2024-01-15',
    }}
/>

License

MIT

Made with ❤️ by VocoWeb