Skill Tracer
Skills › Marketing Skills › content-strategy › headless-cms.md

headless-cms.md

194 lines · skills/content-strategy/references/headless-cms.md at 88c79f6

Open on GitHub
1# Headless CMS Guide
2
3Reference for choosing, modeling, and implementing a headless CMS for marketing content.
4

Headless CMS Guide

Reference for choosing, modeling, and implementing a headless CMS for marketing content.

Raw lines 1 to 4
5## When to Use This Reference
6
7Use this when selecting a CMS for a new project, designing content models for marketing sites, setting up editorial workflows, or connecting CMS content to programmatic pages.
8
9---

When to Use This Reference

Use this when selecting a CMS for a new project, designing content models for marketing sites, setting up editorial workflows, or connecting CMS content to programmatic pages.


Raw lines 5 to 10
11## Headless vs Traditional CMS
13A headless CMS separates content management from presentation. Content is stored in a structured backend and delivered via API to any frontend.

Headless vs Traditional CMS

A headless CMS separates content management from presentation. Content is stored in a structured backend and delivered via API to any frontend.

Raw lines 11 to 14
15### When Headless Makes Sense
17- Multiple frontends consume the same content (web, mobile, email)
18- Developers want full control over the frontend stack
19- Content needs to be reused across channels
20- You're building with a modern framework (Next.js, Remix, Astro)
21- Marketing needs structured, reusable content blocks

When Headless Makes Sense

  • Multiple frontends consume the same content (web, mobile, email)
  • Developers want full control over the frontend stack
  • Content needs to be reused across channels
  • You're building with a modern framework (Next.js, Remix, Astro)
  • Marketing needs structured, reusable content blocks
Raw lines 15 to 22
23### When Traditional Works Better
25- Small team with no dedicated developers
26- Simple blog or brochure site
27- WYSIWYG editing is a hard requirement
28- Budget is tight and WordPress/Webflow does the job

When Traditional Works Better

  • Small team with no dedicated developers
  • Simple blog or brochure site
  • WYSIWYG editing is a hard requirement
  • Budget is tight and WordPress/Webflow does the job
Raw lines 23 to 29
30### Decision Checklist
32| Factor | Headless | Traditional |
33|--------|----------|-------------|
34| Multi-channel delivery | Yes | Limited |
35| Developer control | Full | Constrained |
36| Non-technical editing | Requires setup | Built-in |
37| Time to launch | Longer | Faster |
38| Content reuse | Native | Manual |
39| Hosting flexibility | Any frontend | Platform-dependent |
41---

Decision Checklist

FactorHeadlessTraditional
Multi-channel deliveryYesLimited
Developer controlFullConstrained
Non-technical editingRequires setupBuilt-in
Time to launchLongerFaster
Content reuseNativeManual
Hosting flexibilityAny frontendPlatform-dependent

Raw lines 30 to 42
43## Content Modeling for Marketing

Content Modeling for Marketing

Raw lines 43 to 44
45### Core Principles
471. **Think in types, not pages.** A "Landing Page" is a content type with fields — not an HTML file. This lets you reuse components across pages.
482. **Separate content from presentation.** Store the headline text, not the styled headline. Presentation belongs in the frontend.
493. **Design for reuse.** If testimonials appear on 5 pages, create a Testimonial type and reference it — don't duplicate.
504. **Keep models flat.** Deeply nested structures are hard to query and maintain. Prefer references over nesting.

Core Principles

  1. Think in types, not pages. A "Landing Page" is a content type with fields — not an HTML file. This lets you reuse components across pages.
  2. Separate content from presentation. Store the headline text, not the styled headline. Presentation belongs in the frontend.
  3. Design for reuse. If testimonials appear on 5 pages, create a Testimonial type and reference it — don't duplicate.
  4. Keep models flat. Deeply nested structures are hard to query and maintain. Prefer references over nesting.
