# 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" → `<head>` Bereich erweitern
   - Suche nach Meta-Tags:
     - `<meta property="og:title">`
     - `<meta property="og:description">`
     - `<meta property="og:image">`
     - `<meta name="twitter:card">`

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(/<meta property="og:title" content="([^"]*)"/)?.[1],
      description: html.match(/<meta property="og:description" content="([^"]*)"/)?.[1],
      image: html.match(/<meta property="og:image" content="([^"]*)"/)?.[1],
      url: html.match(/<meta property="og:url" content="([^"]*)"/)?.[1],
    };
    
    console.log('Open Graph Tags:', ogTags);
    return ogTags;
  } catch (error) {
    console.error('Error:', error.message);
  }
}

// Test
testOGTags('http://localhost:3000/en');
```

## Online-Tools (für Produktions-URLs)

### 1. Facebook Sharing Debugger (Empfohlen)

**URL:** https://developers.facebook.com/tools/debug/

**Verwendung:**
1. Öffne die URL
2. Gib deine Produktions-URL ein (z.B. `https://hoerdle.de/en`)
3. Klicke auf "Debuggen"
4. Prüfe die Vorschau und alle Meta-Tags

**Wichtig:** 
- Facebook cached die Vorschau! Klicke auf "Scraping erneut ausführen" um den Cache zu leeren
- Funktioniert nur mit öffentlich erreichbaren URLs (nicht localhost)

### 2. Twitter Card Validator

**URL:** https://cards-dev.twitter.com/validator

**Verwendung:**
1. Öffne die URL
2. Gib deine Produktions-URL ein
3. Prüfe die Twitter Card Vorschau

**Hinweis:** Twitter hat den Validator eingestellt, aber die Cards funktionieren trotzdem. Du kannst auch einfach einen Tweet mit deiner URL erstellen, um zu sehen, ob die Card angezeigt wird.

### 3. LinkedIn Post Inspector

**URL:** https://www.linkedin.com/post-inspector/

**Verwendung:**
1. Öffne die URL (Login erforderlich)
2. Gib deine Produktions-URL ein
3. Prüfe die LinkedIn Vorschau

### 4. OpenGraph.xyz (Universelles Tool)

**URL:** https://www.opengraph.xyz/

**Verwendung:**
1. Öffne die URL
2. Gib deine URL ein
3. Sieh dir alle Open Graph und Twitter Meta-Tags an
4. Sieh dir die Vorschau für verschiedene Plattformen an

### 5. Metatags.io

**URL:** https://metatags.io/

**Verwendung:**
- Gebe deine URL ein
- Sieh dir alle Meta-Tags an
- Vorschau für verschiedene Plattformen

## Produktions-Test (hoerdle.de / hördle.de)

Sobald die App deployed ist, kannst du alle oben genannten Tools mit deinen Produktions-URLs verwenden:

### Test-URLs:

- Homepage (EN): `https://hoerdle.de/en`
- Homepage (DE): `https://hoerdle.de/de`
- About (EN): `https://hoerdle.de/en/about`
- About (DE): `https://hoerdle.de/de/about`
- Genre-Seiten: `https://hoerdle.de/en/Rock` (Beispiel)
- Special-Seiten: `https://hoerdle.de/en/special/Weihnachtslieder` (Beispiel)

### Schnelltest mit cURL:

```bash
# Teste Homepage
curl -s https://hoerdle.de/en | grep -E "og:|twitter:" | head -10

# Teste About-Seite
curl -s https://hoerdle.de/de/about | grep -E "og:|twitter:" | head -10
```

## Erwartete Meta-Tags

Die folgenden Meta-Tags sollten auf allen Seiten vorhanden sein:

### Open Graph Tags:
- `og:title` - Seitentitel
- `og:description` - Seitenbeschreibung
- `og:image` - Bild für Social Media (Standard: `/favicon.ico`)
- `og:url` - Canonical URL
- `og:type` - Typ (sollte "website" sein)
- `og:site_name` - Name der Site
- `og:locale` - Sprache (de/en)

### Twitter Tags:
- `twitter:card` - Card-Typ (sollte "summary_large_image" sein)
- `twitter:title` - Titel
- `twitter:description` - Beschreibung
- `twitter:image` - Bild

### Canonical & Alternates:
- `<link rel="canonical">` - Canonical URL
- `<link rel="alternate" hreflang="de">` - Deutsche Version
- `<link rel="alternate" hreflang="en">` - Englische Version
- `<link rel="alternate" hreflang="x-default">` - 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)

