Added Meta Data Tags

Author: the-rebooted-coder

back-image.webp renamed to assets/back-image.webp

@@ -4,6 +4,29 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+   <!-- SEO Meta Tags -->
+   <title>Spandan's Sticker</title>
+   <meta name="description" content="This website takes you where your QR journey begins once you scan that holographic Spandan sticker!">
+   <meta name="keywords" content="Stickers, Spandan's Stickers, Custom Stickers, Unique Designs, Sticker Collection">
+   <meta name="author" content="Spandan Saxena">
+
+   <!-- Open Graph Meta Tags for Social Media Sharing -->
+   <meta property="og:title" content="Spandan's Sticker">
+   <meta property="og:description" content="Discover what's with the Spandan sticker which you found somewhere!">
+   <meta property="og:image" content="https://i.ibb.co/kqVKR2T/og-image.webp">
+   <meta property="og:url" content="https://github.com/the-rebooted-coder/Digital-Sticker">
+   <meta property="og:type" content="website">
+   
+   <!-- Twitter Card Meta Tags -->
+   <meta name="twitter:card" content="summary_large_image">
+   <meta name="twitter:title" content="Spandan's Sticker">
+   <meta name="twitter:description" content="This website takes you where your QR journey begins once you scan that holographic Spandan sticker!">
+   <meta name="twitter:image" content="https://i.ibb.co/kqVKR2T/og-image.webp"> <!-- Replace with your image URL -->
+
+   <!-- Favicon -->
+   <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- Ensure favicon.ico exists in your project root -->
+
     <title>Spandan's Sticker</title>
     <!-- Import Poppins Font from Google Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
@@ -92,10 +115,10 @@ <h1>Tap to know me</h1>
         <div class="card" onclick="flipCard(this)">
             <div class="card-inner">
                 <div class="card-front">
-                    <img src="front-image.webp" alt="Front Image 1">
+                    <img src="./assets/front-image.webp" alt="Sticker side">
                 </div>
                 <div class="card-back">
-                    <img src="back-image.webp" alt="Back Image 1">
+                    <img src="./assets/back-image.webp" alt="Sticker back-side">
                 </div>
             </div>
         </div>