testing meta tags

2025-07-22 17:47:37 +05:30
parent 07c8fe0b72
commit 3a7908a857
6 changed files with 148 additions and 52 deletions
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -97,7 +97,7 @@ const socialLinks = [
  {
    name: "LinkedIn",
    icon: Linkedin,
-    url: "https://linkedin.com/company/wdi",
+    url: "https://www.linkedin.com/in/website-developers-india/",
  },
  {
    name: "Twitter",
--- a/index.html
+++ b/index.html
@@ -6,12 +6,12 @@
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>WDI - Web Development & AI Solutions</title>
-  <meta name="description"
-    content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." />
-
+  
  <!-- Preload Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <!-- <meta name="description"
+    content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." /> -->

  <!-- SEO Meta Tags -->
  <meta property="og:title" content="WDI - Web Development & AI Solutions" />
@@ -21,8 +21,8 @@
  <meta property="og:url" content="https://wdi.com" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="WDI - Web Development & AI Solutions" />
-  <meta name="twitter:description"
-    content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." />
+  <!-- <meta name="twitter:description"
+    content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." /> -->

  <!-- Google tag (gtag.js) -->

--- a/main.tsx
+++ b/main.tsx
@@ -5,11 +5,14 @@ import './styles/globals.css'
 import { Provider } from 'react-redux'
 import store from './src/store/Store.tsx'
 import { BrowserRouter } from 'react-router-dom'
+import { HelmetProvider } from 'react-helmet-async'

 createRoot(document.getElementById('root')!).render(
 <Provider store={store}>
     <BrowserRouter>
-      <App />
+       <HelmetProvider> 
+          <App />
+        </HelmetProvider>
    </BrowserRouter>
  </Provider>,
 )
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,6 +49,7 @@
        "react-dnd": "^16.0.1",
        "react-dnd-html5-backend": "^16.0.1",
        "react-dom": "^18.3.1",
+        "react-helmet-async": "^2.0.5",
        "react-hook-form": "^7.55.0",
        "react-redux": "^9.2.0",
        "react-resizable-panels": "^2.1.9",
@@ -5105,6 +5106,15 @@
        "node": ">=12"
      }
    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -6055,6 +6065,26 @@
        "react": "^18.3.1"
      }
    },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-helmet-async": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz",
+      "integrity": "sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "react-fast-compare": "^3.2.2",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-hook-form": {
      "version": "7.60.0",
      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.60.0.tgz",
@@ -6492,6 +6522,12 @@
      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
      "license": "MIT"
    },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "license": "MIT"
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
    "react-hook-form": "^7.55.0",
    "react-redux": "^9.2.0",
    "react-resizable-panels": "^2.1.9",
--- a/pages/Services.tsx
+++ b/pages/Services.tsx
@@ -1,31 +1,84 @@
-import React from "react";
 import { motion } from "framer-motion";
