MDX Blog Starter Template for MARKDOWN
A batteries-included MDX blog starter with frontmatter, syntax highlighting, and reading time. Drop into any Astro project. Drop-in .mdx snippet with full source, ready to ship.
- Niche
- Developer Tools
- Asset Type
- landing page
- File Type
- .mdx
- License
- MIT
What's included
- ✓Frontmatter schema via Content Collections
- ✓Reading time + word count
- ✓Syntax-highlighted code blocks
- ✓Custom Callout component
Live code preview
Syntax-highlighted snippet from the .mdx source. Click Download Code for the full archive.
---
title: "Building a Programmatic SEO Site with Astro"
description: "A practical guide to shipping thousands of static pages with structured data."
pubDate: 2026-01-15
author: "Daksh Bhatt"
tags: ["astro", "seo", "tutorial"]
---
import Callout from '../../components/Callout.astro';
# Building a Programmatic SEO Site with Astro
Programmatic SEO (pSEO) is the practice of generating hundreds or thousands of
landing pages from a structured dataset. It's how companies like Zapier,
Nomad List, and G2 dominate long-tail search.
<Callout type="tip">
The key to pSEO is **unique, valuable content per page**. Don't just swap
keywords — each page should genuinely help the searcher.
</Callout>
## The 3 core ingredients
1. **A typed dataset** — every page is generated from a single source of truth.
2. **A page template** — one Astro file renders every dataset entry.
3. **Structured data** — JSON-LD makes each page eligible for rich results.
```ts
const templates = [
{ slug: 'minimalist-pricing', platform: 'tailwind' },
{ slug: 'dark-mode-hero', platform: 'tailwind' },
];
export async function getStaticPaths() {
return templates.map((t) => ({ params: t }));
}
```
## Shipping checklist
- [x] TypeScript strict mode
- [x] Canonical URLs
- [x] OpenGraph + Twitter cards
- [x] JSON-LD Product + FAQPage
- [x] Sitemap.xml
That's the whole game. Ship more pages, win more clicks.Technical specifications
Framework version, dependencies, and licensing for the .mdx file.
| Framework & Version | MDX 3.x (Astro Content Collections) |
|---|---|
| Required Dependencies | astro@astrojs/mdx |
| File Type | .mdx |
| License Type | MIT |
How to use this template
Follow these quick steps to integrate the snippet into your project.
- 1
Drop the file in src/content/blog
Move the `.mdx` file into your content collection directory.
- 2
Add the Callout component
Create `src/components/Callout.astro` and copy the markup.
- 3
Define the schema
Add the frontmatter schema to `src/content/config.ts`.
- 4
Render the post
Use `getCollection` to list posts on your blog index page.
Frequently asked questions
Everything you need to know before downloading the mdx blog starter.
Do I need Content Collections?
Yes. They give you type-safe frontmatter out of the box.
Can I use plain Markdown instead of MDX?
Yes — just rename the file to `.md` and remove the import statements.
Related templates
More landing page templates you'll love.
--- // src/pages/index.astro import Layout from '../layouts/Layout.astro'; import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro';
ASTRO
Modern SaaS Landing Page
High-converting Astro landing page template for SaaS startups. Built with TypeScript and Tailwind CSS, optimized for Core Web Vitals.
// app/page.tsx
import Link from 'next/link';
export const metadata = {
title: 'Acme Cloud — Enterprise Infrastructure',
};NEXTJS
Next.js App Router Starter
A production-ready Next.js 15 App Router starter with TypeScript, Tailwind, and server actions.