Skip to content

feat: SEO/AEO optimization for all 8 technology pages #130

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vibemarketerpromax merged 1 commit into from
Feb 26, 2026
Merged

feat: SEO/AEO optimization for all 8 technology pages #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 41 additions & 2 deletions app/services/[slug]/ExpertisePageClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ const TechDecisionTable = dynamic(() => import("./slug-sections/TechDecisionTabl
const FrameworkComparison = dynamic(() => import("./slug-sections/FrameworkComparison"));
const CustomStackTable = dynamic(() => import("./slug-sections/CustomStackTable"));
const DotnetSections = dynamic(() => import("./slug-sections/DotnetSections"));
const WhyTechnology = dynamic(() => import("./slug-sections/WhyTechnology"));
const IntroStatement = dynamic(() => import("./slug-sections/IntroStatement"));

// Dynamic import below-fold sections — defers JS hydration for faster LCP
const CapabilitiesGrid = dynamic(() => import("@/components/expertise/CapabilitiesGrid").then(mod => ({ default: mod.CapabilitiesGrid })));
Expand Down Expand Up @@ -290,6 +292,21 @@ export default function ExpertisePageClient({
},
]
: []),
// AggregateRating for technology pages (enables star ratings in SERP)
...(basePath === "/technologies"
? [
{
"@type": "Organization",
"@id": "https://procedure.tech/#organization",
aggregateRating: {
"@type": "AggregateRating",
ratingValue: "4.9",
reviewCount: "32",
bestRating: "5",
},
},
]
: []),
// Breadcrumb Schema
{
"@type": "BreadcrumbList",
Expand Down Expand Up @@ -331,6 +348,11 @@ export default function ExpertisePageClient({

{heroSlot}

{/* AEO: Definitive intro statement for LLM citation — renders after hero on technology pages */}
{basePath === "/technologies" && (
<IntroStatement slug={expertise.slug} />
)}

{expertise.slug === "istio-consulting" && (
<Stats
title="Istio & Service Mesh Experience"
Expand Down Expand Up @@ -366,6 +388,23 @@ export default function ExpertisePageClient({
/>
)}

{["react", "nextjs", "nodejs", "python", "angular", "flutter", "react-native"].includes(expertise.slug) && (
<Stats
title={`${expertise.slug === "react" ? "React" : expertise.slug === "nextjs" ? "Next.js" : expertise.slug === "nodejs" ? "Node.js" : expertise.slug === "python" ? "Python" : expertise.slug === "angular" ? "Angular" : expertise.slug === "flutter" ? "Flutter" : "React Native"} Development Track Record`}
stats={[
{ value: "9+ Years", label: "In Production Engineering" },
{ value: "50+", label: "Senior Engineers" },
{ value: "75+", label: "Clients Served" },
{ value: "98%", label: "Client Retention Rate" },
]}
/>
)}

{/* Why [Technology] for Your Business — business value section for decision makers */}
{["react", "nextjs", "nodejs", "python", "angular", "flutter", "react-native", "dotnet"].includes(expertise.slug) && (
<WhyTechnology slug={expertise.slug} />
)}

<div id={["nodejs", "nextjs", "react", "python", "angular", "flutter", "react-native", "prometheus-monitoring", "istio-consulting", "thanos-long-term-storage"].includes(expertise.slug) ? "services" : undefined}>
<CapabilitiesGrid
title={expertise.slug === "dotnet" ? ".NET Development Capabilities for Production-Grade Systems" : expertise.slug === "nextjs" ? "What We Build With Next.js" : expertise.slug === "nodejs" ? "Node.js Development Services" : expertise.slug === "react" ? "React Development Services" : expertise.slug === "python" ? "Python Development Services" : expertise.slug === "angular" ? "Angular Development Services" : expertise.slug === "flutter" ? "What We Build With Flutter" : expertise.slug === "react-native" ? "What We Build With React Native" : expertise.slug === "prometheus-monitoring" ? "Prometheus Consulting & Implementation Services" : expertise.slug === "istio-consulting" ? "Istio Consulting & Implementation Services" : "Key Capabilities"}
Expand Down Expand Up @@ -407,7 +446,7 @@ export default function ExpertisePageClient({
)}

{/* Tech slugs: Framework comparisons (dynamically imported) */}
{["react", "python", "flutter", "react-native"].includes(expertise.slug) && (
{["react", "python", "flutter", "react-native", "nodejs", "nextjs", "angular", "dotnet"].includes(expertise.slug) && (
<FrameworkComparison slug={expertise.slug} />
)}

Expand Down Expand Up @@ -499,7 +538,7 @@ export default function ExpertisePageClient({
/>
)}

{expertise.slug !== "dotnet" && pageData.testimonials && pageData.testimonials.length > 0 && (
{expertise.slug !== "dotnet" && (basePath === "/technologies" || (pageData.testimonials && pageData.testimonials.length > 0)) && (
<Testimonials />
)}

Expand Down
169 changes: 169 additions & 0 deletions app/services/[slug]/slug-sections/FrameworkComparison.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,175 @@ const comparisonDataMap: Record<string, ComparisonData> = {
</>
),
},
nodejs: {
sectionId: "nodejs-vs-alternatives",
title: "Node.js vs Alternatives:",
highlight: "When You Need What",
subtitle: "We build with both. Here's how we decide.",
gridCols: "md:grid-cols-3",
frameworks: [
{
name: "Node.js (JavaScript/TypeScript)",
bestFor:
"Real-time applications, API gateways, BFFs, I/O-heavy microservices",
why: "Non-blocking event loop handles thousands of concurrent connections efficiently. Same language on frontend and backend means shared types, shared validation logic, and fewer context switches for your team. The npm ecosystem is the largest package registry in existence.",
useWhen:
"You're building real-time features (WebSockets, SSE), your frontend team is JavaScript-heavy and you want full-stack velocity, or you need a lightweight API layer between clients and downstream services.",
},
{
name: "Python (Django/FastAPI/Flask)",
bestFor:
"Data science, ML model serving, automation scripts, admin-heavy platforms",
why: "Unmatched ecosystem for machine learning (PyTorch, scikit-learn, pandas). Django's batteries-included approach ships admin panels and ORMs fast. FastAPI matches Node.js throughput for API workloads while keeping Python's readability.",
useWhen:
"Your project involves ML/AI inference, your team's strength is Python, or you need Django's built-in admin and ORM for rapid CRUD development.",
},
{
name: "Go",
bestFor:
"High-throughput backend services, infrastructure tooling, CLI tools, systems programming",
why: "Compiled to native binaries with tiny memory footprint. Goroutines handle massive concurrency without callback complexity. Cold starts are near-instant, making it ideal for serverless and container-based deployments.",
useWhen:
"Raw throughput and low latency are non-negotiable, you're building infrastructure-level services (proxies, message brokers), or you want minimal runtime overhead in containerized environments.",
},
],
bottomNote: (
<>
The choice often comes down to team expertise and workload type. Node.js
dominates when JavaScript teams need full-stack speed. Go wins when
performance and operational simplicity are the priority. Python is the
default for anything touching data or ML. We regularly run all three in
the same system, each handling the workload it&apos;s best suited for.
</>
),
},
nextjs: {
sectionId: "nextjs-vs-alternatives",
title: "Next.js vs Alternatives:",
highlight: "When You Need What",
subtitle: "We build with multiple meta-frameworks. Here's how we decide.",
gridCols: "md:grid-cols-3",
frameworks: [
{
name: "Next.js (React)",
bestFor:
"SEO-critical marketing sites, e-commerce, full-stack React applications, enterprise platforms",
why: "Server Components reduce client-side JavaScript. Static generation, ISR, and edge rendering cover every caching strategy. Vercel's infrastructure is optimized for it, but it deploys anywhere (Docker, AWS, self-hosted). The largest React meta-framework ecosystem by adoption.",
useWhen:
"You need flexible rendering strategies (static + dynamic on the same site), your team already knows React, or you want the broadest ecosystem of third-party integrations and community support.",
},
{
name: "Nuxt (Vue)",
bestFor:
"Vue-based teams, content-driven sites, projects where template syntax is preferred over JSX",
why: "Auto-imports, file-based routing, and built-in state management with zero config. Vue's template syntax has a gentler learning curve than JSX for teams coming from HTML/CSS backgrounds. Nitro server engine is framework-agnostic and deploys to any provider.",
useWhen:
"Your team prefers Vue's template-driven approach, you're building a content site where Nuxt Content simplifies Markdown handling, or you want strong conventions with less configuration overhead.",
},
{
name: "Remix (React)",
bestFor:
"Form-heavy applications, progressive enhancement, apps that need to work without JavaScript",
why: "Built on web standards (Request/Response, FormData, HTTP caching). Nested routing with parallel data loading eliminates waterfalls. Graceful degradation means forms work even if JavaScript fails to load.",
useWhen:
"Your app is form-heavy (multi-step workflows, dashboards with lots of writes), you care about progressive enhancement, or you want a simpler data-loading pattern without React Server Components complexity.",
},
],
bottomNote: (
<>
Next.js is the safe default for most React projects due to ecosystem
size and flexibility. Consider Nuxt if your team is Vue-native.
Consider Remix if your app is mutation-heavy and you value web-standard
patterns over framework-specific abstractions. We help teams pick based
on their actual workload, not hype cycles.
</>
),
},
angular: {
sectionId: "angular-vs-alternatives",
title: "Angular vs Alternatives:",
highlight: "When You Need What",
subtitle: "We build with all three. Here's how we decide.",
gridCols: "md:grid-cols-3",
frameworks: [
{
name: "Angular (TypeScript)",
bestFor:
"Large enterprise applications, complex forms, teams that want strong conventions and structure",
why: "Opinionated architecture with dependency injection, RxJS for reactive state, and a powerful CLI that enforces consistency across large teams. Built-in solutions for routing, forms, HTTP, testing, and i18n — no decision fatigue. TypeScript is mandatory, not optional.",
useWhen:
"You're building a large-scale enterprise app with multiple teams, your project has complex reactive data flows (financial dashboards, real-time monitoring), or you value framework-enforced consistency over flexibility.",
},
{
name: "React (with ecosystem)",
bestFor:
"Flexible UI composition, diverse project types, teams that want to choose their own tools",
why: "Minimal core with maximum ecosystem choice. You pick your router, state management, and styling approach. Component model is simple enough for a widget, powerful enough for a full application. Largest talent pool of any frontend framework.",
useWhen:
"You want flexibility in architecture decisions, hiring speed matters (React developers outnumber Angular developers roughly 3:1), or your project spans multiple form factors (web, mobile via React Native, desktop).",
},
{
name: "Vue (with Nuxt)",
bestFor:
"Progressive adoption, smaller teams, content-driven applications, developer experience focus",
why: "Vue's Composition API offers React-like flexibility with a gentler learning curve. Single-file components co-locate template, logic, and styles naturally. Smaller bundle size than Angular. Strong conventions without Angular's ceremony.",
useWhen:
"Your team is smaller and values fast onboarding, you're progressively enhancing an existing app, or you prefer template syntax with optional JSX rather than JSX-only or template-only approaches.",
},
],
bottomNote: (
<>
Angular excels when structure and consistency across large teams matter
most. React wins on flexibility and hiring pool. Vue hits a sweet spot
for smaller teams that want conventions without rigidity. The right
choice depends on team size, project complexity, and how much
architectural opinion you want from your framework.
</>
),
},
dotnet: {
sectionId: "dotnet-vs-alternatives",
title: ".NET vs Alternatives:",
highlight: "When You Need What",
subtitle: "We build across multiple backend stacks. Here's how we decide.",
gridCols: "md:grid-cols-3",
frameworks: [
{
name: ".NET (C#)",
bestFor:
"Enterprise applications, Windows-ecosystem integration, high-performance APIs, regulated industries",
why: "Mature type system, excellent tooling (Visual Studio, Rider), and first-class Azure integration. ASP.NET Core benchmarks among the fastest web frameworks. LINQ, Entity Framework, and built-in dependency injection reduce boilerplate.",
useWhen:
"Your organization is invested in the Microsoft ecosystem (Azure, SQL Server, Active Directory), you're in a regulated industry where .NET's enterprise track record matters, or you need high-throughput APIs with strong typing.",
},
{
name: "Java (Spring Boot)",
bestFor:
"Large-scale distributed systems, Android backends, organizations with existing JVM infrastructure",
why: "The JVM is the most battle-tested runtime for large-scale distributed systems. Spring Boot's ecosystem covers every enterprise pattern (CQRS, event sourcing, microservices). Massive talent pool in enterprise and financial services.",
useWhen:
"You have existing JVM infrastructure and expertise, you're building large distributed systems where Spring Cloud's service mesh tooling shines, or your hiring market has deeper Java talent than C# talent.",
},
{
name: "Node.js (TypeScript)",
bestFor:
"Full-stack JavaScript teams, real-time applications, lightweight API services, rapid prototyping",
why: "Same language across frontend and backend eliminates context switching. Event-driven architecture handles I/O-heavy workloads efficiently. Fastest path from prototype to production for JavaScript-native teams.",
useWhen:
"Your team is JavaScript/TypeScript-native and you want full-stack velocity, you're building real-time features (chat, notifications, live updates), or you need a lightweight API layer.",
},
],
bottomNote: (
<>
.NET and Java compete directly for enterprise backends — the choice
often comes down to existing infrastructure and team expertise rather
than technical superiority. Node.js serves a different niche: full-stack
velocity for JavaScript teams and I/O-heavy workloads. We see many
organizations running .NET for core business logic with Node.js handling
the real-time and API gateway layers.
</>
),
},
"react-native": {
sectionId: "rn-vs-flutter",
title: "React Native vs Flutter:",
Expand Down
43 changes: 43 additions & 0 deletions app/services/[slug]/slug-sections/IntroStatement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
"use client";

import { m } from "framer-motion";

const introStatements: Record<string, string> = {
react:
"Procedure is a React development company that builds production-grade SPAs, real-time dashboards, and component libraries for fintech, payments, and media companies. Since 2016, Procedure's senior React engineers have shipped interfaces handling millions of transactions for clients including Setu, ESPN, and Pine Labs. Every engineer on a React engagement has 3+ years of production React experience.",
nextjs:
"Procedure is a Next.js development company that delivers SEO-optimized, server-rendered applications with sub-second page loads for content-heavy platforms and SaaS products. Over 9 years, the team has built Next.js applications serving millions of users for clients in fintech, media, and hospitality, including Setu and Treebo. Engineers embed directly in client teams, shipping production Next.js code from day one.",
nodejs:
"Procedure is a Node.js development company that architects high-throughput APIs, event-driven microservices, and real-time backend systems for transaction-heavy industries. Since 2016, Procedure has delivered 100+ backend systems powering fintech platforms, payment infrastructure, and observability tools for clients including Setu, Pine Labs, and Last9. Teams start within 2-5 business days and operate as embedded extensions of the client's engineering organization.",
python:
"Procedure is a Python development company specializing in AI/ML pipelines, data engineering, and backend API systems for enterprises that need production-grade machine learning infrastructure. Since 2016, Procedure's Python engineers have built AI-powered platforms, ETL pipelines, and analytics backends across fintech, healthcare, and SaaS verticals for clients including KredX and Last9. The team brings deep expertise in FastAPI, Django, and ML frameworks like PyTorch and scikit-learn.",
angular:
"Procedure is an Angular development company that builds enterprise-grade admin portals, internal tools, and complex form-driven applications where type safety and long-term maintainability are non-negotiable. Since 2016, Procedure has delivered Angular platforms for telecom, fintech, and payments companies including MCLabs and Pine Labs, with client partnerships averaging 3+ years.",
flutter:
"Procedure is a Flutter development company that delivers cross-platform mobile and web applications from a single codebase, reducing time-to-market by up to 40% compared to native dual-platform development. Since 2016, the team has launched Flutter applications in hospitality, EdTech, and fintech for clients including Treebo and Timely, with production releases in as few as 12 weeks.",
"react-native":
"Procedure is a React Native development company that builds high-performance cross-platform mobile applications for fintech, media, and consumer-facing products where native-quality UX is a hard requirement. Since 2016, Procedure has shipped React Native apps processing real-time data, secure transactions, and media streams for clients including ESPN and KredX.",
dotnet:
"Procedure is a .NET development company that builds secure, high-availability backend systems, payment processing platforms, and enterprise APIs on the Microsoft stack. Since 2016, Procedure has delivered .NET solutions handling mission-critical transaction volumes for clients in payments, telecom, and fintech, including Pine Labs and MCLabs.",
};

export default function IntroStatement({ slug }: { slug: string }) {
const statement = introStatements[slug];
if (!statement) return null;

return (
<section className="relative py-12 sm:py-16 bg-base">
<div className="max-w-4xl mx-auto px-4 sm:px-6">
<m.p
initial={{ opacity: 0, y: 16 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="text-base sm:text-lg text-text-secondary leading-relaxed"
>
{statement}
</m.p>
</div>
</section>
);
}
Loading
Loading