# SEO & Open Graph Testing Guide
## Übersicht
Diese Anleitung zeigt dir, wie du die SEO-Implementierung (Meta-Tags, Open Graph, Twitter Cards) testen kannst.
## Lokales Testen
### 1. Browser-Entwicklertools
1. **App starten:**
```bash
npm run dev
```
Die App läuft unter `http://localhost:3000`
2. **Meta-Tags im HTML prüfen:**
- Öffne eine Seite (z.B. `http://localhost:3000/en` oder `http://localhost:3000/de/about`)
- Rechtsklick → "Seite untersuchen" (F12)
- Tab "Elements" → `` Bereich erweitern
- Suche nach Meta-Tags:
- ``
- ``
- ``
- ``
3. **View Page Source:**
- Rechtsklick → "Seitenquelltext anzeigen"
- Suche nach "og:" oder "twitter:" um alle Open Graph und Twitter Meta-Tags zu sehen
### 2. cURL-Test (für schnelle Prüfung)
```bash
# Prüfe Meta-Tags einer Seite
curl -s http://localhost:3000/en | grep -i "og:\|twitter:"
```
### 3. Node.js-Script zum Testen
Erstelle eine Test-Datei `test-og.js`:
```javascript
const https = require('https');
const http = require('http');
function fetchHTML(url) {
return new Promise((resolve, reject) => {
const client = url.startsWith('https') ? https : http;
client.get(url, (res) => {
let data = '';
res.on('data', (chunk) => data += chunk);
res.on('end', () => resolve(data));
}).on('error', reject);
});
}
async function testOGTags(url) {
try {
const html = await fetchHTML(url);
const ogTags = {
title: html.match(/` - Canonical URL
- `` - Deutsche Version
- `` - Englische Version
- `` - Standard-Version
## Troubleshooting
### Problem: Meta-Tags werden nicht angezeigt
**Lösung:**
1. Prüfe, ob die App läuft: `npm run dev`
2. Prüfe Browser-Console auf Fehler
3. Stelle sicher, dass `generateMetadata` in der Seite exportiert ist
4. Prüfe, ob `lib/metadata.ts` korrekt importiert wird
### Problem: Open Graph Image wird nicht angezeigt
**Lösung:**
1. Prüfe, ob das Bild unter `/favicon.ico` existiert (oder konfiguriertes OG-Image)
2. Für bessere Ergebnisse: Erstelle ein dediziertes Open Graph Bild (1200x630px)
3. Platziere es in `public/og-image.png`
4. Setze in `.env`: `NEXT_PUBLIC_OG_IMAGE=/og-image.png`
### Problem: Facebook zeigt alte Vorschau
**Lösung:**
1. Öffne Facebook Sharing Debugger
2. Gib deine URL ein
3. Klicke auf "Scraping erneut ausführen" (mehrfach, falls nötig)
4. Facebook cached die Vorschau - Cache kann mehrere Stunden dauern
### Problem: Domain-Erkennung funktioniert nicht
**Lösung:**
1. Prüfe `lib/seo.ts` - `getBaseUrl()` Funktion
2. Stelle sicher, dass Request-Headers korrekt sind
3. In Produktion: Prüfe, ob Proxy-Headers (`x-forwarded-host`) korrekt gesetzt sind
## Open Graph Bild optimieren
Für bessere Social Media Vorschauen solltest du ein dediziertes OG-Bild erstellen:
**Empfohlene Größe:** 1200x630px
**Format:** PNG oder JPG
**Pfad:** `public/og-image.png`
**Konfiguration:**
```bash
# In .env
NEXT_PUBLIC_OG_IMAGE=/og-image.png
```
Dann wird dieses Bild in allen Open Graph Meta-Tags verwendet.
## Nützliche Links
- [Open Graph Protocol Dokumentation](https://ogp.me/)
- [Twitter Cards Dokumentation](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards)
- [Facebook Sharing Best Practices](https://developers.facebook.com/docs/sharing/webmasters)