How to get Structured Content in headless CMS- things you must know

By Arso Stojović
Read time 4 min
Posted on July 19, 2024
Share it on:
Structured Content in headless CMS

Structured content refers to the process of defining how content is organized. A headless CMS defines each type by its characteristics and breaks it down into individual elements. A headless architecture allows you to manage this content effectively.

Therefore, structured content in headless CMS involves defining and managing content types.

Unlike page builders that focus on content presentation, a headless CMS separates the front-end presentation layer from the back-end layer; with a focus on content modeling.

Learn more about this difference: Structured Content vs Page Builders

This allows for easy reuse and repurposing of content, leading to greater flexibility.

To maximize this flexibility, content types must be independent of presentation layers. By defining content types with attributes that describe the content rather than its presentation, you can create adaptable, reusable content across various channels.

In this article, you will learn how to structure data in a headless CMS to meet specific needs.

Structuring Headless CMS by content types

There are slight differences between various CMSs when it comes to structuring content, and each content management system might refer to individual elements differently. However, the fundamental structure remains the same.

The key elements of structured content

Structured content refers to content that is organized and categorized consistently and predictably, making it easier to manage, retrieve, and display across different platforms and contexts.

Here are the key elements of structured content:

  1. Modularity: Content is broken down into smaller, reusable components or modules, such as paragraphs, headings, images, and data tables. This allows for greater flexibility and reuse.

  2. Metadata: Structured content is enriched with metadata, which includes descriptive tags and information about the content, such as author, date, keywords, and categories. Metadata helps in organizing, searching, and filtering content.

  3. Content Models: A content model defines the structure and relationships of different content types within a system. It specifies the elements, attributes, and rules for creating and managing content. Examples include article templates, product descriptions, and user profiles.

  4. Taxonomy: Taxonomy refers to the classification and organization of content into categories, tags, and hierarchies. It provides a way to group and relate content, making it easier to find and navigate.

  5. Semantics: Semantics involves using meaningful markup and data structures to convey the purpose and relationships of content elements. This can include using HTML5 semantic tags, microdata, or schema markup to provide context to search engines and other systems.

  6. Content Types: Content types define the different kinds of content that can be created and managed within a system. Each content type has its own set of fields and attributes. Examples include articles, blog posts, events, and products.

  7. Consistency: Consistent structure and formatting are crucial for maintaining the integrity of structured content. This ensures that content is presented uniformly across different platforms and devices.

  8. Content relationships: Establishing relationships between different pieces of content helps in creating richer and more connected experiences.

Now that you are familiar with the key elements of structured content, it's time to get familiar with BCMS's features that support structured content architecture.

Structured content in a headless CMS: The BCMS basics

For efficient structured content, you need content modeling. BCMS features make it easier to the process of designing data structures for your content.

There are five main BCMS features: templates, entries, widgets, groups, and properties.

BCMS Templates

Templates in BCMS are pre-defined content structures (sections of the webpage). Based on these structures, you can create entries. Thanks to BCMS templates, you can display content types on the front end.

content structures

BCMS Entries

Each entry in BCMS represents one template record. The structure of the entry depends on what properties its template has. Properties defined in the template will appear in the meta section of each entry.

BCMS Entries

Metadata includes descriptive tags and information about the content, such as author, date, keywords, and categories. Metadata helps in organizing, searching, and filtering content.

BCMS widgets

Widgets in BCMS are reusable building blocks used inside an entry's content area.

Widgets are building blocks that help you add various content types, giving a high level of flexibility and customization in structured content.

Learn more about widgets: BCMS Widgets -everything you need to know

BCMS Properties

Properties are the smallest piece of the BCMS ecosystem. You can create custom data structures for BCMS entries using different properties.

Here's a list of available properties in BCMS:

  • String

  • Rich text

  • Number

  • Date

  • Boolean

  • Enumeration

  • Media

  • Group pointer

  • Entry pointer

To learn more about BCMS properties check out the documentation site.

Structured Content in headless CMS example

Ok, enough theory, it is time to get practical. The best way to learn is to have a how-to example. So let’s start, step-by-step.

Structured Content in headless CMS: Landing page example

Here's an example of how you might define structured content in a headless content management system for a landing page. This example will include fields such as title, subtitle, hero image, call-to-action (CTA) buttons, features section, and testimonials.

Content model definition

In your headless CMS, you would define a content model for a landing page. Here's an example structure:

  • Title

  • Subtitle

  • Hero image

  • CTA buttons

  • Features section

  • Testimonials

  • Related articles

Step 1: Creating a landing page template

The landing page template is the first step in content model creation. A defined framework that enables further customization and manipulation of content types.

landing page template

As you can see, in this template one part of the structure is pre-defined, which means as many landing pages you build you’ll have already prepared content types, in this case:

  • Title: String

  • Subtitle: String

  • Slug: String

  • Hero image: Media

  • Related articles: Link to blog

What about other parts? Well, they are going to be reusable content blocks. Here’s where BCMS widgets and properties have a big role.

Step 2: Building reusable components

Reusable components in structured content refer to pieces of content or code that can be used multiple times across different parts of a website or application, ensuring consistency and reducing redundancy.

Those components in BCMS are widgets, which, with the help of BCMS properties, define the connection between content types as well as the hierarchy.

So let's start building reusable components needed for a landing page (but at the same time able to be used for other website sections, cool right?).

Now is a good time to mention that each widget in BCMS is made by groups of properties used as arrays.

CTA buttons

CTA buttons

CTA widgets consist of the following groups:

  • Headline: Rich text

  • Description: Rich text

  • Link

All these properties are empty fields, highly customizable, and content creators can write their copy and change it whenever indeed. To see how that looks on the front end I’ll leave here a CTA button example:

  • It takes a minute

  • Free support

  • 14 days free trial

Create your account

Features section

Features sections consist of an array of objects (each with a title, description, and icon).

Features section

On the front end, it looks like this:

Landing page frontend

Testimonials

The testimonial widget consists of an array of components (each with a quote, author, and author image).

testimonial widget

Front-end view:

testimonial widget Front-end view:

Step 3: Use the Landing page entry to create content

Content editors, it’s your time to shine. You have everything prepared, the only thing left is to add content copy.

This is a really straightforward process, just enter the landing page entry, fill in all the fields in the meta section, and in the content area use the widgets to add videos, images, case studies, CTA, and so on.

Step 4: Publish a landing page

Your landing page is ready to go live. As you can see, in 3 simple steps, structured content in a headless content management system helps you build faster, stronger, scalable websites and apps.

The right CMS for structured content

We have come to the end of the road (better than to a dead end). As you can see, a BCMS makes structuring content straightforward.

To work effectively with structured content, your content management system must meet two key requirements in particular:

  • Headless functionality: Your content management system must operate according to the headless principle. This enables you to input structured and unstructured content and deliver it to multiple frontends via a content API.

  • Customizable content types: Your content management system should allow you to define and configure your content types. This flexibility ensures that you can meet the specific requirements of your projects effectively.

Now, that you have all the info and instructions, feel free to use BCMS for structured content. In 3 simple steps, you will have everything ready to go live.

  • It takes a minute

  • Free support

  • 14 days free trial

Create your account