diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index d02f728..439fbde 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,8 +1,5 @@
 ---
 import "@srx/styles/base.css";
-import "@fontsource-variable/literata";
-import "@fontsource-variable/manrope";
-import "@fontsource-variable/martian-mono";
 import Navbar from "@srx/components/Navbar.astro";
 import Footer from "@srx/components/Footer.astro";
 
@@ -11,21 +8,28 @@ interface Props {
     metaSubtitle?: string;
     metaDescription?: string;
     metaImage?: string;
+    metaImageWidth?: string;
+    metaImageHeight?: string;
+    metaImageType?: string;
     metaAuthors?: string[];
     metaType?: string;
     metaDate?: string;
     metaSchema?: string;
+    analyticsUrl?: string;
+    analyticsId?: string;
 }
 
 const {
     metaTitle = "srx digital",
     metaSubtitle = "Development & Operations",
-    metaDescription = "",
-    metaImage = "https://srx.digital/srx_digital_opengraph.jpg",
+    metaDescription = "Hallo! Ich bin Sebastian aus Hamburg, spezialisiert auf Softwareentwicklung und Plattformengineering. Meine Welt sind Linux, Container, Cloud und Hardware, besonders wenn's um Open-Source geht. Ich helfe Firmen, ihre Digitalstrategien erfolgreich zu realisieren.",
+    metaImage = `${Astro.url}srx_digital_opengraph.jpg`,
     metaAuthors = ["Sebastian Wendel"],
     metaType = "website",
     metaDate,
     metaSchema,
+    analyticsUrl = "https://track.srx.dev/js/script.js",
+    analyticsId = "srx.digital",
 } = Astro.props;
 
 const isProduction = import.meta.env.MODE === "production";
@@ -33,32 +37,23 @@ const isProduction = import.meta.env.MODE === "production";
 
 <html lang="de" class="overflow-x-hidden scroll-smooth">
     <head>
-        <meta charset="utf-8" />
         <title>{`${metaTitle} - ${metaSubtitle}`}</title>
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <meta charset="utf-8" />
+        <meta name="description" content={metaDescription} />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <meta name="generator" content={Astro.generator} />
-        <meta name="description" content={metaDescription} />
-        <meta property="og:type" content={metaType} />
-        <meta
-            name="title"
-            property="og:title"
-            content={`${metaTitle} - ${metaSubtitle}`}
-        />
-        <meta
-            name="description"
-            property="og:description"
-            content={metaDescription}
-        />
+
+        <!-- Facebook Meta Tags -->
         <meta property="og:url" content={Astro.url} />
-        <meta name="image" property="og:image" content={metaImage} />
+        <meta property="og:type" content={metaType} />
+        <meta property="og:title" content={`${metaTitle} - ${metaSubtitle}`} />
+        <meta property="og:description" content={metaDescription} />
+        <meta property="og:image" content={metaImage} />
+        <meta property="og:image:alt" content={metaDescription} />
         {
             metaDate && (
-                <meta
-                    name="date"
-                    property="og:article:published_time"
-                    content={metaDate}
-                />
+                <meta property="og:article:published_time" content={metaDate} />
             )
         }
         {
@@ -70,6 +65,21 @@ const isProduction = import.meta.env.MODE === "production";
                 />
             ))
         }
+
+        <!-- Twitter Meta Tags -->
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={`${metaTitle} - ${metaSubtitle}`} />
+        <meta name="twitter:description" content={metaDescription} />
+        {
+            metaAuthors?.map((author) => (
+                <meta name="twitter:creator" content={author} />
+            ))
+        }
+        <meta property="twitter:url" content={Astro.url} />
+        <meta property="twitter:domain" content={Astro.url.host} />
+        <meta property="twitter:image" content={metaImage} />
+
+        <!-- Linking Data -->
         {
             metaSchema && (
                 <script
@@ -79,11 +89,13 @@ const isProduction = import.meta.env.MODE === "production";
                 />
             )
         }
+
+        <!-- Environment dependent Includes -->
         {
             isProduction && (
                 <script
-                    src="https://track.srx.dev/js/script.js"
-                    data-domain="srx.digital"
+                    src={analyticsUrl}
+                    data-domain={analyticsId}
                     is:inline
                     defer
                 />
diff --git a/src/styles/base.css b/src/styles/base.css
index 44049cf..038c324 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -2,6 +2,11 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@import "@fontsource-variable/literata";
+@import "@fontsource-variable/manrope";
+@import "@fontsource-variable/martian-mono";
+
+
 :root {
 	--font-sans: "Manrope";
 	--font-serif: "Literata";
