SS StoryBrand Soundbites Lab
← Back to blog
Blog Apr 16, 2026 StoryBrand Soundbites Lab

Blog Display Best Practices in Astro

How to present blog content in Astro with clean cards, readable detail pages, and SEO-friendly metadata.

Abstract blog cover mockup for Astro blog best practices article
Astro SEO Content

1) Use a dedicated content collection

Define a blog collection in content.config.ts with typed frontmatter:

  • title
  • description
  • slug
  • pubDate
  • author
  • tags
  • optional SEO fields

This keeps your content model consistent and safe.

2) Build index and detail pages

Create:

  • /blog/ for listing posts
  • /blog/[slug]/ for article pages

Use static generation for performance and reliability.

3) Keep cards simple

A good blog card needs:

  • date
  • title
  • short description
  • tags
  • clear “Read article” action

Avoid noisy card designs that compete with the headline.

4) Make article pages readable

  • generous line-height
  • clear heading spacing
  • constrained text width
  • obvious “Back to blog” link

These details matter more than fancy effects.

5) Add SEO by default

Each post should output:

  • unique title and description
  • canonical URL
  • Open Graph image (if available)

If a post is draft/internal, mark it with noindex.