-import { Navigation } from "../components/Navigation";
-import { Footer } from "../components/Footer";
-import { ProcessSection } from "../components/ProcessSection";
-import { FAQSection } from "../components/FAQSection";
-import { AnimatedGradientText } from "../components/AnimatedGradientText";
-import { Button } from "../components/ui/button";
-import { ShimmerButton } from "../components/ui/shimmer-button";
-import { Badge } from "../components/ui/badge";
-import { Card, CardContent } from "../components/ui/card";
-import { GridPattern } from "../components/GridPattern";
-import { navigateTo } from "../App";
-import { 
-  Smartphone, Globe, Code, Palette, Brain, Target, Users, Star, 
-  ArrowRight, ChevronRight, Clock, TrendingUp, Layers, 
-  Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck,
-  MessageSquare, Heart, CheckCircle, Lightbulb, Coffee, 
-  Download, Calendar, Camera, Music, Gamepad2,
-  CreditCard, Bell, Mail, Search, Home, MapPin, 
-  Github, Slack, Figma, Chrome, Zap as ZapIcon, Video, MessageCircle,
-  Cog, Settings, Sparkles, Handshake, Eye, Award, UserPlus, Bot, Server, Database
+import {
+  Bot,
+  Brain,
+  Calendar,
+  CheckCircle,
+  ChevronRight,
+  Code,
+  Eye,
+  Globe,
+  Lightbulb,
+  Palette,
+  Rocket,
+  Server,
+  Smartphone,
+  TrendingUp,
+  Users
 } from "lucide-react";
+import { navigateTo } from "../App";
+import { FAQSection } from "../components/FAQSection";
+import { Footer } from "../components/Footer";
+import { Navigation } from "../components/Navigation";
+import { ProcessSection } from "../components/ProcessSection";
+import { Button } from "../components/ui/button";
+import { Card, CardContent } from "../components/ui/card";
+import { ShimmerButton } from "../components/ui/shimmer-button";
+import { Helmet } from "react-helmet-async";

 // Enhanced Hero Section
 const HeroWithCTA = () => {
  return (
    <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>Get Expert Digital Services Today | WDI Game-Changing Solutions</title>
+        <meta
+          name="description"
+          content="Get the powerful digital solutions your brand needs to thrive. WDI’s proven services make growth faster and easier than ever before."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/services" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta property="og:title" content="Get Expert Digital Services Today | WDI Game-Changing Solutions" />
+        <meta
+          property="og:description"
+          content="Get the powerful digital solutions your brand needs to thrive. WDI’s proven services make growth faster and easier than ever before."
+        />
+        <meta property="og:url" content="https://www.wdipl.com/services" />
+        <meta property="og:type" content="website" />
+        <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Twitter Card Tags */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content="Get Expert Digital Services Today | WDI Game-Changing Solutions" />
+        <meta
+          name="twitter:description"
+          content="Get the powerful digital solutions your brand needs to thrive. WDI’s proven services make growth faster and easier than ever before."
+        />
+        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+            {
+              "@context": "https://schema.org",
+              "@type": "Organization",
+              "name": "WDI",
+              "url": "https://www.wdipl.com",
+              "sameAs": [
+                "https://www.facebook.com/wdideas",
+                "https://www.linkedin.com/in/website-developers-india/",
+                "https://www.instagram.com/wdipl/"
+              ]
+            }
+          `}
+        </script>
+      </Helmet>
+
+
      <div className="container mx-auto px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
          <motion.div
@@ -50,12 +103,12 @@ const HeroWithCTA = () => {
                <span className="text-[#E5195E]">Digital Solutions</span>
                <span className="text-white"> for Modern Business</span>
              </h1>
-              
+
              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                From mobile apps to AI solutions, we deliver end-to-end digital services that transform ideas into powerful business solutions.
              </p>
            </div>
-            
+
            {/* CTAs */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
@@ -63,7 +116,10 @@ const HeroWithCTA = () => {
              transition={{ duration: 0.8, delay: 0.3 }}
              className="flex flex-col sm:flex-row gap-4"
            >
-              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
+              <ShimmerButton className="text-lg px-8 py-4"
+                //  onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                onClick={() => navigateTo("/start-a-project")}
+              >
                <div className="inline-flex items-center gap-2">
                  <Calendar className="w-4 h-4 flex-shrink-0" />
                  <span>Discuss Your Project</span>
@@ -72,7 +128,7 @@ const HeroWithCTA = () => {
              <Button
                variant="secondary"
                size="lg"
-                className="text-lg px-8 py-4"
+                className="text-lg px-8 py-4 h-auto"
                onClick={() => navigateTo('/case-studies')}
              >
                <Eye className="w-4 h-4 flex-shrink-0" />
@@ -80,7 +136,7 @@ const HeroWithCTA = () => {
              </Button>
            </motion.div>
          </motion.div>
-          
+
          {/* Right side with stats */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
@@ -98,17 +154,17 @@ const HeroWithCTA = () => {
                <div className="text-3xl lg:text-4xl font-bold text-white">500+</div>
                <div className="text-sm text-gray-400 leading-tight">Projects Delivered</div>
              </div>
-              
+
              <div className="space-y-2 flex flex-col items-center">
                <div className="text-3xl lg:text-4xl font-bold text-white">50+</div>
                <div className="text-sm text-gray-400 leading-tight">Service Offerings</div>
              </div>
-              
+
              <div className="space-y-2 flex flex-col items-center">
                <div className="text-3xl lg:text-4xl font-bold text-white">98%</div>
                <div className="text-sm text-gray-400 leading-tight">Client Satisfaction</div>
              </div>
-              
+
              <div className="space-y-2 flex flex-col items-center">
                <div className="text-3xl lg:text-4xl font-bold text-white">24/7</div>
                <div className="text-sm text-gray-400 leading-tight">Support Available</div>
@@ -150,7 +206,7 @@ const HorizontalTagScroller = () => {
            Comprehensive digital services covering every aspect of modern technology solutions.
          </p>
        </motion.div>
-        
+
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
@@ -160,7 +216,7 @@ const HorizontalTagScroller = () => {
        >
          <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
          <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>
-          
+
          <div className="flex animate-marquee hover:animate-marquee-paused">
            {/* First set */}
            {categories.map((category, index) => {
@@ -187,7 +243,7 @@ const HorizontalTagScroller = () => {
                </motion.div>
              );
            })}
-            
+
            {/* Second and third sets for seamless loop */}
            {[...categories, ...categories].map((category, index) => {
              const IconComponent = category.icon;
@@ -229,7 +285,7 @@ const SideBySideContentWithIcons = () => {
      icon: Brain
    },
    {
-      id: "quality", 
+      id: "quality",
      title: "Quality Assurance",
      icon: CheckCircle
    },
@@ -265,7 +321,7 @@ const SideBySideContentWithIcons = () => {
            <span className="text-[#E5195E]">WDI</span>
            <span className="text-white"> Services</span>
          </h2>
-          
+
          <p className="text-xl text-gray-300 leading-relaxed">
            Delivering excellence in every project with proven expertise and innovation.
          </p>
@@ -296,7 +352,7 @@ const SideBySideContentWithIcons = () => {
                    <div className="mb-6">
                      <IconComponent className="w-10 h-10 text-accent mx-auto" />
                    </div>
-                    
+
                    <h3 className="text-lg font-semibold text-white leading-tight">
                      {advantage.title}
                    </h3>
@@ -321,7 +377,7 @@ const TabbedServiceDisplay = () => {
      link: "/services/mobile-app-development"
    },
    {
-      title: "Web & Cloud Solutions", 
+      title: "Web & Cloud Solutions",
      icon: Globe,
      description: "Scalable web applications and cloud infrastructure solutions.",
      link: "/web-cloud"
@@ -369,7 +425,7 @@ const TabbedServiceDisplay = () => {
            End-to-end digital solutions designed to accelerate your business growth and digital transformation.
          </p>
        </motion.div>
-        
+
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
@@ -395,7 +451,7 @@ const TabbedServiceDisplay = () => {
                    <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
                      <IconComponent className="w-6 h-6 text-accent" />
                    </div>
-                    
+
                    <div>
                      <h3 className="text-xl font-semibold text-white mb-4">
                        {service.title}
@@ -404,7 +460,7 @@ const TabbedServiceDisplay = () => {
                        {service.description}
                      </p>
                    </div>
-                    
+
                    <div className="flex items-center gap-2 text-accent font-medium">
                      <span>Explore Services</span>
                      <ChevronRight className="w-4 h-4" />
@@ -448,21 +504,21 @@ const InlineCTA = () => {
                </div>
              </div>
            </div>
-            
+
            {/* Main Heading */}
            <h2 className="text-3xl lg:text-4xl font-semibold leading-tight">
              <span className="text-white">Transform Your Business with </span>
              <span className="text-[#E5195E]">Expert Digital Services</span>
            </h2>
-            
+
            {/* Subtitle */}
            <p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
              From concept to deployment, we deliver comprehensive digital solutions that drive growth and innovation.
            </p>
-            
+
            {/* CTA Button */}
            <div className="flex flex-col items-start gap-4">
-              <ShimmerButton 
+              <ShimmerButton
                className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
                onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
              >
@@ -471,7 +527,7 @@ const InlineCTA = () => {
                  <span>Start Your Project</span>
                </div>
              </ShimmerButton>
-              
+
              {/* Small benefit text */}
              <p className="text-sm text-gray-400">
                Free consultation • Project roadmap • Technical guidance
@@ -518,7 +574,7 @@ export function Services() {
      <TabbedServiceDisplay />
      <ProcessSection />
      <InlineCTA />
-      <FAQSection 
+      <FAQSection
        title="Services Questions"
        subtitle="Get answers to common questions about our comprehensive service offerings."
        faqs={servicesFAQs}