Fix favicon and enhance SEO with standard Google practices

.gitignore

@@ -0,0 +1,28 @@
+node_modules
+.DS_Store
+*.log
+.env
+.env.*
+!.env.example
+
+# Build artifacts
+dist/
+build/
+.react-router/
+.vite/
+
+# Workspace specific
+web/build/
+web/.react-router/
+web/.vite/
+
+# Hugging Face Restrictions (Binary Files)
+mobile/
+**/*.png
+**/*.ico
+**/*.wasm
+**/*.jpg
+**/*.jpeg
+**/*.gif
+**/*.webp
+

.nvmrc

@@ -0,0 +1 @@
+22.20.0

DEPLOYMENT.md

@@ -0,0 +1,98 @@
+# 🚀 Deployment Guide for Untwitch (React Router v7 + Hono)
+
+This guide will walk you through deploying Untwitch to Vercel via GitHub.
+
+---
+
+## Prerequisites
+
+✅ GitHub account  
+✅ Vercel account (free - sign up at [vercel.com](https://vercel.com))  
+✅ Your code ready to push
+
+---
+
+## Step 1: Prepare Your Repository
+
+### 1.1 Initialize Git (if not already done)
+
+```bash
+git init
+git add .
+git commit -m "Initial commit: Untwitch project ready for deployment"
+```
+
+### 1.2 Create a GitHub Repository
+
+1. Go to [github.com](https://github.com) and sign in
+2. Click the "+" icon in the top right → "New repository"
+3. Name it `untwitch`
+4. Click "Create repository"
+
+### 1.3 Push Your Code to GitHub
+
+```bash
+git remote add origin https://github.com/YOUR_USERNAME/untwitch.git
+git branch -M main
+git push -u origin main
+```
+
+---
+
+## Step 2: Deploy to Vercel
+
+1. **Go to Vercel**  
+   Visit [vercel.com](https://vercel.com) and sign in with GitHub.
+
+2. **Import Your Repository**
+   - Click "Add New..." → "Project"
+   - Select your `untwitch` repository.
+   - Click "Import"
+
+3. **Configure Project Settings**
+   **Crucial Step**: Vercel might auto-detect "Other" or "Vite". Configure as follows:
+   - **Framework Preset**: `Other` (or `Vite`)
+   - **Root Directory**: `web`
+   - **Build Command**: `npm run build`
+   - **Output Directory**: `build/client`
+   - **Install Command**: `npm install`
+
+4. **Add Environment Variables**
+   If you have a database or secret keys, add them here:
+   - `DATABASE_URL` (Neon PostgreSQL)
+   - `AUTH_SECRET` (For authentication)
+   - `NEXT_PUBLIC_CREATE_BASE_URL` (Defaults to https://www.create.xyz)
+
+5. **Deploy!**
+   - Click "Deploy"
+   - Wait ~2 minutes. Your site will be live!
+
+---
+
+## Step 3: Why This Setup?
+
+Untwitch uses a hybrid architecture:
+- **React Router v7**: For the frontend and Server-Side Rendering (SSR).
+- **Hono**: A fast, standard-compliant server for both API and SSR.
+- **Vercel Functions**: The `web/api/index.ts` file acts as a bridge, allowing Vercel to run the Hono server for SSR and API requests.
+
+---
+
+## Troubleshooting
+
+### API Routes 404
+Ensure your `Root Directory` is set to `web`. The `web/vercel.json` handles rewrites to `/api/index`, which is our Hono entry point.
+
+### Build Fails
+Verify that you are using Node.js 18+ in Vercel settings (General → Node.js Version).
+
+---
+
+## Summary
+
+✅ Code pushed to GitHub  
+✅ Root Directory set to `web`  
+✅ Build/Output paths configured correctly  
+✅ Deployed successfully  
+
+**Your site is now live!** 🎉

Dockerfile

@@ -1,35 +1,38 @@
-# Use the official Node.js 22 image as the base
-FROM node:22-slim
+# Use the full Node.js 22 image
+FROM node:22
 
-# Install system dependencies: ffmpeg and curl (for health checks)
+# Install system dependencies
 RUN apt-get update && apt-get install -y \
     ffmpeg \
     curl \
     python3 \
+    python-is-python3 \
     && rm -rf /var/lib/apt/lists/*
 
 # Set the working directory
 WORKDIR /app
 
-# Copy the root package.json and workspace package.json
+# Copy package management files
 COPY package*.json ./
 COPY web/package*.json ./web/
 
-# Install dependencies (using --legacy-peer-deps if needed)
-RUN npm install --include=dev
+# Install ALL dependencies (including devDependencies needed for build)
+RUN npm install --legacy-peer-deps
 
 # Copy the rest of the application code
 COPY . .
 
-# Build the web application
-RUN npm run build --workspace=web
-
-# Use environment variable for port (Hugging Face uses 7860)
+# Set dummy environment variables for the build process
+ENV DATABASE_URL="postgres://dummy:dummy@localhost:5432/dummy"
+ENV AUTH_SECRET="dummy_secret_for_build_only"
 ENV NODE_ENV=production
 ENV PORT=7860
 
-# Expose the port
+# Build the web application using npm workspace command
+RUN npm run build --workspace=web
+
+# Expose the port Hugging Face expects
 EXPOSE 7860
 
-# Start the application and ensure it listens on the correct port
+# Start the application
 CMD ["sh", "-c", "PORT=${PORT:-7860} npm start --workspace=web"]

vercel.json

@@ -0,0 +1,40 @@
+{
+  "installCommand": "npm install --legacy-peer-deps --omit=optional",
+  "buildCommand": "npm run build",
+  "outputDirectory": "web/build/client",
+  "framework": null,
+  "cleanUrls": true,
+  "trailingSlash": false,
+  "functions": {
+    "web/api/index.ts": {
+      "maxDuration": 60,
+      "memory": 1024,
+      "includeFiles": "web/build/server/**"
+    }
+  },
+  "rewrites": [
+    {
+      "source": "/api/(.*)",
+      "destination": "web/api/index"
+    },
+    {
+      "source": "/((?!assets/|favicon|robots\\.txt|sitemap\\.xml|manifest\\.json|browserconfig\\.xml).*)",
+      "destination": "web/api/index"
+    }
+  ],
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        { "key": "X-Content-Type-Options", "value": "nosniff" },
+        { "key": "X-Frame-Options", "value": "DENY" },
+        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
+      ]
+    }
+  ],
+  "build": {
+    "env": {
+      "NODE_VERSION": "22"
+    }
+  }
+}

web/__create/index.ts

@@ -1,5 +1,6 @@
 import { AsyncLocalStorage } from 'node:async_hooks';
 import nodeConsole from 'node:console';
+import { readFile } from 'node:fs/promises';
 import { skipCSRFCheck } from '@auth/core';
 import Credentials from '@auth/core/providers/credentials';
 import { authHandler, initAuthConfig } from '@hono/auth-js';
@@ -47,6 +48,7 @@ const getAdapter = () => {
 };
 
 const app = new Hono();
+const faviconUrl = new URL('../public/favicon.png', import.meta.url);
 
 // Log environment variables (masked) for debugging Vercel issues
 console.log('--- Environment Check ---');
@@ -65,6 +67,138 @@ app.use('*', async (c, next) => {
 
 app.use(contextStorage());
 
+app.get('/robots.txt', (c) => {
+  const robots = `User-agent: *
+Allow: /
+Sitemap: https://untwitch.online/sitemap.xml`;
+
+  return c.text(robots, 200, {
+    'Content-Type': 'text/plain',
+  });
+});
+
+app.get('/sitemap.xml', (c) => {
+  const baseUrl = 'https://untwitch.online';
+  const mainPages = [
+    { path: '', priority: '1.0', changefreq: 'daily' },
+    { path: '/how-to-download', priority: '0.9', changefreq: 'weekly' },
+    { path: '/features', priority: '0.9', changefreq: 'weekly' },
+    { path: '/faq', priority: '0.8', changefreq: 'weekly' },
+    { path: '/blog', priority: '0.8', changefreq: 'daily' },
+    { path: '/contact', priority: '0.6', changefreq: 'monthly' },
+    { path: '/privacy-policy', priority: '0.5', changefreq: 'monthly' },
+    { path: '/terms', priority: '0.5', changefreq: 'monthly' },
+  ];
+  const blogPosts = [
+    '/blog/ultimate-guide-downloading-twitch-clips',
+    '/blog/download-twitch-vods-complete-guide',
+    '/blog/twitch-clip-vs-vod-downloader',
+  ];
+
+  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+        xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
+        xmlns:xhtml="http://www.w3.org/1999/xhtml"
+        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
+        xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
+  ${mainPages
+    .map(
+      (page) => `
+    <url>
+      <loc>${baseUrl}${page.path}</loc>
+      <lastmod>${new Date().toISOString()}</lastmod>
+      <changefreq>${page.changefreq}</changefreq>
+      <priority>${page.priority}</priority>
+    </url>`
+    )
+    .join('')}
+  ${blogPosts
+    .map(
+      (post) => `
+    <url>
+      <loc>${baseUrl}${post}</loc>
+      <lastmod>${new Date().toISOString()}</lastmod>
+      <changefreq>monthly</changefreq>
+      <priority>0.7</priority>
+    </url>`
+    )
+    .join('')}
+</urlset>`;
+
+  return c.body(sitemap, 200, {
+    'Content-Type': 'application/xml',
+  });
+});
+
+app.get('/favicon.svg', async (c) => {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  <rect width="48" height="48" rx="12" fill="#7C3AED"/>
+  <path d="M24 10v20M14 20l10 10 10-10M12 38h24" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+  return c.body(svg, 200, {
+    'Content-Type': 'image/svg+xml',
+    'Cache-Control': 'public, max-age=86400',
+  });
+});
+
+app.get('/favicon.ico', async (c) => {
+  try {
+    const iconBuffer = await readFile(faviconUrl);
+    return c.body(iconBuffer, 200, {
+      'Content-Type': 'image/x-icon',
+      'Cache-Control': 'public, max-age=86400',
+    });
+  } catch (error) {
+    return c.text('Not Found', 404);
+  }
+});
+
+app.get('/favicon.png', async (c) => {
+  try {
+    const iconBuffer = await readFile(faviconUrl);
+    return c.body(iconBuffer, 200, {
+      'Content-Type': 'image/png',
+      'Cache-Control': 'public, max-age=86400',
+    });
+  } catch (error) {
+    return c.text('Not Found', 404);
+  }
+});
+
+app.get('/src/__create/favicon.png', async (c) => {
+  try {
+    const iconBuffer = await readFile(faviconUrl);
+    return c.body(iconBuffer, 200, {
+      'Content-Type': 'image/png',
+      'Cache-Control': 'public, max-age=86400',
+    });
+  } catch (error) {
+    return c.text('Not Found', 404);
+  }
+});
+
+app.get('/untwitch-icon.png', async (c) => {
+  try {
+    const highResUrl = new URL('../src/__create/logo-high-res.png', import.meta.url);
+    const iconBuffer = await readFile(highResUrl);
+    return c.body(iconBuffer, 200, {
+      'Content-Type': 'image/png',
+      'Cache-Control': 'public, max-age=86400',
+    });
+  } catch (error) {
+    // Fallback to regular favicon if high res is missing
+    try {
+      const iconBuffer = await readFile(faviconUrl);
+      return c.body(iconBuffer, 200, {
+        'Content-Type': 'image/png',
+        'Cache-Control': 'public, max-age=86400',
+      });
+    } catch (e) {
+      return c.text('Not Found', 404);
+    }
+  }
+});
+
 app.onError((err, c) => {
   console.error(`[App Error] ${c.req.method} ${c.req.path}:`, err);
   

web/src/app/blog/download-twitch-vods-complete-guide/page.jsx

@@ -32,8 +32,71 @@ export const meta = () => [
 ];
 
 export default function DownloadTwitchVODs() {
+  const publishDate = "2026-02-15T09:00:00+00:00";
+  const modifyDate = new Date().toISOString();
+  
   return (
     <article className="min-h-screen bg-white">
+      {/* Schema Markup */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "Article",
+            headline: "How to Download Twitch VODs: Complete Step-by-Step Guide",
+            description: "Master the art of downloading full Twitch VODs. Learn about quality settings, storage requirements, and best practices for archiving streams.",
+            image: "https://untwitch.online/untwitch-icon.png",
+            author: {
+              "@type": "Organization",
+              name: "Untwitch"
+            },
+            publisher: {
+              "@type": "Organization",
+              name: "Untwitch",
+              logo: {
+                "@type": "ImageObject",
+                url: "https://untwitch.online/untwitch-icon.png"
+              }
+            },
+            datePublished: publishDate,
+            dateModified: modifyDate,
+            mainEntityOfPage: {
+              "@type": "WebPage",
+              "@id": "https://untwitch.online/blog/download-twitch-vods-complete-guide"
+            }
+          }),
+        }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "BreadcrumbList",
+            itemListElement: [
+              {
+                "@type": "ListItem",
+                position: 1,
+                name: "Home",
+                item: "https://untwitch.online",
+              },
+              {
+                "@type": "ListItem",
+                position: 2,
+                name: "Blog",
+                item: "https://untwitch.online/blog",
+              },
+              {
+                "@type": "ListItem",
+                position: 3,
+                name: "How to Download Twitch VODs",
+                item: "https://untwitch.online/blog/download-twitch-vods-complete-guide",
+              },
+            ],
+          }),
+        }}
+      />
       {/* Header */}
       <header className="bg-gradient-to-br from-purple-600 to-purple-800 text-white py-16 px-4">
         <div className="max-w-4xl mx-auto space-y-6">

