diff --git a/index.html b/index.html
index 6ec76db73fd461e58cf919133604014c7f2554b1..fdd3a53ccf5b3c048e81dc6f0a67f3021ffdc0ee 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,19 @@
     <link rel="icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="A pure front-end avatar generator." />
+
+    <meta property="og:title" content="Vue Color Avatar" />
+    <meta
+      property="og:description"
+      content="A pure front-end avatar generator"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://vue-color-avatar.vercel.app/" />
+    <meta
+      property="og:image"
+      content="https://github.com/Codennnn/vue-color-avatar/blob/main/images/social-preview-1.png"
+    />
+
     <title>Vue Color Avatar</title>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->