01
挑战
医疗从业者常常满足于通用的 Doctolib 资料或模板化网站，这会削弱信任感。挑战在于打造一个既专业又有人情味的网站——让焦虑的患者感到安心，清晰传达在特定领域（磨牙、焦虑）的专长，并在不显得推销的前提下促进预约。
02
解决方案
我端到端设计并开发了该网站，采用 Vite + React + TypeScript，使用 Framer Motion 实现微妙的显示动画。排版将 Fraunces（编辑衬线字体）与 Inter（实用无衬线字体）结合，基于奶油色与赤陶色的调色板。专题页面（焦虑、磨牙）提供深度 SEO 覆盖，而浮动的 Doctolib CTA 和电话悬浮按钮让移动端用户一触即可预约。部署在 Vercel 上，含 sitemap.xml、robots.txt 和 OG 图。
typescript
// Client-side meta + JSON-LD injection for a Vite SPA
export function useDocumentMeta({ title, description, canonical, jsonLd }: Meta) {
useEffect(() => {
const previousTitle = document.title;
document.title = title;
setMetaContent('meta[name="description"]', description);
setMetaContent('meta[property="og:title"]', title);
setMetaContent('meta[property="og:description"]', description);
if (canonical) {
setCanonical(canonical);
setMetaContent('meta[property="og:url"]', canonical);
}
let script: HTMLScriptElement | null = null;
if (jsonLd) {
script = document.createElement('script');
script.type = 'application/ld+json';
script.textContent = JSON.stringify(jsonLd);
document.head.appendChild(script);
}
return () => {
document.title = previousTitle;
if (script?.parentNode) script.parentNode.removeChild(script);
};
}, [title, description, canonical, jsonLd]);
}↳ 为 Vite SPA 按路由注入 SEO meta 和 Schema.org JSON-LD — 每个专题页面都有自己的 canonical、OG 标签和 LocalBusiness 结构化数据
