Loading...
Loading...
> Comprehensive SEO configuration including meta tags, OpenGraph, Twitter cards, and structured data for optimal search engine visibility.
Fabrk includes a complete SEO system built on Next.js 15's metadata API. The system provides automatic meta tag generation from centralized configuration, OpenGraph and Twitter card support for social sharing, JSON-LD structured data for rich search results, dynamic sitemap and robots.txt generation, and canonical URL management.
DESC: Edit src/config.js with your site details
1export const config = {2 app: {3 name: "Your SaaS Name",4 description: "Your compelling product description",5 url: "https://yourdomain.com",6 ogImage: "/og-image.png",7 twitterHandle: "@yourusername",8 },9 // ...10};
DESC: The root layout exports metadata automatically
1// src/app/layout.tsx2import { config } from "@/config";34export const metadata = {5 title: {6 default: config.app.name,7 template: `%s | ${config.app.name}`,8 },9 description: config.app.description,10 openGraph: {11 title: config.app.name,12 description: config.app.description,13 url: config.app.url,14 siteName: config.app.name,15 images: [{ url: config.app.ogImage }],16 type: "website",17 },18 twitter: {19 card: "summary_large_image",20 title: config.app.name,21 description: config.app.description,22 creator: config.app.twitterHandle,23 },24};
DESC: Override metadata for individual pages
1// src/app/pricing/page.tsx2export const metadata = {3 title: "Pricing",4 description: "Simple, transparent pricing for teams of all sizes",5 openGraph: {6 title: "Pricing | Your SaaS",7 description: "Simple, transparent pricing for teams of all sizes",8 },9};1011export default function PricingPage() {12 return <div>...</div>;13}
Generate metadata based on dynamic content
1// src/app/blog/[slug]/page.tsx2import { prisma } from "@/lib/db";34export async function generateMetadata({ params }) {5 const post = await prisma.post.findUnique({6 where: { slug: params.slug },7 });89 return {10 title: post.title,11 description: post.excerpt,12 openGraph: {13 title: post.title,14 description: post.excerpt,15 images: [{ url: post.coverImage }],16 type: "article",17 publishedTime: post.createdAt,18 },19 };20}
Add structured data for rich search results
1// src/lib/seo/structured-data.ts2export function generateOrganizationSchema() {3 return {4 "@context": "https://schema.org",5 "@type": "Organization",6 name: config.app.name,7 url: config.app.url,8 logo: `${config.app.url}/logo.png`,9 sameAs: [10 "https://twitter.com/yourusername",11 "https://linkedin.com/company/yourcompany",12 ],13 };14}1516// In your layout or page:17<script18 type="application/ld+json"19 dangerouslySetInnerHTML={{20 __html: JSON.stringify(generateOrganizationSchema()),21 }}22/>
Automatic sitemap at /sitemap.xml
1// src/app/sitemap.ts2import { config } from "@/config";34export default async function sitemap() {5 const staticPages = [6 { url: config.app.url, lastModified: new Date() },7 { url: `${config.app.url}/pricing`, lastModified: new Date() },8 { url: `${config.app.url}/features`, lastModified: new Date() },9 ];1011 // Add dynamic pages (blog posts, etc.)12 const posts = await prisma.post.findMany({13 select: { slug: true, updatedAt: true },14 });1516 const postPages = posts.map((post) => ({17 url: `${config.app.url}/blog/${post.slug}`,18 lastModified: post.updatedAt,19 }));2021 return [...staticPages, ...postPages];22}
Configure meta tags for your homepage with compelling title and description that matches your value proposition. Include OpenGraph image (1200x630px recommended).
Use dynamic metadata generation to automatically pull title, description, and featured image from your CMS or database for each blog post.
Add Product schema structured data for e-commerce features, including price, availability, and reviews for rich snippets in search results.
Use hreflang tags and locale-specific metadata for international SEO. Fabrk's i18n system automatically handles alternate language links.