fix meta tags

packages/frontend/package.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@elysiajs/eden": "^1.1.3",
-    "@fingerprintjs/fingerprintjs": "^4.5.1"
+    "@fingerprintjs/fingerprintjs": "^4.5.1",
+    "svelte-meta-tags": "^4.0.4"
   }
 }

packages/frontend/src/Meta.svelte

@@ -1,23 +1,29 @@
 <script lang="ts">
-  const meta = {
-    title: "✨Tracking Survey✨",
-    description: "A survey about advertisement and tracking",
-    url: "https://tracking-survey.bastipnt.de",
-    image: "https://tracking-survey.bastipnt.de/Tracking_Survey_Screenshot.png",
-  };
+  import { MetaTags } from "svelte-meta-tags";
 </script>
 
-<svelte:head>
-  <title>{meta.title}</title>
-  <meta name="description" content={meta.description} />
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content={meta.url} />
-  <meta property="og:title" content={meta.title} />
-  <meta property="og:description" content={meta.description} />
-  <meta property="og:image" content={meta.image} />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:url" content={meta.url} />
-  <meta name="twitter:title" content={meta.title} />
-  <meta name="twitter:description" content={meta.description} />
-  <meta name="twitter:image" content={meta.image} />
-</svelte:head>
+<MetaTags
+  title="✨Tracking Survey✨"
+  titleTemplate="%s"
+  description="A survey about advertisement and tracking."
+  canonical="https://tracking-survey.bastipnt.de"
+  openGraph={{
+    url: "https://tracking-survey.bastipnt.de",
+    title: "✨Tracking Survey✨",
+    description: "A survey about advertisement and tracking.",
+    images: [
+      {
+        url: "https://tracking-survey.bastipnt.de/Tracking_Survey_Screenshot.png",
+        alt: "Screenshot of tracking survey webpage",
+      },
+    ],
+    siteName: "tracking-survey",
+  }}
+  twitter={{
+    cardType: "summary_large_image",
+    title: "✨Tracking Survey✨",
+    description: "A survey about advertisement and tracking.",
+    image: "https://tracking-survey.bastipnt.de/Tracking_Survey_Screenshot.png",
+    imageAlt: "Screenshot of tracking survey webpage",
+  }}
+/>