Merge pull request #744 from OpenZeppelin/SEO-upgrades

✨ Seo upgrades
OpenZeppelin · Aug 1, 2024 · 39a1009 · 39a1009
2 parents 3e78226 + 617aeda
commit 39a1009
Show file tree

Hide file tree

Showing 25 changed files with 322 additions and 79 deletions.
diff --git a/client/package.json b/client/package.json
@@ -25,6 +25,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-ga": "^3.3.0",
+    "react-helmet": "^6.1.0",
     "react-markdown": "^8.0.0",
     "react-onclickoutside": "^6.12.2",
     "react-paginate": "^8.1.4",

diff --git a/client/public/index.html b/client/public/index.html
@@ -1,43 +1,35 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/imgs/favicon.ico?v=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
-    <script src="https://kit.fontawesome.com/a2b1bf956c.js" crossorigin="anonymous"></script>
-    <script id="hubspot-script" src="https://js.hsforms.net/forms/v2.js"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" crossorigin="anonymous">
-    <title>Ethernaut</title>
-
-  <!-- Primary Meta Tags -->
-  <title>The Ethernaut</title>
-  <meta name="title" content="The Ethernaut">
-  <meta name="description" content="The Ethernaut is a Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'. The game is 100% open source and all levels are contributions made by other players.">
-
-  <!-- Open Graph / Facebook -->
-  <meta property="og:type" content="website">
-  <meta property="og:url" content="https://ethernaut.openzeppelin.com/">
-  <meta property="og:title" content="The Ethernaut">
-  <meta property="og:description" content="The Ethernaut is a Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'. The game is 100% open source and all levels are contributions made by other players.">
-  <meta property="og:image" content="https://ethernaut.openzeppelin.com/imgs/metatag.png">
-
-  <!-- Twitter -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:site" content="@OpenZeppelin" />
-  <meta name="twitter:title" content="The Ethernaut" />
-  <meta name="twitter:description" content="The Ethernaut is a Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'. The game is 100% open source and all levels are contributions made by other players." />
-  <meta name="twitter:image" content="https://ethernaut.openzeppelin.com/imgs/metatag.png" />
-
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/imgs/favicon.ico?v=1" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <script
+      src="https://kit.fontawesome.com/a2b1bf956c.js"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      id="hubspot-script"
+      src="https://js.hsforms.net/forms/v2.js"
+    ></script>
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      rel="stylesheet"
+      crossorigin="anonymous"
+    />
   </head>
   <body>
     <div id="root"></div>
-	<!-- This site is converting visitors into subscribers and customers with OptinMonster - https://optinmonster.com -->
-	<!-- <script type="text/javascript" src="https://c2f8b8.openzeppelin.com/app/js/api.min.js" data-account="144063" data-user="131584" data-api="campaigns" async></script> -->
-	<!-- / OptinMonster -->
-  <!-- Start of HubSpot Embed Code -->
-  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/7795250.js"></script> -->
-  <!-- End of HubSpot Embed Code -->  
+    <!-- This site is converting visitors into subscribers and customers with OptinMonster - https://optinmonster.com -->
+    <!-- <script type="text/javascript" src="https://c2f8b8.openzeppelin.com/app/js/api.min.js" data-account="144063" data-user="131584" data-api="campaigns" async></script> -->
+    <!-- / OptinMonster -->
+    <!-- Start of HubSpot Embed Code -->
+    <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/7795250.js"></script> -->
+    <!-- End of HubSpot Embed Code -->
   </body>
 </html>
diff --git a/client/src/components/not-found/NotFound404.js b/client/src/components/not-found/NotFound404.js
@@ -3,8 +3,9 @@ import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import { loadTranslations } from "../../utils/translations";
 import { randBadIcon } from "../../utils/^^";
-import "../../styles/app.css"
+import "../../styles/app.css";
 import Footer from "../common/Footer";