web/src/app/blog/page.jsx

@@ -1,3 +1,4 @@
+import { useMemo, useState } from "react";
 import { BookOpen, Clock, ArrowRight, TrendingUp } from "lucide-react";
 
 export const meta = () => [
@@ -10,6 +11,7 @@ export const meta = () => [
 ];
 
 export default function BlogPage() {
+  const [activeCategory, setActiveCategory] = useState("All Posts");
   const pillarPosts = [
     {
       title: "The Ultimate Guide to Downloading Twitch Clips in 2026",
@@ -58,6 +60,22 @@ export default function BlogPage() {
     "Legal",
   ];
 
+  const filteredPillarPosts = useMemo(() => {
+    if (activeCategory === "All Posts") {
+      return pillarPosts;
+    }
+
+    return pillarPosts.filter((post) => post.category === activeCategory);
+  }, [activeCategory]);
+
+  const filteredRecentPosts = useMemo(() => {
+    if (activeCategory === "All Posts") {
+      return recentPosts;
+    }
+
+    return recentPosts.filter((post) => post.category === activeCategory);
+  }, [activeCategory]);
+
   return (
     <div className="min-h-screen bg-gradient-to-b from-purple-50 via-white to-gray-50">
       {/* Header */}
@@ -85,8 +103,10 @@ export default function BlogPage() {
             {categories.map((cat) => (
               <button
                 key={cat}
+                type="button"
+                onClick={() => setActiveCategory(cat)}
                 className={`px-5 py-2 rounded-full text-sm font-semibold transition-all ${
-                  cat === "All Posts"
+                  cat === activeCategory
                     ? "bg-purple-600 text-white shadow-md"
                     : "bg-white text-gray-600 hover:bg-gray-100 border border-gray-200"
                 }`}
@@ -104,61 +124,74 @@ export default function BlogPage() {
           <div className="flex items-center gap-2 mb-8">
             <TrendingUp className="h-6 w-6 text-purple-600" />
             <h2 className="text-3xl font-bold text-gray-900">
-              Essential Guides
+              {activeCategory === "All Posts"
+                ? "Essential Guides"
+                : `${activeCategory} Posts`}
             </h2>
           </div>
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            {pillarPosts.map((post, idx) => (
-              <a
-                key={idx}
-                href={`/blog/${post.slug}`}
-                className="group bg-white rounded-2xl border border-gray-200 overflow-hidden hover:shadow-2xl transition-all duration-300 hover:-translate-y-1"
-              >
-                <div className="h-48 bg-gradient-to-br from-purple-500 to-purple-700 flex items-center justify-center relative overflow-hidden">
-                  <div className="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors" />
-                  <BookOpen className="h-16 w-16 text-white/90 group-hover:scale-110 transition-transform" />
-                  <div className="absolute top-4 right-4 bg-yellow-400 text-yellow-900 px-3 py-1 rounded-full text-xs font-bold">
-                    Featured
-                  </div>
-                </div>
-                <div className="p-6 space-y-4">
-                  <div className="flex items-center gap-2 text-sm text-gray-500">
-                    <span className="px-3 py-1 bg-purple-50 text-purple-700 rounded-full font-semibold">
-                      {post.category}
-                    </span>
-                    <span>•</span>
-                    <Clock className="h-3.5 w-3.5" />
-                    <span>{post.readTime}</span>
+          {filteredPillarPosts.length > 0 ? (
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+              {filteredPillarPosts.map((post, idx) => (
+                <a
+                  key={idx}
+                  href={`/blog/${post.slug}`}
+                  className="group bg-white rounded-2xl border border-gray-200 overflow-hidden hover:shadow-2xl transition-all duration-300 hover:-translate-y-1"
+                >
+                  <div className="h-48 bg-gradient-to-br from-purple-500 to-purple-700 flex items-center justify-center relative overflow-hidden">
+                    <div className="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors" />
+                    <BookOpen className="h-16 w-16 text-white/90 group-hover:scale-110 transition-transform" />
+                    <div className="absolute top-4 right-4 bg-yellow-400 text-yellow-900 px-3 py-1 rounded-full text-xs font-bold">
+                      Featured
+                    </div>
                   </div>
-                  <h3 className="text-xl font-bold text-gray-900 group-hover:text-purple-600 transition-colors line-clamp-2">
-                    {post.title}
-                  </h3>
-                  <p className="text-gray-600 text-sm leading-relaxed line-clamp-3">
-                    {post.excerpt}
-                  </p>
-                  <div className="flex items-center justify-between pt-2">
-                    <span className="text-sm text-gray-400">{post.date}</span>
-                    <div className="flex items-center gap-1 text-purple-600 font-semibold text-sm group-hover:gap-2 transition-all">
-                      Read More
-                      <ArrowRight className="h-4 w-4" />
+                  <div className="p-6 space-y-4">
+                    <div className="flex items-center gap-2 text-sm text-gray-500">
+                      <span className="px-3 py-1 bg-purple-50 text-purple-700 rounded-full font-semibold">
+                        {post.category}
+                      </span>
+                      <span>•</span>
+                      <Clock className="h-3.5 w-3.5" />
+                      <span>{post.readTime}</span>
+                    </div>
+                    <h3 className="text-xl font-bold text-gray-900 group-hover:text-purple-600 transition-colors line-clamp-2">
+                      {post.title}
+                    </h3>
+                    <p className="text-gray-600 text-sm leading-relaxed line-clamp-3">
+                      {post.excerpt}
+                    </p>
+                    <div className="flex items-center justify-between pt-2">
+                      <span className="text-sm text-gray-400">{post.date}</span>
+                      <div className="flex items-center gap-1 text-purple-600 font-semibold text-sm group-hover:gap-2 transition-all">
+                        Read More
+                        <ArrowRight className="h-4 w-4" />
+                      </div>
                     </div>
                   </div>
-                </div>
-              </a>
-            ))}
-          </div>
+                </a>
+              ))}
+            </div>
+          ) : (
+            <div className="rounded-2xl border border-dashed border-gray-300 bg-white p-10 text-center">
+              <h3 className="text-xl font-bold text-gray-900">
+                No posts yet in {activeCategory}
+              </h3>
+              <p className="mt-2 text-gray-600">
+                Choose another category or check back soon for new articles.
+              </p>
+            </div>
+          )}
         </div>
       </section>
 
       {/* Recent Posts (Hidden if empty) */}
-      {recentPosts.length > 0 && (
+      {filteredRecentPosts.length > 0 && (
         <section className="px-4 pb-24">
           <div className="max-w-7xl mx-auto">
             <h2 className="text-3xl font-bold text-gray-900 mb-8">
               Recent Articles
             </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {recentPosts.map((post, idx) => (
+              {filteredRecentPosts.map((post, idx) => (
                 <a
                   key={idx}
                   href={`/blog/${post.slug}`}

web/src/app/blog/twitch-clip-vs-vod-downloader/page.jsx

@@ -31,8 +31,71 @@ export const meta = () => [
 ];
 
 export default function ClipVsVODDownloader() {
+  const publishDate = "2026-02-12T09:00:00+00:00";
+  const modifyDate = new Date().toISOString();
+
   return (
     <article className="min-h-screen bg-white">
+      {/* Schema Markup */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "Article",
+            headline: "Twitch Clip Downloader vs VOD Downloader: Which Tool Do You Need?",
+            description: "Understand the key differences between clip and VOD downloaders. Find out which tool best fits your needs and use cases.",
+            image: "https://untwitch.online/untwitch-icon.png",
+            author: {
+              "@type": "Organization",
+              name: "Untwitch"
+            },
+            publisher: {
+              "@type": "Organization",
+              name: "Untwitch",
+              logo: {
+                "@type": "ImageObject",
+                url: "https://untwitch.online/untwitch-icon.png"
+              }
+            },
+            datePublished: publishDate,
+            dateModified: modifyDate,
+            mainEntityOfPage: {
+              "@type": "WebPage",
+              "@id": "https://untwitch.online/blog/twitch-clip-vs-vod-downloader"
+            }
+          }),
+        }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "BreadcrumbList",
+            itemListElement: [
+              {
+                "@type": "ListItem",
+                position: 1,
+                name: "Home",
+                item: "https://untwitch.online",
+              },
+              {
+                "@type": "ListItem",
+                position: 2,
+                name: "Blog",
+                item: "https://untwitch.online/blog",
+              },
+              {
+                "@type": "ListItem",
+                position: 3,
+                name: "Clip vs VOD Downloader",
+                item: "https://untwitch.online/blog/twitch-clip-vs-vod-downloader",
+              },
+            ],
+          }),
+        }}
+      />
       {/* Header */}
       <header className="bg-gradient-to-br from-purple-600 to-purple-800 text-white py-16 px-4">
         <div className="max-w-4xl mx-auto space-y-6">

web/src/app/contact/page.jsx

@@ -1,4 +1,4 @@
-import { Mail, Send, CheckCircle2, MessageSquare, Clock, Globe } from "lucide-react";
+import { Mail, Send, CheckCircle2, MessageSquare, Clock, Globe, ChevronRight } from "lucide-react";
 import { useState } from "react";
 
 export const meta = () => [
@@ -19,6 +19,30 @@ export default function ContactPage() {
 
   return (
     <div className="max-w-4xl mx-auto px-4 py-20 space-y-12">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "BreadcrumbList",
+            itemListElement: [
+              {
+                "@type": "ListItem",
+                position: 1,
+                name: "Home",
+                item: "https://untwitch.online",
+              },
+              {
+                "@type": "ListItem",
+                position: 2,
+                name: "Contact",
+                item: "https://untwitch.online/contact",
+              },
+            ],
+          }),
+        }}
+      />
+
       <div className="text-center space-y-4">
         <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 tracking-tight">
           Contact Us
@@ -29,6 +53,14 @@ export default function ContactPage() {
         </p>
       </div>
 
+      <nav className="flex items-center justify-center gap-2 text-sm text-gray-400">
+        <a href="/" className="hover:text-purple-600 transition-colors">
+          Home
+        </a>
+        <ChevronRight className="h-3 w-3" />
+        <span className="text-gray-900 font-medium">Contact</span>
+      </nav>
+
       <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
         <div className="space-y-8">
           <div className="bg-purple-50 p-8 rounded-3xl space-y-6">

web/src/app/features/page.jsx

@@ -8,6 +8,7 @@ import {
   Globe,
   Lock,
   Cpu,
+  ChevronRight,
 } from "lucide-react";
 
 export const meta = () => [
@@ -58,6 +59,30 @@ export default function FeaturesPage() {
 
   return (
     <div className="max-w-7xl mx-auto px-4 py-20 space-y-24">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "BreadcrumbList",
+            itemListElement: [
+              {
+                "@type": "ListItem",
+                position: 1,
+                name: "Home",
+                item: "https://untwitch.online",
+              },
+              {
+                "@type": "ListItem",
+                position: 2,
+                name: "Features",
+                item: "https://untwitch.online/features",
+              },
+            ],
+          }),
+        }}
+      />
+
       <div className="text-center space-y-4">
         <h1 className="text-4xl md:text-6xl font-extrabold text-gray-900 tracking-tight">
           Powerful Features, <br />
@@ -69,6 +94,14 @@ export default function FeaturesPage() {
         </p>
       </div>
 
+      <nav className="flex items-center justify-center gap-2 text-sm text-gray-400">
+        <a href="/" className="hover:text-purple-600 transition-colors">
+          Home
+        </a>
+        <ChevronRight className="h-3 w-3" />
+        <span className="text-gray-900 font-medium">Features</span>
+      </nav>
+
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         {features.map((f, idx) => (
           <div

web/src/app/root.tsx

@@ -89,7 +89,17 @@ export const meta: Route.MetaFunction = () => [
   { name: 'twitter:image', content: '/untwitch-icon.png' },
 ];
 
-export const links = () => [];
+export const links: Route.LinksFunction = () => [
+  { rel: 'canonical', href: 'https://untwitch.online/' },
+  { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
+  { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' },
+  { rel: 'apple-touch-icon', href: '/untwitch-icon.png' },
+  {
+    rel: 'manifest',
+    href: '/manifest.json',
+    crossOrigin: 'use-credentials',
+  },
+];
 
 if (globalThis.window && globalThis.window !== undefined) {
   globalThis.window.fetch = fetch;
@@ -492,11 +502,9 @@ export function Layout({ children }: { children: ReactNode }) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
         <Links />
-        <link
-          rel="manifest"
-          href="/manifest.json"
-          crossOrigin="use-credentials"
-        />
+        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+        <link rel="icon" href="/favicon.png" type="image/png" />
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
         <meta name="msapplication-config" content="/browserconfig.xml" />
         <meta name="msapplication-TileImage" content="/untwitch-icon.png" />
         <meta name="msapplication-TileColor" content="#7C3AED" />
@@ -580,7 +588,6 @@ export function Layout({ children }: { children: ReactNode }) {
           }}
         />
         <script type="module" src="/src/__create/dev-error-overlay.js"></script>
-        <link rel="icon" href="/src/__create/favicon.png" />
         {LoadFontsSSR ? <LoadFontsSSR /> : null}
       </head>
       <body>

web/vercel.json

@@ -18,7 +18,7 @@
       "destination": "/api/index"
     },
     {
-      "source": "/((?!assets/|favicon|robots\\.txt|sitemap\\.xml|manifest\\.json|browserconfig\\.xml).*)",
+      "source": "/((?!assets/|robots\\.txt|sitemap\\.xml|manifest\\.json|browserconfig\\.xml).*)",
       "destination": "/api/index"
     }
   ],