Sandi Maulana Juhana
⛅
sandimaulanajuhana.com/insights/website-bergaya-desktop-dengan-seo-kuat

April 29, 2026 at 4:05 PM

Website Bergaya Desktop dengan SEO yang Kuat

Sebuah refleksi tentang membangun website bergaya desktop yang playful tanpa mengorbankan struktur semantik, visibilitas pencarian, dan keterbacaan untuk AI.

Og Image

Catatan tentang Interface Eksperimental, Mesin Pencari, dan Keterbacaan AI

Sudah cukup lama saya tertarik dengan website yang tidak terasa seperti website biasa.

Bukan karena website biasa itu buruk, tetapi karena web sebenarnya jauh lebih luas daripada landing page, dashboard, blog, dan katalog produk. Browser juga bisa terasa seperti sebuah sistem operasi kecil. Sebuah portfolio bisa terasa seperti desktop. Sebuah catatan bisa terbuka di dalam window. Sebuah project bisa hidup di dalam sesuatu yang menyerupai Finder, Preview, Photos, atau Safari.

Namun ada satu masalah yang biasanya muncul cukup cepat ketika kita membangun interface seperti ini:

Bagaimana caranya membuat website bergaya desktop tetap terbaca dengan baik oleh mesin pencari?

Dan hari ini, pertanyaannya menjadi sedikit lebih luas:

Bagaimana caranya membuat website seperti ini juga terbaca dengan baik oleh crawler AI?

Tulisan ini bukan argumen bahwa setiap portfolio harus berubah menjadi interface desktop. Ini lebih seperti catatan pribadi tentang satu ketegangan yang sering saya pikirkan: bagaimana membangun pengalaman yang playful dan terasa seperti aplikasi, tanpa meninggalkan fondasi utama dari web.

Karena pada akhirnya, website tetap hidup di atas web.

Ia tetap perlu memiliki URL. Ia tetap perlu memiliki konten yang bisa dibaca. Ia tetap perlu memiliki struktur semantik. Ia tetap perlu bisa dipahami, bahkan ketika interface-nya dibuat tidak biasa.

1. Masalahnya: Interface yang Indah, tetapi Sulit Dipahami Mesin

Website bergaya desktop biasanya berangkat dari sebuah ide visual.

Window. Dock. Menu bar. Finder. Notes. Preview. Interaksi-interaksi kecil yang membuat website terasa hidup.

Dari sudut pandang manusia, ini bisa terasa menyenangkan. User tidak hanya membaca website, tetapi juga menjelajahinya.

Namun dari sudut pandang crawler, interface yang sama bisa menjadi kurang jelas.

Jika semuanya hanya hidup di dalam client-side state, beberapa masalah bisa muncul:

  • Konten penting tersembunyi di balik interaksi.
  • Halaman tidak memiliki URL yang stabil.
  • Metadata menjadi terlalu umum.
  • Internal link menjadi lemah atau tidak ada.
  • Konten yang sama sulit dikutip, diindeks, atau dirangkum.
  • Crawler AI mungkin memahami cangkang visualnya, tetapi kehilangan makna di baliknya.

Di sinilah banyak website eksperimental menjadi rapuh.

Tampilannya menarik untuk manusia, tetapi tidak terlihat atau membingungkan untuk mesin.

Menurut saya, ini bukan berarti kita harus menghindari UI eksperimental. Ini hanya berarti arsitekturnya perlu dirancang dengan lebih hati-hati.

Kesalahannya bukan pada membuat website terasa seperti desktop.

Kesalahannya adalah ketika desktop layer dibiarkan menjadi satu-satunya sumber kebenaran.

2. Prinsipnya: Experience Layer dan Semantic Layer Perlu Dipisahkan

Prinsip yang sering saya pegang sederhana:

Interface boleh playful, tetapi konten harus tetap semantik.

Bagi saya, ini berarti memisahkan dua layer:

  • Experience layer: desktop UI, windows, dock, finder, preview, notes, dan interaksi.
  • Semantic layer: routes, metadata, konten MDX, structured data, sitemap, dan halaman yang mudah dibaca crawler.

Dua layer ini seharusnya tidak saling bertabrakan.

Desktop layer ada untuk manusia. Semantic layer ada untuk mesin pencari, crawler AI, sharing, dan keterbacaan jangka panjang.

Ketika dua layer ini dicampur tanpa batas yang jelas, codebase biasanya mulai terasa berat. Komponen UI mulai memiliki terlalu banyak konten. Halaman SEO menjadi sesuatu yang dipikirkan belakangan. Route ditambahkan hanya ketika ada yang rusak. Metadata menjadi repetitif. Pada akhirnya, pengalaman user dan pengalaman pencarian sama-sama melemah.

