diff --git a/website/Makefile b/website/Makefile
index c949a8eec..63f952c1b 100644
--- a/website/Makefile
+++ b/website/Makefile
@@ -9,7 +9,7 @@ HTMLS := $(MDS:.md=.html)
 # Generates the website into $(DST_DIR).
 gen: tools/gensite.bin $(HTMLS)
 	tools/gensite.bin . $(DST_DIR)
-	ln -sf `pwd`/fonts `pwd`/favicons/* $(DST_DIR)/
+	ln -sf `pwd`/fonts `pwd`/favicons/* `pwd`/images $(DST_DIR)/
 
 # Generates docset into $(DOCSET_DST_DIR).
 docset: tools/gensite.bin $(HTMLS)
diff --git a/website/images/preview.png b/website/images/preview.png
new file mode 100644
index 000000000..44358eb19
Binary files /dev/null and b/website/images/preview.png differ
diff --git a/website/template.html b/website/template.html
index 9cc80f076..d78dbf443 100644
--- a/website/template.html
+++ b/website/template.html
@@ -24,6 +24,14 @@
     {{- end }}
   </title>
 
+  {{ if is "homepage" -}}
+    <meta property="og:title" content="{{ .SiteTitle }}" />
+  {{- else if is "category" -}}
+    <meta property="og:title" content="{{ index .CategoryMap .Category }}" />
+  {{- else -}}
+    <meta property="og:title" content="{{ .Title }} - {{ .SiteTitle }}" />
+  {{- end }}
+
   <!-- Generated by realfavicongenerator.net -->
   <link rel="apple-touch-icon" sizes="180x180" href="{{ rootURL }}/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="{{ rootURL }}/favicon-32x32.png">
@@ -32,6 +40,16 @@
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#ffffff">
 
+  <meta property="og:type" content="website" />
+
+  <meta property="og:site_name" content="{{ .SiteTitle }}" />
+
+  <meta property="og:url" content="https://elv.sh/" />
+
+  <meta property="og:description" content="Powerful modern shell scripting" />
+
+  <meta property="og:image" content="https://elv.sh/images/preview.png" />
+
   {{ $docsetMode := eq (getEnv "ELVISH_DOCSET_MODE") "1" -}}
   <style>
     {{ fontFace "Source Serif" 400 "normal" "SourceSerif4-Regular" }}