diff --git a/public/index.html b/public/index.html
index d3d7ee3..84d2e74 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,28 +4,27 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tag above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Color Schemer | Built with 💅 styled-components and ✨ polished</title>
+    <meta name="description" content="Because one can never have enough color." />
+
+    <!-- Twitter Card data -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@mxstbr">
+    <meta name="twitter:title" content="Color Schemer | Built with 💅 styled-components and ✨ polished">
+    <meta name="twitter:description" content="Because one can never have enough color.">
+    <meta name="twitter:creator" content="@mxstbr">
+    <meta name="twitter:image" content="%PUBLIC_URL%/meta.png">
+
+    <!-- Open Graph data -->
+    <meta property="og:title" content="Color Schemer | Built with 💅 styled-components and ✨ polished" />
+    <meta property="og:type" content="article" />
+    <meta property="og:url" content="https://styled-components.com/color-schemer/" />
+    <meta property="og:image" content="%PUBLIC_URL%/meta.png" />
+    <meta property="og:description" content="Because one can never have enough color." />
+    <meta property="og:site_name" content="Color Schemer" />
   </head>
   <body>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start`.
-      To create a production bundle, use `npm run build`.
-    -->
   </body>
 </html>
diff --git a/public/meta.png b/public/meta.png
new file mode 100644
index 0000000..2abe1d1
Binary files /dev/null and b/public/meta.png differ
