Added SEO Related settings

Author: prabinkarki643

package-lock.json

@@ -28,6 +28,7 @@
     "react-bootstrap": "^1.0.0-beta.16",
     "react-chartjs-2": "^2.9.0",
     "react-dom": "^16.10.2",
+    "react-helmet": "^6.1.0",
     "react-reveal": "^1.2.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",

package.json

@@ -5,8 +5,8 @@
     <!-- <link rel="icon" href="%PUBLIC_URL%/favicon1.ico" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
-      name="Ashutosh's Portfolio"
-      content="Web site created using create-react-app"
+      name="Portfolio"
+      content="Portfolio content"
     />
     <meta property="og:title" content="Ashutosh Hathidara Portfolio" />
     <meta property="og:type" content="website" />

public/index.html

@@ -3,6 +3,7 @@ import "./Header.css";
 import { Fade } from "react-reveal";
 import { NavLink, Link } from "react-router-dom";
 import { greeting, settings } from "../../portfolio.js";
+import SeoHeader from "../seoHeader/SeoHeader";
 
 const onMouseEnter = (event, color) => {
   const el = event.target;
@@ -21,6 +22,7 @@ class Header extends Component {
     const link = settings.isSplash ? "/splash" : "home";
     return (
       <Fade top duration={1000} distance="20px">
+        <SeoHeader />
         <div>
           <header className="header">
             <NavLink to={link} tag={Link} className="logo">

src/components/header/Header.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Helmet } from "react-helmet";
+import { seo } from "../../portfolio.js";
+
+function SeoHeader() {
+  return (
+    <Helmet>
+      <title>{seo.title}</title>
+      <meta name="description" content={seo.description} />
+      <meta property="og:title" content={seo?.og?.title} />
+      <meta property="og:type" content={seo?.og?.type} />
+      <meta property="og:url" content={seo?.og?.url} />
+    </Helmet>
+  );
+}
+
+export default SeoHeader;

src/components/seoHeader/SeoHeader.js

@@ -5,6 +5,18 @@ const settings = {
   isSplash: true, // Change this to false if you don't want Splash screen.
 };
 
+//SEO Related settings
+const seo = {
+  title: "Ashutosh's Portfolio",
+  description:
+    "A passionate individual who always thrive to work on end to end products which develop sustainable and scalable social and technical systems to create impact.",
+  og: {
+    title: "Ashutosh Hathidara Portfolio",
+    type: "website",
+    url: "https://ashutosh1919.github.io/",
+  },
+};
+
 //Home Page
 const greeting = {
   title: "Ashutosh Hathidara",
@@ -659,6 +671,7 @@ const contactPageData = {
 
 export {
   settings,
+  seo,
   greeting,
   socialMediaLinks,
   skills,