企业官网的案例栏目在很多团队中还停留在图片文字的简单展示阶段。但对于真正想让案例发挥获客价值的企业案例页需要按完整的工程化标准来建设——内容模型、CMS建模、Schema.org输出、转化追踪、SEO工程化等多个层面。本文从技术视角分享一套完整的案例页技术方案。一、案例页的工程化架构案例页系统架构 ├── 内容模型层 │ ├── 案例主体定义 │ ├── 多语言翻译 │ ├── 关联实体产品/服务/行业/客户 │ └── 媒体资产 ├── 数据存储层 │ ├── 案例主表 │ ├── 量化数据表 │ ├── 关联关系表 │ └── 多语言翻译表 ├── 渲染层 │ ├── 列表页支持筛选 │ ├── 详情页多模块组合 │ └── 相关推荐 ├── SEO输出层 │ ├── Article/CaseStudy Schema │ ├── 自定义TDK │ └── 内链矩阵 └── 数据分析层 ├── 案例浏览追踪 ├── 转化路径埋点 └── 内容效果分析二、内容模型设计案例的核心字段定义// content-models/case-study.ts export const CaseStudyContentModel: ContentModel { name: case_study, display_name: { zh: 案例, en: Case Study }, fields: [ // 基础信息 { name: title, type: string, required: true, translatable: true }, { name: slug, type: string, required: true, translatable: true, unique_per_locale: true }, { name: subtitle, type: string, translatable: true, validation: { max_length: 200 } }, // 客户信息脱敏处理 { name: client_industry, type: reference, target: industry, required: true }, { name: client_size, type: enum, options: [startup, small, medium, large, enterprise] }, { name: client_region, type: string, examples: [华东, 华南, 海外] }, { name: client_logo, type: image, help: 客户Logo如已授权可显示否则脱敏处理 }, { name: client_disclosure_level, type: enum, options: [full, industry_only, fully_anonymous], default: industry_only }, // 案例内容6步法对应字段 { name: background, type: rich_text, translatable: true, help: 客户背景描述 }, { name: challenges, type: rich_text, translatable: true, help: 面临的问题/痛点 }, { name: solution, type: rich_text, translatable: true, help: 解决方案 }, { name: implementation_steps, type: json, help: 实施过程按阶段 }, { name: metrics, type: json, help: 量化效果数据 }, { name: client_testimonial, type: rich_text, translatable: true, help: 客户评价 }, // 媒体资产 { name: cover_image, type: image, required: true }, { name: screenshots, type: image_list, validation: { max_count: 10 } }, { name: videos, type: video_list }, { name: documents, type: file_list, help: 案例PDF、白皮书等 }, // 关联实体 { name: related_products, type: reference_list, target: product }, { name: related_solutions, type: reference_list, target: solution }, { name: tags, type: string_list }, // 时间信息 { name: project_start_date, type: date }, { name: project_end_date, type: date }, { name: go_live_date, type: date }, // SEO字段 { name: seo_title, type: string, translatable: true }, { name: seo_description, type: text, translatable: true, validation: { max_length: 160 } }, { name: seo_keywords, type: string, translatable: true }, ], list_view: { default_columns: [cover_image, title, client_industry, go_live_date, metrics_summary], filterable: [client_industry, client_size, tags], sortable: [go_live_date, created_at, view_count], }, seo_output: { schema_org_type: Article, // 或 CaseStudy sitemap_priority: 0.7, sitemap_changefreq: monthly, }, };三、CMS数据库建模-- 案例主表 CREATE TABLE case_studies ( id INT PRIMARY KEY AUTO_INCREMENT, industry_id INT NOT NULL, client_size ENUM(startup,small,medium,large,enterprise), client_region VARCHAR(100), client_logo VARCHAR(500), cover_image VARCHAR(500) NOT NULL, disclosure_level ENUM(full,industry_only,fully_anonymous) DEFAULT industry_only, project_start DATE, project_end DATE, go_live_date DATE, is_featured TINYINT DEFAULT 0, sort_order INT DEFAULT 0, status TINYINT DEFAULT 1, view_count INT DEFAULT 0, inquiry_count INT DEFAULT 0, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, INDEX idx_industry_status (industry_id, status), INDEX idx_featured_status (is_featured, status), FOREIGN KEY (industry_id) REFERENCES industries(id) ); -- 案例翻译表 CREATE TABLE case_study_translations ( id INT PRIMARY KEY AUTO_INCREMENT, case_study_id INT NOT NULL, locale VARCHAR(5) NOT NULL, title VARCHAR(255) NOT NULL, slug VARCHAR(255) NOT NULL, subtitle VARCHAR(200), background TEXT, challenges TEXT, solution TEXT, implementation_steps JSON, client_testimonial TEXT, seo_title VARCHAR(255), seo_description VARCHAR(500), seo_keywords VARCHAR(255), UNIQUE KEY uk_case_locale (case_study_id, locale), UNIQUE KEY uk_locale_slug (locale, slug), FOREIGN KEY (case_study_id) REFERENCES case_studies(id) ON DELETE CASCADE ); -- 量化数据表独立存储以便分析 CREATE TABLE case_study_metrics ( id INT PRIMARY KEY AUTO_INCREMENT, case_study_id INT NOT NULL, metric_key VARCHAR(100) NOT NULL, metric_label VARCHAR(255), before_value VARCHAR(100), after_value VARCHAR(100), change_pct DECIMAL(8,2), unit VARCHAR(20), sort_order INT DEFAULT 0, /* 示例数据: | metric_key | label | before | after | change | unit | | inquiry_monthly | 月询盘量 | 3 | 30 | 900 | 个 | | google_traffic | Google月流量 | 500 | 1900 | 280 | 次 | | bounce_rate | 跳出率 | 75 | 42 | -44 | % | | avg_time_on_page | 平均停留 | 40 | 200 | 400 | 秒 | */ FOREIGN KEY (case_study_id) REFERENCES case_studies(id) ON DELETE CASCADE ); -- 案例图片 CREATE TABLE case_study_images ( id INT PRIMARY KEY AUTO_INCREMENT, case_study_id INT NOT NULL, type ENUM(screenshot,mobile,dashboard,workflow) NOT NULL, image_path VARCHAR(500) NOT NULL, webp_path VARCHAR(500), alt_text VARCHAR(255), caption VARCHAR(500), sort_order INT DEFAULT 0, FOREIGN KEY (case_study_id) REFERENCES case_studies(id) ON DELETE CASCADE ); -- 关联产品/服务 CREATE TABLE case_study_products ( case_study_id INT NOT NULL, product_id INT NOT NULL, PRIMARY KEY (case_study_id, product_id) ); CREATE TABLE case_study_solutions ( case_study_id INT NOT NULL, solution_id INT NOT NULL, PRIMARY KEY (case_study_id, solution_id) );实施步骤的JSON结构{ implementation_steps: [ { phase: 1, name: 需求调研, duration_days: 5, key_activities: [ 现状网站审计, 客户业务流程梳理, 海外目标市场分析, 竞品分析 ], deliverables: [调研报告, 需求规格书] }, { phase: 2, name: 方案设计, duration_days: 10, key_activities: [ 信息架构设计, 线框图设计, 视觉风格探索, 技术方案确认 ], deliverables: [IA图, 高保真设计稿] } ] }四、Vue组件实现!-- CaseStudyDetail.vue -- template article classcase-study-detail !-- 头部 Hero 区 -- section classhero div classhero-content span classindustry-tag{{ caseStudy.industry.name }}/span h1{{ caseStudy.title }}/h1 p classsubtitle{{ caseStudy.subtitle }}/p !-- 关键指标速览 -- div classmetrics-overview MetricCard v-formetric in featuredMetrics :keymetric.id :metricmetric / /div /div picture classhero-image source typeimage/webp :srcsetcaseStudy.cover_image_webp img :srccaseStudy.cover_image :altcaseStudy.title loadingeager fetchpriorityhigh /picture /section !-- 客户背景 -- SectionAnchor idbackground title客户背景 ClientCard :clientcaseStudy.client / div v-htmlcaseStudy.background classrich-content/div /SectionAnchor !-- 面临的问题 -- SectionAnchor idchallenges title面临的问题 div v-htmlcaseStudy.challenges classrich-content/div /SectionAnchor !-- 解决方案 -- SectionAnchor idsolution title解决方案 div v-htmlcaseStudy.solution classrich-content/div ScreenshotGallery :imagescaseStudy.solution_screenshots / /SectionAnchor !-- 实施过程 -- SectionAnchor idimplementation title实施过程 ImplementationTimeline :stepscaseStudy.implementation_steps / /SectionAnchor !-- 量化效果核心说服环节 -- SectionAnchor idresults title量化效果 MetricsGrid :metricscaseStudy.metrics / CTAInline title想知道我们如何为您实现类似效果 button预约咨询 clicktrackInquiry(metrics_section) / /SectionAnchor !-- 客户评价 -- SectionAnchor v-ifcaseStudy.testimonial idtestimonial Testimonial :datacaseStudy.testimonial / /SectionAnchor !-- 相关案例推荐 -- RelatedCases :industry-idcaseStudy.industry_id :exclude-idcaseStudy.id / !-- 浮动询盘按钮 -- FloatingInquiryButton :case-idcaseStudy.id clicktrackInquiry(floating_button) / /article /template script setup langts import { computed, onMounted } from vue; import { useTracking } from /composables/useTracking; const props defineProps{ caseStudy: CaseStudy }(); const { trackEvent, trackPageView } useTracking(); // 在Hero区显示3-4个最关键的指标 const featuredMetrics computed(() props.caseStudy.metrics .filter(m m.featured) .slice(0, 4) ); const trackInquiry (source: string) { trackEvent(case_inquiry_intent, { case_id: props.caseStudy.id, case_title: props.caseStudy.title, industry: props.caseStudy.industry.slug, source, }); }; onMounted(() { trackPageView(case_study, { case_id: props.caseStudy.id, industry: props.caseStudy.industry.slug, }); }); /script五、Schema.org 结构化数据输出// app/Http/Controllers/Front/CaseStudyController.php private function buildArticleSchema(CaseStudy $case): array { return [ context https://schema.org, type Article, headline $case-getTranslated(title), description $case-getTranslated(subtitle), image array_merge( [url($case-cover_image)], $case-screenshots-take(4)-map(fn($img) url($img-image_path))-toArray() ), datePublished $case-go_live_date?-toIso8601String(), dateModified $case-updated_at?-toIso8601String(), author [ type Organization, name config(app.brand_name), url url(/), ], publisher [ type Organization, name config(app.brand_name), logo [ type ImageObject, url url(/img/logo.png), ], ], mainEntityOfPage [ type WebPage, id url()-current(), ], about [ type Thing, name $case-industry-name, ], ]; } // 如果想用更精准的 CaseStudy 类型 private function buildCaseStudySchema(CaseStudy $case): array { $metrics $case-metrics-map(fn($m) [ type PropertyValue, name $m-metric_label, value $m-after_value, unitText $m-unit, ])-toArray(); return [ context https://schema.org, type Article, articleSection Case Study, // ... 其他Article字段 additionalProperty $metrics, ]; }六、转化追踪埋点// composables/useCaseTracking.ts export function useCaseTracking() { return { // 案例浏览开始 onCaseView: (caseId: number, industry: string) { trackEvent(case_view_start, { case_id: caseId, industry, timestamp: Date.now(), }); }, // 滚动到关键模块 onSectionView: (caseId: number, section: string) { trackEvent(case_section_view, { case_id: caseId, section }); }, // 量化指标查看最有价值的转化点 onMetricsView: (caseId: number, dwellTime: number) { trackEvent(case_metrics_view, { case_id: caseId, dwell_time_ms: dwellTime }); }, // 询盘意图 onInquiryIntent: (caseId: number, source: string) { trackEvent(case_inquiry_intent, { case_id: caseId, source }); }, // 询盘表单提交 onInquirySubmit: (caseId: number, formData: any) { trackEvent(case_inquiry_submit, { case_id: caseId, form_data: formData }); }, // 文档下载PDF/白皮书 onDocumentDownload: (caseId: number, docType: string) { trackEvent(case_document_download, { case_id: caseId, doc_type: docType }); }, }; }七、案例效果分析查询-- 案例转化率排行 SELECT cs.id, cst.title, i.name AS industry, cs.view_count, cs.inquiry_count, ROUND(cs.inquiry_count * 100.0 / NULLIF(cs.view_count, 0), 2) AS conversion_rate FROM case_studies cs JOIN case_study_translations cst ON cs.id cst.case_study_id AND cst.locale zh JOIN industries i ON cs.industry_id i.id WHERE cs.status 1 AND cs.go_live_date DATE_SUB(NOW(), INTERVAL 12 MONTH) ORDER BY conversion_rate DESC LIMIT 20; -- 找出高浏览低转化的案例需要优化转化设计 SELECT cst.title, cs.view_count, cs.inquiry_count, ROUND(cs.inquiry_count * 100.0 / NULLIF(cs.view_count, 0), 2) AS conv_rate FROM case_studies cs JOIN case_study_translations cst ON cs.id cst.case_study_id AND cst.locale zh WHERE cs.view_count 100 -- 有一定流量 AND cs.inquiry_count * 100.0 / cs.view_count 1 -- 但转化率1% ORDER BY cs.view_count DESC;总结企业案例页面的工程化设计本质是把图片文字的展示页升级为内容数据转化的获客系统。本文分享的内容模型、SQL建模、Vue组件、Schema输出和转化追踪方案可以直接作为案例栏目建设的技术起点。真正能带来询盘的案例页背后都是工程化的设计思维。