feat: add Open Graph and JSON-LD support to Head component

- Introduced OpenGraph component for enhanced social media sharing with Open Graph meta tags.
- Updated Head component to include OpenGraph and JSON-LD for improved SEO and structured data representation.
- Added comments for better clarity on meta tags and JSON-LD integration.

1 files changed, 26 insertions, 0 deletions

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} />