meta: add SEO info (#14)

aashutoshrathi · web-flow · commit ff5b0e11efdc · 2021-05-22T14:36:34.000+05:30
* 💄 meta: add SEO info

* 🐛 fix: remove /n from content

* 🚀 feat: add helmet and use different head for Download Page
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "node-sass": "^4.13.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-helmet": "^6.1.0",
     "react-markdown": "^5.0.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
diff --git a/public/index.html b/public/index.html
@@ -9,10 +9,29 @@
     <link crossorigin="anonymous"
       href="https://fonts.googleapis.com/css?family=Quicksand&display=swap"
       rel="stylesheet">
-    <meta
-      name="description"
-      content="Invoicify"
-      />
+
+    <!-- Primary Meta Tags -->
+    <title>Invoicify by 2AM Devs</title>
+    <meta name="title" content="Invoicify by 2AM Devs">
+    <meta name="description" content="Desktop app to simplify & digitalize
+      billing process.">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://invoicify.netlify.app/">
+    <meta property="og:title" content="Invoicify by 2AM Devs">
+    <meta property="og:description"
+      content="Desktop app to simplify & digitalize billing process.">
+    <meta property="og:image"
+      content="https://raw.githubusercontent.com/2AMDevs/cdn/main/meta.png">
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://invoicify.netlify.app/">
+    <meta property="twitter:title" content="Invoicify by 2AM Devs">
+    <meta property="twitter:description"
+      content="Desktop app to simplify & digitalize billing process.">
+    <meta property="twitter:image"
+      content="https://raw.githubusercontent.com/2AMDevs/cdn/main/meta.png">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -27,7 +46,6 @@
       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>Invoicify</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/components/Download/index.js b/src/components/Download/index.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { Helmet } from 'react-helmet'
 
 import { Button, Loader } from '../Elements'
 
@@ -25,6 +26,13 @@ const Download = () => {
 
   return (
     <div className="download-container">
+      <Helmet>
+        <title>Download Invoicify</title>
+        <meta
+          name="description"
+          content="Download and Try Invoicify for free"
+        />
+      </Helmet>
       <img
         className="download-container__bg-img"
         src="img/download/background.png"
@@ -39,7 +47,10 @@ const Download = () => {
               Get Invoicify for your PC
             </span>
             <div className="download-box__content__input-section">
-              <a href={latestAsset.browser_download_url} download>
+              <a
+                href={latestAsset.browser_download_url}
+                download
+              >
                 <Button
                   type="submit"
                   primary
