Enhance SEO meta tag handling in generateHTML function by adding support for reading built index.html, updating existing tags, and implementing fallback logic for missing files.
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { readFileSync } from 'fs';
|
||||
import { readFileSync, existsSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
|
||||
// SEO-Meta-Daten für verschiedene Routen
|
||||
@@ -26,43 +26,62 @@ const seoData = {
|
||||
};
|
||||
|
||||
// HTML-Template für Pre-Rendering
|
||||
function generateHTML(route, meta) {
|
||||
const baseHTML = `<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
function generateHTML(route, meta, __dirname) {
|
||||
// Versuche, die gebaute index.html zu lesen
|
||||
const distIndexPath = join(__dirname, '../docroot/dist/index.html');
|
||||
let baseHTML;
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<title>${meta.title}</title>
|
||||
<meta name="description" content="${meta.description}">
|
||||
<meta name="keywords" content="${meta.keywords}">
|
||||
<meta name="robots" content="index, follow">
|
||||
|
||||
<!-- Open Graph Tags -->
|
||||
if (existsSync(distIndexPath)) {
|
||||
// Verwende die gebaute index.html (mit korrekten Asset-Pfaden von Vite)
|
||||
baseHTML = readFileSync(distIndexPath, 'utf-8');
|
||||
|
||||
// Ersetze Meta-Tags in der gebauten HTML
|
||||
baseHTML = baseHTML.replace(/<title>.*?<\/title>/, `<title>${meta.title}</title>`);
|
||||
|
||||
// Ersetze oder füge description hinzu
|
||||
if (baseHTML.includes('<meta name="description"')) {
|
||||
baseHTML = baseHTML.replace(/<meta name="description"[^>]*>/, `<meta name="description" content="${meta.description}">`);
|
||||
} else {
|
||||
baseHTML = baseHTML.replace('</head>', ` <meta name="description" content="${meta.description}">\n</head>`);
|
||||
}
|
||||
|
||||
// Ersetze oder füge keywords hinzu
|
||||
if (baseHTML.includes('<meta name="keywords"')) {
|
||||
baseHTML = baseHTML.replace(/<meta name="keywords"[^>]*>/, `<meta name="keywords" content="${meta.keywords}">`);
|
||||
} else {
|
||||
baseHTML = baseHTML.replace('</head>', ` <meta name="keywords" content="${meta.keywords}">\n</head>`);
|
||||
}
|
||||
|
||||
// Ersetze oder füge Open Graph Tags hinzu
|
||||
const ogTags = `
|
||||
<meta property="og:title" content="${meta.ogTitle}">
|
||||
<meta property="og:description" content="${meta.ogDescription}">
|
||||
<meta property="og:type" content="${meta.ogType}">
|
||||
<meta property="og:url" content="${meta.ogUrl}">
|
||||
<meta property="og:image" content="${meta.ogImage}">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="${meta.ogTitle}">
|
||||
<meta name="twitter:description" content="${meta.ogDescription}">
|
||||
<meta name="twitter:image" content="${meta.ogImage}">
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="${meta.ogUrl}">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="/static/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>`;
|
||||
<link rel="canonical" href="${meta.ogUrl}">`;
|
||||
|
||||
// Entferne alte OG/Twitter/Canonical Tags falls vorhanden
|
||||
baseHTML = baseHTML.replace(/<meta property="og:[^>]*>/g, '');
|
||||
baseHTML = baseHTML.replace(/<meta name="twitter:[^>]*>/g, '');
|
||||
baseHTML = baseHTML.replace(/<link rel="canonical"[^>]*>/g, '');
|
||||
|
||||
// Füge neue Tags vor </head> ein
|
||||
baseHTML = baseHTML.replace('</head>', `${ogTags}\n</head>`);
|
||||
|
||||
// Füge robots meta hinzu falls nicht vorhanden
|
||||
if (!baseHTML.includes('<meta name="robots"')) {
|
||||
baseHTML = baseHTML.replace('</head>', ` <meta name="robots" content="index, follow">\n</head>`);
|
||||
}
|
||||
} else {
|
||||
// Fallback: Gebaute index.html nicht gefunden - verwende SPA-Fallback
|
||||
console.error('WARNUNG: Gebaute index.html nicht gefunden:', distIndexPath);
|
||||
return null;
|
||||
}
|
||||
|
||||
return baseHTML;
|
||||
}
|
||||
@@ -76,15 +95,35 @@ export function setupSEORoutes(app, __dirname) {
|
||||
// Pre-Rendering für Hauptseite
|
||||
app.get('/', (req, res) => {
|
||||
const meta = seoData['/'];
|
||||
const html = generateHTML('/', meta);
|
||||
res.send(html);
|
||||
const html = generateHTML('/', meta, __dirname);
|
||||
if (html) {
|
||||
res.send(html);
|
||||
} else {
|
||||
// Fallback: Verwende die gebaute index.html direkt (ohne Meta-Tag-Anpassung)
|
||||
const distIndexPath = join(__dirname, '../docroot/dist/index.html');
|
||||
if (existsSync(distIndexPath)) {
|
||||
res.sendFile(distIndexPath);
|
||||
} else {
|
||||
res.status(500).send('Gebaute index.html nicht gefunden. Bitte führe "npm run build" aus.');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Pre-Rendering für Partners-Seite
|
||||
app.get('/partners', (req, res) => {
|
||||
const meta = seoData['/partners'];
|
||||
const html = generateHTML('/partners', meta);
|
||||
res.send(html);
|
||||
const html = generateHTML('/partners', meta, __dirname);
|
||||
if (html) {
|
||||
res.send(html);
|
||||
} else {
|
||||
// Fallback: Verwende die gebaute index.html direkt (ohne Meta-Tag-Anpassung)
|
||||
const distIndexPath = join(__dirname, '../docroot/dist/index.html');
|
||||
if (existsSync(distIndexPath)) {
|
||||
res.sendFile(distIndexPath);
|
||||
} else {
|
||||
res.status(500).send('Gebaute index.html nicht gefunden. Bitte führe "npm run build" aus.');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user