+import { Helmet } from "react-helmet";
 
 class NotFound404 extends React.Component {
   render() {
@@ -13,6 +14,42 @@ class NotFound404 extends React.Component {
 
     return (
       <div className="helpcontainer">
+        <Helmet>
+          <title>The Ethernaut - Not Found 404</title>
+          {/* <!-- Primary Meta Tags --> */}
+          <meta name="title" content="The Ethernaut - Not Found 404" />
+          <meta
+            name="description"
+            content="Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'. - Not Found 404"
+          />
+          {/* <!-- Open Graph / Facebook --> */}
+          <meta property="og:type" content="website" />
+          <meta
+            property="og:url"
+            content="https://ethernaut.openzeppelin.com/404"
+          />
+          <meta property="og:title" content="The Ethernaut - Not Found 404" />
+          <meta
+            property="og:description"
+            content="Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'. - Not Found 404"
+          />
+          <meta
+            property="og:image"
+            content="https://ethernaut.openzeppelin.com/imgs/metatag.png"
+          />
+          {/* <!-- Twitter --> */}
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:site" content="@OpenZeppelin" />
+          <meta name="twitter:title" content="The Ethernaut - Not Found 404" />
+          <meta
+            name="twitter:description"
+            content="Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'. - Not Found 404"
+          />
+          <meta
+            name="twitter:image"
+            content="https://ethernaut.openzeppelin.com/imgs/metatag.png"
+          />
+        </Helmet>
         <div className="lines"></div>
         <main className="page-not-found-container">
           <h1>{randBadIcon()}</h1>

diff --git a/client/src/containers/App.js b/client/src/containers/App.js
@@ -14,8 +14,10 @@ import {
   networkOnDeprecationOrDeprecated,
   isDeprecatedNetwork,
   deprecationStatus,
-  deprecationDate
+  deprecationDate,
 } from "../utils/networkDeprecation";
+import { Helmet } from "react-helmet";
+
 
 class App extends React.Component {
   constructor() {
@@ -122,6 +124,42 @@ class App extends React.Component {
 
     return (
       <div className="appcontainer">
+        <Helmet>
+          <title>The Ethernaut</title>
+          {/* <!-- Primary Meta Tags --> */}
+          <meta name="title" content="The Ethernaut" />
+          <meta
+            name="description"
+            content="Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'."
+          />
+          {/* <!-- Open Graph / Facebook --> */}
+          <meta property="og:type" content="website" />
+          <meta
+            property="og:url"
+            content="https://ethernaut.openzeppelin.com/"
+          />
+          <meta property="og:title" content="The Ethernaut" />
+          <meta
+            property="og:description"
+            content="Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'."
+          />
+          <meta
+            property="og:image"
+            content="https://ethernaut.openzeppelin.com/imgs/metatag.png"
+          />
+          {/* <!-- Twitter --> */}
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:site" content="@OpenZeppelin" />
+          <meta name="twitter:title" content="The Ethernaut" />
+          <meta
+            name="twitter:description"
+            content="Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'."
+          />
+          <meta
+            name="twitter:image"
+            content="https://ethernaut.openzeppelin.com/imgs/metatag.png"
+          />
+        </Helmet>
         {/* Parent container */}
         <main>
           {/* Main title and buttons */}
@@ -155,7 +193,7 @@ class App extends React.Component {
               <div className="deploy-window">
                 {/*deploy window*/}
                 <h1>{randGoodIcon()}</h1>
-                <h1>{strings.deployMessageTitle}</h1>
+                <h2>{strings.deployMessageTitle}</h2>
                 <br />
                 {strings.deployMessage}
                 {supportedNetworksList(supportedNetworks)}
@@ -174,21 +212,23 @@ class App extends React.Component {
               <div className="deploy-window">
                 {/*deprecation window*/}
                 <h1>{randBadIcon()}</h1>
-                <h1>
-                  {isDeprecatedNetwork(this.state.chainId)? strings.deprecatedNetwork : strings.networkBeingDeprecated}
-                </h1>
+                <h2>
+                  {isDeprecatedNetwork(this.state.chainId)
+                    ? strings.deprecatedNetwork
+                    : strings.networkBeingDeprecated}
+                </h2>
                 <br />
                 {strings.deployMessage}
                 {supportedNetworksList(supportedNetworks)}
                 <div className="choice-buttons">
                   <button className="buttons" onClick={switchToSepolia}>
                     {strings.switchToSepolia}
                   </button>
-                  {!isDeprecatedNetwork(this.state.chainId) && 
+                  {!isDeprecatedNetwork(this.state.chainId) && (
                     <button className="buttons" onClick={continueAnyway}>
                       {strings.continueAnyway}
                     </button>
-                  }
+                  )}
                 </div>
               </div>
             )}
@@ -223,16 +263,20 @@ function mapDispatchToProps(dispatch) {
 
 function supportedNetworksList(_supportedNetworks) {
   return (
-  <ul>
-    {_supportedNetworks.map((network, idx) => (
-      <li key={idx}>
-        {network}
-        {networkOnDeprecationOrDeprecated(constants.NETWORKS[network].id) 
-          && " (" + deprecationStatus(constants.NETWORKS[network].id) + 
-          " on " + deprecationDate(constants.NETWORKS[network].id) + ")"}
-      </li>
-    ))}
-  </ul>)
+    <ul>
+      {_supportedNetworks.map((network, idx) => (
+        <li key={idx}>
+          {network}
+          {networkOnDeprecationOrDeprecated(constants.NETWORKS[network].id) &&
+            " (" +
+              deprecationStatus(constants.NETWORKS[network].id) +
+              " on " +
+              deprecationDate(constants.NETWORKS[network].id) +
+              ")"}
+        </li>
+      ))}
+    </ul>
+  );
 }
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));
diff --git a/client/src/containers/Help.js b/client/src/containers/Help.js
@@ -4,6 +4,7 @@ import { bindActionCreators } from "redux";
 import MarkdownComponent from "../components/common/Markdown";
 import { loadTranslations } from "../utils/translations";
 import Footer from "../components/common/Footer";
+import { Helmet } from 'react-helmet';
 
 class Help extends React.Component {
   render() {
@@ -12,6 +13,43 @@ class Help extends React.Component {
 
     return (
       <div className="helpcontainer main-wrapper">
+       <Helmet>
+          <title>The Ethernaut - Help</title>
+          {/* <!-- Primary Meta Tags --> */}
+          <meta name="title" content="The Ethernaut - Help" />
+          <meta
+            name="description"
+            content="Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'. - Help"
+          />
+          {/* <!-- Open Graph / Facebook --> */}
+          <meta property="og:type" content="website" />
+          <meta
+            property="og:url"
+            content="https://ethernaut.openzeppelin.com/help"
+          />
+          <meta property="og:title" content="The Ethernaut - Help" />
+          <meta
+            property="og:description"
+            content="Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'. - Help"
+          />
+          <meta
+            property="og:image"
+            content="https://ethernaut.openzeppelin.com/imgs/metatag.png"
+          />
+          {/* <!-- Twitter --> */}
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:site" content="@OpenZeppelin" />
+          <meta name="twitter:title" content="The Ethernaut - Help" />
+          <meta
+            name="twitter:description"
+            content="Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'. - Help"
+          />
+          <meta
+            name="twitter:image"
+            content="https://ethernaut.openzeppelin.com/imgs/metatag.png"
+          />
+        </Helmet>
+
         <div className="lines"></div>
         <main className="boxes">
           <h3>Setup Metamask</h3>

diff --git a/client/src/containers/Leaderboard.js b/client/src/containers/Leaderboard.js
@@ -9,6 +9,7 @@ import { NETWORKS } from "client/src/constants";
 import Footer from "../components/common/Footer";
 import axios from "axios";
 import { ALIAS_PATH, getLeaderboardPath } from "client/src/constants";
+import { Helmet } from "react-helmet";
 
 const playersPerPage = 20;
 
@@ -123,6 +124,42 @@ function Leaderboard() {
 
   return (
     <main className="main-wrapper">
+      <Helmet>
+        <title>The Ethernaut - Leaderboard</title>
+        {/* <!-- Primary Meta Tags --> */}
+        <meta name="title" content="The Ethernaut - Leaderboard" />
+        <meta
+          name="description"
+          content="Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'. - Leaderboard"
+        />
+        {/* <!-- Open Graph / Facebook --> */}
+        <meta property="og:type" content="website" />
+        <meta
+          property="og:url"
+          content="https://ethernaut.openzeppelin.com/leaderboard"
+        />
+        <meta property="og:title" content="The Ethernaut - Leaderboard" />
+        <meta
+          property="og:description"
+          content="Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'. - Leaderboard"
+        />
+        <meta
+          property="og:image"
+          content="https://ethernaut.openzeppelin.com/imgs/metatag.png"
+        />
+        {/* <!-- Twitter --> */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="@OpenZeppelin" />
+        <meta name="twitter:title" content="The Ethernaut - Leaderboard" />
+        <meta
+          name="twitter:description"
+          content="Web3/Solidity based wargame played in the Ethereum Virtual Machine. Each level is a smart contract that needs to be 'hacked'. - Leaderboard"
+        />
+        <meta
+          name="twitter:image"
+          content="https://ethernaut.openzeppelin.com/imgs/metatag.png"
+        />
+      </Helmet>
       <div className="boxes leaderboard-body">
         <div className="leaderboard-heading">
           <div className="leaderboard-title">Leaderboard</div>