At Bright IT, we have developed numerous websites using Contentful as a content authoring and delivery platform. Each project inevitably starts with questions about how best to structure pages within Contentful and how to link between those pages effectively. These are crucial aspects to ensure a seamless content management experience and an efficient workflow. This article dives into those questions, illustrating why we believe the Arboretum Sitemap App is indispensable for any Contentful-powered website project. We will explore the challenges of managing website structures in Contentful and how Arboretum helps to simplify these tasks, making the entire process more intuitive for both developers and editors.
Contentful: A Powerful Yet Generic Headless CMS
Contentful is a versatile, headless CMS designed for a broad range of scenarios. It is inherently agnostic to the channels and formats in which content may ultimately be consumed. To accommodate this flexibility, Contentful has a generic user interface that can make managing content for specific use cases more challenging, particularly for editors. For someone new to Contentful, understanding how to translate abstract content models into a coherent website structure can be quite daunting.
In practice, many projects use Contentful as a CMS for websites and e-commerce platforms. Unfortunately, there is no standard page model, and therefore no standard way to manage parent-child relationships within Contentful. This makes it difficult for editors to organize and maintain the website structure, which is crucial for their workflow. Though Contentful Studio provides an option to visually edit certain pages (or rather "experiences"), it still does not address website structure management, which leaves a gap in functionality.
However, this doesn’t mean Contentful is an ill-suited CMS for website projects—quite the contrary. With the right integrations and helper tools, Contentful becomes an incredibly powerful and flexible system that can work really well also in the context of website content management. This is exactly the place where Arboretum Sitemap App comes into play, bridging the gap between the power of Contentful and the usability that editors need.
Dynamic Website Structure in Your Headless CMS
Managing a dynamic website structure in a CMS means having the ability to create and manage a tree of pages in a CMS without requiring code changes. This capability is essential for effectively organizing website content and maintaining flexibility in the editorial process. It also allows the website structure to be independent of the presentation layer. A dynamic structure empowers editors to make changes autonomously, without developer intervention, which reduces potential development bottlenecks.
Not every project requires dynamic website management though. For some, the additional complexity may be an unnecessary overhead—particularly if the CMS plays only a minor role in content delivery. In those simpler cases, using a basic routing system provided by the website's framework might be sufficient. This is typically the case for smaller projects, where content updates are infrequent, and website structure remains largely static. For these projects, managing website structure in the codebase rather than in the CMS makes sense.
For more content-driven websites, however, a dynamic sitemap is often critical for enabling non-developers to easily manage and modify the site. Websites that have frequent content updates, require multiple contributors, or support multilingual versions can greatly benefit from a CMS-managed structure. Having a dynamic structure means that new pages can be created, updated, or moved without waiting for a development cycle. This not only empowers content editors but also allows for a more agile approach to managing digital content.
Without a central, dynamic sitemap, developers end up hardcoding parts of the website structure. This creates barriers for editors who need to make structural changes (eg. by moving some pages from one part of a website to another) or add new links (eg. link to a hardcoded page — how to even express such intent in a CMS?) — tasks that should ideally be straightforward. Additionally, managing multilingual sites becomes much harder, as developers may need to intervene to add localized versions of a website after adding a locale in a CMS. This can be particularly cumbersome for global brands that need to quickly and easily add or update localized content to support their international audiences.
Overall, relying on hardcoded logic leads to poor editor experiences, particularly when the goal is to enable editors to publish and manage content autonomously. A dynamic sitemap streamlines the editorial workflow and reduces dependency on development resources. It provides a clearer view of the entire website’s structure, which not only helps editors to maintain consistency but also helps avoid issues related to broken links or incorrect page relationships.
Enters Arboretum
With these challenges in mind, we began developing a solution to address them with minimal additional code and as little restriction on content models as possible. Our goal was to provide a consistent way of expressing child-parent relationships between pages, paired with an intuitive UI that presents a visual tree structure of the website for editors. This led to the creation of Arboretum Sitemap App, a solution designed to enhance the usability of Contentful without compromising its flexibility.
Arboretum Sitemap App: A Flexible Solution for Website Management in Contentful
The Arboretum Sitemap App is available through the Contentful Marketplace, making it easy for any Contentful user to install and use. During installation, users define which content types represent pages and how child-parent relationships are encoded. The setup process is simple and takes only a few steps, but the benefits it provides to editors are significant. After that, editors can easily organize and visualize the website structure while authoring content, allowing them to focus more on creating engaging content and less on fighting with the website structure.
Some key features of the Arboretum Sitemap App include:
Data Ownership: All data remains within Contentful. No additional information about your sitemap is stored outside the CMS, ensuring there is no vendor lock-in. This is an important feature, particularly for organizations that value data privacy and wish to retain full control over their content.
Minimal Content Model Influence: The app requires minimal adjustments to existing content models, making it easy to adopt without cluttering your existing content. The conventions needed to encode child-parent relationships are lightweight and unobtrusive.
Multilingual Support: Arboretum works seamlessly with locales defined in Contentful, enabling localized URLs and locale prefixes for localized versions of your website. This feature is especially helpful for global brands that need to manage multiple languages while maintaining a coherent structure for both editors and end users.
Preview and Edit Shortcuts: The preview shortcuts make it easy for editors to switch between draft and published versions of a page, as well as quickly access the entry (page) editor. Additionally, an Arboretum built-in widget can be added to an entry (page) sidebar, allowing editors to preview the page directly from the content entry.
For setup details, check out the Arboretum setup guide. This guide will walk you through every step of the installation and configuration process, ensuring you get the most out of the app.
Arboretum SDK: Bridging Editors and Developers
While the Arboretum Sitemap App revolutionized the editor experience, it became evident that developers needed similar tools to maintain alignment with the website structure. Hence, we developed the Arboretum SDK - a framework-agnostic TypeScript library that allows developers to interact with the sitemap. The SDK provides the capability to integrate dynamic sitemaps based on data from Contentful seamlessly with the front-end, giving developers full control over how content is presented.
The SDK facilitates tasks like mapping paths to content entries, refreshing the sitemap, and traversing the website page tree. It ensures that the website’s code has the same perspective on site structure as the Arboretum Sitemap App. Using the Arboretum SDK ensures that the logic for building the website structure in your custom website code is the same as in the Arboretum Sitemap App, as both use the same underlying code. This alignment minimizes the chance of discrepancies, ensuring that editors see the same page structure in the Arboretum Sitemap App in CMS as is used on the website.
You can explore a detailed description of the Arboretum SDK, as well as a step-by-step guide for integrating it into your Next.js project. This guide covers all essential topics and aims to make integrating dynamic sitemaps into your website based on modern JavaScript frameworks a straightforward task.
Conclusions
We would love to hear your thoughts on dynamic website structures in your headless CMS projects. Do you share our observations? Have you faced similar challenges in managing site structure? We invite you to join the conversation and share your experiences.
We hope this article has convinced you that Contentful can be an excellent CMS for your next website project - especially with the Arboretum Sitemap App to make content management easier. By simplifying the way you manage and visualize your content structure, Arboretum helps unlock the full potential of Contentful, transforming it from a powerful but complex tool into a highly efficient content management experience. Best of all, the Arboretum Sitemap App is free to use, making it a valuable addition to your Contentful toolbox.
Please consider giving Arboretum a try on your next project and let us know how it improves your workflow!
Dr. Tomasz Strumiński
Head of Development, Bright IT