Structured Content guide: Reusable blocks for scalable websites
Published: 2024-07-12 14:01:24

Is your site too inconsistent? Is your content team ineffective? Are you spending too much time on technical SEO? Structured content is the solution. This guide explores the basics of structured content and how it can help solve common challenges in content management. Learn how to create reusable content blocks and build scalable, efficient websites. Discover the differences between structured and unstructured content and how using a headless CMS can streamline your content strategy. 

## What is structured content?

Structured content is organized, reusable, and machine-readable data. It’s typically stored in a database, making it easily searchable and adaptable across various platforms. Structured content follows a predefined schema, which ensures consistency and efficiency in content management.

### Key characteristics of structured content

There are three key touchpoints when it comes to content structure**:**

- **Organized**: Arranged in a predictable, systematic way.
- **Reusable**: Can be easily repurposed across different channels.
- **Machine-readable**: Easily interpreted by software, facilitating automation and integration.

## Structured vs. Unstructured Content

This is actually a comparison between organized and unorganized content Structured content - sometimes called component content - is content that is organized predictably. To manage that, structured content follows a set of rules - called a schema, information architecture, [content modeling](https://thebcms.com/blog/content-modeling-basics) (more on this below) or simply put organization.

On the other side, content without structure-unorganized content is normally intended for single-use, which is difficult to adapt and evolve. The focus here is on the context of how information is consumed. In contrast, structured content is intended to function across different frontends, with the highest priority on the relationships between content pieces, not the context.

These different focuses have a great influence on building website structure and also on content manipulation.

For example, consider a company that frequently posts job listings on its website. In an unstructured content approach, each job listing might include repetitive information such as a company description, address, and application instructions.

With structured content, this repeatable information would be stored in separate modules. Each job listing would then simply link to these modules, ensuring consistency. Whenever there is a need to update the company description, the changes would be made in one place and automatically reflected across all job listings.

For a better understanding of how this content manipulation works check out: [BCMS Widgets - Reusable structured content - everything you need to know](https://thebcms.com/blog/bcms-widgets-reusable-structured-content-tutorial)

And to understand why structure is important in content delivery here’s an in-depth comparison table:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5i7srqppfpr7jqcibrkr.jpg)

## Components of structured content

A structured content creation system consists of various components and systems. Adding more layers of information improves the content structure, making it easier for users to develop content and for consumers to consume it.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2trs2k50edd7rnaj3c0.jpg)

The following components make content well-organized, easily manageable, and highly adaptable.

### Content types

[Content types](https://thebcms.com/blog/content-modeling-headless-cms) define the different kinds of content that will be created and managed. Examples include articles, product descriptions, user profiles, and event listings. Each content type has its own set of attributes and rules.

### Fields and Attributes

Fields and attributes are the specific elements that make up a content type. For instance, a blog post content type might include fields such as title, author, publish date, body text, and tags. These fields ensure that each piece of content is complete and follows a consistent format.

### Metadata

Metadata provides additional information about the content, such as keywords, categories, and descriptions. This helps with organizing, searching, and optimizing content for SEO purposes. Metadata makes content more discoverable and manageable to search engines.

### Content models

Content models define the structure and relationship between different content types and their fields. They ensure that content is organized systematically and can be easily reused and repurposed across various platforms.

### Schemas

Schemas are sets of rules that define the structure and organization of content. They ensure that all content follows a consistent format and can be easily interpreted by machines. Schemas are essential for creating machine-readable content that can be easily indexed and searched.

### Modules and components

Modules and components are reusable pieces of content that can be combined to create larger pieces of content. For example, a product description module might be used across multiple product pages.

### APIs and Integration

APIs enable structured content to be accessed and integrated into various systems and platforms. This allows seamless content delivery across websites, mobile apps, and other digital channels. APIs ensure that content can be easily shared and reused.

### Version control

Version control tracks changes to content over time, allowing for the management of different versions and the ability to revert to previous versions if needed. This is crucial for maintaining accuracy and consistency across all content.

## How to create structured content

Creating structured content involves a systematic approach to ensure your content is organized, reusable, and easily manageable. Here’s how you can create valid structured content step-by-step:

### Step 1: Identify content types

List the different kinds of content your business needs to manage, such as articles, product descriptions, user profiles, event listings, and FAQs.

For example, content types for job listings, include fields like:

- Job title
- Image
- Location
- Job description
- Requirements


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m6qq9k5z8ivaim4z32s.jpg)

### Step 2: Define content models

Outline the structure, fields, attributes, and relationships between different content pieces for each type.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk1qkr0258fi8p7t5j9o.jpg)

### Step 3: Create schemas

**Develop schemas for each content type**: Use XML to create schemas that define the structure and organization of your content. These schemas provide a set of rules that ensure your content follows a consistent format.

```jsx
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="jobListing">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="title" type="xs:string" />
        <xs:element name="image" type="xs:string" />
        <xs:element name="location" type="xs:string" />
        <xs:element name="description" type="xs:string" />
        <xs:element name="requirements" type="xs:string" />
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>

```

### Step 4: Incorporate metadata

Add metadata for organization and SEO: Include metadata elements like keywords, categories, descriptions, and tags to enhance searchability and optimize content for SEO. Example: Add metadata like tags for job category, employment type, and keywords to improve searchability and SEO.