Model yang lebih sehat, menurut saya, adalah menjadikan konten sebagai source of truth.

Lalu konten yang sama bisa dirender dalam beberapa pengalaman berbeda.

Sebuah dokumen bisa muncul di dalam window bergaya TextEdit. Dokumen yang sama juga bisa memiliki route full page yang bersih. Sebuah project bisa dibuka dari desktop. Project yang sama juga bisa diindeks sebagai halaman artikel biasa.

Satu sumber konten. Beberapa presentation layer. Tujuan yang berbeda.

Ini bukan hanya lebih baik untuk SEO. Ini juga membuat sistem lebih mudah dirawat.

3. Arsitektur: MDX sebagai Source of Truth, Desktop sebagai Experience

Arsitektur yang saya sukai adalah content-first.

Alih-alih menanam semuanya secara hardcoded di dalam window, setiap item yang bermakna sebaiknya memiliki file konten dan metadata sendiri.

Sebagai contoh, sebuah desktop item bisa memiliki struktur seperti ini:

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

Sebuah dokumen bisa memiliki struktur seperti ini:

public/
  documents/
    sandi.mdx/
      page.mdx

Dan sebuah halaman standalone bisa memiliki struktur seperti ini:

public/
  about/
    page.mdx

Struktur ini terlihat sederhana, tetapi ia mengubah seluruh cara berpikir.

Window tidak lagi menjadi pemilik konten.

Window hanya menjadi salah satu cara untuk mengalami konten.

Itu perbedaan yang penting.

Di website bergaya desktop, Notes window, Preview window, TextEdit window, Finder window, dan Photos window bisa terasa sangat interaktif. Tetapi kontennya tetap perlu disimpan dalam bentuk yang bisa dibaca, diparse, diindeks, digunakan ulang, dan dirender di tempat lain.

MDX cocok untuk kebutuhan ini karena bisa menyimpan metadata dan body content sekaligus:

---
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.

Dari satu sumber ini, aplikasi bisa menghasilkan:

  • desktop items.
  • Finder rows.
  • Preview content.
  • full-page SEO routes.
  • Open Graph metadata.
  • sitemap entries.
  • structured data.
  • teks yang mudah dibaca AI.

Di titik ini, website mulai terasa lebih matang.

UI-nya bisa ekspresif, tetapi data model-nya tetap disiplin.

4. Fondasi SEO: Route Tetap Penting

Satu pelajaran yang berkali-kali saya temui: SEO bukan hanya soal keyword.

SEO adalah arsitektur.

Website bergaya desktop tetap membutuhkan fondasi web yang normal:

  • canonical URLs.
  • metadata per halaman.
  • Open Graph dan Twitter metadata.
  • sitemap.
  • robots.txt.
  • structured data.
  • internal links.
  • heading yang mudah dibaca.
  • hierarki route yang bersih.

Jika sebuah portfolio hanya memiliki satu route seperti /desktop, maka semuanya bergantung pada satu halaman. Itu mungkin cukup untuk eksperimen visual kecil, tetapi tidak cukup kuat untuk website yang kaya konten.

Pola yang lebih baik adalah menjaga desktop sebagai pengalaman utama, sambil tetap menyediakan route semantik untuk konten-konten penting.

Sebagai contoh:

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

Route desktop menjadi pintu masuk yang imersif.

Route konten menjadi pintu masuk yang mudah dibaca dan diindeks.

Ini tidak melemahkan konsep desktop. Menurut saya, justru ini menguatkannya.

Artinya, interface itu bukan sekadar trik visual. Ada information architecture yang nyata di belakangnya.

Saya juga melihat ini sebagai peluang yang sering terlewat di banyak website kreatif. Banyak energi dicurahkan untuk metafora visual, tetapi tidak cukup banyak untuk model route.

Untuk manusia, window mungkin sudah cukup. Untuk mesin pencari, route tetap penting. Untuk sharing, URL tetap menjadi bahasa utama web.

Jadi saya tidak melihat full page sebagai lawan dari desktop UI.

Saya melihatnya sebagai pasangan semantik.

5. AI SEO: Keterbacaan yang Lebih Luas dari Mesin Pencari

AI SEO masih menjadi area yang terus berkembang, tetapi satu prinsip sudah terasa jelas bagi saya:

Sistem AI membutuhkan konten yang bersih dan mudah dipahami.

AI mungkin lebih fleksibel daripada crawler tradisional, tetapi ia tetap terbantu oleh kejelasan.

Untuk website bergaya desktop, ini berarti konten tidak cukup hanya tersedia secara visual. Konten juga perlu bisa dipahami secara tekstual.

