Merge pull request #25 from Yiyis/refresh

adding og meta
Yiyis · Oct 26, 2024 · 3b8cbb6 · 3b8cbb6
2 parents b707eb5 + 7afb3eb
commit 3b8cbb6
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/public/index.html b/public/index.html
@@ -7,12 +7,34 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Yiyi Shao, Maker | Developer | Designer"
+      content="Yiyi Shao, Developer | Designer | Maker"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo/logo_icon.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Yiyi Shao</title>
     <link rel="icon" href="%PUBLIC_URL%/logo/logo_icon.png" />
+    <!-- Open Graph Meta Tags -->
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:title"
+      content="Yiyi Shao, Developer | Designer | Maker"
+    />
+    <meta property="og:description" content="A personal website of Yiyi Shao" />
+    <meta
+      property="og:image"
+      content="%PUBLIC_URL%/pics/captures/thumbnail.png"
+    />
+    <meta property="og:url" content="%PUBLIC_URL%" />
+    <meta property="og:site_name" content="Yiyi Shao" />
+
+    <!-- Optional Twitter Card Tags (for better cross-platform sharing) -->
+    <meta name="twitter:card" content="%PUBLIC_URL%/pics/captures/card.png" />
+    <meta name="twitter:title" content="Yiyi Shao" />
+    <meta
+      name="twitter:description"
+      content="A personal website of Yiyi Shao."
+    />
+    <meta name="twitter:image" content="%PUBLIC_URL%/pics/captures/card.png" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/pics/captures/card.png b/public/pics/captures/card.png
diff --git a/public/pics/captures/thumbnail.png b/public/pics/captures/thumbnail.png
diff --git a/src/components/landing.js b/src/components/landing.js
@@ -43,7 +43,7 @@ class Landing extends React.Component {
               variants={text}
               className="block"
             >
-              Maker | Developer | Designer
+              Developer | Designer | Maker
             </motion.p>
           </div>
           <div className="container">