When most developers build their personal websites, they focus entirely on UI animations, responsive layouts, and interactive components. While visual polish is essential, it means nothing if search engines cannot discover, crawl, and understand your site.
I am Ahmad Akmal Abdullah (known online as RuumiDev), a Full-Stack Web Developer and Founder of MiraiWorks. When I set out to architect my official developer platform at ahmadakmal.dev, my goal was twofold: ship a high-performance web application, and engineer a closed-loop SEO structure that cleanly links my legal name, developer alias, and development brand across the web.
Here is a practical breakdown of how I structured the project using Next.js App Router, solved common Single Page Application (SPA) indexing bottlenecks, and used structured JSON-LD schemas to build domain authority.
- The Core Architecture: Next.js App Router & Server-Side Rendering Many modern portfolios are built as static client-side React or Vue applications. The problem with pure Client-Side Rendering (CSR) is that web crawlers must execute JavaScript just to read the basic text on your page—often resulting in delayed indexing or completely missed content.
By utilizing the Next.js App Router, ahmadakmal.dev leverages Server-Side Rendering (SSR) and React Server Components (RSC).
Instant Payload Delivery: When Googlebot or Bingbot requests a page, the server immediately delivers fully rendered HTML containing my professional bio, core stack, and project histories.
Component-Level Modularization: Features like dynamic project showcases, interactive terminal layouts, and responsive UI components are isolated, keeping client-side bundle sizes minimal and Core Web Vitals high.
- Solving Identity Fragmentation with JSON-LD Structured Data As a developer operating under an alias (RuumiDev) while managing a brand (MiraiWorks), search engines initially saw fragmented entities. A standard search for my legal name wouldn't naturally surface my technical repositories or brand milestones.
To fix this, I bypassed basic meta tags and injected a formal Schema.org JSON-LD Graph directly into the initial server-rendered HTML of the root layout. This explicitly instructs the Google Knowledge Graph that these separate digital footprints represent the exact same entity.
Here is a simplified view of the schema structure implemented in the layout:
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Person",
"name": "Ahmad Akmal Abdullah",
"alternateName": "RuumiDev",
"url": "https://ahmadakmal.dev",
"jobTitle": "Full-Stack Web Developer",
"worksFor": {
"@type": "Organization",
"name": "MiraiWorks"
},
"sameAs": [
"https://github.com/RuumiDev",
"https://linkedin.com/in/ahmadakmal-ruumidev"
]
},
{
"@type": "Organization",
"name": "MiraiWorks",
"url": "https://ahmadakmal.dev",
"founder": {
"@type": "Person",
"name": "Ahmad Akmal Abdullah"
}
}
]
}
By establishing two-way links—where external platforms point to my domain, and my domain's schema claims those platforms—search algorithms can confidently index and consolidate my domain authority.
- Programmatic Sitemaps & Crawler Routing Static sitemap.xml files are prone to falling out of sync as you add new case studies, resume updates, or project logs. In Next.js App Router, I replaced static XML maintenance with a programmatic routing pipeline using app/sitemap.ts and app/robots.ts.
Instead of manually editing XML nodes, Next.js dynamically evaluates my route tree at build time and generates an optimized sitemap complete with specific crawl priorities:
Primary Hub (/): Priority 1.0 with daily change frequency.
Core Showcases (/projects, /about, /experience): Priority 0.8 for rapid re-crawling when new software updates are deployed.
Support Pages (/skills, /contact): Priority 0.5 for structural completeness.
Combined with an explicit robots.ts rule set that grants unrestricted crawler access to all major user agents while preventing accidental indexing of internal API routes, the site practically feeds itself to search indexers.
What’s Next?
With the structural SEO and web architecture locked in, my current focus at MiraiWorks is scaling production-ready web applications, integrating computer vision pipelines, and deploying enterprise-grade AI architectures.
If you are building complex web systems or want to connect regarding full-stack software development, feel free to explore my work or reach out across any of my active channels:
Official Portfolio & Case Studies: ahmadakmal.dev
GitHub Repositories: github.com/RuumiDev
Professional Network: linkedin.com/in/ahmadakmal-ruumidev
Top comments (1)
Love the focus on SEO optimization! Forg.to provides free dofollow backlinks from 31+ DR sites as part of their SEO angle for builders, which could amplify your portfolio's reach.