企业官网建设流程全解析

• 数据集

本文以社区维护的远程友好科技公司目录Remote In Tech（源码仓库即当前项目）中的 Marco Polo 公司档案 为样本，系统拆解一份标准的远程公司 profile 应当如何编写：从 YAML frontmatter 字段、正文 Markdown 结构，到仓库源码如何将其渲染成可浏览、可检索、可被搜索引擎收录的完整公司页面。读完本文，你将掌握该目录的字段规范、自动 SEO 描述生成机制、标签分类体系与求职入口配置，并能够据此为其他公司编写或更新同类档案。

档案概览：一份公司 profile 由哪些部分组成

在 Remote In Tech 仓库中，每一家远程友好公司对应一个位于src/companies/下的独立 Markdown 文件，文件名即slug。以 src/companies/marco-polo.md 为例，整个文件分为两大部分：

1. YAML frontmatter：文件开头由---包裹的元数据块，定义title、slug、website、careers_url、region、remote_policy、company_size、technologies、addedAt、updatedAt等字段；
2. Markdown 正文：以## Company blurb、## Company size、## Remote status、## Region、## Company technologies、## Office locations、## How to apply等小节组成的人类可读内容。

src/companies/companies.json为所有公司档案指定了统一布局"layout": "company"，因此每个.md文件最终都会套用同一个 company.njk 模板 渲染成站点页面。

frontmatter 元数据字段逐项解析

Marco Polo 档案的 frontmatter 完整内容如下（原样摘录自仓库）：

--- title: "Marco Polo" slug: marco-polo website: https://marcopolo.me careers_url: https://marcopolo.me/jobs region: americas remote_policy: fully-remote company_size: small technologies: - java - javascript - mobile - python addedAt: 2021-08-23 updatedAt: 2021-08-23 ---

各字段的含义与约束如下：

这些字段的合法取值统一维护在 src/_data/labels.js 中，是区域、远程策略、公司规模与技术标签的"单一事实来源"：

• region：worldwide、americas、europe、americas-europe、asia-pacific、other（americas显示为 "Americas"）；
• remote_policy：fully-remote、remote-first、hybrid、remote-friendly（fully-remote显示为 "Fully Remote"）；
• company_size：tiny（1-10）、small（11-50）、medium（51-200）、large（201-1000）、enterprise（1000+）；
• technologies：javascript、python、java、swift、mobile、cloud、devops等受控列表。

同一份标签映射还会经 src/_data/companyHelpers.js 的getRegionLabel、getRemotePolicyLabel、getCompanySizeLabel、getTechLabel等函数导出给 JS 侧（如集合与分类页）使用，确保 Nunjucks 模板与脚本逻辑看到的标签完全一致。

正文 Markdown：公司简介与远程状态

frontmatter 之后是正文。Marco Polo 档案的正文完整继承了以下小节：

• Company blurb：一句话介绍业务与使命。原文写到，Marco Polo 是一款"让参与彼此生活变得毫不费力"的视频通讯应用，自 2016 年创立以来，社区已发送超过 40 亿条 Polo（Polos，即该应用的视频消息），团队正在为全球用户寻找能带来改变的人才。
• Company size：20-50 人（截至 2021 年 8 月的数据，即档案的addedAt时间点）。
• Remote status：全远程团队，成员分布在美国和加拿大各地，每年会组织几次线下团建（offsite）。
• Region：北美。
• Company technologies：Python、Java、Kotlin、Swift、Objective-C、Firebase、Vue.js——注意这是正文中更完整的技术清单，而 frontmatter 的technologies只收录了受控标签中的子集（java、javascript、mobile、python），用于分类浏览。
• Office locations：N/A - fully remote，即无实体办公室、全远程。

按 CONTRIBUTING.md 的约定，## Company blurb、## Remote status、## How to apply是每个档案的必需小节，## Company size、## Region、## Company technologies为常用可选小节——Marco Polo 档案恰好是"必需 + 可选"齐全的示范样本。

从 Company blurb 自动生成 SEO meta description

