Blog Page Design: How Should the Listing and Post Template Look?

We are Talha Aslan and team, and in website projects we often find the blog treated as an afterthought. The home page and service pages get careful attention. The blog, however, keeps the default look of whatever theme came with the site. Yet many visitors from search meet a brand for the first time through a single post. That makes the blog template as important as the shop window.

In this guide we walk through each part one by one. We cover listing cards, categories, reading time, the table of contents, readable line length, the author box, related posts and CTA placement. At the end you will find a checklist you can use to audit your own blog.

Why should the listing page and the post template differ?

The listing page is a selection screen. The post template is a reading screen. On the listing, readers scan, compare and decide. In a post, they focus on one text for several minutes. So in blog page design, the two screens have opposite priorities. The listing has to show dense information in a tidy way, while the post has to remove anything that pulls attention away.

A mistake we see often is building both screens with the same grid and the same sidebar. For example, a three column layout that suits the listing squeezes body text into a narrow strip once it moves to the post template. Next to it, ad slots, tag clouds and archive calendars pile up. As a result, readers abandon the post and leave the site.

A better approach starts with one sentence per screen. For the listing you might write: "readers find a post that interests them within ten seconds." For the post you might write: "readers finish the text without strain and see the next step." Then you keep or remove each element based on that sentence.

What should a post card on the listing page show?

A post card is a small summary where readers make the click decision. Too much information makes scanning hard. Too little leaves readers unsure whether the post fits their question. Here is the card content we use as a starting point in our projects:

• Title: The most prominent element, and fully clickable.
• Short excerpt: Two or three lines that say which question the post answers.
• Category label: One category, linking to its category page.
• Date: Publish date or last update, whichever means more to readers.
• Reading time: Useful on long guides because it sets expectations.
• Cover image: With a fixed aspect ratio so card heights stay stable.

On most sites we recommend leaving out the author name, comment count, share counters and tag list on cards. These belong inside the post. On the listing, they only add noise. Also, make the title the actual link and stretch its clickable area over the card. That way screen reader users do not hear the same link three times.

Should blog cards use a grid or a list layout?

A grid works well on visual blogs. A list layout scans more easily on information blogs where titles and excerpts matter most. The right choice depends on your content type and on how meaningful your cover images are. The table below compares four common layouts.

On mobile, every layout collapses to one column anyway. So the real decision concerns desktop. If your cover images all feel like the same stock photo, we suggest a single column list instead of a grid. That way the reader's eye goes to the title.

How should you set up category and tag filters?

Categories form the main topic map of a blog, while tags add a finer layer of connections. Readers benefit from a small number of clearly named categories. Once a blog passes seven or eight categories, the filter bar gets crowded and readers no longer know which shelf to check. Therefore, limit categories to topics where your content truly differs.

A horizontal category bar above the listing is enough for most blogs. On mobile, this bar can scroll sideways, but the selected category should always stay visible and highlighted. In addition, each category needs its own URL and a real page with a short intro paragraph. That way the category page guides readers and also becomes a meaningful hub for search engines.

Be careful with tags. Adding ten tags to every post creates hundreds of thin pages that each hold one article. We covered how to plan deeper hierarchies in our post on category structure for large websites, which helps once your category tree starts to grow.

Does showing reading time actually help?

Reading time is a small expectation signal that tells readers how long a post will take. On long guides, it helps readers decide whether to read now or save it for later. On short news posts, it adds little. So you do not need it on every post, but if you show it, calculate it consistently.

You calculate it by dividing the word count by a fixed reading speed. The speed you pick depends on your site and language. What matters is that every post uses the same formula. Tables, code samples and images slow reading down. For dense technical posts, rounding up is the honest choice.

Show reading time next to the date on cards and in the meta line below the title in posts. Do not place it in the most eye catching spot, because it supports the content rather than leading it. If you want a quick view of how readable your text is, our readability checker reviews sentence length and paragraph structure in seconds.

Pagination, infinite scroll or a load more button?

As your archive grows, you need to split the listing into parts. Classic pagination gives each page its own URL. It also lets readers return to "page three" without hunting. Infinite scroll feels like a continuous stream. However, it makes the footer hard to reach and can send readers back to the top when they press the back button.

A load more button sits between the two, because readers decide when to continue. If you choose it, though, each loaded chunk should map to a real page URL in the background. Otherwise search engines can only reach older posts through a path that depends on JavaScript.

Our default advice is numbered pagination or a load more button whose chunks all have URLs. We explained the technical side in our guide to pagination SEO best practices. Here we only add the design side: page numbers need to be large enough to tap comfortably, and the current page needs a clear marker.

What belongs at the top of the post template?

The first screen of a post exists so readers know they landed in the right place. Readers should see the title, a short meta line and the first paragraph right away. A giant hero image that fills the screen forces them to scroll before they reach any text. For that reason, either place the cover below the title at a modest height or skip it.

