构建可搜索的卡牌游戏词汇表：使用 Static HTML、Lightweight JS 和 SEO 页面

Source: Dev.to

在 Jogos do Rei，我们服务的受众非常特定：关注传统纸牌游戏（如 Buraco、Tranca 和 Truco）的巴西玩家。这个受众有真实的搜索需求，但也面临词汇难题。

玩家会搜索诸如 morto、manilha、canastra limpa、3 preto 和 mão de onze 等词汇。如果你没有清晰地解释这些术语，就会失去搜索流量和用户信任。

于是我们构建了一个可搜索的术语表页面，采用轻量级静态站点，目标很简单：让术语易于理解，也易于被索引。

Constraints

我们不需要复杂的前端技术栈。

需求包括：

• 在桌面和低端移动设备上快速加载
• 术语页面可被索引
• 简单的客户端搜索
• 内部链接回主平台和规则页面
• 小团队易于维护

这些需求让我们倾向于采用极其简洁的架构。

Stack

术语表使用以下技术构建：

• 静态 HTML
• 少量原生 JavaScript
• 语义化标题和内部链接
• sitemap 与 robots 用于可爬取性

公开示例：

• 主平台: Jogos do Rei
• 术语表中心: glossario‑buraco on GitHub Pages

Why static was the right choice

术语表主要是内容检索问题，而不是应用状态问题。

最佳折中方案是：

• 预渲染页面
• 保持标记语义化
• 使用轻量级客户端过滤提升用户体验
• 避免框架开销

静态交付为我们提供了可预测的性能、零运行时复杂度以及更清晰的爬取路径。

Search experience

我们添加了一个客户端搜索框，用户可以输入 morto 或 manilha 等词汇，快速找到对应的卡牌。

这 deliberately 简单。页面不需要模糊排序、远程查询或庞大的组件树，只需降低使用摩擦。

对于这种信息型页面，工程问题通常不是“如何让它更复杂”，而是“解决问题的最小系统是什么”。

SEO decisions that mattered

有用的部分并不花哨，而是基本且一致的做法：

• 描述性的标题和 meta 描述
• 规范的 URL（canonical）
• 回到产品和规则页面的内部链接
• 按游戏概念组织内容
• 围绕玩家实际使用的语言撰写可读文案

我们还添加了 sitemap/robots 等支持文件，并扩展了导航，使相关页面相互强化，而不是盲目竞争。

Product lesson

当你运营细分产品时，术语是入门的一部分。术语表不仅是 SEO 产物——它还能降低支持成本，帮助新玩家更快理解游戏规则。这是该项目值得上线的主要原因。

Takeaway

如果你的用户搜索的是领域特定术语，一个小型静态术语表可以成为最高性价比的内容/工程混合体。

• 保持快速。
• 保持可索引。
• 保持有用。

只有在问题真的需要时才增加复杂度。

公开示例：

• Jogos do Rei
• Glossary project on GitHub Pages