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:
Top comments (0)