Sandi Maulana Juhana
⛅
sandimaulanajuhana.com/insights/desktop-style-website-with-powerful-seo

April 29, 2026 at 5:00 PM

Desktop-Style Website with Powerful SEO

A reflection on building a playful desktop-style website without sacrificing semantic structure, search visibility, and AI readability.

Og Image

Notes on Experimental Interfaces, Search Engines, and AI Readability

For a long time, I have been interested in websites that do not feel like ordinary websites.

Not because ordinary websites are bad, but because the web is much wider than landing pages, dashboards, blogs, and product catalogs. The browser can also become a small operating system. A portfolio can feel like a desktop. A note can open inside a window. A project can live inside something that resembles Finder, Preview, Photos, or Safari.

But there is one problem that appears quite quickly when we build this kind of interface:

How do we keep an experimental desktop-style website readable for search engines?

And today, the question becomes slightly wider:

How do we keep it readable for AI crawlers too?

This article is not an argument that every portfolio should become a desktop interface. It is more of a personal note on a tension I often think about: how to build a playful, app-like experience without abandoning the fundamentals of the web.

Because in the end, a website still lives on the web.

It should have URLs. It should have readable content. It should have semantic structure. It should be understandable even when the interface becomes unusual.

1. The Problem: Beautiful Interfaces That Machines Cannot Understand

A desktop-style website usually starts from a visual idea.

Windows. Dock. Menu bar. Finder. Notes. Preview. Small interactions that make the website feel alive.

From a human perspective, this can be delightful. The user does not only read the website; they explore it.

But from a crawler perspective, the same interface can become unclear.

If everything only exists inside client-side state, several problems may appear:

  • Important content is hidden behind interactions.
  • Pages do not have stable URLs.
  • Metadata becomes too generic.
  • Internal links are weak or missing.
  • The same content is difficult to quote, index, or summarize.
  • AI crawlers may understand the visual shell, but miss the meaning behind it.

This is where many experimental websites become fragile.

They look interesting to users, but invisible or confusing to machines.

I do not think this means we should avoid experimental UI. It only means we need to design the architecture more carefully.

The mistake is not making a website feel like a desktop.

The mistake is letting the desktop layer become the only source of truth.

2. The Principle: Experience Layer and Semantic Layer Should Be Separated

The principle I keep returning to is simple:

The interface can be playful, but the content should remain semantic.

For me, this means separating two layers:

  • Experience layer: the desktop UI, windows, dock, finder, preview, notes, and interactions.
  • Semantic layer: the routes, metadata, MDX content, structured data, sitemap, and crawler-readable pages.

These two layers should not fight each other.

The desktop layer exists for humans. The semantic layer exists for search engines, AI crawlers, sharing, and long-term readability.

When these layers are mixed carelessly, the codebase usually starts to feel heavy. UI components begin to own too much content. SEO pages become afterthoughts. Routes are added only when something breaks. Metadata becomes repetitive. Eventually, both the user experience and the search experience suffer.

The better model, in my opinion, is to let the content become the source of truth.

Then the same content can be rendered in different experiences.

A document can appear inside a TextEdit-style window. The same document can also have a clean full-page route. A project can be opened from the desktop. The same project can also be indexed as a normal article page.

One content source. Multiple presentation layers. Different purposes.

This is not only better for SEO. It also makes the system easier to maintain.

3. Architecture: MDX as Source of Truth, Desktop as Experience

The architecture I prefer is content-first.

Instead of hardcoding everything inside windows, each meaningful item should have its own content file and metadata.

For example, a desktop item can have:

public/
  desktop/
    items/
      pharmart/
        page.mdx
        pharmart.webp

A document can have:

public/
  documents/
    sandi.mdx/
      page.mdx

And a standalone page can have:

public/
  about/
    page.mdx

This structure may look simple, but it changes the entire mental model.

The window is no longer the owner of the content.

The window only becomes one way to experience the content.

That is an important distinction.

In a desktop-style website, a Notes window, Preview window, TextEdit window, Finder window, and Photos window can all feel very interactive. But the content should still be stored in a form that can be read, parsed, indexed, reused, and rendered elsewhere.

MDX works well for this because it can hold both metadata and body content:

---
title: Desktop-Style Website with Powerful SEO
description: A reflection on building a playful interface without sacrificing search visibility.
language: en
category: Web Development
---

## The Problem

Content goes here.

From this single source, the application can generate:

  • desktop items.
  • Finder rows.
  • Preview content.
  • full-page SEO routes.
  • Open Graph metadata.
  • sitemap entries.
  • structured data.
  • AI-readable text files.

This is where the website starts to feel more mature.

The UI can be expressive, but the data model remains disciplined.

4. SEO Foundation: Routes Still Matter

