
为一家虚构的全球豪宅经纪公司打造的概念网站:16 个英文页面外加俄文版,7 座城市的 16 套房源、canvas 地球仪、3D 看房和三步预约看房。
概述
我制作概念网站,是为了在还没有客户项目的领域展示能力。VERIDA 就是其中之一:一家覆盖七座城市的全球豪宅经纪公司网站——巴塞罗那、迪拜、纽约、上海、莫斯科、索契和巴厘岛。公司、顾问、房源、价格和办公室都是虚构的。
昂贵的房子很少只看一页就买下,所以网站要支撑一个漫长的决策:比较不同城市的房源、看到室内、了解每个地区的准入条件、收益和居留政策,并且无需打电话就能申请看房。同时它要有英文和俄文两个版本。
16
英、俄两个版本各自的页面数
来源:网站源文件,2026年9月22日
7
目录覆盖的城市,共 16 套房源
来源:网站源文件,2026年9月22日
1,250
canvas 地球仪的点,带城市标记
来源:网站源文件,2026年9月22日
69 / 94
首页性能:手机/桌面
来源:Lighthouse 13.4,2026年9月22日
思路
每个版本 16 个页面:首页、房源列表、房源详情、地区、三步看房申请、申请已提交、收藏、账户、服务、专栏、关于、联系、隐私、条款、Cookie 和 404。目录包含 7 座城市的 16 套房源,可按城市、类型、卧室数和价格筛选并排序。
房源页展示关键数据、带灯箱的图库、基于 2800×900 全景图、拖动即可环视的 3D 看房、规格、地图、按揭估算、顾问和相似房源。看房申请分三步——方式、日期与时间、联系方式——最后进入确认页;联系页在世界地图上标出 5 个办公室。
首页以视频首屏开场。由 1,250 个点组成的 canvas 地球仪带有城市标记,会与旁边的城市列表同步自动旋转;卡片随光标做 3D 倾斜,标题通过行遮罩浮现,页面之间以淡入淡出切换。网站为纯 HTML、CSS 和 JavaScript,使用 GSAP、ScrollTrigger 和 Lenis;申请、收藏和账户保存在浏览器的 localStorage 中。
图集
成果
现在它是一个有两个版本的可用概念:每版 16 个页面、7 座城市的 16 套房源、7 个地区、6 项服务、5 个办公室和 4 篇文章,无需服务器即可从目录走到确认看房。2026 年 9 月 22 日对英文版 15 个页面的检查显示:15 个标题全部唯一、每页一个 H1、100% 的图片有替代文本、内部失效链接为 0。
Lighthouse 给英文首页的 SEO 在手机和桌面端均为 100,无障碍移动端 95、桌面端 98,性能桌面端 94、移动端 69。拖累移动端的是视频:手机上页面为 16.7 MB,LCP 7.4 秒;桌面端为 6.8 MB,LCP 1.5 秒。
SEO 评估
2026 年 9 月 22 日,Lighthouse 给英文首页的 SEO 在手机和桌面端均为 100;性能移动端 69(LCP 7.4 秒,16.7 MB),桌面端 94(LCP 1.5 秒)。在英文版渲染的 15 个页面(除 404 外全部)中基础项合格,但 15 个页面都缺少 canonical、Open Graph 和 JSON-LD,没有 sitemap.xml 或 robots.txt,英文版与俄文版之间也没有 hreflang。
Lighthouse
移动端
- 性能:69 / 100
- 无障碍:95 / 100
- 最佳实践:77 / 100
- SEO:100 / 100
- LCP
- 7.4 秒
- CLS
- 0
- TBT
- 0 毫秒
- 体积
- 17 MB
桌面端
- 性能:94 / 100
- 无障碍:98 / 100
- 最佳实践:77 / 100
- SEO:100 / 100
- LCP
- 1.5 秒
- CLS
- 0
- TBT
- 0 毫秒
- 体积
- 6.8 MB
已具备:15 个页面标题全部唯一,15 个页面各有一个 H1,声明了 en 语言,390 px 下无横向滚动,100% 的图片有替代文本,内部失效链接为 0;Lighthouse 无障碍移动端 95、桌面端 98,两端 CLS 均为 0。部分具备:15 个描述中 8 个长度在 70–170 字符。
在真实域名上线前:两个版本的每个页面都加上规范 URL 以及 Open Graph 标题和图片;英文版与俄文版之间加入 hreflang;房源页加入 RealEstateListing 和 Offer 的 JSON-LD,并加入 RealEstateAgent、Organization 和 BreadcrumbList;sitemap.xml 和 robots.txt;标题控制在 30–65 字符(目前 15 个中 7 个符合),其余 7 个页面的描述控制在 70–170 字符;视频自托管,以去掉 Pexels CDN 的第三方 Cookie(它使最佳实践停在 77);以及更轻的移动端首屏,降低 16.7 MB 的页面体积和 7.4 秒的 LCP。
| 检查项 | 结果 | 状态 |
|---|---|---|
| 页面标题不重复 | 15/15 | 通过 |
| 标题长度 | 7/15 | 未通过 |
| 元描述 | 8/15 | 待改进 |
| 每页一个 H1 | 15/15 | 通过 |
| 语言属性 | en | 通过 |
| 移动设备适配 | 390 px | 通过 |
| 图片替代文本 | 100% | 通过 |
| 失效的内部链接 | 0 | 通过 |
| 规范网址 | 0/15 | 未通过 |
| Open Graph 标签 | 0/15 | 未通过 |
| 结构化数据 | 0/15 | 未通过 |
| XML 站点地图 | 0/2 | 未通过 |
本案例不能证明的
VERIDA 是我在 VITON13 为展示能力而做的概念,不是委托项目。经纪公司、顾问、房源、价格和办公室都是虚构的。网站没有域名、访客、搜索流量,也没有咨询或成交,因此无法证明任何获客效果。照片和视频来自 Unsplash 和 Pexels 的授权图库素材。
Lighthouse 数据是某一天对英文首页的实验室测量,各项检查也只覆盖英文版。SEO 100 只涵盖基础:缺少规范 URL、Open Graph、JSON-LD、sitemap.xml 和 robots.txt,两个版本之间也还没有用 hreflang 互相关联。看房申请只保存在访客的浏览器中。
在筹划类似的项目?每条消息我都会亲自阅读。
下一个项目
ORIVA概念电商网站
概念2026
全部作品 (19)



