diff --git a/docs/index.html b/docs/index.html
index 6d129c346c..6f3f0f27b1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -15,6 +15,14 @@
       name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
     />
+    <meta property="og:title" content="Mermaid" />
+    <meta property="og:url" content="https://mermaid-js.github.io/mermaid/" />
+    <meta property="og:image" content="https://mermaid-js.github.io/mermaid/img/header.png" />
+    <meta
+      property="og:description"
+      content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
+    />
+    <meta property="og:type" content="website" />
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
     <link
diff --git a/packages/mermaid/src/docs/index.html b/packages/mermaid/src/docs/index.html
index 8c13f6f6b0..5022e6dc9a 100644
--- a/packages/mermaid/src/docs/index.html
+++ b/packages/mermaid/src/docs/index.html
@@ -15,6 +15,14 @@
       name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
     />
+    <meta property="og:title" content="Mermaid" />
+    <meta property="og:url" content="https://mermaid-js.github.io/mermaid/" />
+    <meta property="og:image" content="https://mermaid-js.github.io/mermaid/img/header.png" />
+    <meta
+      property="og:description"
+      content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
+    />
+    <meta property="og:type" content="website" />
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
     <link