Clear content structure and formatting enhance readability, improve navigation, and boost SEO performance. When setting up your Kontent.ai project, decide on the right approach based on your business requirements.
Content structure and semantic formatting help your audience and search engines understand your content on a webpage or other channels. They improve:
Readability and navigation for users of your website or app
Excitement and motivation of the users as they grab the attention, focus the users on what’s relevant and keep them engaged
Search engine rankings and search relevancy from the SEO perspective
Accessibility as screen readers rely on formatting and structure to navigate content
As usual with headless, you can choose between the default built-in functionality, configure a custom option, or combine both approaches to achieve your desired outcome.
Your front-end app gets rich text content with hardcoded tags, such as heading levels, which can’t be easily changed
Approach B: Formatting content types
Another approach is to create a reusable content type for headings or other block formatting, like the callout boxes you see in this article. Content creators then use components or linked items in the built-in rich text editor to create the desired structure and semantics.You have two options on how to implement this approach:
Create a dedicated content type for each formatting option.
Create one content type with a taxonomy (or a multiple choice element if you don’t need to filter it in the content inventory) and let content creators select the specific type of formatting.
For example, headings can have one content type and a taxonomy with the terms large, medium, and small. Then, on your front end, you can decide how these sizes actually render.This can come in handy when you have a more complex nesting scenario. For example, an item may use the H1 heading when used standalone but needs to switch to H2 when nested under another H1.
Pros
Cons
Easy dynamic front-end resolution (for example, a heading can be H2 in one channel and H3 in another)
Usable for any block formatting options you define
You can create a special syntax for both inline and block formatting that your front end will render based on your rules.For example, we use this approach here at Kontent.ai Learn for icons. To display an icon, such as , we write {@icon-cogwheel@}.