Skip to main content

Select your location

Search
Person holding a phone next to their laptop

Get to know Contentful Compose

Contentful is one of the market leading headless content platforms. The separation of the front end interface and content allows authors to focus on writing and publishing great content and helps designers and developers deliver it to the users regardless of channel.

One of the most common challenges for authors adopting a headless platform is moving from page-based CMS (e.g. Wordpress) to one where you are creating content in a more structured, reusable format. Whilst the Contentful CMS is very user friendly, they want to make this transition as simple as possible

Enter Compose.

Compose is a new App for Contentful that allows authors who are working on page-based solutions like websites to manage their content with a streamlined interface. It’s worth highlighting that Compose is an additional paid-for add-on (it does however come included in all Enterprise agreements) along with another feature “Launch” which streamlines and visualises the content publishing process in a useful marketing calendar format.

Let's take a quick tour around, adding it to your Contentful space and exploring some of the benefits it brings.

Installation into a new space

Before you can dive into using Compose on your Contentful space there’s a little bit of setup work that needs to be done. The amount of effort depends on if you are using an existing space with models and content entries or if you are starting afresh.

If you are starting with a completely new space, then it should be smooth sailing. Contentful promotes the apps on the “Space home” page. Simply click on the “Start installation” button and follow the guided steps.

Step one involves installing the required models into your space: “Page” and “SEO Metadata” (don’t worry, it's just these two, so it’s not going to use up all your content types).

Person holding a phone next to their laptop
Compose installation screen

Already got a space?

If you are installing an existing space you need to check if you already have content models named “page” or “seo”. If you have then there's a bit of work needed. The Contentful guides give some information on how to carry out this process but essentially what you will need to do is to venture into using either the CLI or getting you favourite coding language along with their SDK to manage your content model through code.

The environment feature of Contentful can be really helpful here. The process that you go through is essentially exporting your content to code, changing the names of some of the models and re-importing to a new environment. Once that’s done you can merge back to master with your new structure and carry on the installation.

Remember to always be careful when changing your Content Model and take appropriate backups wherever possible. The last thing you want is to lose all your production content through a silly spelling mistake.

What you get out of the box

By default, Compose creates two content models; “page” and “seo”. When combined, these two models form the basis of a web-ready page. The text of the models does highlight that you shouldn’t delete any fields as it can break the relationships and stop the Compose app from working. However, I have been able to successfully add fields to these two models.

Let's take a look at what these models contain in terms of fields.

SEO fields

As you can see below, the fields are pretty self explanatory, and are standard content fields for managing content relevant to search engines. Personally I wouldn’t have included the “keywords” field as this is rarely used by search engines any more due to its historical abuse by those trying to manipulate SERPs.

  • Internal name
  • SEO Title
  • Description
  • Keywords
  • Hide from search engines (noindex)
  • Exclude links from search rankings (nofollow)

I added a “Canonical” field to the SEO block as I’ve found that to be useful in projects where you might need to reference and define the master version of a page for indexing purposes.

 

A screenshot of Compose SEO fields
The Compose SEO model fields

Page fields

I think the page fields are even less exciting than the SEO ones. As you can see below, there’s only a couple but they are important. Internal name, as it suggests, is what you call the page in listings and won’t likely be used in your front end. Page title could be used if needed as the HTML title (the text that usually appears in your browser tab if you wanted it different to the SEO Meta tag). The slug is the raw part of the URL and is very important in building your information architecture (IA) but that's a whole topic in itself which we can save for another day.

The SEO meta data stores the reference to the content you create in the SEO model above.

Finally, the magic part that Compose brings to the platform is the field “Content”. This contains a link to all the different page types that you want to set up.

  • Internal name
  • Page title
  • Slug
  • SEO metadata
  • Content
A screenshot of Compose Page fields
The Compose page model fields

Creating your page templates

Once you’ve authorised and installed the Compose app into your space, you need to consider the page types that you are going to set up. Page types aren’t something new that Contentful has added to the platform, they are just the relationship between a set of fields you are going to define and the inherited page model that the installation created for you.

Some good examples of page types that you might create are Home page, Landing page, Blog post or Case study. By using the guided setup you can easily create those templates ready for you to go and define your fields.

A key thing to consider when deciding what page types and how many you need is a combination of two things; making the author's life easier and working out how fundamentally different the page content is going to be. For example, on Kin + Carta website we have a blog section that can house a lot of different pieces of content. They are all based on a single page type, what we call an “Article”. The depth of content that goes into them is up to the author and the dynamic content blocks they want to build up.

Time for some Content Modelling

Once you have your page types created using the guide interface, it’s time to add your custom fields to those pages and this requires one of my favourite activities: some content modelling!

Using the example of our Article page, I’ll show the fields setup for an article page such as:

  • Is featured article? (a simple Yes/No which an weight articles to the top of your listing)
  • Category - a drop down to define the type of article (Blog, Whitepaper, Podcast etc)
  • Published Date - the one you want to show on the page, not the date when you physically publish
  • Main title - (used on page and in listings)
  • Summary - (used in listings)
  • Thumbnail - an image to use on listings
  • Content - reference field allowing a one-to-many relationship with many different content blocks such as banners, rich text etc.
  • Author(s) - a reference field to another content model of a person, get as detailed as you want there!
  • Related articles - a reference field to allow authors to manually link related articles (you can of course have automated relationships too between articles)
  • Tags - custom tags used in the display of articles
A screenshot of an fields used on an Article page
An example article page model

The new Compose feature is easy to use, very intuitive and I think it will definitely help to onboard authors to the Contentful platform.

Steve Shaw - Technical Director

See Compose in Action

You can launch the Compose interface from your Space home and, by default, this loads up a list of all your pages that have been created. You can filter this list in the same way you can in the standard Contentful interface such as only show Articles or Case study page types.

If we create a new Article page using the template we’ve set up, we’ll get the screenshot below. The screenshot shows the “Content” tab which is a list of all the fields we created during our modelling. By clicking any of the tree items, the main view port will scroll down to that field allowing quick access for editing.

As you add more related content blocks to the page (you can see my author block in the screenshot) it will add them to the tree allowing the ability to edit other pieces of related content without leaving the interface.

A screenshot of the Compose interface
A screenshot of an article in Compose

The interface also supports the multilingual features of the platform, making it really easy to switch between different languages of your page. This can help larger international organisations to compare the different versions and update multiple languages quickly.

On the very left of the Compose interface you also have the “Page Types” option which allows us to follow the same process we went through in the guided setup to create new page types before going on to add fields to them.

Once your page is ready to go you can then publish it so it can appear on your website. Compose presents you with a list of all the related content blocks and allows you to send them all for publishing at the same time. This really helps avoid those scenarios where you publish a page but it's empty as the related items haven’t been published yet.

Get building that new website

If your project is page-based, such as a website/microsite, then using the Compose app on Contentful can really boost the authoring process. Whether it’s supporting the transition to working with a headless content model or helping rapidly deliver a proof of concept site, Compose is simple and intuitive.

With Contentful leading the charge for Headless CMS platforms it’s great to see they are still innovating and adding new features to help those that are making the transition.

Compose combined with the scheduling capabilities of Launch means it’s a breeze to get those campaigns and content strategies planned in and executed.

If you are thinking of transitioning to Contentful then get in touch to see how we can help make the process seamless.

Want to know more about Contentful or Compose?

Click here to get in touch

More like this