elpatron/hoerdle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
hoerdle/docs/SEO_TESTING.md
Hördle Bot a8867ac42e feat: Add dynamic Open Graph image generation with correct aspect ratio 
- 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
2025-12-01 19:44:48 +01:00

6.7 KiB
Raw Permalink Blame History

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:

    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)

# 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:

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:

# 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:

# In .env
NEXT_PUBLIC_OG_IMAGE=/og-image.png

Dann wird dieses Bild in allen Open Graph Meta-Tags verwendet.

Nützliche Links

Reference in New Issue View Git Blame Copy Permalink