bruno.exePROJECTScontact.exe
ROCK PURPLE

</rock purple>

ROCK PURPLE

Launch site and SEO for a Finnish artist's debut album and film.

live

rockpurple.com

1 graph

MusicGroup + Album + Movie + Event JSON-LD

9 Sep 2026

album and film released worldwide

SPECIFICATIONS

ROLESOLO BUILD
DATEJun 2026
TYPEWEB · SEO
STATUSLIVE
STACKreact · vite · typescript · tailwind · seo · schema.org · open graph · pwa
LINKS[live ↗]
AVAILABILITYrockpurple.com

Rock Purple is an independent artist from Finland whose debut, The Beginning of the Purple, is an album and a film conceived as a single work, released worldwide on 9 September 2026.

== WHAT IS THIS ==

Website and SEO for Rock Purple, an independent artist from Finland, built as client work. The site went live in June 2026 as a cinematic single-page teaser for the debut album and film "The Beginning of the Purple", which were released worldwide on 9 September 2026. Behind it sits a full technical SEO and structured-data layer, built so that the artist's own site answers a search for the name. Live at rockpurple.com.

== </live site> ==

LIVE SITErockpurple.com[open in a new tab ↗]
The Rock Purple home page: a track list, two music videos and the full album on a dark background
rockpurple.com, livestill image · the live site loads when this is on screen
rockpurple.com: the now playing track list, two music videos and the full album
rockpurple.com: the track list on a phone

== </the problem> ==

Rock Purple is an independent artist from Finland whose debut, The Beginning of the Purple, is an album and a film conceived as a single work, released worldwide on 9 September 2026. A brand-new artist name has no search footprint, and the project needed a home on the open web that the artist owns outright, away from streaming platforms and social feeds, in place before release day.

== </the approach> ==

A cinematic single-page launch site: a dark identity, a custom preloaded display face for the wordmark, the lead single "Two Sides" linked to YouTube, and direct routes out to Spotify, Apple Music, Instagram, TikTok and YouTube. Underneath sits a technical SEO and structured-data layer built from scratch: hand-written metadata, a canonical URL, typed Open Graph, and a Schema.org JSON-LD graph tying artist, album, film and release date together as one entity.

role & context

Solo freelance build for an independent artist client: the design, the build, and the whole SEO and structured-data layer.

== </the story> ==

Rock Purple is an independent recording artist from Finland. His debut, The Beginning of the Purple, is an album and a film conceived as a single work, and it was released worldwide on 9 September 2026. Bruno Jaamaa designed and built the artist's website and its search groundwork as freelance client work. The site was live at rockpurple.com by June 2026, about three months before the release.

A brand-new artist name has no search footprint. The brief was to give the project a home on the open web that the artist owns outright, away from streaming platforms and social feeds, and to prepare it so that a search for the name leads back to that home by release day.

The site opened as a cinematic single-page launch page: a dark identity, a custom display face for the wordmark, the lead single "Two Sides" linked through to YouTube, and direct routes out to Spotify, Apple Music, Instagram, TikTok and YouTube. It read as a teaser for the release rather than a conventional band site, restrained and built around one date.

The second half of the job was SEO, done from scratch. The site shipped with a technical SEO and structured-data layer that most artist pages never get: hand-written metadata, a canonical URL, Open Graph typed as an album, and one connected Schema.org graph describing the artist, the single, the album, the film and the release.

The site was updated in September 2026 for the release. It now carries the track list, two music videos and the full album. Jaamaa did the design, the build and the whole SEO layer on his own.

== </architecture> ==

A React single-page app built with Vite and TypeScript, styled with Tailwind on a small custom token palette. A custom display typeface is preloaded for the wordmark so the hero renders without a flash of fallback text. The page ships as an installable PWA with a web manifest, an apple-touch-icon, an SVG favicon and a themed status bar. It is static, fast and cheap to host, which is the right shape for a launch page that has to survive a traffic spike on release day.

The SEO and structured-data layer is the larger part of the engineering. The page carries a hand-written meta description and keyword set, a canonical URL, and index and follow robots directives. Open Graph is typed as music.album with a music:release_date of 2026-09-09 and a music:musician link, so link previews render as an album rather than a generic card; Twitter/X gets a summary_large_image card.

On top of that sits a Schema.org JSON-LD @graph that ties the project together as one entity: a MusicGroup (with sameAs links to the streaming and social profiles), MusicRecording nodes for the songs, a MusicAlbum and a Movie node for the film, an Event for the release date, and the WebSite itself. One connected graph lets search engines and AI crawlers read the artist, the record, the film and the launch as a single work.

== </key features> ==

One connected JSON-LD graph

A MusicGroup, MusicRecording nodes for the songs, a MusicAlbum and a Movie node, an Event for the release date, and the WebSite itself: one graph, so crawlers see a single work instead of competing interpretations.

Open Graph typed as music.album

A music:release_date of 2026-09-09 and a music:musician link mean link previews render as an album, not a generic card. Twitter/X gets a summary_large_image card.

Cinematic launch identity

Restrained and atmospheric, and built around one date: a teaser for the release rather than a conventional band site.

Static architecture

A React and Vite app with no backend: static, fast, cheap to host, and hard to break under a release-day traffic spike.

Installable PWA

Web manifest, apple-touch-icon, SVG favicon, themed status bar, and a preloaded wordmark face so the hero renders without a flash of fallback text.

AI-content declaration

An ai-content-declaration meta tag invites AI assistants to index and reference the page freely.

== </key decisions> ==

DECISION 01

Prepare the canonical result before the release, not after. An independent artist with a brand-new name has no search footprint, so the whole SEO build was front-loaded: structured data, Open Graph and keyword targeting all shipped at launch, three months ahead of the release date, so that the artist's own site would be in place before anyone searched for the name.

DECISION 02

Model the work as one connected graph, not a pile of tags. Because the release is an album and a film at once, the structured data links a MusicAlbum and a Movie to the same MusicGroup and Event. That mirrors how the project exists and gives crawlers one picture instead of competing interpretations.

DECISION 03

Keep it a single fast page, then expand. A static React and Vite app with no backend is the cheapest thing to run and the hardest thing to break under a release-day spike. The identity and SEO foundation were built to carry more later, and the September update for the release was made on the same foundation without re-platforming.

DECISION 04

Add an explicit AI-content declaration. The page carries an ai-content-declaration meta tag inviting AI assistants to index and reference it freely, a small bet that discovery increasingly runs through assistants as much as search engines.

== </what was learned> ==

>

Prepare the canonical result before the release, not after. Front-loading the SEO build means the artist's own site is in place before anyone searches for the name.

>

Model the work as one connected graph, not a pile of tags. Linking the MusicAlbum and Movie to the same MusicGroup and Event mirrors how the project exists.

>

A static single page is the right shape for a launch: cheapest to run, hardest to break, and the identity and SEO foundation carried the release update without re-platforming.

== </full stack> ==

react · vite · typescript · tailwind · seo · schema.org · open graph · pwa