/**
* SEO Component System
* Provides comprehensive SEO meta tags and Open Graph support
*/
import Head from 'next/head'
export interface SEOProps {
title?: string
description?: string
canonical?: string
openGraph?: {
type?: 'website' | 'article' | 'profile'
title?: string
description?: string
image?: string
url?: string
siteName?: string
}
twitter?: {
card?: 'summary' | 'summary_large_image' | 'app' | 'player'
site?: string
creator?: string
title?: string
description?: string
image?: string
}
additionalMetaTags?: Array<{
name?: string
property?: string
content: string
}>
additionalLinkTags?: Array<{
rel: string
href: string
type?: string
sizes?: string
}>
noindex?: boolean
nofollow?: boolean
}
const defaultSEOConfig = {
title: 'NextJS Boilerplate',
description:
'A production-ready NextJS boilerplate with TypeScript, Tailwind CSS, and authentication',
openGraph: {
type: 'website' as const,
siteName: 'NextJS Boilerplate',
},
twitter: {
card: 'summary_large_image' as const,
},
}
export function SEO({
title,
description,
canonical,
openGraph,
twitter,
additionalMetaTags = [],
additionalLinkTags = [],
noindex = false,
nofollow = false,
}: SEOProps) {
const seo = {
title: title || defaultSEOConfig.title,
description: description || defaultSEOConfig.description,
openGraph: {
...defaultSEOConfig.openGraph,
...openGraph,
},
twitter: {
...defaultSEOConfig.twitter,
...twitter,
},
}
// Create robots meta content
const robotsContent = []
if (noindex) robotsContent.push('noindex')
if (nofollow) robotsContent.push('nofollow')
if (robotsContent.length === 0) robotsContent.push('index', 'follow')
return (
{/* Basic Meta Tags */}
{seo.title}
{/* Canonical URL */}
{canonical && }
{/* Open Graph */}
{seo.openGraph.image && }
{seo.openGraph.url && }
{seo.openGraph.siteName && }
{/* Twitter Card */}
{seo.twitter.site && }
{seo.twitter.creator && }
{seo.twitter.image && }
{/* Additional Meta Tags */}
{additionalMetaTags.map((tag, index) => (
))}
{/* Additional Link Tags */}
{additionalLinkTags.map((tag, index) => (
))}
)
}
/**
* Article SEO component for topic posts
*/
interface ArticleSEOProps extends Omit {
article: {
publishedTime?: string
modifiedTime?: string
author?: string
section?: string
tags?: string[]
}
openGraph?: SEOProps['openGraph']
}
export function ArticleSEO({ article, openGraph, ...props }: ArticleSEOProps) {
const articleOpenGraph = {
...openGraph,
type: 'article' as const,
}
const additionalMetaTags = [
...(props.additionalMetaTags || []),
...(article.publishedTime
? [
{
property: 'article:published_time',
content: article.publishedTime,
},
]
: []),
...(article.modifiedTime
? [
{
property: 'article:modified_time',
content: article.modifiedTime,
},
]
: []),
...(article.author
? [
{
property: 'article:author',
content: article.author,
},
]
: []),
...(article.section
? [
{
property: 'article:section',
content: article.section,
},
]
: []),
...(article.tags
? article.tags.map((tag) => ({
property: 'article:tag',
content: tag,
}))
: []),
]
return
}
/**
* Hook to generate SEO-friendly URLs
*/
export function useSEOUrl(baseUrl: string, path?: string) {
const cleanPath = path?.startsWith('/') ? path : `/${path || ''}`
return `${baseUrl}${cleanPath}`
}