Merge pull request #18 from status-im/feat/seo-optimization

feat: added SEO optimisations and tracking

docs/general-info/add-status-network.md

@@ -1,8 +1,21 @@
+---
+title: Add Status Network
+description: Step-by-step guide on how to add Status Network to MetaMask and other wallets. Learn how to configure network settings for both desktop and mobile wallets.
+keywords: [Status Network, MetaMask setup, add network, wallet configuration, RPC settings, Chain ID, blockchain network setup]
+---
+
+import AddToMetaMask from '@site/src/components/AddToMetaMask';
+
 # Add Status Network
 
 This guide shows how to add the **Status Network** to your wallet.
 
-## Testnet
+You can add Status Network Testnet directly by clicking on the button below:
+
+<AddToMetaMask />
+
+
+## Manual Configuration
 
 To add **Status Network Testnet** as a custom network to MetaMask:
 

docs/general-info/bridge/bridging-testnet.md

@@ -1,3 +1,9 @@
+---
+title: Bridging to Status Network Testnet
+description: Learn how to bridge tokens between Sepolia and Status Network testnet using the official Status Network bridge. Complete guide with prerequisites and step-by-step instructions.
+keywords: [Status Network bridge, token bridge, cross-chain bridge, Sepolia bridge, L2 bridge, testnet bridge, blockchain bridge]
+---
+
 # Bridging to Status Network Testnet
 
 The Status Network bridge allows you to transfer tokens between Sepolia and Status Network testnet. The bridge is deployed at [bridge.status.network](https://bridge.status.network).

docs/general-info/contract-addresses/testnet-contracts.md

@@ -1,3 +1,9 @@
+---
+title: Testnet Contracts
+description: Comprehensive list of Status Network testnet contract addresses, including bridge contracts, core infrastructure, and L2 contracts with their purposes and links to block explorers.
+keywords: [Status Network contracts, testnet addresses, smart contracts, bridge contracts, L1 contracts, L2 contracts, blockchain infrastructure]
+---
+
 # Testnet Contracts
 
 This page lists all the important contract addresses for the Status Network testnet infrastructure.

docs/general-info/contract-addresses/tokens.md

@@ -1,3 +1,9 @@
+---
+title: Tokens
+description: Official list of supported tokens and their contract addresses on Status Network, including both L1 and L2 token addresses and bridge mappings.
+keywords: [Status Network tokens, token list, supported tokens, token addresses, L2 tokens, bridge tokens]
+---
+
 # Tokens
 
 For the most up-to-date list of supported tokens and their contract addresses on Status Network, please refer to our official [Status Network Token List repository](https://github.com/status-im/status-network-token-list).

docs/general-info/network-details.md

@@ -1,3 +1,12 @@
+---
+id: network-details
+title: Status Network Details & Configuration
+description: Official network details for Status Network testnet including RPC endpoints, Chain ID, and configuration information for wallets and development environments.
+keywords: [Status Network, network details, RPC endpoint, Chain ID, testnet configuration, blockchain network, MetaMask setup]
+---
+
+import AddToMetaMask from '@site/src/components/AddToMetaMask';
+
 # Network Details
 
 ## Status Testnet
@@ -11,6 +20,9 @@
 | **Block Explorer**  | https://sepoliascan.status.network       |
 | **Bridge**          | https://bridge.status.network            |
 
+<AddToMetaMask />
+<div style={{height: '2rem'}} />
+
 These are the official network details for the Status Network testnet. You can use these details to:
 - Add the network to your wallet
 - Configure development environments

docs/index.md

@@ -1,6 +1,8 @@
 ---
 id: index
 title: Welcome to Status Network
+description: Status Network is a gasless Layer 2 blockchain network enabling seamless, fee-free decentralized applications. Start building with easy wallet setup, faucets, and deployment tools.
+keywords: [Status Network, Layer 2, gasless blockchain, ethereum scaling, web3 development, dapp development, blockchain development]
 slug: /
 sidebar_position: 1
 ---

docs/introduction/quick-start.md

@@ -1,3 +1,9 @@
+---
+title: Quick Start
+description: Get started with Status Network in under 10 minutes. Learn how to deploy your first smart contract using Remix IDE, get test ETH, and interact with the network.
+keywords: [Status Network tutorial, quick start, smart contract deployment, Remix IDE, blockchain development, testnet setup, MetaMask configuration]
+---
+
 # Quick Start
 
 In this section, we'll get you deploying a sample contract on **Status Network Testnet** in less than 10 minutes.

docs/other/official-links.md

@@ -1,3 +1,9 @@
+---
+title: Official Links
+description: Complete directory of official Status Network resources, including main website, tools, development resources, and community links.
+keywords: [Status Network links, official resources, network tools, development resources, community links, blockchain explorer, bridge, faucet]
+---
+
 # Official Links
 
 This page contains all the official links for the Status Network ecosystem.

docs/tools/block-explorers.md

@@ -1,3 +1,9 @@
+---
+title: Status Network Block Explorer
+description: Learn how to use the Status Network block explorer to track transactions, verify smart contracts, and monitor network activity. Complete guide to explorer features and contract verification.
+keywords: [Status Network explorer, blockchain explorer, smart contract verification, transaction tracking, block explorer, network monitoring]
+---
+
 # Status Network Testnet Explorer
 
 The Status Network block explorer is available at [sepoliascan.status.network](https://sepoliascan.status.network).

docs/tools/bridge.md

@@ -1,3 +1,9 @@
+---
+title: Status Network Bridge
+description: Complete guide to using the Status Network bridge for transferring tokens between Sepolia and Status Network testnet. Learn about supported tokens, bridging process, and monitoring transactions.
+keywords: [Status Network bridge, token bridge, cross-chain transfer, L1 L2 bridge, token bridging, Sepolia bridge]
+---
+
 # Status Network Testnet Bridge
 
 The Status Network Testnet Bridge allows users to transfer tokens between Sepolia (Layer 1) and Status Network testnet (Layer 2). The bridge interface is available at [bridge.status.network](https://bridge.status.network).

docs/tools/rpc.md

@@ -1,3 +1,9 @@
+---
+title: RPC Endpoints
+description: Official RPC endpoints for Status Network, including configuration guides for MetaMask and Web3 libraries. Learn about available methods, rate limits, and best practices.
+keywords: [Status Network RPC, JSON-RPC, blockchain API, web3 configuration, MetaMask setup, blockchain development]
+---
+
 # RPC Endpoints
 
 The Status Network provides public RPC (Remote Procedure Call) endpoints that allow you to interact with the network.

docs/tools/testnet-faucets.md

@@ -1,3 +1,9 @@
+---
+title: Testnet Faucets
+description: Get testnet ETH for Status Network development. Complete guide to obtaining test tokens through Status Network faucet and Sepolia faucets for bridging.
+keywords: [Status Network faucet, testnet ETH, test tokens, Sepolia faucet, blockchain testing, development tokens]
+---
+
 # Testnet Faucets
 
 To get started on Status Network testnet, you'll need both Sepolia ETH and Status Network testnet ETH.

docs/tutorials/deploying-contracts/using-foundry.md

@@ -1,3 +1,9 @@
+---
+title: Using Foundry with Status Network
+description: Comprehensive guide to deploying and testing smart contracts on Status Network using Foundry. Learn about project setup, deployment scripts, testing, and contract interaction using Cast.
+keywords: [Foundry tutorial, smart contract deployment, Status Network development, blockchain testing, Solidity development, web3 development, Foundry testing]
+---
+
 # Using Foundry to Deploy Smart Contracts
 
 This tutorial will guide you through the process of deploying a smart contract on Status Network testnet using Foundry.

docs/tutorials/deploying-contracts/using-hardhat.md

@@ -1,3 +1,9 @@
+---
+title: Using Hardhat with Status Network
+description: Step-by-step tutorial for deploying smart contracts on Status Network using Hardhat and TypeScript. Learn about project setup, configuration, and contract deployment.
+keywords: [Hardhat tutorial, smart contract deployment, Status Network development, TypeScript, blockchain development, web3 development]
+---
+
 # Using Hardhat to Deploy Smart Contracts
 
 This tutorial will guide you through the process of deploying a smart contract on Status Network testnet using Hardhat, Hardhat Ignition, and TypeScript.

docs/tutorials/deploying-contracts/using-remix.md

@@ -1,3 +1,9 @@
+---
+title: Using Remix with Status Network
+description: Learn how to deploy smart contracts on Status Network using Remix IDE. Beginner-friendly guide with step-by-step instructions for contract deployment and interaction.
+keywords: [Remix IDE, smart contract deployment, Status Network development, blockchain tutorial, web3 development, solidity]
+---
+
 # Using Remix to Deploy Smart Contracts
 
 This tutorial will guide you through deploying a smart contract on Status Network testnet using the Remix IDE. Remix is a browser-based IDE that's perfect for quick development and testing.

docusaurus.config.ts

@@ -39,24 +39,31 @@ const config: Config = {
       {
         docs: {
           sidebarPath: './sidebars.ts',
-          editUrl: 'https://github.com/status-im/status-network-docs/tree/main/',
+          editUrl: 'https://github.com/status-im/docs.status.network',
           routeBasePath: '/',
+          showLastUpdateTime: true,
         },
         blog: false,
         pages: false,
         theme: {
           customCss: './src/css/custom.css',
         },
+        sitemap: {
+          changefreq: 'weekly',
+          priority: 0.5,
+          ignorePatterns: ['/tags/**'],
+          filename: 'sitemap.xml',
+        },
+        gtag: {
+          trackingID: 'G-4GHNHQDPG2',
+          anonymizeIP: true,
+        },
       } satisfies Preset.Options,
     ],
   ],
 
   themeConfig: {
-    image: 'https://docs.status.network/img/sn_logo.svg',
-    colorMode: {
-      defaultMode: 'dark',
-      respectPrefersColorScheme: true,
-    },
+    image: 'img/sn-social-card.png',
     navbar: {
       title: 'Status Network Docs',
       logo: {
@@ -69,14 +76,78 @@ const config: Config = {
           position: 'right',
           className: 'language-dropdown',
         },
-        // {
-        //   href: 'https://hub.status.network',
-        //   label: 'Hub',
-        //   position: 'right',
-        //   className: 'hub-button',
-        // },
       ],
     },
+
+    metadata: [
+      // General SEO
+      {
+        name: 'description',
+        content: 'Documentation for Status Network - The gasless network with sustainable funding for app builders. Launch and scale your social apps and games with truly free transactions.',
+      },
+      {
+        name: 'keywords',
+        content: 'status network, blockchain, web3, documentation, gasless transactions, social network, cryptocurrency',
+      },
+      {
+        name: 'author',
+        content: 'Status Network',
+      },
+      
+      // OpenGraph tags
+      {
+        property: 'og:title',
+        content: 'Status Network Documentation',
+      },
+      {
+        property: 'og:description',
+        content: 'Documentation for Status Network - The gasless network with sustainable funding for app builders. Launch and scale your social apps and games with truly free transactions.',
+      },
+      {
+        property: 'og:image',
+        content: 'https://docs.status.network/img/sn-social-card.png',
+      },
+      {
+        property: 'og:url',
+        content: 'https://docs.status.network',
+      },
+      {
+        property: 'og:type',
+        content: 'website',
+      },
+      {
+        property: 'og:site_name',
+        content: 'Status Network Documentation',
+      },
+      
+      // Twitter Card tags
+      {
+        name: 'twitter:card',
+        content: 'summary_large_image',
+      },
+      {
+        name: 'twitter:site',
+        content: '@statusL2',
+      },
+      {
+        name: 'twitter:title',
+        content: 'Status Network Documentation',
+      },
+      {
+        name: 'twitter:description',
+        content: 'Documentation for Status Network - The gasless network with sustainable funding for app builders. Launch and scale your social apps and games with truly free transactions.',
+      },
+      {
+        name: 'twitter:image',
+        content: 'https://docs.status.network/img/sn-social-card.png',
+      },
+    ],
+
+    colorMode: {
+      defaultMode: 'dark',
+      respectPrefersColorScheme: true,
+    },
+
     footer: {
       links: [
         {
@@ -95,7 +166,6 @@ const config: Config = {
       ],
     },
     algolia: {
-      // it is safe to commit these
       appId: 'M7J93TRPJ9',
       apiKey: '17befa84094fd9acddd40cbb64012976',
       indexName: 'status',

src/components/AddToMetaMask.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+export default function AddToMetaMask(): JSX.Element {
+  const addStatusNetwork = async () => {
+    if (typeof window === 'undefined' || !window.ethereum) {
+      alert('MetaMask is not installed. Please install MetaMask first.');
+      return;
+    }
+
+    try {
+      await window.ethereum.request({
+        method: 'wallet_addEthereumChain',
+        params: [{
+          chainId: '0x6300B5EA',
+          chainName: 'Status Network Testnet',
+          nativeCurrency: {
+            name: 'ETH',
+            symbol: 'ETH',
+            decimals: 18
+          },
+          rpcUrls: ['https://public.sepolia.rpc.status.network'],
+          blockExplorerUrls: ['https://sepoliascan.status.network']
+        }]
+      });
+    } catch (error) {
+      console.error(error);
+      alert('Failed to add the network to MetaMask. Please try again.');
+    }
+  };
+
+  return (
+    <button 
+      className="button button--primary" 
+      onClick={addStatusNetwork}
+    >
+      <img 
+        src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg"
+        alt="MetaMask Fox"
+        style={{ 
+          width: '20px', 
+          height: '20px',
+          marginRight: '8px',
+          verticalAlign: 'middle'
+        }} 
+      />
+      Add Status Network Testnet
+    </button>
+  );
+} 

src/types/global.d.ts

@@ -0,0 +1,8 @@
+interface Window {
+  ethereum?: {
+    request: (args: {
+      method: string;
+      params: any[];
+    }) => Promise<any>;
+  };
+}