Add WebApplication and HowTo structured data schemas for SEO

- Upgrade SEO.tsx from SoftwareApplication to WebApplication schema, home page only
- Add HowTo schema to Instructions page using localized steps

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ChengaDev

src/components/Instructions.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Helmet } from 'react-helmet'
 import styled, { keyframes } from 'styled-components'
 import { useLocalization } from '../contexts/Language/LanguageProvider'
 import SEO from './SEO'
@@ -17,12 +18,33 @@ const fadeInUp = keyframes`
 const Instructions = () => {
   const { locals } = useLocalization()
 
+  const howToSchema = {
+    "@context": "https://schema.org",
+    "@type": "HowTo",
+    "name": "How to Operate an Online Basketball Shot Clock",
+    "description": "Step-by-step guide to using a basketball shot clock online, including 24-second and 14-second resets per FIBA rules.",
+    "step": locals.instructionsSections.map((section) => ({
+      "@type": "HowToSection",
+      "name": section.title,
+      "itemListElement": section.steps.map((step, i) => ({
+        "@type": "HowToStep",
+        "position": i + 1,
+        "text": step,
+      })),
+    })),
+  }
+
   return (
     <Container>
       <SEO
         title="Shot Clock Instructions | ShotClock Pro"
         description="Step-by-step instructions for operating a basketball shot clock. Learn the 24-second and 14-second reset rules, basic controls, and game situations per FIBA regulations."
       />
+      <Helmet>
+        <script type="application/ld+json">
+          {JSON.stringify(howToSchema)}
+        </script>
+      </Helmet>
       <AnimatedTitle>{locals.instructionsTitle}</AnimatedTitle>
 
       <Description>{locals.instructionsDescription}</Description>

src/components/SEO.tsx

@@ -28,13 +28,17 @@ const SEO: React.FC<SEOProps> = ({ title, description }) => {
     return `${BASE_URL}/${lang}${pagePath === '/' ? '' : pagePath}`;
   };
 
-  const structuredData = {
+  const isHome = pagePath === '/';
+
+  const webAppSchema = {
     "@context": "https://schema.org",
-    "@type": "SoftwareApplication",
+    "@type": "WebApplication",
     "name": "ShotClock Pro",
+    "url": "https://www.24shotclock.com",
     "applicationCategory": "SportsApplication",
-    "operatingSystem": "Web",
-    "description": "Professional basketball shot clock training application for referees, scorekeepers, and basketball enthusiasts.",
+    "operatingSystem": "Any",
+    "browserRequirements": "Requires JavaScript",
+    "description": "Free online basketball shot clock — start, stop, reset, and practice with a real buzzer. Works on any device, no installation needed.",
     "offers": {
       "@type": "Offer",
       "price": "0",
@@ -46,10 +50,11 @@ const SEO: React.FC<SEOProps> = ({ title, description }) => {
     },
     "featureList": [
       "24-second shot clock simulation",
-      "14-second reset functionality",
+      "14-second offensive rebound reset",
       "Real-time operation practice",
-      "Multiple language support",
-      "FIBA rules compliance"
+      "Real-time buzzer sound",
+      "Blind-clock training mode",
+      "Multiple language support"
     ]
   };
 
@@ -68,9 +73,11 @@ const SEO: React.FC<SEOProps> = ({ title, description }) => {
         <link key={lang} rel="alternate" hrefLang={lang} href={getLangUrl(lang)} />
       ))}
       <link rel="alternate" hrefLang="x-default" href={getLangUrl('en')} />
-      <script type="application/ld+json">
-        {JSON.stringify(structuredData)}
-      </script>
+      {isHome && (
+        <script type="application/ld+json">
+          {JSON.stringify(webAppSchema)}
+        </script>
+      )}
     </Helmet>
   );
 };