diff --git a/src/routes/characters.svelte b/src/routes/characters.svelte
index 056e7093..da6279cb 100644
--- a/src/routes/characters.svelte
+++ b/src/routes/characters.svelte
@@ -95,7 +95,7 @@
 </style>
 
 <svelte:head>
-  <title>Characters - Paimon.moe</title>
+  <title>Paimon.moe</title>
 </svelte:head>
 <div class="lg:ml-64 pt-20 lg:pt-8">
   <h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">Characters</h1>
diff --git a/src/template.html b/src/template.html
index 3b663869..d31b1728 100644
--- a/src/template.html
+++ b/src/template.html
@@ -1,40 +1,58 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width,initial-scale=1.0">
-	<meta name="theme-color" content="#333333">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="theme-color" content="#333333" />
+    <meta
+      name="description"
+      content="Your best Genshin Impact companion! Help you plan what to farm with collection of tools
+    like ascension calculator, and database. Also track your progress with todo and wish counter."
+    />
 
-  %sapper.base%
-  
-  <link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@600;700;900&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
-	<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
-  <link rel="icon" type="image/png" href="favicon.png">
-  
-  <style>
-    html {
-      height: 100%;
-      background: #25294A;
-    }
-  </style>
+    <meta property="og:title" content="Paimon.moe" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://paimon.moe" />
+    <meta property="og:image" content="https://paimon.moe/paimon-og.png" />
+    <meta
+      property="og:description "
+      content="Your best Genshin Impact companion! Help you plan what to farm with collection of tools
+    like ascension calculator, and database. Also track your progress with todo and wish counter."
+    />
 
-	<!-- Sapper creates a <script> tag containing `src/client.js`
+    %sapper.base%
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Catamaran:wght@600;700;900&family=Poppins:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+
+    <style>
+      html {
+        height: 100%;
+        background: #25294a;
+      }
+    </style>
+
+    <!-- Sapper creates a <script> tag containing `src/client.js`
 	     and anything else it needs to hydrate the app and
 	     initialise the router -->
-	%sapper.scripts%
+    %sapper.scripts%
 
-	<!-- Sapper generates a <style> tag containing critical CSS
+    <!-- Sapper generates a <style> tag containing critical CSS
 	     for the current page. CSS for the rest of the app is
 	     lazily loaded when it precaches secondary pages -->
-	%sapper.styles%
+    %sapper.styles%
 
-	<!-- This contains the contents of the <svelte:head> component, if
+    <!-- This contains the contents of the <svelte:head> component, if
 	     the current page has one -->
-	%sapper.head%
-</head>
-<body class="font-body h-full bg-background-secondary">
-	<!-- The application will be rendered inside this element,
+    %sapper.head%
+  </head>
+  <body class="font-body h-full bg-background-secondary">
+    <!-- The application will be rendered inside this element,
 	     because `src/client.js` references it -->
-	<div id="sapper" class="flex flex-col h-full">%sapper.html%</div>
-</body>
+    <div id="sapper" class="flex flex-col h-full">%sapper.html%</div>
+  </body>
 </html>
diff --git a/static/paimon-og.png b/static/paimon-og.png
new file mode 100644
index 00000000..5cfcfb1a
Binary files /dev/null and b/static/paimon-og.png differ
