⚡ add ogp setting

iChemy · Dec 17, 2024 · ea6509f · ea6509f
1 parent 50f6f60
commit ea6509f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/src/assets/ogp.svg b/src/assets/ogp.svg
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,12 +1,16 @@
 ---
 import Navigation from "../components/Navigation.astro";
+import ogp from "../assets/ogp.svg";
 
 interface Props {
   lang?: string;
   title?: string;
+  description?: string;
 }
 
-const { lang = "en", title } = Astro.props;
+const { lang = "en", title, description } = Astro.props;
+
+const pageTitle = title ? `iChemy | ${title}` : "iChemy";
 ---
 
 <!doctype html>
@@ -16,7 +20,27 @@ const { lang = "en", title } = Astro.props;
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/mySite/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
-    <title>{title ? `iChemy | ${title}` : "iChemy"}</title>
+    <title>{pageTitle}</title>
+
+    {description && <meta name="description" content={description} />}
+
+    <meta
+      name="keywords"
+      content="iChemy, Blog, Scientific Technology, Research"
+    />
+
+    <meta property="og:title" content={pageTitle} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={Astro.url.toString()} />
+    <meta property="og:image" content={ogp.src} />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={pageTitle} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={ogp.src} />
+
+    <link rel="canonical" href={Astro.url.toString()} />
   </head>
   <body>
     <Navigation />