Beberapa pola praktis yang menurut saya berguna:

  • Sediakan versi full page untuk konten penting.
  • Gunakan heading yang deskriptif.
  • Hindari menyembunyikan seluruh makna di dalam client-only state.
  • Gunakan structured metadata.
  • Buat konten bilingual secara eksplisit ketika website mendukung banyak bahasa.
  • Rawat sitemap.xml.
  • Rawat robots.txt.
  • Sediakan llms.txt dan llms-full.txt ketika memang relevan.

Tujuannya bukan untuk "mengakali" AI.

Tujuannya adalah membuat website lebih mudah dipahami.

Itu dua hal yang berbeda.

Ketika sebuah website memiliki konten yang jelas, route yang jelas, ownership yang jelas, dan ringkasan yang jelas, pembaca manusia dan pembaca mesin sama-sama terbantu.

Ini menjadi sangat penting untuk personal website dan portfolio. Portfolio bukan hanya galeri pekerjaan. Ia juga merupakan permukaan pengetahuan. Ia memberi tahu mesin pencari dan sistem AI:

Siapa orang ini? Apa yang ia bangun? Topik apa yang ia pahami? Seperti apa kualitas pertimbangan engineering-nya?

Jika informasi itu hanya hidup di dalam interface yang indah tetapi tidak transparan, website mungkin terasa mengesankan, tetapi tetap sulit diinterpretasikan.

Karena itu saya menyukai gagasan file pendukung yang AI-readable.

Bukan sebagai pengganti website.

Tetapi sebagai peta yang lebih jelas.

6. Studi Kasus: Desktop Portfolio yang Tetap Menghormati Web

Dalam arah portfolio saya sendiri, desktop interface tidak dimaksudkan untuk menggantikan web.

Ia dimaksudkan untuk memberi web rasa yang berbeda.

Desktop bisa menjadi pengalaman utama:

  • Dock apps sebagai entry point.
  • Window bergaya Finder untuk collection.
  • Preview window untuk project.
  • Window bergaya TextEdit untuk dokumen.
  • Notes untuk insights.
  • Photos untuk visual assets.
  • Spotlight untuk discovery yang cepat.

Tetapi di balik pengalaman itu, kontennya tetap perlu terorganisir.

Konten About tidak seharusnya hanya hidup di dalam About window. Ia juga bisa hidup di dalam file konten dan dirender ke /about/en dan /about/id.

Perkenalan personal yang lebih panjang tidak seharusnya hanya bisa dibaca di dalam TextEdit. Ia juga bisa memiliki /profile/en dan /profile/id.

Insights tidak seharusnya hanya muncul sebagai notes di dalam desktop. Ia juga perlu ada sebagai route artikel.

Project tidak seharusnya hanya terbuka di dalam Preview window. Ia juga perlu memiliki URL yang bersih, metadata, dan halaman yang bisa diindeks.

Inilah hybrid model yang saat ini saya sukai:

Desktop UI untuk eksplorasi.
Full-page routes untuk indexing.
MDX files sebagai source of truth.
SEO metadata sebagai konteks publik.
llms.txt sebagai peta yang AI-readable.

Ini bukan setup yang paling sederhana.

Tetapi terasa jujur terhadap web.

Desktop experience memberi personality. Semantic routes memberi struktur. Content files memberi maintainability. SEO layer memberi discoverability. AI-readable layer memberi kejelasan.

Ketika bagian-bagian ini dipisahkan dengan baik, website menjadi lebih mudah berkembang.

Menambah dokumen baru tidak perlu menulis ulang window. Menambah route SEO baru tidak perlu menduplikasi konten. Menambah bahasa baru tidak perlu mendesain ulang seluruh interface. Menambah narration atau media yang lebih kaya bisa ditempelkan ke konten, bukan dipaksakan ke setiap komponen.

Ini jenis struktur yang cenderung bertahan lebih lama.

Refleksi Penutup

Saya tidak berpikir website bergaya desktop harus berusaha bertingkah seperti website normal dalam setiap detail.

Kalau begitu, interface-nya kehilangan karakter.

Tetapi saya juga tidak berpikir UI yang kreatif memberi kita izin untuk mengabaikan fondasi web.

Tantangannya bukan memilih antara interface yang playful dan SEO yang serius.

Tantangannya adalah merancang batas yang sehat di antara keduanya.

Bagi saya, pendekatan yang paling sehat adalah ini:

Biarkan desktop menjadi experience. Biarkan konten tetap semantik. Biarkan routes mudah dibaca. Biarkan metadata menjelaskan halaman. Biarkan AI dan mesin pencari menemukan peta yang jelas.

Pada akhirnya, SEO yang kuat untuk website eksperimental bukan tentang membuat desain menjadi kurang kreatif.

Ia tentang membuat arsitekturnya lebih matang.

Dan bagi saya, di situlah website bergaya desktop bisa menjadi lebih dari sekadar konsep visual.

Ia menjadi pengalaman web yang serius.