a8867ac42e
- Create /api/og-image endpoint that generates SVG with 1.91:1 ratio (1200x630px) - Prevents logo cropping on Facebook and Twitter - Uses safe padding (150px) to ensure content is never cut off - Update default OG image to use dynamic endpoint - Add SEO testing documentation
236 lines
6.7 KiB
Markdown
236 lines
6.7 KiB
Markdown
# 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)
|
|
|