Adding a blog to Framer takes two things: a CMS collection with the right fields, and two pages bound to it — a list page and a detail template. Design the collection first. Get the fields wrong and every post inherits the mistake. The build itself takes under an hour.
TL;DR
Write the field list down before you touch the CMS. Renaming a field later is cheap. Restructuring 40 published posts is not.
Nine fields cover almost every blog: title, slug, date, excerpt, author, category, cover, body, SEO description.
Framer CMS generates the slug from the first string field in the collection. Put the title first or your URLs come from whatever field happens to sit at the top.
Most Framer blog templates ship without an H1 on the post page. The big title is styled text, not a heading tag. Fix that before you publish.
Bind the page title and description in the detail template’s page settings to CMS fields, or all 60 of your posts share one meta description.
Design the collection before you create it
The CMS is a database. You are designing a schema, not decorating a page. Ten minutes with a notepad here saves a weekend later.
The reason is mechanical. Once you have published posts, three things become expensive: changing which field drives the slug, adding a required field that 40 existing posts do not have, and splitting one field into two. None are impossible. All mean opening every post and editing it by hand.
So before you click “New Collection”, answer four questions. What does a post card show in the list? What does a post page show at the top? What does Google get in the search result? What do I want to filter by in twelve months? The answers become your fields.
The nine fields that are non-negotiable
Field | Type | Why it is required | The gotcha |
|---|---|---|---|
Title | Plain text | Drives the slug, the H1, and the meta title fallback | Must be the first string field in the collection |
Slug | Slug | The URL | Auto-filled from the title. Edit it before first publish, not after |
Date | Date | Sort order, freshness signals, and the | Store one publish date. Add a separate “updated” date if you actually maintain posts |
Excerpt | Plain text | Card summary and the meta description fallback | Cap it at roughly 155 characters so it survives as a description |
Author | Reference or plain text | Byline, author archive pages, | Use a reference to an Authors collection if you will ever have two writers. Converting text to reference later is manual |
Category | Reference or option | Filtering, related posts, internal linking | Pick one primary category per post. Multi-select taxonomies get messy fast |
Cover image | Image | Card thumbnail and the Open Graph image | Set alt text per item. Framer will not invent it for you |
Body | Rich text | The actual article | Headings inside the body start at H2, never H1 |
SEO description | Plain text | Per-post meta description | Separate from the excerpt so you can write for the SERP without changing the card copy |
Nine fields. That is the floor, not a wish list.
Fields worth adding, and fields worth skipping
Add a boolean called “Featured” if your homepage or list page pins one post. Add a plain-text “Reading time” only if you are willing to type it — Framer has no server-side logic, so nothing computes it for you from the body field.
Skip a free-text tags field. It looks harmless and turns into 90 near-duplicate tags in a year, each one a thin page if you ever build tag archives. Skip a separate “OG image” field unless you genuinely produce different social art from your cover image. Skip a “status” field; Framer’s own draft state already does that job.
Create the collection and get the slug right
Create the collection, then set the fields in the order above. The order matters for exactly one reason: Framer builds the slug from the first string field it finds. Title first, always.
Slug rules I apply on every build
Three to six words. Lowercase. Hyphens. No dates, no numbers, no category folder in the path unless you are certain the taxonomy will never change.
/journal/how-to-add-a-blog-to-framer is fine. /journal/2026/03/how-to-add-a-blog-to-framer-cms-list-and-detail-template-tutorial is not. The first is stable. The second breaks the moment you update the post in a different year.
If you do change a slug on a post that already has links or impressions, use Framer’s native redirect settings in site settings and add a 301 from the old path to the new one. Do it in the same session you rename. A redirect written a week later is a week of 404s.
Build the list page
Create a page at /journal or /blog. Pick one and never move it.
Drop a collection list on it and point it at your posts collection. Design one card, and every item inherits it. Bind the cover image, title, excerpt, date, and category. Link the card to the detail template.
Three settings decide whether this page works: sort by date descending, a deliberate item limit, and a filter if the page is category-specific.
Pagination: pick the mode that matches your post count
Framer outputs static pages served from a CDN. That is good for speed, and it means the HTML that ships is the HTML that gets crawled. Anything a script reveals after load is a different story.
Approach | What ships in the HTML | Crawl and speed impact | Use when |
|---|---|---|---|
Render every post on one page | All cards, all images | Every post is one click from the list. Image weight grows linearly and can push LCP past 2.5s | Under about 50 posts |
“Load more” button | Only the first batch | Posts beyond the first batch may never be linked in static HTML | Never as the only path to a post |
Split by category into real pages | Full card set per category page | Crawlable, and each page has a genuine topic | 50+ posts, clear categories |
If you use a load-more pattern for user experience, that is fine. Just make sure a crawlable path to every post also exists — a category page, an archive, or the sitemap doing real work.
Category filtering
Framer gives you two honest options. Build separate pages per category, each with a filtered collection list, and link them from a row of pills. Or use a code component to do client-side faceted filtering.
I use separate pages nine times out of ten. They are real URLs, they are indexable, and they rank for “[topic] articles” queries that the filter approach cannot touch. The trade-off is maintenance: six categories means six pages to keep in a shared layout.
Build the detail template
In Framer, the detail page is a CMS page bound to the collection. One design, one URL pattern, one page per item. This is where most blogs quietly fail.
The H1 problem
Open a Framer blog template. Look at the giant post title. In most templates it is a text layer set to 48px with a p or div tag underneath — because heading tags in Framer follow the text style you applied, not the visual importance you intended.
The result is a post page with no H1, or worse, an H1 sitting in the nav or the footer while the article title is a paragraph.
Fix it in the layer’s settings: set the title text tag to H1. One H1 per page. Then check the rich text body. Any heading inside the body must be H2 or lower, and it must not skip levels — H2 to H4 with no H3 between them is a structural error even though it looks fine.
The tag lives on the template, so one fix covers every post at once. That is the argument for getting the template right before you write ten posts.
Binding per-item metadata
Open the detail template’s page settings. There are fields for page title, description, and social image. Bind each one to a CMS field rather than typing static text.
Page title: post title, plus a suffix if you want one.
Description: SEO description field, falling back to excerpt.
Social image: cover image.
If you skip this, every post ships with whatever placeholder the template had. Sixty posts, one description, and Google rewrites all of them.
Schema is the other half. Framer has no plugin ecosystem for SEO, so Article structured data goes in as custom code in the page settings, with the CMS values injected. It is a JSON-LD block with headline, datePublished, author, and image. Fiddly, but it is written once on the template and it applies to every post. This is a chunk of what I do on SEO retainers.
Styling the body
Rich text inherits styling from the template. Set your paragraph size, line height, list styling, blockquote, and inline link colors once on the rich text element and every post follows.
Set a max width of around 700px on the body column. Long measure is the most common readability failure I see on Framer blogs, because the default is often a full-width container that runs text to 1200px.
Related posts
Two mechanisms, and they behave differently.
The automatic version: place a second collection list on the detail template, filter it by the current item’s category, and limit it to three. Fast to build. The weakness is that it sometimes surfaces the post the reader is already on.
The editorial version: add a multi-reference field called “Related posts” and pick three by hand per article. More work per post. Much better internal linking, because you control which pages receive link equity.
For a blog under 30 posts I use the manual field. Above that, automatic by category, with a manual override field that wins when it is filled.
RSS and sitemap
Framer generates a sitemap for your published pages, and CMS pages are included. Two things to verify. First, that draft or unpublished items are genuinely not in it. Second, that any thin category or author pages you created are worth indexing — if a category has two posts, keep it out of the navigation until it has six.
RSS is the honest gap. Framer does not give you a per-collection feed generator the way WordPress does out of the box. If you need a feed, the practical routes are a third-party feed service that reads your list page, or hosting the feed elsewhere and pointing readers at it.
Before you spend a day on this, ask who is subscribing. For most business blogs the answer is: an aggregator you do not care about, and a newsletter tool that can read your sitemap or take a manual paste. If RSS is genuinely load-bearing for your distribution — a podcast, a syndication partner, a developer audience — that is a real reason to question Framer for this project.
When Framer is the wrong tool for your blog
I would rather say this now than after you have paid me.
Framer is the wrong choice if you need editorial workflow with roles and approvals, gated or member-only posts, native comments, or a taxonomy with hundreds of terms. Framer does not support native membership or gating, and it has no server-side logic. Those constraints are architectural, not gaps waiting on a roadmap.
It is also questionable at very high post counts. A 40-post blog is a joy in Framer’s CMS. A 2,000-post archive with fifteen years of URLs, contributor accounts, and legacy shortcodes is a WordPress problem that stays a WordPress problem, or becomes a headless CMS problem. Migrating it is possible — that is most of what a WordPress to Framer migration involves — but the decision deserves an honest crawl first, not enthusiasm.
Where Framer is clearly right: a marketing site with a blog of 10 to 300 posts, one to three authors, no gating, and a team that wants to publish without a developer. That is the sweet spot, and it is the shape of most business blogs.
If you want the collection modeled and the templates built properly rather than retrofitted, that is CMS setup work, and it sits inside the flat base on my pricing page rather than being billed as an extra.
FAQ
How many CMS fields does a Framer blog need?
Nine: title, slug, date, excerpt, author, category, cover image, body, and SEO description. Title must be the first string field because Framer generates the slug from it. Add a “featured” boolean if you pin posts. Skip free-text tags, which multiply into near-duplicate thin pages. Define all nine before publishing your first post, because restructuring published items is manual work.
Why does my Framer blog post have no H1?
Because heading tags in Framer follow the applied text style, not visual size. Most blog templates style the post title as large text with a paragraph or div tag, so the page ships without an H1. Select the title layer on the CMS detail template and set its tag to H1. The template applies the fix to every post at once.
Can each Framer blog post have its own meta description?
Yes. Open the CMS detail template’s page settings and bind the description field to a CMS field — an SEO description field, or the excerpt as a fallback. Do the same for page title and social image. Without binding, every post inherits one static placeholder description, and search engines will rewrite your snippets.
Does Framer support RSS feeds for CMS collections?
Not natively in the way WordPress does. There is no built-in per-collection feed generator, so the practical options are a third-party feed service that reads your list page, or hosting a feed elsewhere. Check whether RSS is genuinely part of your distribution first — for most business blogs, newsletter and sitemap coverage matter far more.
How do I add related posts in Framer?
Two ways. Automatic: add a second collection list to the detail template, filter it by the current post’s category, limit it to three. Manual: add a multi-reference “Related posts” field and pick three per article. Manual gives better internal linking control and is worth the effort under about 30 posts; automatic scales better above that.
Send me a URL and I will send back a crawl summary, a redirect risk list, and a fixed quote within 48 hours — no call required.
framerfry
Founder-led Framer studio by Zakir Ullah — Official Framer Expert & Creator. Design, build, migrate, maintain and rank — one person, end to end.
© 2026 Framerfry. Built by an Official Framer Expert.
framerfry