Skip to main content

How to Use H1, H2, and H3 Headings in Prismic

B
Written by Beth Graff
Updated yesterday

When building or editing content in Prismic, proper use of headings (H1, H2, H3) improves readability, SEO, and accessibility. This guide explains how to define headings within different slices and content types, and outlines best practices for structuring your page.

Understanding Heading Behavior in Prismic

  • Certain slices allow you to define a Title as an H1 or H2
    Some slices—such as standard text or content sections—give you the flexibility to choose the heading level directly when editing the text.

  • Some slices are hard-coded as H1
    Hero slices, for example, are designed to be at the top of a page and will always render their title as an H1 for SEO and design consistency.

  • Content pages and slices like blog posts
    These often include a mix of heading and paragraph elements. For example, in a blog post slice, you can define a heading (H2 or H3) and add supporting text beneath it.

How to Change a Heading in Prismic

  1. Highlight the text you want to change.

  2. A control bar will appear above the selection (see example screenshot).

  3. Click the formatting dropdown (e.g., “Heading 1” in the screenshot).

  4. Choose your desired heading level (Heading 1–6) or Paragraph (available on certain elements).

Best Practices for Using Headings

1. H1 – Main Page Title

  • Use only one H1 per page.

  • It should describe the overall topic of the page.

  • Typically set automatically in Hero slices or main titles.

2. H2 – Section Headings

  • Use H2 for main sections beneath the H1.

  • Helps users and search engines understand page hierarchy.

  • Include relevant keywords naturally.

3. H3 – Subsection Headings

  • Use H3 to break down H2 sections into smaller topics.

  • Keeps content organized and scannable.

4. SEO & Accessibility Tips

  • Keep headings descriptive and concise.

  • Avoid skipping heading levels (e.g., don’t jump from H1 to H4).

  • Use keywords in headings where it makes sense, but don’t overstuff.

Example of a Well Structured Page

Summary

Using headings correctly in Prismic not only improves your page’s design but also boosts SEO performance and user experience. Hero slices usually handle the H1 for you, but other slices let you choose H1, H2, or H3 as needed. Always maintain a logical heading structure to ensure your content is clear, accessible, and search engine-friendly.

Did this answer your question?