diff --git a/site/src/routes/blog/[slug].svelte b/site/src/routes/blog/[slug].svelte
index e0eb259ff9..34fa3dd56d 100644
--- a/site/src/routes/blog/[slug].svelte
+++ b/site/src/routes/blog/[slug].svelte
@@ -11,6 +11,9 @@
 
 <svelte:head>
 	<title>{post.metadata.title}</title>
+
+	<meta name="twitter:title" content={post.metadata.title}>
+	<meta name="twitter:description" content={post.metadata.description}>
 </svelte:head>
 
 <article class='post linkify listify'>
diff --git a/site/src/routes/blog/index.svelte b/site/src/routes/blog/index.svelte
index cceae6ef25..88f48b233b 100644
--- a/site/src/routes/blog/index.svelte
+++ b/site/src/routes/blog/index.svelte
@@ -10,8 +10,10 @@
 </script>
 
 <svelte:head>
-	<title>Svelte • The magical disappearing UI framework</title>
+	<title>Blog • Svelte</title>
 	<link rel="alternate" type="application/rss+xml" title="Svelte blog" href="blog/rss.xml">
+
+	<meta name='twitter:title' content='Svelte blog'>
 </svelte:head>
 
 <div class='posts stretch'>
diff --git a/site/src/routes/docs/index.svelte b/site/src/routes/docs/index.svelte
index 5a67f9d488..bf228ed12d 100644
--- a/site/src/routes/docs/index.svelte
+++ b/site/src/routes/docs/index.svelte
@@ -360,6 +360,9 @@
 
 <svelte:head>
 	<title>API Docs • Svelte</title>
+
+	<meta name='twitter:title' content='Svelte API docs'>
+	<meta name='twitter:description' content='Cybernetically enhanced web apps'>
 </svelte:head>
 
 <div bind:this={container} class='content linkify listify'>
diff --git a/site/src/routes/examples/index.svelte b/site/src/routes/examples/index.svelte
index d1383ea952..906d3a2300 100644
--- a/site/src/routes/examples/index.svelte
+++ b/site/src/routes/examples/index.svelte
@@ -73,6 +73,13 @@
 	}
 </style>
 
+<svelte:head>
+	<title>Examples • Svelte</title>
+
+	<meta name='twitter:title' content='Svelte examples'>
+	<meta name='twitter:description' content='Cybernetically enhanced web apps'>
+</svelte:head>
+
 <div class="content">
 	<h1>Examples</h1>
 
diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte
index dd5dcd3831..9fb32d27ad 100644
--- a/site/src/routes/index.svelte
+++ b/site/src/routes/index.svelte
@@ -137,6 +137,9 @@
 
 <svelte:head>
 	<title>Svelte • Cybernetically enhanced web apps</title>
+
+	<meta name='twitter:title' content='Svelte'>
+	<meta name='twitter:description' content='Cybernetically enhanced web apps'>
 </svelte:head>
 
 <svelte:window bind:scrollY={sy}/>
diff --git a/site/src/routes/repl/embed.svelte b/site/src/routes/repl/embed.svelte
index d399d2c5ba..479ea493c7 100644
--- a/site/src/routes/repl/embed.svelte
+++ b/site/src/routes/repl/embed.svelte
@@ -30,6 +30,13 @@
 	}
 </style>
 
+<svelte:head>
+	<title>REPL • Svelte</title>
+
+	<meta name='twitter:title' content='Svelte REPL'>
+	<meta name='twitter:description' content='Cybernetically enhanced web apps'>
+</svelte:head>
+
 <div class="repl-outer">
 	{#if process.browser}
 		<ReplWidget {version} {gist} {example} embedded={true}/>
diff --git a/site/src/routes/repl/index.svelte b/site/src/routes/repl/index.svelte
index 15e3f355d2..8da65ae7ce 100644
--- a/site/src/routes/repl/index.svelte
+++ b/site/src/routes/repl/index.svelte
@@ -181,7 +181,10 @@
 </style>
 
 <svelte:head>
-	<title>Svelte REPL</title>
+	<title>REPL • Svelte</title>
+
+	<meta name='twitter:title' content='Svelte REPL'>
+	<meta name='twitter:description' content='Cybernetically enhanced web apps'>
 </svelte:head>
 
 <svelte:window bind:innerWidth={width}/>
diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
index 30595e4287..814ad0e83b 100644
--- a/site/src/routes/tutorial/[slug]/index.svelte
+++ b/site/src/routes/tutorial/[slug]/index.svelte
@@ -252,6 +252,9 @@
 
 <svelte:head>
 	<title>{selected.section.title} / {selected.chapter.title} • Svelte Tutorial</title>
+
+	<meta name='twitter:title' content='Svelte tutorial'>
+	<meta name='twitter:description' content="{selected.section.title} / {selected.chapter.title}">
 </svelte:head>
 
 <svelte:window bind:innerWidth={width}/>
diff --git a/site/src/template.html b/site/src/template.html
index 1e63a0a502..39016c4c06 100644
--- a/site/src/template.html
+++ b/site/src/template.html
@@ -12,6 +12,11 @@
 	<link rel='manifest' href='manifest.json'>
 	<link rel='icon' type='image/png' href='favicon.png'>
 
+	<meta name='twitter:card' content='summary_large_image'>
+	<meta name='twitter:site' content='@sveltejs'>
+	<meta name='twitter:creator' content='@sveltejs'>
+	<meta name='twitter:image' content='https://v2.svelte.dev/images/twitter-card.png'>
+
 	<!-- Sapper generates a <style> tag containing critical CSS
 	     for the current page. CSS for the rest of the app is
 	     lazily loaded when it precaches secondary pages -->
diff --git a/site/static/images/twitter-card.png b/site/static/images/twitter-card.png
index 64116811be..5e0a55e570 100644
Binary files a/site/static/images/twitter-card.png and b/site/static/images/twitter-card.png differ