Raw lines 45 to 51
52### Common Marketing Content Types
54| Type | Key Fields | Notes |
55|------|-----------|-------|
56| **Landing Page** | title, slug, hero, sections[], seo | Modular sections for flexibility |
57| **Blog Post** | title, slug, body, author, category, tags, publishedAt, seo | Rich text or Portable Text body |
58| **Case Study** | title, customer, challenge, solution, results, metrics[], logo | Link to related products/features |
59| **Testimonial** | quote, author, role, company, avatar, rating | Reference from landing pages |
60| **FAQ** | question, answer, category | Group by category for programmatic pages |
61| **Author** | name, bio, avatar, social links | Reference from blog posts |
62| **CTA Block** | heading, body, buttonText, buttonUrl, variant | Reusable across pages |

Common Marketing Content Types

TypeKey FieldsNotes
Landing Pagetitle, slug, hero, sections[], seoModular sections for flexibility
Blog Posttitle, slug, body, author, category, tags, publishedAt, seoRich text or Portable Text body
Case Studytitle, customer, challenge, solution, results, metrics[], logoLink to related products/features
Testimonialquote, author, role, company, avatar, ratingReference from landing pages
FAQquestion, answer, categoryGroup by category for programmatic pages
Authorname, bio, avatar, social linksReference from blog posts
CTA Blockheading, body, buttonText, buttonUrl, variantReusable across pages
Raw lines 52 to 63
64### SEO Fields Checklist
66Every page-level content type needs:
68- `metaTitle` — 50-60 characters
69- `metaDescription` — 150-160 characters
70- `ogImage` — 1200x630px social preview
71- `slug` — URL path segment
72- `canonicalUrl` — optional override
73- `noIndex` — boolean for excluding from search
74- `structuredData` — optional JSON-LD override
76---

SEO Fields Checklist

Every page-level content type needs:

  • metaTitle — 50-60 characters
  • metaDescription — 150-160 characters
  • ogImage — 1200x630px social preview
  • slug — URL path segment
  • canonicalUrl — optional override
  • noIndex — boolean for excluding from search
  • structuredData — optional JSON-LD override

Raw lines 64 to 77
78## Editorial Workflows

Editorial Workflows

Raw lines 78 to 79
80### Draft → Review → Publish Cycle
821. **Draft** — Author creates or edits content
832. **Review** — Editor reviews for accuracy, brand voice, SEO
843. **Approve** — Stakeholder signs off
854. **Schedule** — Set publish date/time
865. **Publish** — Content goes live via API

Draft → Review → Publish Cycle

  1. Draft — Author creates or edits content
  2. Review — Editor reviews for accuracy, brand voice, SEO
  3. Approve — Stakeholder signs off
  4. Schedule — Set publish date/time
  5. Publish — Content goes live via API