1. Breadcrumb trail: Home, blog and category steps tell readers where they are.
2. Title: The only H1 on the page, stating the question the post answers.
3. Meta line: Author name, date, category and reading time in one row.
4. Intro paragraph: Two or three sentences that answer the question directly.
5. Table of contents: Right below the intro on long posts.

We discussed how breadcrumbs support both navigation and search appearance in our post on breadcrumb navigation. In a blog template, the last step of the trail should be the category. After all, readers most often want to go back to other posts on the same topic.

Where should the table of contents go, and how should it behave?

A table of contents is a list of in-page links that jump to the sections of a long post. The Nielsen Norman Group table of contents design guide recommends placing it near the top of the page, right below the intro. A table of contents buried deep in the text is easy to miss.

The same source recommends sticky behavior only for a table of contents in a side rail. If the list inside the main text sticks to the screen, readers may confuse it with the global site menu. In practice, a sticky list in the left rail on wide screens works well. On mobile, a simple collapsible list below the intro strikes a good balance.

On the technical side, mark the list up as a navigation region. The MDN reference for the nav element names menus, tables of contents and indexes as typical navigation sections. It also notes that when a page has several navigation areas, labeling each one helps accessibility. In addition, link text in the list should match the H2 headings exactly. Readers should see the phrase they clicked once they land.

How wide should readable blog text be?

The width of the text column sets how many characters fit on each line. If lines run too long, the eye struggles to find the start of the next line. If they are too short, readers keep jumping lines. The W3C WCAG Visual Presentation criterion (1.4.8) describes lines of no more than 80 characters, text that is not justified, and line spacing of at least one and a half within paragraphs.

This criterion sits at level AAA, so it is not a mandatory target for every site. Still, it makes an excellent upper bound for a readable blog template. In practice, capping the column with a unit tied to character width keeps the ratio intact when the font size changes. So when readers zoom in, the column grows with the text.

Line length, font size and line height depend on each other. Choosing a typeface that holds up at these sizes matters too, which we covered in our guide on how to choose web typography. Once you set these values correctly in the template, every new post reads comfortably by default.

How do you keep the heading hierarchy intact in a template?

The heading hierarchy is the skeleton of a post. A page has one H1. Main sections use H2, subsections use H3, and you never skip a level. This structure lets screen reader users jump between headings. It also lets your template build the table of contents automatically. Moreover, headings give scanning readers a quick summary.

A common template problem is choosing heading levels by visual size. For example, a "Popular posts" label in the sidebar carries an H2 tag and then shows up in the table of contents. To avoid this, style fixed template areas with classes instead of heading tags. Leave content headings to the author alone.

Readers rarely read line by line. Instead, they scan headings and the first words of paragraphs. We explored what this means for layout in our post on the F-pattern and how users scan pages. If you phrase headings as clear questions, readers can scan the page far more easily.

How should tables, lists and quotes behave on mobile?

Guides need tables and lists, yet these are the elements that break most often on small screens. When a wide comparison table does not fit, the whole page scrolls sideways and readers lose the text. So wrap each table in its own scrollable box and keep the rest of the page fixed.

• Mark table header cells as real header cells and never leave them empty.
• Consider splitting tables with more than four columns into two on mobile.
• Bold the first words of list items to make scanning easier.
• Use a modest side border for quotes and avoid huge decorative quotation marks.
• Prevent long URLs or code from overflowing with word break rules.

Once these rules live in the template, writers no longer need to think about them in every post. As a result, the content team focuses on content, and visual consistency takes care of itself.

Where should the author box sit, and what should it say?

An author box is a short introduction that tells readers who wrote the text and why they can speak on the topic. Google's guide to creating helpful content strongly encourages accurate authorship information, such as bylines, where readers might expect it. It also clearly warns against deceptive authorship information.

In practice, you show author details in two places. The meta line below the title shows just the name. At the end of the post, a box adds a photo, a short note on expertise and a link to the author page. Keep the box text to two or three sentences. Instead of a full biography, name concrete areas of expertise that build trust.

The author page itself is a separate design topic, and we covered it in our guide on how to build an author page for E-E-A-T. For markup, Google's article structured data documentation recommends listing each author in a separate field and putting only the person's name in the name property.

Should you show the publish date or the update date?

A date tells readers how fresh the information is. On evergreen guides, the update date means more, because readers want to know whether the content still holds today. On news posts, the publish date comes first. You can also show both, as long as each one carries a clear label.

Honesty is critical here. Refreshing the update date without a meaningful content change misleads readers. So change the date only when you actually revise the content. Also, the visible date should match the date in your structured data. Google's article documentation recommends giving publish and modified dates with a timezone.

Where should the CTA go in blog page design?

A CTA is a call that invites readers to take the next step, such as requesting a quote, joining a newsletter or exploring a related service. In blog page design, CTA placement should match the reader's intent at that moment. A big sales box on the first screen often annoys readers who came for information.

We usually rely on three spots. First, a simple inline suggestion at the end of a section that relates directly to the offer. Second, a clear CTA block at the end of the post, just before the author box. Third, on long posts only, a small dismissible reminder that appears after readers pass the halfway point.

