这几年写代码也积累了一些产品，加上独立开发的点子也赚到钱了，创办公司的愿望也越来越强烈。对于互联网公司来说，官网好比房子的外墙。
本文讲讲我是如何一个人开发出我们公司的官网（www.ygeeker.com）的。包括：如何组织网站内容、如何进行技术选型、如何设计与开发、如何针对企业官网优化 SEO 以及各种细节的处理。
网站内容设计 / Patterns
一个典型企业级官网通常包含这些内容：
- 首页：放置最热门的产品（Apple是个典型的例子），介绍企业文化等等
- 招聘：介绍招聘需求，公司待遇，以及提供投递简历的渠道
- 产品落地页：每个单独的产品提供一个落地页，例如 OpenAI 为 Sora 设计的落地页面
- 法律法规：通常是一个文章页面，展示隐私政策、使用协议等条款
- 帮助与支持：为每个产品提供对应的帮助手册，有的还附带有全局搜索，例如 Google 的帮助中心
- 单一特殊页面：企业责任介绍页面，企业为环保做出的努力页面，某次活动的页面等等，参考双十一的阿里云活动页面。这些页面的特点是单一、独立，往往是路由的终点
- 网站地图
除了这些页面，网站内容还包括通用的组件：
- 导航栏：主要的导航终点
- 底部导航栏：放置法律信息，链接信息，社交媒体链接等等
- 全局 FAB：联系客服、关注公众号等等
列出所有的产品后，我们可以绘制一个网站大纲：
技术选型 / Stack
考虑到此类网站有如下特点：
- 静态页面偏多
- 样式要求复杂
- 需要类似文档的功能来实现帮助中心
- 有 i18n 需求
我最终选择了 Next + Nextra + Tailwind 的方案。其中 Next 对静态网站有天然优势，Tailwind 则可以帮助我们轻松应对样式更迭。
此外，我选择了 framer-motion 作为动画库，来为静态页面添加一点生气。
搜索引擎优化 / SEO
可以从两个点出发，技术优化和内容优化。
技术上来说，网站需要具备完好的 SEO 相关设施/措施。下面列出的一些都是我们做到的：
- 基础 Meta 标签，OG 标签，Twitter 标签
- 完善的网站地图
- 尽量选择静态页面
- itemProps 标签
此外，利用 Next 的 API 功能，还可以制作动态 OG 图片，针对文档类页面尤其有用。
多地区&国际化 / i18n
我们所说的国际化，不仅仅是将页面文案翻译成了对应地区的语言，而是从使用习惯、法律法规、文化差异等方面为各个地区做适配。
总结
其实要做好一个完整的网站，尤其是 Landing 类网站，要考虑的地方还有很多。