Building a Flexible Contentful Content Model: A Complete Guide
Overview
This guide provides a comprehensive reference for designing a flexible Contentful content model. The content model follows a modular architecture designed for flexible page composition and multi-language support, allowing you to build complex websites while keeping the number of content types minimal.
Pros and Cons
✅ Pros
- Very Flexible Content Model: The modular architecture allows for infinite combinations of content layouts and presentations
- Minimal Content Types: Uses only 10 content types to support complex website functionality, works within Contentful's free plan (25 content types) and leaves plenty of room for custom content. Even on Contentful Pro (50 content types), you have 40 content types available for project-specific needs
- Content-Driven (Not UI-Driven): Content structure is independent of presentation, allowing for multiple UI implementations
- E-commerce Ready: Supports complex websites including product detail pages, product listing pages, and dynamic content areas
- Multi-language Support: Built-in localization for international websites
- SEO Optimized: Comprehensive SEO controls at both global and page levels
❌ Cons
- Lack of Validation in Page Sections: No built-in constraints on which content types can be used in specific page areas, requiring careful content management practices
- Learning Curve: The flexible nature requires content editors to understand the relationships between different content types
- Potential for Inconsistency: Without strict validation, content editors might create inconsistent page layouts
Content Model Architecture
The content model is organized into three main categories:
🏗️ Structural Content Types
Content types that define the overall site structure and configuration:
- Config - Site configuration and URL slugs
- Page - Main page definitions with content areas
- Layout - Site-wide layout components
🎨 Page Section Content Types
Content types used to compose page layouts:
- Content Section - Two-column content layouts
- Content List - Lists of content items with various UI presentations
- Video - Video content sections
📝 Content & Component Types
Content types for actual content and reusable components:
- Article - Blog articles and news content
- Content Item - Reusable content blocks
- Image - Image assets with metadata
- Link - Links and navigation items
Key Features
🌐 Multi-language Support
- Localized content in English (en) and French (fr)
- Localized URL slugs for different markets
- Localized navigation and content
📱 Flexible Layout System
- Modular page composition using content areas
- Multiple UI presentation options for content lists
- Responsive design considerations
🔍 SEO Optimization
- Comprehensive SEO metadata on pages
- Canonical URL support
- NoIndex/NoFollow controls
Content Type Definitions
1. Article Content Type
Content Type Details
- ID:
article - Name: 📚 [Content] Article
- Display Field:
internalName - Description: Blog articles and news content with rich text
Fields
| Field ID | Type | Localized | Required | Validations | Linked Content Types | Description |
|---|---|---|---|---|---|---|
internalName |
Symbol | No | Yes | - | - | Internal identifier for content management |
title |
Symbol | No | Yes | - | - | Article headline/title |
slug |
Symbol | No | Yes | Unique | - | URL-friendly slug generated from the title |
date |
Date | No | Yes | - | - | Publication date for the article |
image |
Entry Link | No | Yes | - | image |
Featured image for the article |
body |
Rich Text | No | Yes | Enabled Marks: bold, italic, underline, code, superscript, subscript, strikethrough Enabled Nodes: headings (1-6), lists, hr, blockquote, embedded entries/assets, tables, links |
- | Main article content with rich text formatting |
2. Config Content Type
Content Type Details
- ID:
config - Name: ⚙️ Config
- Display Field:
internalName - Description: Site configuration and URL routing
Fields
| Field ID | Type | Localized | Required | Default Values | Description |
|---|---|---|---|---|---|
internalName |
Symbol | No | Yes | - | Internal identifier for the configuration entry |
slugProductDetailPage |
Symbol | Yes | Yes | EN: "products" FR: "produits" |
URL slug for product detail pages |
slugProductListingPage |
Symbol | Yes | Yes | EN: "categories" FR: "categories" |
URL slug for product listing/category pages |
slugArticleDetailPage |
Symbol | Yes | Yes | EN: "articles" FR: "articles" |
URL slug for article/blog detail pages |
3. Content Item Content Type
Content Type Details
- ID:
contentItem - Name: 📚 [Content] Content Item
- Display Field:
entryField - Description: Reusable content blocks with rich text and media
Fields
| Field ID | Type | Localized | Required | Validations | Max Items | Linked Content Types | Description |
|---|---|---|---|---|---|---|---|
entryField |
Symbol | No | Yes | - | - | - | Unique identifier/slug for the content item (used as display field) |
title |
Symbol | No | Yes | - | - | - | Content block title/headline |
description |
Text | No | No | - | - | - | Brief description or summary of the content |
body |
Rich Text | No | No | Enabled Marks: bold, italic, underline, code, superscript, subscript, strikethrough Enabled Nodes: headings (1-6), lists, hr, blockquote, embedded entries/assets, tables, links |
- | - | Main content with rich text formatting |
image |
Entry Link | No | No | - | - | image |
Optional featured image for the content block |
links |
Array of Entry Links | No | No | - | 2 | link |
Call-to-action links (maximum 2) |
4. Content List Content Type
Content Type Details
- ID:
contentList - Name: 💎 [Page Section] Content List
- Display Field:
internalName - Description: Lists of content items with various UI presentations
Fields
| Field ID | Type | Localized | Required | Options/Values | Linked Content Types | Description |
|---|---|---|---|---|---|---|
internalName |
Symbol | No | Yes | - | - | Internal identifier for content management |
ui |
Symbol (Dropdown) | No | Yes | "3 Cards - Landscape" "3 Cards - Square" "4 Cards - Square" "4 Cards - Landscape" "Accordion" "Carousel" "Timeline" |
- | Defines the visual presentation of the content list |
title |
Symbol | No | No | - | - | Optional section title displayed above the content list |
description |
Text | No | No | - | - | Optional description text displayed below the title |
entries |
Symbol (Dropdown) | No | Yes | "Articles" - Automatically pull latest articles "Products" - Automatically pull latest products "Collections" - Automatically pull product collections "Custom" - Manually select specific entries |
- | Determines whether to use automatic content feeds or custom selection |
customEntries |
Array of Entry Links | No | No (Required when entries = "Custom") | - | article, contentItem |
Manually selected entries to display (used when entries = "Custom") |
5. Content Section Content Type
Content Type Details
- ID:
contentSection - Name: 💎 [Page Section] Content Section
- Display Field:
internalName - Description: Two-column content layouts with image positioning
Fields
| Field ID | Type | Localized | Required | Options | Linked Content Types | Description |
|---|---|---|---|---|---|---|
internalName |
Symbol | No | Yes | - | - | Internal identifier for content management |
ui |
Symbol (Dropdown) | No | Yes | "Teaser - Image Fullwidth" "Teaser - Image Right" "Two Columns - Image Left" "Two Columns - Image Right" |
- | Defines the visual layout and image positioning |
entry |
Entry Link | No | No | - | article, contentItem |
The content to display in this section |
6. Image Content Type
Content Type Details
- ID:
image - Name: 🖼 [Element] Image
- Display Field:
internalName - Description: Image assets with metadata and accessibility features
Fields
| Field ID | Type | Localized | Required | Validations | Description |
|---|---|---|---|---|---|
internalName |
Text | No | Yes | - | Internal identifier for content management |
image |
Asset Link (Image) | No | Yes | Image mime types only | The actual image file |
alternativeText |
Symbol | Yes | Yes | - | Alt text for accessibility and SEO (localized) |
caption |
Symbol | No | No | - | Optional image caption or credit |
7. Layout Content Type
Content Type Details
- ID:
layout - Name: ⚙️ Layout
- Display Field:
internalName - Description: Site-wide layout components (header, footer, navigation)
Fields
| Field ID | Type | Localized | Required | Description |
|---|---|---|---|---|
internalName |
Text | No | Yes | Internal identifier for the layout configuration |
seoTitle |
Symbol | No | No | Global HTML title tag for pages without specific SEO title |
seoDescription |
Symbol | No | No | Global meta description for pages without specific SEO description |
seoKeywords |
Array of Symbols | No | No | Global keywords for SEO optimization |
canonicalUrl |
Symbol | No | No | Base canonical URL for the site |
8. Link Content Type
Content Type Details
- ID:
link - Name: 🔗 [Element] Link
- Display Field:
internalName - Description: Links and navigation items for buttons and CTAs
Fields
| Field ID | Type | Localized | Required | Linked Content Types | Description |
|---|---|---|---|---|---|
internalName |
Symbol | No | Yes | - | Internal identifier for content management |
text |
Symbol | No | Yes | - | Link text/label displayed to users |
page |
Entry Link | No | No | page |
Internal page link (use either this OR URL) |
url |
Symbol | No | No | - | External URL (use either this OR page) |
9. Page Content Type
Content Type Details
- ID:
page - Name: 📜 Page
- Display Field:
internalName - Description: Main page definitions with content areas and SEO
Fields
| Field ID | Type | Localized | Required | Validations | Max Items | Default | Linked Content Types | Description |
|---|---|---|---|---|---|---|---|---|
internalName |
Text | No | Yes | - | - | - | - | Internal identifier for content management |
path |
Symbol | No | Yes | Unique | - | - | - | URL path for the page (e.g., "/", "/products", "/about") |
topContentArea |
Array of Entry Links | No | No | - | 10 | - | contentList, contentSection, video |
Content modules displayed in the top section of the page |
bottomContentArea |
Array of Entry Links | No | No | - | 8 | - | contentList, contentSection, video |
Content modules displayed in the bottom section of the page |
seoTitle |
Symbol | No | Yes | - | - | - | - | HTML title tag for search engines and browser tabs |
seoDescription |
Symbol | No | Yes | - | - | - | - | Meta description for search engines |
seoKeywords |
Array of Symbols | No | No | - | - | - | - | Keywords for SEO optimization |
canonicalUrl |
Symbol | No | No | - | - | - | - | Canonical URL to prevent duplicate content issues |
noIndex |
Boolean | No | Yes | - | - | false | - | Prevents page indexing by search engines when true |
nofollow |
Boolean | No | Yes | - | - | false | - | Adds nofollow directive to prevent link equity transfer |
10. Video Content Type
Content Type Details
- ID:
video - Name: 💎 [Page Section] Video
- Display Field:
internalName - Description: Video content sections for page layouts
Fields
| Field ID | Type | Localized | Required | Validations | Description |
|---|---|---|---|---|---|
internalName |
Symbol | No | Yes | - | Internal identifier for content management |
video |
Asset Link (Video) | No | Yes | Video mime types only | The video file to display |
caption |
Symbol | No | No | - | Optional caption or description for the video |
Content Relationships
Page Composition
- Page →
topContentArea&bottomContentArea→ Content Section, Content List, Video - Content Section →
entry→ Article, Content Item - Content List →
customEntries→ Article, Content Item
Media & Navigation
- Article →
image→ Image - Content Item →
image→ Image,links→ Link - Link →
page→ Page
Site Configuration
- Config - Contains URL slugs for routing
- Layout - Contains global SEO and layout settings
This modular approach allows for flexible content composition while maintaining clear separation of concerns between structural elements, content sections, and individual content items.