Astro Static Site + Node.js + MongoDB: Best Stack for SEO Blogs (2026 Guide)
The architecture you describe is a conventional JAMstack approach where Astro provides a static frontend that gets content from a backend API powered by Node.js and MongoDB.The main idea is to fetch data at build time for static content, or on the client side for dynamic interactions.
1) MongoDB Blog Model
This model stores everything needed as follow and we are define schema:
-
slug→ SEO-friendly URL -
title→ Page title -
description→ Meta description -
imageAlt→ Image SEO
/server/models/Blog.js
import mongoose from "mongoose";
const BlogSchema = new mongoose.Schema({
slug: { type: String, unique: true },
title: String,
description: String,
content: String, // HTML
imageUrl: String,
imageAlt: String,
createdAt: { type: Date, default: Date.now }
});
export default mongoose.model("Blog", BlogSchema);
2) Node.js API
/server/server.js
import express from "express";
import mongoose from "mongoose";
import Blog from "./models/Blog.js";
const app = express();
mongoose.connect("mongodb://127.0.0.1:27017/blogdb");
app.get("/api/blogs", async (req, res) => {
const blogs = await Blog.find().sort({ createdAt: -1 });
res.json(blogs);
});
app.get("/api/blog/:slug", async (req, res) => {
const blog = await Blog.findOne({ slug: req.params.slug });
if (!blog) return res.status(404).json({ msg: "Not found" });
res.json(blog);
});
app.listen(3001, () => console.log("API running on 3001"));
3) Astro Dynamic SEO Pages (Static Build)
Astro will generate static pages at build time.
src/pages/blog/[slug].astro
---
export const prerender = true;
// Build-time fetch from Mongo API
export async function getStaticPaths() {
const res = await fetch("http://localhost:3001/api/blogs");
const blogs = await res.json();
return blogs.map(b => ({
params: { slug: b.slug },
props: b
}));
}
const post = Astro.props;
---
<html lang="en">
<head>
<title>{post.title}</title>
<meta name="description" content={post.description} />
</head>
<body>
<article>
<h1>{post.title}</h1>
<img src={post.imageUrl} alt={post.imageAlt} loading="lazy" />
<div set:html={post.content}></div>
</article>
</body>
</html>
- Static HTML for every blog
- Dynamic titles and meta descriptions
- Optimized images with alt text
4) Blog List Page
Create a page to show all blogs.
src/pages/blog/index.astro
---
export const prerender = true;
const res = await fetch("http://localhost:3001/api/blogs");
const blogs = await res.json();
---
<h1>Blog</h1>
<ul>
{blogs.map(b => (
<li>
<a href={`/blog/${b.slug}`}>{b.title}</a>
</li>
))}
</ul>
5) Sample Mongo Document
below is api model data to be insert
{
"slug": "nodejs-mongodb-seo",
"title": "Node.js with MongoDB for SEO Blogs",
"description": "Learn how to build fast SEO blogs using Node and MongoDB.",
"content": "<p>This is full SEO optimized content...</p>",
"imageUrl": "/images/node-mongo.png",
"imageAlt": "Node.js MongoDB SEO Tutorial"
}
Result
Using Astro Static Site Generation with Node.js and MongoDB is one of
the best choices for creating an SEO-friendly blog. Static pages load
faster, which improves Core Web Vitals, a key Google ranking factor. By
generating clean HTML at build time, search engines can easily crawl and
index your content without depending on JavaScript rendering.
Comments
Post a Comment