### Step 5: Use XML Tags

Tagging content with XML: Use XML tags to label and structure your content. Tags are enclosed in ‘<’ and ‘>’ characters and indicate a component's start and end. Tags are nested to show relationships between content pieces, providing clear structure and meaning to your content.

```jsx
<jobListing>
  <title>Software Engineer</title>
  <image>http://example.com/images/software-engineer.jpg</image>
  <location>San Francisco, CA</location>
  <description>Develop and maintain web applications.</description>
  <requirements>Experience with JavaScript, HTML, CSS, and React.</requirements>
  <metadata>
    <category>Engineering</category>
    <employmentType>Full-time</employmentType>
    <keywords>Software Engineer, JavaScript, React</keywords>
  </metadata>
</jobListing>

```

### Step 6: Leverage APIs for Integration

Integrate content with various platforms: Use APIs for content delivery across websites, mobile apps, and other digital channels. Ensure your content management supports API-driven content management.

Example: [How to use Headless CMS as your job board CMS](https://thebcms.com/blog/headless-cms-as-job-board-cms)

Using these steps, you will be able to create well-organized, manageable, and highly adaptable structured content that will reach and engage your target audience.

At the end of this structured content example, I leave you with a content structure template, which you can use as a guide for creating a structure.

```jsx
<jobListing>
  <title>Software Engineer</title>
  <image>http://example.com/images/software-engineer.jpg</image>
  <location>San Francisco, CA</location>
  <description>
    <p>Develop and maintain web applications.</p>
    <p>Collaborate with cross-functional teams to define, design, and ship new features.</p>
    <p>Troubleshoot, test, and maintain the core product software to ensure strong optimization and functionality.</p>
  </description>
  <requirements>
    <ul>
      <li>Experience with JavaScript, HTML, CSS, and React.</li>
      <li>Strong problem-solving skills and ability to troubleshoot software issues.</li>
      <li>Excellent communication and teamwork skills.</li>
      <li>Bachelor's degree in Computer Science or related field.</li>
    </ul>
  </requirements>
  <metadata>
    <category>Engineering</category>
    <employmentType>Full-time</employmentType>
    <keywords>Software Engineer, JavaScript, React</keywords>
  </metadata>
</jobListing>

```

## Kinds of relationships in structured content (with examples)

Content relationships define how different pieces of content relate to each other within a system. These relationships are crucial for organizing content in a way that makes it reusable, scalable, and easily manageable. Here are the main types of relationships, along with examples of each:

### Hierarchical relationships

The hierarchical relationship organizes content into a parent-child structure. This is useful for creating nested structures such as categories and subcategories.

Example: An online store has a main category "Electronics" with subcategories "TV", "Mobile Phones" and "Laptops".


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jffv79809ra33esodv0s.jpg)

### Associative relationships

Links content pieces that are related but do not fit into a hierarchical structure. Often used for tagging and metadata systems.

Example:

Tags and keywords: An article about smartphones is tagged with keywords like "technology", "gadgets", and "reviews".

### Referential relationships

Uses references to connect content pieces, allowing for content reuse without duplication.

Example:

Author profiles: Multiple articles reference the same author profile, ensuring consistency across all publications. Like this:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvmkz20yhg337853pidx.jpg)

In case you want to read these:

- [Maximizing ROI: Content Operations and Headless CMS - hack you can't miss](https://thebcms.com/blog/content-operations-headless-cms)
- [Composable Architecture 101: Guide to better understanding](https://thebcms.com/blog/composable-architecture-guide)
- [Content Hub vs Content Federation: Is the same thing?](https://thebcms.com/blog/content-hub-vs-content-federation)

### Sequential relationships

Organize content in a specific order, which is essential for content that needs to be consumed in a particular sequence.

Use case:

[HubSpot SEO Online Course](https://academy.hubspot.com/courses/seo-training)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kaobg1n4j7vd402qz0a.png)

A course on SEO that has modules that must be completed in sequence.

### Compound relationships

Groups multiple content pieces together as a single entity. This approach is commonly used in e-commerce for product bundles.

So, on [Shopify’s example](https://help.shopify.com/en/manual/products/bundles), you can see how to master this kind of relationship.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/calc31pllaa32u4y0jdh.png)

### Bidirectional relationships

Bidirectional relationships in structured content are used to create mutual references between content pieces, ensuring that each item links back to the other. This is particularly useful for enhancing user navigation and engagement on a website.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyz6hzfcwsze5p1fdrx6.png)

## BCMS and Structured content

Choosing [BCMS headless CMS](https://thebcms.com/) for managing structured content is smart due to its inherent flexibility, scalability, and efficiency. By decoupling the backend from the front end, a headless CMS allows for seamless content delivery across various platforms, ensuring that your content remains consistent and personalized for users, whether they are accessing it via a website or mobile apps.

Also, BCMS fully supports all the features of structured content. It allows for a clear definition of content pieces, ensuring that each piece of content follows a consistent structure. This structured approach makes managing any relationships between the content pieces you choose easier.

The ability to define schemas and utilize metadata enhances searchability and SEO, while modular content components ensure reusability and efficiency. This makes BCMS a perfect solution for organizations looking to maintain dynamic, responsive, and scalable content structures.