Hans Leutenegger SA
一个瑞士招聘门户：三种语言、两类用户，以及必须即时响应的搜索引擎。
- 年份
- 2026
- 制作周期
- 6 周
- 技术栈
- Next.js · React · Tailwind · Vercel
- 信息架构
- 设计
- 开发
- 多语言
- SEO
由Kayzen Web上线在Vercel地址上的演示版本；正式域名归客户所有。
- 种语言，三套网站结构
- 3
- 创立年份
- 1965
- 项已量化的优化任务
- 2
需要解决的问题。
背景
Hans Leutenegger SA 是一家创立于 1965 年的瑞士工业人才中介机构：为工业、建筑和技术领域提供临时派遣与长期职位推荐服务。
限制
三类受众，三种语言。求职者想立刻找到离家近、对口的职位。企业想找一个招聘合作伙伴。而瑞士要求多语言——德语、法语、意大利语——这不是一个选项，而是生存的前提。
对策
职位搜索引擎直接成为首页：按地区和工种筛选，结果即时呈现，无需刷新。企业专区是一个平行且完整的入口。每种语言都有真实独立的网站结构，拥有各自的 URL 和 hreflang。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
以搜索为首页
地区和工种筛选器放在首屏，结果紧随其下。一个必须先浏览导航才能开始搜索的求职者，就是一个流失的求职者。
自荐申请始终可见
相当一部分成功推荐并非来自已发布的职位。自荐申请是一级入口，而不是页脚的一行注释。
明确的双入口
求职者和企业的需求截然相反。从页头开始就以三种语言明确区分两者。
项目配色
瑞士红
#B21E2A
品牌识别
工业灰
#4A5158
结构
白
#FFFFFF
背景
墨色
#1B1E22
正文
字体系统
标题字体
Inter 700
正文字体
Inter 400
三种语言只用一套字体：德语单词很长，意大利语行文较短。选用字符集完整、断字表现良好的字体，就无需做三套不同的版式。
幕后的技术实现。
- Next.js
- React
- Tailwind
- Vercel
客户端即时搜索
筛选无需重新加载页面。在招聘门户上，每一次与服务器的往返都要以用户流失为代价。
三套真实的网站结构
/de/、/fr/、/it/，配有相互指向的 hreflang 和各自的 canonical。如果只在客户端切换语言，被索引的将只有一种语言。
两项已明确的优化任务
性能 62 分，SEO 92 分。前者源于首次渲染时加载全部职位——解决方案是服务端分页。后者源于部分工种页面缺少描述。两项都已量化评估。
网站如何被搜索到。
每个工种、每个地区一个页面
“Emploi soudeur Suisse romande”（瑞士法语区 焊工职位）、“Stellen Elektriker Bern”（伯尔尼 电工职位）。“工种 × 地区”的交叉组合，是招聘门户 SEO 的基石。
JobPosting 结构化标记
每个职位都标明类型、工作地点、合同性质和有效期。正是它让职位得以出现在招聘类搜索结果中。
交付了哪些内容。
- 首页——职位搜索
- 按工种浏览职位
- 按地区浏览职位
- 自荐申请
- 企业专区
- 机构简介（始于 1965 年）
项目的推进过程。
信息架构
以搜索为首页，双入口，三种语言。
设计
即时筛选，自荐申请作为一级入口。
开发
客户端筛选、多语言网站结构、JobPosting。
后续计划
职位服务端分页，补充工种页面描述。
