metimol · metimol · Aug 3, 2025 · Aug 3, 2025 · Aug 3, 2025 · Aug 3, 2025
diff --git a/App.tsx b/App.tsx
@@ -173,6 +173,15 @@ function Upload({ isMobile = false, onFileSelect, isProcessing }: { isMobile?: b
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
         onClick={() => !isProcessing && document.getElementById('file-input')?.click()}
+        role="button"
+        tabIndex={0}
+        aria-label={isProcessing ? "Processing image, please wait" : "Click or drag and drop to upload an image file"}
+        onKeyDown={(e) => {
+          if ((e.key === 'Enter' || e.key === ' ') && !isProcessing) {
+            e.preventDefault();
+            document.getElementById('file-input')?.click();
+          }
+        }}
       >
         <UploadCloud isMobile={isMobile} />
         <div className={`flex flex-col font-['Pixelify_Sans:Regular',_sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#f1d302] ${textSize} text-center text-nowrap`}>
@@ -187,6 +196,7 @@ function Upload({ isMobile = false, onFileSelect, isProcessing }: { isMobile?: b
           onChange={handleFileInput}
           className="hidden"
           disabled={isProcessing}
+          aria-label="Select image file to upload for pixel art upscaling"
         />
       </div>
       <div
@@ -355,16 +365,16 @@ export default function App() {
         </div>
 
         {/* Description */}
-        <div className="max-w-4xl mx-auto mb-8 md:mb-16">
-          <p className="font-['Pixelify_Sans:SemiBold',_sans-serif] font-semibold leading-[normal] text-[#f1d302] text-[20px] md:text-[25px] text-center">
+        <section className="max-w-4xl mx-auto mb-8 md:mb-16">
+          <h1 className="font-['Pixelify_Sans:SemiBold',_sans-serif] font-semibold leading-[normal] text-[#f1d302] text-[20px] md:text-[25px] text-center">
             Transform your low-resolution pixel art into crisp, high-quality
             images. No sign-up required. No watermarks. Just pure pixel
             perfection.
-          </p>
-        </div>
+          </h1>
+        </section>
 
         {/* Upload Area or Uploaded State */}
-        <div className="relative mb-8 md:mb-16">
+        <section className="relative mb-8 md:mb-16" aria-label="Image upload and processing section">
           {processedImage ? (
             <UploadedState 
               isMobile={isMobile}
@@ -379,7 +389,7 @@ export default function App() {
               isProcessing={isProcessing}
             />
           )}
-        </div>
+        </section>
 
         {/* Pikachu Character - Desktop */}
         <div className="hidden md:block absolute right-8 top-32 h-[300px] w-[300px] pointer-events-none">

diff --git a/README.md b/README.md
@@ -42,4 +42,4 @@ This project is automatically deployed to GitHub Pages using GitHub Actions when
 
 ## Live Demo
 
-Visit the live application at: https://metimol.github.io/PixelScale/
+Visit the live application at: https://metimol.github.io/PixelScale/
diff --git a/index.html b/index.html
@@ -2,15 +2,92 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PixelScale - AI Pixel Art Upscaler</title>
-    <meta name="description" content="Transform your pixel art with AI-powered upscaling technology" />
+
+    <!-- Primary Meta Tags -->
+    <title>PixelScale - Free AI Pixel Art Upscaler | Enhance Retro Game Art Online</title>
+    <meta name="title" content="PixelScale - Free AI Pixel Art Upscaler | Enhance Retro Game Art Online" />
+    <meta name="description" content="Free online AI-powered pixel art upscaler. Transform low-resolution pixel art into crisp, high-quality images. No sign-up required, no watermarks. Perfect for retro game art, sprites, and digital artwork." />
+    <meta name="keywords" content="pixel art upscaler, AI pixel art, upscale pixel art online, free pixel art tool, pixel art enhancement, retro game art upscaler, sprite upscaler, pixel art AI, image upscaling, digital art enhancement" />
+    <meta name="author" content="Metimol" />
+    <meta name="robots" content="index, follow" />
+    <meta name="language" content="English" />
+    <meta name="revisit-after" content="7 days" />
+
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://metimol.github.io/PixelScale/" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://metimol.github.io/PixelScale/" />
+    <meta property="og:title" content="PixelScale - Free AI Pixel Art Upscaler | Enhance Retro Game Art Online" />
+    <meta property="og:description" content="Free online AI-powered pixel art upscaler. Transform low-resolution pixel art into crisp, high-quality images. No sign-up required, no watermarks." />
+    <meta property="og:image" content="https://metimol.github.io/PixelScale/favicon.svg" />
+    <meta property="og:image:width" content="32" />
+    <meta property="og:image:height" content="32" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:site_name" content="PixelScale" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://metimol.github.io/PixelScale/" />
+    <meta property="twitter:title" content="PixelScale - Free AI Pixel Art Upscaler" />
+    <meta property="twitter:description" content="Free online AI-powered pixel art upscaler. Transform low-resolution pixel art into crisp, high-quality images. No sign-up required, no watermarks." />
+    <meta property="twitter:image" content="https://metimol.github.io/PixelScale/favicon.svg" />
+    <meta property="twitter:creator" content="@metimol" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="manifest" href="/site.webmanifest" />
+
+    <!-- Google Search Console Verification (replace with your own) -->
+    <!-- <meta name="google-site-verification" content="your-verification-code-here" /> -->
+
+    <!-- Security -->
+    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
+    <meta http-equiv="X-Frame-Options" content="DENY" />
+    <meta http-equiv="X-XSS-Protection" content="1; mode=block" />
 
     <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+
+    <!-- Structured Data -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebApplication",
+      "name": "PixelScale",
+      "url": "https://metimol.github.io/PixelScale/",
+      "description": "Free online AI-powered pixel art upscaler. Transform low-resolution pixel art into crisp, high-quality images.",
+      "applicationCategory": "GraphicsApplication",
+      "operatingSystem": "Web Browser",
+      "offers": {
+        "@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+      },
+      "creator": {
+        "@type": "Person",
+        "name": "Metimol",
+        "url": "https://github.com/metimol"
+      },
+      "provider": {
+        "@type": "Organization",
+        "name": "PixelScale",
+        "url": "https://metimol.github.io/PixelScale/"
+      },
+      "browserRequirements": "Requires JavaScript. Modern web browser recommended.",
+      "permissions": "No special permissions required",
+      "screenshot": "https://metimol.github.io/PixelScale/screenshot.png",
+      "softwareVersion": "1.0.0",
+      "dateModified": "2024-01-01",
+      "inLanguage": "en-US",
+      "isAccessibleForFree": true,
+      "keywords": "pixel art, upscaler, AI, image enhancement, retro games, sprites"
+    }
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,37 @@
+User-agent: *
+Allow: /
+
+# Sitemap
+Sitemap: https://metimol.github.io/PixelScale/sitemap.xml
+
+# Specific rules for search engines
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Slurp
+Allow: /
+
+User-agent: DuckDuckBot
+Allow: /
+
+User-agent: Baiduspider
+Allow: /
+
+User-agent: YandexBot
+Allow: /
+
+User-agent: facebookexternalhit
+Allow: /
+
+User-agent: Twitterbot
+Allow: /
+
+User-agent: LinkedInBot
+Allow: /
+
+# Crawl-delay for aggressive crawlers
+User-agent: *
+Crawl-delay: 1
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,56 @@
+{
+  "name": "PixelScale - AI Pixel Art Upscaler",
+  "short_name": "PixelScale",
+  "description": "Free online AI-powered pixel art upscaler. Transform low-resolution pixel art into crisp, high-quality images.",
+  "start_url": "/PixelScale/",
+  "display": "standalone",
+  "background_color": "#020100",
+  "theme_color": "#f1d302",
+  "orientation": "any",
+  "scope": "/PixelScale/",
+  "lang": "en-US",
+  "icons": [
+    {
+      "src": "/PixelScale/favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "/PixelScale/favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/PixelScale/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "/PixelScale/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/PixelScale/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["graphics", "utilities", "productivity"],
+  "screenshots": [
+    {
+      "src": "/PixelScale/screenshot-wide.png",
+      "sizes": "1280x720",
+      "type": "image/png",
+      "form_factor": "wide"
+    },
+    {
+      "src": "/PixelScale/screenshot-narrow.png",
+      "sizes": "720x1280",
+      "type": "image/png",
+      "form_factor": "narrow"
+    }
+  ]
+}
diff --git a/public/sitemap.xml b/public/sitemap.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+        http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+  <url>
+    <loc>https://metimol.github.io/PixelScale/</loc>
+    <lastmod>2024-01-01T00:00:00+00:00</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -42,4 +42,4 @@ This project is automatically deployed to GitHub Pages using GitHub Actions when

		## Live Demo

		Visit the live application at: https://metimol.github.io/PixelScale/
		Visit the live application at: https://metimol.github.io/PixelScale/