这是该仓库一个值得注意的工程细节：公司档案页的 meta description 无需手写，而是由 src/companies/companies.11tydata.js 中的eleventyComputed.description自动计算：

• 用正则/\#\#\s*Company\s*blurb\s*\n+([\s\S]*?)(?=\n##|$)/i从原始 Markdown 中截取## Company blurb标题后的段落；
• 若正文中没有该标题，则回退为取 frontmatter 之后的第一段非标题文本；
• 随后统一清理 Markdown 语法（去掉text的链接、`*_`` 标记、换行与多余空格）；
• 最终截断到约 155 字符，并优先在句号或空格处断句。

也就是说，Marco Polo 档案中那两段 blurb 文字，会直接被清洗并截断成该页面对外展示的搜索引擎描述，这正是该档案正文写作质量直接决定页面 SEO 表现的原因。

页面渲染：公司档案布局与标签分类

当构建站点时，company.njk 模板 会把上述元数据与正文拼装成完整的公司页面，关键渲染逻辑包括：

• 主按钮：优先使用careers_url渲染 "Apply Now →" 按钮，否则回退到website渲染 "Visit Website →"，并带有出站追踪属性data-track-outbound；
• 区域与远程策略标签：分别链接到/browse/{{ region }}/与/browse/{{ remote_policy }}/，因此 Marco Polo 会被同时归类进 "Americas" 与 "Fully Remote" 两个浏览分类；
• Tech Stack 区块：遍历 frontmatter 中的technologies，逐个渲染为指向/browse/{{ tech }}/的技术标签；
• 页脚：显示 "Back to All Companies"、GitHub 编辑入口，以及Last updated: {{ updatedAt | formatDate('MMMM D, YYYY') }}的更新时间。

此外，该布局在 src/_includes/schemas/Organization.njk 中注入schema.org的OrganizationJSON-LD 结构化数据，包含name、url以及sameAs（值为careers_url），让搜索引擎能结构化地识别"这是一家名为 Marco Polo 的组织，其招聘信息在此页面"。

求职入口：How to apply 与 careers_url 的配合

## How to apply是必需小节，Marco Polo 档案的做法是直接指向自己的招聘页https://marcopolo.me/jobs。这个信息与 frontmatter 的careers_url相互印证：正文告诉读者"去哪里投递"，而careers_url驱动页面顶部的 "Apply Now" 按钮与结构化数据。这种"正文 + 元数据双写"的模式保证了无论读者从正文、按钮还是搜索引擎结果进入，都能拿到同一入口，也符合 CONTRIBUTING.md 中"careers_url必须指向公司自己的招聘页，而非售卖服务的页面"的收录标准。

如何在目录中新增或更新同类档案

如果你要提交一家类似 Marco Polo 的全远程公司，按 README.md 与 CONTRIBUTING.md 的流程操作：

1. 在src/companies/{slug}.md新建文件，slug必须与 frontmatter 中的slug值一致；
2. 填写 frontmatter（参考上文模板），并保证正文包含## Company blurb、## Remote status、## How to apply三个必需小节；
3. 在本地运行npm install、npm run build验证构建（需 Node.js 22+），开发时可使用npm run start起热更新服务；
4. 提交 PR，仓库的Validate Company ProfilesGitHub Action 会自动校验字段合法性并评论指出问题。

需要注意：addedAt/updatedAt由维护者管理，投稿时不应自行填写；内容需基于可核实的真实信息（你本人是该公司员工或可验证该信息），且不接受纯佣金制的销售机会、中介平台代发岗位等不符合目录定位的条目。

小结与时效性提示

Marco Polo 档案是 Remote In Tech 目录中一份结构完整、字段规范的全远程公司样本：它同时演示了 frontmatter 元数据驱动分类与按钮、blurb 驱动 SEO 描述、正文承载公司叙事与求职入口的完整链路。最后提醒一点：该档案的addedAt与updatedAt均为 2021-08-23，正文中的团队规模（20-50 人）、地区（北美）与办公地点信息均以 2021 年 8 月为时间基准，属于历史快照；查阅时如需最新动态，应以 Marco Polo 官方招聘页及当前仓库中的档案内容为准。

• 数据集