What the CTA says matters as much as where it sits. Instead of "click now," choose concrete wording that tells readers what happens next. For button copy ideas, see our post on call to action button examples.

How should you choose related posts?

A related posts section is the most natural way to keep readers on the site, but it only works when the posts truly relate. Showing the three newest posts automatically produces suggestions that have nothing to do with the topic at hand. Instead, build a list from the same category and shared tags, ideally with a manual override.

Limit this section to three or four posts, and make the card a simpler version of the listing card. Also, place related posts after the CTA, not instead of it. Readers should first see the step the post suggests. Then, if they want to keep reading, they find the options.

Links inside the text are stronger than a related posts block, because readers click while they are in context. To plan these links with intent, follow the method in our guide to internal linking strategy for SEO.

Does a blog template still need a sidebar?

A sidebar is a secondary content area next to the text on desktop. Years ago, every blog filled it with archive calendars, tag clouds and popular post lists. Today, most mobile readers see this area at the very bottom of the page or never see it at all. Therefore, a sidebar is optional on the post template.

If you use one, give it a single clear job, such as a sticky table of contents or one simple CTA. Several jobs crowd the area and narrow the text column. On the listing page, a sidebar for categories and search can make more sense, because readers there are already choosing.

What should you check for speed and accessibility in a blog template?

A blog post is often the first page a search visitor opens. So the initial weight of the template shapes the first impression directly. Serve cover images at the right size and lazy load images below the fold on the listing. In addition, give card images a fixed aspect ratio. That way content does not shift while the page loads.

For accessibility, the basics include enough contrast between text and background, table of contents links that work with a keyboard, and meaningful link text. For example, a link that says "read more" tells a screen reader user nothing once it loses its context. Naming the card link after the post title solves this problem.

Font choice is also a balance between speed and readability. Using few weights lightens loading and keeps the template consistent. For example, one legible family for body text and at most two weights for headings suit most blogs. Fewer files also mean text appears faster on first load.

Finally, test the template with real content. A card that looks great with short sample titles can overflow with a long guide title. So test with your longest title, your widest table and your shortest excerpt. If the template stays balanced in all three edge cases, it will not surprise you in daily use.

Example scenario: how would you rework a company blog?

As an example scenario, picture a company blog that has published for years but still draws little traffic. The listing uses a three column grid full of stock photos. Posts sit in a narrow column because of the sidebar. There is no table of contents, and the system lists the three newest posts at the end of every article.

First, you switch the listing to a single column list and add excerpts and categories to the cards. Next, you remove the sidebar from the post template, cap the text width at a readable limit and add a table of contents below the intro. Finally, you pick related posts by category and place one clear CTA at the end.

We do not attach a result figure to this scenario, because every site starts from a different place. Still, the shared effect of these changes is that readers finish the text more easily and see the next step more clearly. If you also want to know why a company blog matters in the first place, read our post on why start a company blog.

Blog page design checklist

Use the list below in order when you audit your own blog page design. Check every item on mobile first, then on desktop.

1. Did you describe the job of the listing and the post template in one sentence each?
2. Do cards show title, excerpt, category, date and, where useful, reading time?
3. Do card images keep a fixed aspect ratio?
4. Is the number of categories limited, and does each have its own page with intro text?
5. Does every pagination step map to a real URL?
6. Can readers see the title and first paragraph on the first screen of a post?
7. Does the table of contents sit below the intro, with link text matching the headings?
8. Does the text column stay around 80 characters, with comfortable line height?
9. Is the heading hierarchy free of skipped levels, with template labels kept out of it?
10. Do tables scroll inside their own box on mobile?
11. Does author information appear under the title and at the end of the post?
12. Is the date honest, and does it match the structured data?
13. Is there one CTA, placed where it matches reader intent?
14. Do related posts come from the same topic?

Should you build the blog template yourself or with a team?

In a ready made theme, you can solve some of these items through settings. For example, most themes let you change the card layout or turn off the sidebar. However, readable text width, paginated URLs, an automatic table of contents and correct structured data usually require template level development.

At Talha Aslan and team, we treat the blog template as part of the same design system as the rest of the site. We build the card, table of contents, author box and CTA components once and make sure they work consistently across every post. If you want to move your blog to this structure, our web design service covers building the template on your site.

What are the most common blog page design mistakes?

Here is a short list of the mistakes we run into most often in the field. Each one looks small on its own. Together, though, they clearly hurt the reading experience.

• Giving the first screen of a post to a cover image or a large sales box.
• Stretching text across the full screen width or squeezing it into a narrow strip.
• Adding dozens of tags to every post and creating thin archive pages.
• Choosing related posts by date alone instead of by topic.
• Refreshing the update date without changing the content.
• Hiding author information or using an invented author name.

Once you fix these mistakes, the blog does more than look better. It becomes a clear, scannable source that earns reader trust. To build the template from scratch or rework your current design, share your project scope on our web design page and request a quote.