How to Add Reading Time and Post Metadata to Webflow Blog Posts

To show estimated reading time on a Webflow blog, you can use a small JavaScript snippet that counts the words in your rich text element on page load, or calculate the reading time beforehand and save it in a CMS number field. The JavaScript method is automated and requires no manual entry, while the CMS field method gives you absolute control over the displayed numbers.

As a Webflow developer who has built over 450 websites, I know that small details make a massive difference in user engagement. When visitors arrive on a blog post, they quickly scan the page to decide if the content is worth their time.

Estimated reading time acts as a micro trust signal. It sets expectations immediately, letting a reader know if they are committing to a quick two-minute tip or a deep ten-minute guide.

Here is how to set up both methods, along with best practices for designing a clean, professional blog post byline.

Why Metadata and Reading Time Lift Engagement

If a visitor sees a wall of text without any context, their initial reaction is hesitation. By placing the publication date, author name, and estimated reading time at the top of your article, you provide immediate structure.

For coaches and SaaS founders, this metadata builds editorial authority. It proves that you write fresh, structured content. For developers and marketers, it provides a clean user experience that makes articles feel like they belong in a premium publication.

When readers know that an article will only take four minutes to read, they are far more likely to scroll down and start reading rather than bouncing back to search results.

Method 1: The Automated JavaScript Approach

If you want a set-it-and-forget-it system, JavaScript is the best choice. The script automatically reads your blog post body, counts the words, calculates the time, and displays the result when the page loads.

To set this up, you need to add custom attributes to two elements on your blog post template page.

First, select your rich-text element that displays your post body. Go to the element settings panel, scroll to the bottom, and add a custom attribute:

• Name: data-reading-time
• Value: content

Second, select the text block where you want the reading time to appear (for example, inside your byline section). Add another custom attribute:

• Name: data-reading-time
• Value: target

Now, open your Blog Posts Template page settings. Scroll down to the Before tag custom code section and paste the following script:

<script>
document.addEventListener("DOMContentLoaded", () => {
  const contentElement = document.querySelector("[data-reading-time='content']");
  const targetElement = document.querySelector("[data-reading-time='target']");
  
  if (contentElement && targetElement) {
    const text = contentElement.innerText || contentElement.textContent;
    const cleanText = text.trim();
    
    if (cleanText.length > 0) {
      const wordCount = cleanText.split(/\s+/).length;
      const wordsPerMinute = 200; // standard reading speed
      const readingTime = Math.ceil(wordCount / wordsPerMinute);
      
      targetElement.textContent = `${readingTime} min read`;
    } else {
      targetElement.textContent = "1 min read";
    }
  }
});
</script>

This script extracts all the text inside your rich-text block, removes extra spaces, splits the text into an array of words, and counts them. It divides that count by the standard reading speed of 200 words per minute. It then rounds up to the nearest whole number using Math.ceil and updates your text block.

This happens instantly on page load. The user will see a clean "5 min read" label.

Method 2: The Manual CMS Number Field Approach

While JavaScript is simple, it does have a limitation. The calculation only runs on the individual blog post page. If you want to show the reading time on your blog home page, in search results, or inside featured post cards on other pages, client-side JavaScript is difficult to implement because it would have to load and read the content of multiple articles simultaneously.

The CMS number field method solves this. It stores the reading time directly in your Webflow database.

Here is how to set it up:

1. Navigate to your CMS Collections panel and open your Blog Posts settings.
2. Click Add New Field and select Number.
3. Label it Reading Time and save the collection.
4. When writing a blog post, manually enter the estimated reading time (for example, 4).
5. On your blog template page, select the text block inside your metadata wrapper.
6. Connect that text block to your Reading Time field.
7. To make it display correctly, type "min read" as text before or after the bound number field in Webflow's text formatting settings.

This method gives your marketing team total control. If an article contains complex code blocks or infographics that take longer to digest, they can manually set the reading time higher than a simple word-count formula would suggest.

The downside is that someone must remember to count the words and update this field every time they publish a post.

Building a Polished Post Byline

Once you have set up your reading time, pair it with other metadata to build a clean editorial layout. The standard layout structure includes the author's avatar, the author's name, the publication date, and the reading time.

Create a parent Div Block and call it metadata-wrapper. Set its layout to Flexbox, align it horizontally, and set the vertical alignment to center.

Inside this wrapper, add these elements:

• An Image element for the author's avatar. Set it to a small, fixed size, like 32px by 32px, and set the border radius to 100% to make it a circle. Bind it to your Author collection's profile image.
• A Text Block for the author's name. Set the text color to a dark gray and bind it to your Author name.
• A Text Block for the date. Bind it to your Publish Date. You can choose a clean format, like "Month DD, YYYY" in Webflow's binding settings.
• A Text Block for the reading time, using either the JavaScript target attribute or the CMS number field.

To separate these elements visually, insert a tiny bullet character (•) or a vertical line (|) between them. Give these separators a class, like metadata-separator, and style them with a light gray color and small horizontal margins.

Keep the typography of your metadata section subtle. Use a small font size (around 14px) and set the color to a muted gray. It should be easily readable, but it should not compete with your H1 post title for visual attention.

If you want to review your overall site structure or need help optimizing your Webflow blog layouts for conversions, head over to my Webflow strategy page. I also offer expert white-label Webflow development for agencies who need pixel-perfect, clean builds handed off to their clients.

Estimated reading time is a small detail that shows your team respects the visitor's time. By implementing a clean metadata structure, you make your content look more professional, keep readers engaged, and build trust from the moment the page loads.