torsten/singlechat
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-12-05 08:03:20 +01:00
parent b6eef5100f
commit 2ee52523ff
3 changed files with 71 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
client/dist/image.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
client/dist/smileys.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

97
server/routes-seo.js
View File

@@ -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">
if (existsSync(distIndexPath)) {
// Verwende die gebaute index.html (mit korrekten Asset-Pfaden von Vite)
baseHTML = readFileSync(distIndexPath, 'utf-8');
<!-- Open Graph Tags -->
// 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}">
<link rel="canonical" href="${meta.ogUrl}">`;
<!-- Canonical URL -->
<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, '');
<!-- 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>`;
// 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.');
}
}
});
}