fix: add meta tags

dlcastillop · Mar 18, 2023 · 2ba1c80 · 2ba1c80
1 parent a75ca46
commit 2ba1c80
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -3,7 +3,42 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+
+    <!-- Primary Meta Tags -->
+    <meta name="title" content="" />
+    <meta
+      name="description"
+      content="Organize all your payment methods with PayLink."
+    />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="" />
+    <meta property="og:title" content="" />
+    <meta
+      property="og:description"
+      content="Organize all your payment methods with PayLink."
+    />
+    <meta
+      property="og:image"
+      content="./images/opengraph/paylink-opengraph.png"
+    />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="" />
+    <meta property="twitter:title" content="" />
+    <meta
+      property="twitter:description"
+      content="Organize all your payment methods with PayLink."
+    />
+    <meta
+      property="twitter:image"
+      content="./images/opengraph/paylink-opengraph.png"
+    />
+
+    <title></title>
+
     <link
       rel="icon"
       type="image/svg+xml"

diff --git a/src/App.jsx b/src/App.jsx
@@ -7,6 +7,28 @@ import Config from "./paylink.config.json";
 
 const App = () => {
   const [qrData, setQrData] = useState({ img: "", label: "", value: "" });
+  const title = "PayLink | Pay or donate to " + Config.properties.name;
+
+  // Set title tag
+  document.title = title;
+
+  // Set meta tag (title)
+  let meta = document.querySelectorAll("meta")[2];
+  meta.setAttribute("content", title);
+
+  // Set meta tag (og:url and title)
+  meta = document.querySelectorAll("meta")[5];
+  meta.setAttribute("og:url", window.location);
+
+  meta = document.querySelectorAll("meta")[6];
+  meta.setAttribute("og:title", title);
+
+  // Set meta tag (twitter:url and twitter:title)
+  meta = document.querySelectorAll("meta")[10];
+  meta.setAttribute("twitter:url", window.location);
+
+  meta = document.querySelectorAll("meta")[11];
+  meta.setAttribute("twitter:title", title);
 
   return (
     <div className="max-w-xl mx-auto items-center justify-center">