express-meta-server
v1.0.6
Published
A reusable Express server for serving static files with dynamic meta tags
Maintainers
parhtibanReadme
express-meta-server
express-meta-server is a lightweight Express.js middleware designed for dynamically injecting SEO meta tags into HTML pages. It fetches meta tag data from an API and serves pre-rendered HTML files with updated meta information, ensuring optimal SEO performance.
Why Use This?
Modern React (Vite) applications often face SEO challenges because search engines like Googlebot do not always execute JavaScript effectively. Tools like react-helmet modify meta tags only after JavaScript is loaded, which is not ideal for SEO. This package solves that issue by ensuring meta tags are pre-rendered in the initial HTML response, making content fully indexable by search engines.
Features
- 🔥 Dynamic Meta Tags: Fetches SEO metadata from an API and injects it into HTML before serving.
- 📂 Static File Serving: Serves pre-built HTML files from a
distfolder. - 🌎 Custom URL Structures: Supports dynamic URL structures, ideal for multi-language & multi-country websites.
- 🚀 SEO Optimized for Googlebot: Ensures correct indexing by providing fully rendered meta tags before page load.
✅ When to Use express-meta-server
- Quick Meta Injection: If you want a fast way to inject meta tags without modifying your frontend, this middleware is useful.
- Static Meta Needs: Works well for applications where meta tags don’t need complex logic.
- Express Backend with a CSR Frontend: If your frontend is a client-side React app (CSR) and you need SEO-friendly pages for bots.
❌ Limitations
- Not True SSR: This does not fully render pages but only modifies the
<head>section. - Limited Control: If you need highly dynamic, API-driven meta tags, you might need more flexibility.
- Doesn’t Replace Proper SSR (e.g., Next.js, Remix): If your goal is SEO, a framework that does full server-side rendering (SSR) is a better choice.
Installation
npm install express-meta-serverUsage
Basic Example
import express from "express";
import metaServer from "express-meta-server";
const app = express();
app.use(metaServer({
apiUrl: "https://your-api.com/meta-tags", // API to fetch meta tags
distFolder: "dist", // Folder containing static HTML files
}));
const PORT = process.env.PORT || 5173;
app.listen(PORT, () => {
console.log(`🚀 Server running at http://localhost:${PORT}`);
});How It Works
- Receives a request with a dynamic URL like
/lv/en/about. - Fetches meta tag data from your API.
- Injects meta tags directly into the corresponding HTML file before serving.
- Googlebot and other search engines receive the correct metadata, ensuring proper indexing and improved search rankings.
Configuration Options
| Option | Type | Description |
|--------------|----------|-------------|
| apiUrl | string | API endpoint to fetch meta tags. |
| distFolder | string | Folder containing pre-built HTML files. |
Expected API Response Format
Your API should return meta tag details in the following format:
{
"seo_title": "About YOUR_DOMAIN | Transforming Engagement in Latvia",
"seo_description": "Discover how YOUR_DOMAIN in Latvia bridges the gap between experts and users.",
"keywords": "YOUR_DOMAIN",
"page_url": "https://YOUR_DOMAIN.com/lv/en/about"
}Why Not react-helmet?
react-helmetonly updates meta tags after JavaScript is loaded, which may not be processed correctly by search engines.express-meta-serverensures meta tags are present in the initial HTML response, improving SEO and social media sharing previews.
License
MIT License © 2025