diff --git a/docs/index.html b/docs/index.html
index 89969ac..008ed6e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <title>Water.css</title>
+  <head prefix="og: http://ogp.me/ns#">
+    <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Water.css</title>
+    <link rel="canonical" href="https://watercss.netlify.com/" />
+    <meta
+      name="description"
+      content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
+    />
 
     <!-- Icons generated with https://realfavicongenerator.net -->
     <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png" />
@@ -41,6 +47,30 @@
     <!-- Custom styles for the documentation / version picker -->
     <link rel="stylesheet" href="style.css" />
 
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://watercss.netlify.com/" />
+    <meta property="og:title" content="Water.css" />
+    <meta
+      property="og:description"
+      content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
+    />
+    <meta
+      property="og:image"
+      content="https://raw.githubusercontent.com/kognise/water.css/29afc6c80a1a38123e47c8a50779faae97cc2a8b/assets/logo.png"
+    />
+    <meta property="og:image:width" content="1154" />
+    <meta property="og:image:height" content="444" />
+    <script type="application/ld+json">
+      {
+        "@context": "http://www.schema.org",
+        "@type": "WebSite",
+        "name": "Water.css",
+        "alternateName": "Water.css",
+        "url": "https://watercss.netlify.com/"
+      }
+    </script>
+
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-116663597-6"></script>
     <script>
       window.dataLayer = window.dataLayer || []
