feat: add SEO stuff

src/app/[id]/page.tsx

@@ -3,6 +3,7 @@ import { EditorProvider } from "~/components/editor-provider";
 import { MonacoEditor } from "~/components/monaco-editor";
 import { getPasteById } from "~/actions/paste";
 import { Header } from "~/components/header";
+import { SITE_URL } from "~/constants/site";
 import { LANGUAGES_SET, type LanguageName } from "~/utils/languages";
 import { createEmptyTab, normalizeTabs } from "~/utils/paste-tabs";
 
@@ -51,13 +52,27 @@ export default async function PastePage({ params }: Props) {
 export async function generateMetadata({ params }: Props) {
   const { id } = await params;
   const paste = await getPasteById(id);
+  const ogImage = { url: "/sponge.png", alt: "spongebin" };
 
   if (!paste)
     return {
       title: "spongebin",
       description: "a pastebin made with sponge",
-      openGraph: { images: "/sponge.png" },
-      twitter: { card: "summary" },
+      openGraph: {
+        type: "website",
+        locale: "en_US",
+        url: SITE_URL,
+        siteName: "spongebin",
+        title: "spongebin",
+        description: "a pastebin made with sponge",
+        images: [ogImage],
+      },
+      twitter: {
+        card: "summary",
+        title: "spongebin",
+        description: "a pastebin made with sponge",
+        images: ["/sponge.png"],
+      },
     };
 
   const tabs = normalizeTabs(paste.tabs);
@@ -66,10 +81,28 @@ export async function generateMetadata({ params }: Props) {
     ? tabs.reduce((sum, tab) => sum + tab.content.split("\n").length, 0)
     : paste.content.split("\n").length;
 
+  const title = `spongebin • ${paste.id}`;
+  const description = `a paste containing ${totalTabs} file${totalTabs === 1 ? "" : "s"} and ${totalLines} lines`;
+  const canonical = `${SITE_URL}/${paste.id}`;
+
   return {
-    title: `spongebin • ${paste.id}`,
-    description: `a paste containing ${totalTabs} file${totalTabs === 1 ? "" : "s"} and ${totalLines} lines`,
-    openGraph: { images: "/sponge.png" },
-    twitter: { card: "summary" },
+    title,
+    description,
+    alternates: { canonical },
+    openGraph: {
+      type: "website",
+      locale: "en_US",
+      url: canonical,
+      siteName: "spongebin",
+      title,
+      description,
+      images: [ogImage],
+    },
+    twitter: {
+      card: "summary",
+      title,
+      description,
+      images: ["/sponge.png"],
+    },
   };
 }

src/app/layout.tsx

@@ -2,12 +2,30 @@ import "./globals.css";
 import type { Metadata, Viewport } from "next";
 import { Analytics } from "@vercel/analytics/next";
 import { Toaster } from "~/components/ui/sonner";
+import { SITE_URL } from "~/constants/site";
+
+const site = new URL(SITE_URL);
 
 export const metadata: Metadata = {
+  metadataBase: site,
+  alternates: { canonical: SITE_URL },
   title: "spongebin",
   description: "a pastebin made with sponge",
-  openGraph: { images: "/sponge.png" },
-  twitter: { card: "summary" },
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: SITE_URL,
+    siteName: "spongebin",
+    title: "spongebin",
+    description: "a pastebin made with sponge",
+    images: [{ url: "/sponge.png", alt: "spongebin" }],
+  },
+  twitter: {
+    card: "summary",
+    title: "spongebin",
+    description: "a pastebin made with sponge",
+    images: ["/sponge.png"],
+  },
 };
 
 export const viewport: Viewport = {

src/app/robots.ts

@@ -0,0 +1,12 @@
+import type { MetadataRoute } from "next";
+import { SITE_URL } from "~/constants/site";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: `${SITE_URL}/sitemap.xml`,
+  };
+}

src/app/sitemap.ts

@@ -0,0 +1,13 @@
+import type { MetadataRoute } from "next";
+import { SITE_URL } from "~/constants/site";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: SITE_URL,
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 1,
+    },
+  ];
+}

src/constants/site.ts

@@ -0,0 +1 @@
+export const SITE_URL = "https://spongebin.dev";