3 files changed, 31 insertions, 0 deletions
diff --git a/src/components/Head.astro b/src/components/Head.astro
index a421915..0026886 100644
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@@ -1,6 +1,7 @@
 ---
 import type { WithContext, Thing } from "schema-dts";
 import JsonLd from "./JsonLd.astro";
+import OpenGraph from "./OpenGraph.astro";
 
 type Props = {
 	readonly description: string;
@@ -13,6 +14,7 @@ const { description, title, schema } = Astro.props;
 ---
 
 <head>
+	<!-- Meta Tags -->
 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
@@ -26,11 +28,13 @@ const { description, title, schema } = Astro.props;
 
 	<title>{title}</title>
 
+	<!-- Icons -->
 	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 	<link rel="icon" type="image/png" href="/favicon.png" />
 	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 	<link rel="manifest" href="/manifest.json" />
 	<meta name="theme-color" content="#ffffff" />
 
+	<OpenGraph title={title} description={description} />
 	<JsonLd schema={schema} />
 </head>
diff --git a/src/components/JsonLd.astro b/src/components/JsonLd.astro
index a589f7b..b58efd7 100644
--- a/src/components/JsonLd.astro
+++ b/src/components/JsonLd.astro
@@ -9,4 +9,5 @@ const { schema } = Astro.props;
 const json = JSON.stringify(schema);
 ---
 
+<!-- JSON-LD -->
 <script is:inline type="application/ld+json" set:html={json} />
diff --git a/src/components/OpenGraph.astro b/src/components/OpenGraph.astro
new file mode 100644
index 0000000..6ca1856
--- /dev/null
+++ b/src/components/OpenGraph.astro
@@ -0,0 +1,26 @@
+---
+import { config } from "../config";
+
+type Props = {
+	readonly description: string;
+	readonly title: string;
+};
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const { description, title } = Astro.props;
+
+const image = new URL(config.posts.defaultImage, Astro.site).toString();
+---
+
+<!-- Open Graph -->
+<meta property="og:type" content="website" />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={image} />
+<meta property="og:url" content={canonicalURL} />
+
+<!-- Twitter Cards -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+<meta name="twitter:image" content={image} />