diff --git a/web/src/components/SocialShareMeta.svelte b/web/src/components/SocialShareMeta.svelte
new file mode 100644
index 0000000..6c88831
--- /dev/null
+++ b/web/src/components/SocialShareMeta.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let title = "";
+</script>
+
+<svelte:head>
+	<meta property="og:title" content={title}>
+	<meta property="og:type" content="website" />
+	<meta property="og:image" content="https://shokku.dev/share-card.png">
+	<meta name="twitter:card" content="https://shokku.dev/share-card.png">
+
+	<meta property="og:description" content="Free and open source interface for the Dokku PaaS">
+	<meta name="twitter:image:alt" content="Shokku Logo">
+</svelte:head>
\ No newline at end of file
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index bfae2c6..dd96b7b 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,13 +1,15 @@
 <script>
+	import SocialShareMeta from "$components/SocialShareMeta.svelte";
 	import Navbar from "$components/Navbar.svelte";
-  import Hero from "./Hero.svelte";
-  import Features from "./Features.svelte";
-  import Screenshots from "./Screenshots.svelte";
-  import Footer from "./Footer.svelte";
+	import Hero from "./Hero.svelte";
+	import Features from "./Features.svelte";
+	import Screenshots from "./Screenshots.svelte";
+	import Footer from "./Footer.svelte";
 </script>
 
 <svelte:head>
 	<title>Shokku</title>
+	<SocialShareMeta title="Shokku" />
 </svelte:head>
 
 <div class="flex flex-col bg-base-300">
diff --git a/web/src/routes/docs/+layout.svelte b/web/src/routes/docs/+layout.svelte
index 10017a6..4931f76 100644
--- a/web/src/routes/docs/+layout.svelte
+++ b/web/src/routes/docs/+layout.svelte
@@ -3,6 +3,7 @@
 	import {page} from "$app/stores";
 	import Navbar from "$components/Navbar.svelte";
 	import ProgressButtons from "./ProgressButtons.svelte";
+  import SocialShareMeta from "$components/SocialShareMeta.svelte";
 
 	const sidebarPages = [
 		{section: "Getting Started", ref: "/docs/intro", label: "Introduction"},
@@ -22,10 +23,13 @@
 		prevPage = (currentPage > 0) ? sidebarPages[currentPage - 1] : null;
 		nextPage = (currentPage < sidebarPages.length - 1) ? sidebarPages[currentPage + 1] : null;
 	}
+
+	$: pageTitle = `Shokku Docs - ${sidebarPages[currentPage].label}`;
 </script>
 
 <svelte:head>
-	<title>Shokku Docs - {sidebarPages[currentPage].label}</title>
+	<title>{pageTitle}</title>
+	<SocialShareMeta title={pageTitle} />
 </svelte:head>
 
 <div class="flex flex-col h-screen">
diff --git a/web/static/images/share-card.png b/web/static/images/share-card.png
new file mode 100644
index 0000000..a43932f
Binary files /dev/null and b/web/static/images/share-card.png differ