Building a Searchable Card-Game Glossary with Static HTML, Lightweight JS and SEO Pages

At Jogos do Rei, we serve a very specific audience: Brazilian players who care about traditional card games like Buraco, Tranca and Truco. That audience has real search demand, but it also has a vocabulary problem.

Players search for terms like morto, manilha, canastra limpa, 3 preto and mão de onze. If you don't explain those terms clearly, you lose both search traffic and user trust.

So we built a searchable glossary page as a lightweight static site, with a simple goal: make the terminology easy to understand and easy to index.

Constraints

We did not need a complex frontend stack for this.

The requirements were:

• fast load on desktop and low-end mobile devices
• indexable pages for glossary terms
• simple client-side search
• internal links back to the main platform and rules pages
• easy maintenance by a small team

That pushed us toward a very simple architecture.

Stack

The glossary was built with:

• static HTML
• small amounts of vanilla JavaScript
• semantic headings and internal links
• sitemap and robots for crawlability

Public examples:

• Main platform: Jogos do Rei
• Glossary hub: glossario-buraco on GitHub Pages

Why static was the right choice

A glossary is mostly a content retrieval problem, not an application state problem.

That means the best tradeoff was:

• pre-render the page
• keep markup semantic
• use lightweight client-side filtering for UX
• avoid framework overhead

Static delivery gave us predictable performance, zero runtime complexity for the glossary itself and cleaner crawl paths.

Search experience

We added a client-side search box so users can type a term like morto or manilha and quickly find the relevant card.

This is intentionally simple. The page does not need fuzzy ranking, remote queries or a heavy component tree. It just needs to reduce friction.

For informational surfaces like this, the engineering question is usually not “how do we make this more sophisticated?”

It is “what is the smallest system that solves the problem reliably?”

SEO decisions that mattered

The useful parts were not fancy.

They were basic things done consistently:

• descriptive title and meta description
• canonical URL
• internal links back to the product and rules pages
• content grouped by game concepts
• readable copy written around the actual language players use

We also added supporting files such as sitemap/robots and expanded navigation so related pages reinforce each other instead of competing blindly.

Product lesson

When you run a niche product, terminology is part of onboarding.

A glossary is not just an SEO artifact. It also reduces support friction and helps new players understand game rules faster.

That was the main reason this project was worth shipping.

Takeaway

If your users search for domain-specific terms, a small static glossary can be one of the highest-leverage content/engineering hybrids you can build.

Keep it fast. Keep it indexable. Keep it useful.

And only add complexity if the problem really demands it.

If you want to see the public examples:

• Jogos do Rei
• Glossary project on GitHub Pages