One lesson I have learned repeatedly: SEO is not only about keywords.

SEO is architecture.

A desktop-style website still needs normal web fundamentals:

  • canonical URLs.
  • metadata per page.
  • Open Graph and Twitter metadata.
  • sitemap.
  • robots.txt.
  • structured data.
  • internal links.
  • readable headings.
  • clean route hierarchy.

If a portfolio only has one route like /desktop, then everything depends on one page. That may be enough for a small visual experiment, but it is not strong enough for a content-rich website.

A better pattern is to keep the desktop as the main experience, while also providing semantic routes for important content.

For example:

/desktop
/about/en
/about/id
/profile/en
/profile/id
/work/cobakso
/insights/desktop-style-website-with-powerful-seo

The desktop route becomes the immersive entry.

The content routes become the readable and indexable entry.

This does not weaken the desktop concept. In my opinion, it strengthens it.

It means the interface is not just a visual trick. It has real information architecture behind it.

I also think this is where many creative websites miss an opportunity. They spend a lot of energy on the visual metaphor, but not enough on the route model.

For humans, a window can be enough. For search engines, a route is still important. For sharing, a URL is still the language of the web.

So I do not see full pages as enemies of desktop UI.

I see them as the semantic counterpart.

5. AI SEO: Readability Beyond Search Engines

AI SEO is still a developing area, but one principle already feels clear to me:

AI systems need clean, understandable content.

They may be more flexible than traditional crawlers, but they still benefit from clarity.

For a desktop-style website, this means the content should not only be visually available. It should also be textually understandable.

Some practical patterns I consider useful:

  • Provide full-page versions of important content.
  • Keep headings descriptive.
  • Avoid hiding all meaning inside client-only state.
  • Use structured metadata.
  • Keep bilingual content explicit when the website supports multiple languages.
  • Maintain sitemap.xml.
  • Maintain robots.txt.
  • Provide llms.txt and llms-full.txt when appropriate.

The goal is not to "game" AI.

The goal is to make the website easier to understand.

There is a difference.

When a website has clear content, clear routes, clear ownership, and clear summaries, both human readers and machine readers benefit.

This is especially important for personal websites and portfolios. A portfolio is not only a gallery of work. It is also a knowledge surface. It tells search engines and AI systems:

Who is this person? What do they build? What topics do they understand? What kind of engineering judgment do they have?

If that information only lives inside a beautiful but opaque interface, the website may feel impressive but remain difficult to interpret.

That is why I like the idea of AI-readable supporting files.

Not as a replacement for the website.

But as a clearer map.

6. Case Study: A Desktop Portfolio That Still Respects the Web

In my own portfolio direction, the desktop interface is not meant to replace the web.

It is meant to give the web a different feeling.

The desktop can become the main experience:

  • Dock apps for entry points.
  • Finder-like windows for collections.
  • Preview windows for projects.
  • TextEdit-style windows for documents.
  • Notes for insights.
  • Photos for visual assets.
  • Spotlight for quick discovery.

But behind that experience, the content still needs to be organized.

About content should not only live inside an About window. It can also live in a content file and be rendered into /about/en and /about/id.

A longer personal introduction should not only be readable inside TextEdit. It can also have /profile/en and /profile/id.

Insights should not only appear as notes inside the desktop. They should also exist as article routes.

Projects should not only open inside a Preview window. They should also have clean URLs, metadata, and indexable pages.

This is the hybrid model I currently like:

Desktop UI for exploration.
Full-page routes for indexing.
MDX files as source of truth.
SEO metadata as public context.
llms.txt as AI-readable map.

It is not the simplest setup.

But it feels honest to the web.

The desktop experience gives personality. The semantic routes give structure. The content files give maintainability. The SEO layer gives discoverability. The AI-readable layer gives clarity.

When these parts are separated properly, the website becomes easier to grow.

Adding a new document does not require rewriting a window. Adding a new SEO route does not require duplicating content. Adding a new language does not require redesigning the entire interface. Adding narration or richer media can be attached to the content, not forced into every component.

This is the kind of structure that tends to age well.

Closing Reflection

I do not think a desktop-style website should try to behave like a normal website in every detail.

If it does, the interface loses its character.

But I also do not think creative UI gives us permission to ignore the fundamentals of the web.

The challenge is not choosing between playful interface and serious SEO.

The challenge is designing the boundary between them.

For me, the healthiest approach is this:

Let the desktop be the experience. Let the content remain semantic. Let the routes be readable. Let the metadata explain the page. Let AI and search engines find a clear map.

In the end, strong SEO for an experimental website is not about making the design less creative.

It is about making the architecture more thoughtful.

And that, to me, is where a desktop-style website can become more than a visual concept.

It becomes a serious web experience.