Turah Stack - BoilerplateTurah Stack - Boilerplate/
Docs Hub
Dashboard

13. Dynamic SEO & Edge OpenGraph Generator

Ringkasan

Aplikasi memiliki engine SEO siap produksi yang menyediakan meta tag dinamis, /sitemap.xml dinamis, /robots.txt dinamis, serta Generator Gambar OpenGraph Edge (`/api/og`).

Cara Kerja

mermaid
graph TD
    SearchCrawler["Search Crawler / Bagikan Medsos"] --> Routes
    Routes -->|/sitemap.xml| Sitemap["src/app/sitemap.ts"]
    Routes -->|/robots.txt| Robots["src/app/robots.txt/route.ts"]
    Routes -->|/api/og?title=...| EdgeOG["src/app/api/og/route.tsx (Edge Runtime)"]
    
    EdgeOG --> DynamicImage["Gambar Card OpenGraph PNG"]

1. Edge OpenGraph Card Generator (src/app/api/og/route.tsx)

Menghasilkan gambar pratinjau media sosial 1200x630 secara dinamis dan super cepat di Vercel Edge Runtime:

typescript
export const runtime = "edge";

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get("title") || "T3 Stack Single-App Boilerplate";

  return new ImageResponse(
    (
      <div style={{ display: 'flex', background: '#090d16', width: '100%', height: '100%' }}>
        <h1 style={{ color: '#ffffff', fontSize: 60 }}>{title}</h1>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

Berkas Terkait

  • src/app/api/og/route.tsx — Generator gambar OpenGraph Edge
  • src/app/sitemap.ts — Rute sitemap XML dinamis
  • src/app/robots.txt/route.ts — Rute robots.txt dinamis
  • src/app/(admin)/settings/seo/page.tsx — GUI Pengaturan SEO & Pratinjau Card Medsos