Merge pull request #923 from singnet/SEO-metadata

[SPT-433] Added page meta-descriptions and meta-keywords with HRI

public/index.html

@@ -8,6 +8,8 @@
     <link rel="icon-16" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <meta name="keywords" content="SingularityNET, SNET, AI, Marketplace, decentralized AI; pre-trained AI; AI solutions; artificial intelligence; AI development" />
+    <meta name="description" content="Revolutionize your workflows with next-gen AI solutions! Discover & utilize pre-trained models on SingularityNET, the decentralized AI marketplace. Build, share & monetize your AI models with ease. Explore ethical AI development & join the future of AI!">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link
       rel="stylesheet"

src/components/AiMarketplace/index.js

@@ -1,10 +1,10 @@
 import React, { Fragment } from "react";
 import { connect } from "react-redux";
-
 import MainSection from "./MainSection";
 import SeoMetadata from "../common/SeoMetadata";
 import ServiceListingHeader from "./ServiceListingHeader";
 import PromoComponent from "../PromoComponent";
+import { Helmet } from "react-helmet";
 
 const seoData = {
   title: "SingularityNET Beta Dapp",
@@ -18,6 +18,13 @@ const seoData = {
 const AiMarketplace = ({ isLoggedIn }) => {
   return (
     <Fragment>
+      <Helmet>
+        <meta
+          name="description"
+          content="Dive into the AI Marketplace of SingularityNET and discover cutting-edge AI services and solutions."
+        />
+        <meta name="keywords" content="AI Marketplace, AI Services, Discover, Explore, SingularityNET" />
+      </Helmet>
       <ServiceListingHeader />
       <SeoMetadata
         title={seoData.title}

src/components/AiRequestForm/index.js

@@ -5,6 +5,7 @@ import { withStyles } from "@material-ui/styles";
 import Header from "./Header";
 import { useStyles } from "./styles";
 import Routes from "../../utility/constants/Routes";
+import { Helmet } from "react-helmet";
 
 const AiRequestForm = ({ classes }) => {
   const [fixHeader, setfixHeader] = useState(false);
@@ -37,6 +38,12 @@ const AiRequestForm = ({ classes }) => {
 
   return (
     <div className={classes.googleFormMainContainer}>
+      <Helmet>
+        <meta
+          name="description"
+          content="Have an AI project in mind? Submit your request through SingularityNET and collaborate with leading AI experts."
+        />
+      </Helmet>
       <Header data={headerTabs} fixHeader={fixHeader} />
       <div className={classes.aiRequestFormMainContainer}>
         <div className={classes.aiRequestFormWrapper}>

src/components/GetStarted/index.js

@@ -1,9 +1,8 @@
 import React from "react";
 import Grid from "@material-ui/core/Grid";
 import { withStyles } from "@material-ui/styles";
-
 import GetStartedDescription from "./GetStartedDescription";
-
+import { Helmet } from "react-helmet";
 import { GetStartedCategoriesData } from "../../utility/constants/GetStarted";
 import Category from "./Category";
 import { useStyles } from "./styles";
@@ -21,6 +20,13 @@ const seoData = {
 const GetStarted = ({ classes, history }) => {
   return (
     <React.Fragment>
+      <Helmet>
+        <meta
+          name="description"
+          content="Ready to explore AI? Get started with SingularityNET and navigate through our suite of AI services effortlessly."
+        />
+        <meta name="keywords" content="Get Started, AI Services, SingularityNET, Introduction" />
+      </Helmet>
       <SeoMetadata
         title={seoData.title}
         description={seoData.description}

src/components/Login/ForgotPassword/index.js

@@ -3,7 +3,7 @@ import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
 import { withStyles } from "@material-ui/styles";
 import { connect } from "react-redux";
-
+import { Helmet } from "react-helmet";
 import AlertBox from "../../common/AlertBox";
 import StyledButton from "../../common/StyledButton";
 import Routes from "../../../utility/constants/Routes";
@@ -52,6 +52,16 @@ const ForgotPassword = ({
 
   return (
     <Grid container spacing={24} className={classes.forgotPwdMainContainer}>
+      <Helmet>
+        <meta
+          name="description"
+          content="Accessing your AI marketplace account is just a click away. Use our easy password reset option and get back to exploring SingularityNET's services."
+        />
+        <meta
+          name="keywords"
+          content="SingularityNET password reset, forgot password, account recovery, decentralized AI platform, secure access"
+        />
+      </Helmet>
       <Grid item xs={12} sm={12} md={12} lg={12} className={classes.forgotPwdContent}>
         <h2>{passwordChangeTitle}</h2>
         <p>{passwordChangeDescription}</p>

src/components/Login/Signup/index.js

@@ -13,6 +13,7 @@ import { LoaderContent } from "../../../utility/constants/LoaderContent";
 import { alertTypes } from "../../common/AlertBox";
 import { signupFormConstraints, singupOtpContraints } from "./validationConstraints";
 import snetValidator from "../../../utility/snetValidator";
+import { Helmet } from "react-helmet";
 
 class SignUp extends Component {
   state = {
@@ -112,6 +113,16 @@ class SignUp extends Component {
 
     return (
       <div className={classes.signupMainContainer}>
+        <Helmet>
+          <meta
+            name="description"
+            content="Developers & researchers welcome! Join SingularityNET Marketplace to share & utilize ethical AI models. Automate tasks, gain insights, and solve problems with cutting-edge AI."
+          />
+          <meta
+            name="keywords"
+            content="decentralized AI, AI monetization, pre-trained AI models, AI marketplace, signup"
+          />
+        </Helmet>
         <Grid container spacing={24} className={classes.signupMainContent}>
           {toBeConfirmed ? (
             <RenderOTP

src/components/Onboarding/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { withStyles } from "@material-ui/styles";
 import { connect } from "react-redux";
-
+import { Helmet } from "react-helmet";
 import Authentication from "./Authentication";
 import TermsOfUse from "./TermsOfUse";
 import { useStyles } from "./styles";
@@ -70,6 +70,13 @@ class Onboarding extends Component {
 
     return (
       <div className={classes.onboardingContainer}>
+        <Helmet>
+          <meta
+            name="description"
+            content="Begin your journey into the AI Marketplace with SingularityNET. Access a world of AI services and solutions today."
+          />
+          <meta name="keywords" content="AI Marketplace, Onboarding, SingularityNET, AI Services, Get Started" />
+        </Helmet>
         {OnboardingDetails.map((item, index) => (
           <OnboardingContainer
             key={item.title}

src/components/ServiceDetails/index.js

@@ -4,7 +4,6 @@ import { withStyles } from "@material-ui/styles";
 import { connect } from "react-redux";
 import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
 import isEmpty from "lodash/isEmpty";
-
 import TitleCard from "./TitleCard";
 import PricingDetails from "./PricingDetails";
 import StyledTabs from "./StyledTabs";
@@ -24,6 +23,7 @@ import { WebServiceClient as ServiceClient } from "snet-sdk-web";
 import { initSdk } from "../../utility/sdk";
 import { LoaderContent } from "../../utility/constants/LoaderContent";
 import AlertBox, { alertTypes } from "../common/AlertBox";
+import { Helmet } from "react-helmet";
 export const HERO_IMG = "hero_image";
 
 class ServiceDetails extends Component {
@@ -247,6 +247,11 @@ class ServiceDetails extends Component {
     const seoURL = `${process.env.REACT_APP_BASE_URL}/servicedetails/org/${orgId}/service/${serviceId}`;
     return (
       <div>
+        <Helmet>
+          <title>{service.display_name}</title>
+          <meta name="keywords" content={service.display_name} />
+          <meta name="description" content={service.short_description} />
+        </Helmet>
         <SeoMetadata
           title={service.display_name}
           description={service.short_description}

src/components/UserProfile/UserProfileAccount/index.js

@@ -4,7 +4,6 @@ import Grid from "@material-ui/core/Grid";
 import { withStyles } from "@material-ui/styles";
 import map from "lodash/map";
 import find from "lodash/find";
-
 import StyledDropdown from "../../common/StyledDropdown";
 import { useStyles } from "./styles";
 import {
@@ -21,6 +20,7 @@ import ProvidersLinkedCount from "./ProvidersLinkedCount";
 import { startAppLoader, stopAppLoader } from "../../../Redux/actionCreators/LoaderActions";
 import { LoaderContent } from "../../../utility/constants/LoaderContent";
 import { initialWallet } from "../../../Redux/reducers/UserReducer";
+import { Helmet } from "react-helmet";
 
 const UserProfileAccount = ({ classes, startAppLoader, stopAppLoader, wallet, updateWallet, fetchUserWallets }) => {
   const [alert, setAlert] = useState({});
@@ -89,6 +89,13 @@ const UserProfileAccount = ({ classes, startAppLoader, stopAppLoader, wallet, up
   const hasSelectedWallet = wallet.type !== initialWallet.type;
   return (
     <Grid container spacing={24} className={classes.accountMainContainer}>
+      <Helmet>
+        <meta
+          name="description"
+          content="Take control of your AI journey with SingularityNET user account management. Customize, track, and optimize your use of AI services."
+        />
+        <meta name="keywords" content="User Account, AI Services, SingularityNET, Profile Management" />
+      </Helmet>
       <Grid item xs={12} sm={12} md={4} lg={4} className={classes.accountContainer}>
         <h3>Payment / Transfer Method</h3>
         <div className={classes.accountWrapper}>

src/components/UserProfile/UserProfileSettings/index.js

@@ -13,6 +13,7 @@ import { userActions, loaderActions } from "../../../Redux/actionCreators";
 import Routes from "../../../utility/constants/Routes";
 import AlertBox, { alertTypes } from "../../common/AlertBox";
 import ConfirmDelete from "./ConfirmDelete";
+import { Helmet } from "react-helmet";
 
 class UserProfileSettings extends Component {
   state = {
@@ -85,6 +86,13 @@ class UserProfileSettings extends Component {
     const { alertMessage, alertType, emailAlerts, showConfirmDelete, confirmDeleteError } = this.state;
     return (
       <Grid container spacing={24} className={classes.settingMainContainer}>
+        <Helmet>
+          <meta
+            name="description"
+            content="Adjust your SingularityNET settings for an optimized AI service experience. Personalize notifications, privacy, and more."
+          />
+          <meta name="keywords" content="User Settings, AI Customization, SingularityNET, Platform Preferences" />
+        </Helmet>
         <Grid item xs={12} sm={12} md={7} lg={7} className={classes.settingsContainer}>
           <h3>Settings</h3>
           <div className={classes.settingsContent}>

src/components/UserProfile/UserProfileTransactionHistory/index.js

@@ -9,6 +9,7 @@ import { connect } from "react-redux";
 import { userActions } from "../../../Redux/actionCreators";
 import Payments from "./Payments";
 import { useStyles } from "./styles";
+import { Helmet } from "react-helmet";
 
 class UserProfileTransactionHistory extends Component {
   state = { activeTab: 0 };
@@ -34,6 +35,13 @@ class UserProfileTransactionHistory extends Component {
 
     return (
       <Grid container spacing={24} className={classes.transactionHistoryMainContainer}>
+        <Helmet>
+          <meta
+            name="description"
+            content="View and manage your SingularityNET transactions to monitor AI service usage and spending efficiently."
+          />
+          <meta name="keywords" content="Transactions, AI Services, SingularityNET, Usage Tracking" />
+        </Helmet>
         <Grid item xs={12} sm={12} md={12} lg={12} className={classes.transactionHistoryContainer}>
           <h3>Transactions History</h3>
           <div className={classes.transactionHistoryContent}>