Raw lines 80 to 87
88### Preview APIs
90All major headless CMS platforms support draft previews:
92- **Sanity**: Real-time preview with `useLiveQuery` or Presentation tool
93- **Contentful**: Preview API (`preview.contentful.com`) with separate access token
94- **Strapi**: Draft & Publish system with `status=draft` query parameter (v5; replaces v4's `publicationState`)
96Set up a preview route in your frontend (e.g., `/api/preview`) that authenticates and renders draft content.

Preview APIs

All major headless CMS platforms support draft previews:

  • Sanity: Real-time preview with useLiveQuery or Presentation tool
  • Contentful: Preview API (preview.contentful.com) with separate access token
  • Strapi: Draft & Publish system with status=draft query parameter (v5; replaces v4's publicationState)

Set up a preview route in your frontend (e.g., /api/preview) that authenticates and renders draft content.

Raw lines 88 to 97
98### Roles and Permissions
100| Role | Can Create | Can Edit | Can Publish | Can Delete |
101|------|:----------:|:--------:|:-----------:|:----------:|
102| Author | Yes | Own | No | Own drafts |
103| Editor | Yes | All | Yes | Drafts |
104| Admin | Yes | All | Yes | All |
106Exact permission models vary by platform. Sanity uses role-based access. Contentful has space-level roles. Strapi has granular RBAC.
108---

Roles and Permissions

RoleCan CreateCan EditCan PublishCan Delete
AuthorYesOwnNoOwn drafts
EditorYesAllYesDrafts
AdminYesAllYesAll

Exact permission models vary by platform. Sanity uses role-based access. Contentful has space-level roles. Strapi has granular RBAC.


Raw lines 98 to 109
110## Platform Comparison
112| Feature | Sanity | Contentful | Strapi |
113|---------|--------|------------|--------|
114| Hosting | Cloud (managed) | Cloud (managed) | Self-hosted or Cloud |
115| Query Language | GROQ | REST / GraphQL | REST / GraphQL |
116| Free Tier | Generous | Limited | Open source (free) |
117| Real-time Collab | Yes (built-in) | Limited | No |
118| Best For | Developer flexibility | Enterprise multi-locale | Budget / self-hosted |
119| Content Modeling | Schema-as-code | Web UI | Web UI or code |
120| Media Handling | Built-in DAM | Built-in | Plugin-based |

Platform Comparison

FeatureSanityContentfulStrapi
HostingCloud (managed)Cloud (managed)Self-hosted or Cloud
Query LanguageGROQREST / GraphQLREST / GraphQL
Free TierGenerousLimitedOpen source (free)
Real-time CollabYes (built-in)LimitedNo
Best ForDeveloper flexibilityEnterprise multi-localeBudget / self-hosted
Content ModelingSchema-as-codeWeb UIWeb UI or code
Media HandlingBuilt-in DAMBuilt-inPlugin-based
Raw lines 110 to 121
122### Sanity
124**Strengths**: GROQ query language is powerful and flexible. Schema defined in code (version-controlled). Real-time collaborative editing. Portable Text for rich content. Generous free tier.
126**Considerations**: Steeper learning curve for non-developers. Studio customization requires React knowledge. Vendor lock-in on GROQ queries.
128**Marketing fit**: Best when developers and marketers collaborate closely. Strong for content-heavy sites with complex models.

Sanity

Strengths: GROQ query language is powerful and flexible. Schema defined in code (version-controlled). Real-time collaborative editing. Portable Text for rich content. Generous free tier.

Considerations: Steeper learning curve for non-developers. Studio customization requires React knowledge. Vendor lock-in on GROQ queries.

Marketing fit: Best when developers and marketers collaborate closely. Strong for content-heavy sites with complex models.

Raw lines 122 to 129
130### Contentful
132**Strengths**: Mature enterprise platform. Excellent multi-locale support. Strong ecosystem of integrations. Composable content with Studio. Well-documented APIs.
134**Considerations**: Pricing scales with content types and locales. Two separate APIs (Delivery and Management). Rate limits can be tight on lower plans.
136**Marketing fit**: Best for enterprises with multi-market content needs. Good when you need established vendor reliability.

Contentful

Strengths: Mature enterprise platform. Excellent multi-locale support. Strong ecosystem of integrations. Composable content with Studio. Well-documented APIs.

Considerations: Pricing scales with content types and locales. Two separate APIs (Delivery and Management). Rate limits can be tight on lower plans.

Marketing fit: Best for enterprises with multi-market content needs. Good when you need established vendor reliability.

Raw lines 130 to 137
138### Strapi
140**Strengths**: Open source, self-hosted option. Full control over data. No per-seat pricing. Customizable admin panel. Plugin ecosystem. REST by default, GraphQL via plugin.
142**Considerations**: Self-hosting means you handle infrastructure. Smaller ecosystem than Sanity/Contentful. V5 migration can be significant from V4.
144**Marketing fit**: Best for teams with DevOps capability who want full control and no vendor lock-in. Good for budget-conscious projects.

Strapi

Strengths: Open source, self-hosted option. Full control over data. No per-seat pricing. Customizable admin panel. Plugin ecosystem. REST by default, GraphQL via plugin.

Considerations: Self-hosting means you handle infrastructure. Smaller ecosystem than Sanity/Contentful. V5 migration can be significant from V4.

Marketing fit: Best for teams with DevOps capability who want full control and no vendor lock-in. Good for budget-conscious projects.

Raw lines 138 to 145
146### Others Worth Knowing
148- **Hygraph** — GraphQL-native, strong for federation and multi-source content
149- **Keystatic** — Git-based, good for developer-content hybrid workflows
150- **Payload** — TypeScript-first, self-hosted, code-configured like Sanity
151- **Builder.io** — Visual editor with headless backend, good for non-technical marketers
152- **Prismic** — Slice-based content modeling, strong Next.js integration
154---

Others Worth Knowing

  • Hygraph — GraphQL-native, strong for federation and multi-source content
  • Keystatic — Git-based, good for developer-content hybrid workflows
  • Payload — TypeScript-first, self-hosted, code-configured like Sanity
  • Builder.io — Visual editor with headless backend, good for non-technical marketers
  • Prismic — Slice-based content modeling, strong Next.js integration

Raw lines 146 to 155
156## Integration with Marketing Skills

Integration with Marketing Skills

Raw lines 156 to 157
158### Programmatic SEO
160Use CMS as the data source for programmatic pages. Store structured data (FAQs, comparisons, city pages) as content types and generate pages from queries. See **programmatic-seo** skill.

Programmatic SEO

Use CMS as the data source for programmatic pages. Store structured data (FAQs, comparisons, city pages) as content types and generate pages from queries. See programmatic-seo skill.

Raw lines 158 to 161
162### Copywriting
164CMS content models enforce consistent structure. Define fields that match your copy frameworks (headline, subheadline, social proof, CTA). See **copywriting** skill.

Copywriting

CMS content models enforce consistent structure. Define fields that match your copy frameworks (headline, subheadline, social proof, CTA). See copywriting skill.

Raw lines 162 to 165
166### Site Architecture
168URL structure, navigation hierarchy, and internal linking all depend on how content is organized in the CMS. Plan your content model and site architecture together. See **site-architecture** skill.

Site Architecture

URL structure, navigation hierarchy, and internal linking all depend on how content is organized in the CMS. Plan your content model and site architecture together. See site-architecture skill.

Raw lines 166 to 169
170### Email Sequences
172Pull CMS content into email templates for consistent messaging across web and email. Case studies, testimonials, and blog posts can feed email nurture sequences. See **emails** skill.
174---

Email Sequences

Pull CMS content into email templates for consistent messaging across web and email. Case studies, testimonials, and blog posts can feed email nurture sequences. See emails skill.


Raw lines 170 to 175
176## Implementation Checklist
178- [ ] Define content types based on page types and reusable blocks
179- [ ] Add SEO fields to every page-level content type
180- [ ] Set up preview/draft mode in your frontend
181- [ ] Configure roles and permissions for your team
182- [ ] Create sample content for each type before building frontend
183- [ ] Set up webhook notifications for content changes (rebuild triggers)
184- [ ] Document content guidelines for editors (field descriptions, character limits)
185- [ ] Test content delivery performance (CDN, caching, ISR)
186- [ ] Plan migration strategy if moving from existing CMS
188---

Implementation Checklist

  • [ ] Define content types based on page types and reusable blocks
  • [ ] Add SEO fields to every page-level content type
  • [ ] Set up preview/draft mode in your frontend
  • [ ] Configure roles and permissions for your team
  • [ ] Create sample content for each type before building frontend
  • [ ] Set up webhook notifications for content changes (rebuild triggers)
  • [ ] Document content guidelines for editors (field descriptions, character limits)
  • [ ] Test content delivery performance (CDN, caching, ISR)
  • [ ] Plan migration strategy if moving from existing CMS

Raw lines 176 to 189
190## Relevant Integration Guides
192- [Sanity](https://github.com/coreyhaines31/marketingskills/blob/main/tools/integrations/sanity.md) — GROQ queries, mutations, CLI
193- [Contentful](https://github.com/coreyhaines31/marketingskills/blob/main/tools/integrations/contentful.md) — Delivery/Management APIs, publishing
194- [Strapi](https://github.com/coreyhaines31/marketingskills/blob/main/tools/integrations/strapi.md) — REST CRUD, filters, document API

Relevant Integration Guides

  • Sanity — GROQ queries, mutations, CLI
  • Contentful — Delivery/Management APIs, publishing
  • Strapi — REST CRUD, filters, document API
Raw lines 190 to 194