====== WvdS.DokuWiki.OpenGraph Plugin ======

**Plugin:** wvdsopengraph\\
**Version:** 1.0.0\\
**Namespace:** ''lib/plugins/wvdsopengraph/''\\
**Autor:** Wolfgang van der Stille <zeljko.petrusic@outlook.de>\\
**Lizenz:** GPL 2

----

===== Definition =====

Das **wvdsopengraph** Plugin generiert Open Graph und Twitter Card Meta-Tags für optimale Darstellung beim Teilen auf sozialen Medien. Es unterstützt mehrsprachige Inhalte und seitenspezifische Überschreibungen.

===== Anwendungsfälle =====

  * **Social Media Sharing** - Optimierte Vorschau auf Facebook, LinkedIn, Twitter
  * **SEO-Verbesserung** - Strukturierte Metadaten für Suchmaschinen
  * **Mehrsprachige Wikis** - Automatische Spracherkennung für Meta-Tags
  * **Markenbildung** - Einheitliches Erscheinungsbild beim Verlinken

----

===== Syntax =====

<code>
<og>
title = Seitentitel
description = Beschreibung
image = :wiki:logo.png
type = article
</og>
</code>

==== Parameter ====

^ Parameter ^ Typ ^ Standard ^ Beschreibung ^
| ''title'' | string | //(Seitentitel)// | Titel für soziale Medien |
| ''description'' | string | //(Tagline)// | Beschreibung (max. 160 Zeichen) |
| ''image'' | string | //(Standardbild)// | DokuWiki Media-Pfad |
| ''type'' | string | article | Open Graph Typ |

----

===== Mehrsprachige Werte =====

Alle Werte unterstützen das Pipe-Format:

<code>
<og>
title = de:Kryptographie|en:Cryptography|sl:Kriptografija
description = de:Einführung|en:Introduction|sl:Uvod
</og>
</code>

Das Plugin erkennt automatisch die Sprache aus dem Namespace-Pfad.

----

===== Automatische Tags =====

Ohne ''<og>'' Block generiert das Plugin automatisch:

^ Tag ^ Quelle ^
| ''og:title'' | Seitentitel (H1) |
| ''og:description'' | Wiki-Tagline oder defaultDescription |
| ''og:url'' | Aktuelle Seiten-URL |
| ''og:site_name'' | Wiki-Titel |
| ''og:type'' | article |
| ''og:image'' | defaultImage aus Konfiguration |

----

===== Beispiele =====

==== Beispiel 1: Einfache Überschreibung ====

**Anforderung:** Benutzerdefinierte Meta-Tags für eine Projektseite.

<code>
<og>
title = Mein Projekt
description = Eine umfassende Projektbeschreibung
image = :projekte:banner.jpg
</og>

====== Mein Projekt ======

Seiteninhalt...
</code>

**Ergebnis:**
  * Open Graph Titel: "Mein Projekt"
  * Beschreibung: "Eine umfassende Projektbeschreibung"
  * Vorschaubild: projekte:banner.jpg

==== Beispiel 2: Mehrsprachig ====

**Anforderung:** Verschiedene Titel und Beschreibungen je nach Sprache.

<code>
<og>
title = de:OpenSSL Dokumentation|en:OpenSSL Documentation|sl:OpenSSL dokumentacija
description = de:Umfassende Anleitung|en:Comprehensive guide|sl:Obsežen vodič
image = :crypto:openssl-banner.png
</og>
</code>

**Ergebnis (bei deutscher Seite):**
  * Titel: "OpenSSL Dokumentation"
  * Beschreibung: "Umfassende Anleitung"

==== Beispiel 3: Minimale Konfiguration ====

**Anforderung:** Nur das Bild überschreiben, Rest automatisch.

<code>
<og>
image = :artikel:feature-image.jpg
</og>
</code>

**Ergebnis:**
  * Titel, Beschreibung, URL: automatisch generiert
  * Bild: artikel:feature-image.jpg

----

===== Generierte HTML-Tags =====

<code html>
<!-- Open Graph -->
<meta property="og:title" content="OpenSSL Dokumentation">
<meta property="og:description" content="Umfassende Anleitung">
<meta property="og:image" content="https://example.com/lib/exe/fetch.php?media=crypto:openssl-banner.png">
<meta property="og:url" content="https://example.com/doku.php?id=de:crypto:openssl">
<meta property="og:site_name" content="Wissensdatenbank">
<meta property="og:type" content="article">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="OpenSSL Dokumentation">
<meta name="twitter:description" content="Umfassende Anleitung">
<meta name="twitter:image" content="https://example.com/lib/exe/fetch.php?media=crypto:openssl-banner.png">
</code>

----

===== Funktionsweise =====

==== Verarbeitungs-Pipeline ====

<code>
1. Seitenanalyse
   └── Sucht nach <og>...</og> Block am Seitenanfang

2. Parameter-Extraktion
   └── Parst Schlüssel = Wert Paare
   └── Erkennt de:X|en:Y Format

3. Spracherkennung
   └── Bestimmt Sprache aus Namespace
   └── Extrahiert passenden Wert

4. Meta-Tag-Generierung
   └── Erstellt og:* und twitter:* Tags
   └── Fügt in <head> ein
</code>

==== Bild-URL-Auflösung ====

Das Plugin konvertiert DokuWiki Media-IDs in vollständige URLs:

^ Eingabe ^ Ausgabe ^
| '':wiki:logo.png'' | ''https://domain/lib/exe/fetch.php?media=wiki:logo.png'' |
| '':projekte:banner.jpg'' | ''https://domain/lib/exe/fetch.php?media=projekte:banner.jpg'' |

----

===== Konfiguration =====

==== Admin-Einstellungen ====

Über **Admin → Konfiguration → wvdsopengraph**:

^ Einstellung ^ Typ ^ Standard ^ Beschreibung ^
| ''defaultDescription'' | Text | //(Tagline)// | Standardbeschreibung (mehrsprachig) |
| ''defaultImage'' | Text | //(leer)// | Standard-Bild Media-ID |
| ''twitterSite'' | Text | //(leer)// | Twitter @benutzername für twitter:site |
| ''enableTwitterCards'' | An/Aus | An | Twitter Card Tags generieren |

==== Empfohlene Konfiguration ====

<code>
defaultDescription = de:Wissensdatenbank für Entwickler|en:Knowledge base for developers
defaultImage = :wiki:og-default.png
twitterSite = @meinefirma
enableTwitterCards = 1
</code>

----

===== Fehlerbehandlung =====

^ Szenario ^ Verhalten ^
| Kein <og> Block | Verwendet automatische Werte |
| Bild nicht gefunden | Verwendet defaultImage |
| Ungültige Sprache | Fallback auf ersten Wert |
| Leerer Wert | Tag wird nicht generiert |

----

===== Best Practices =====

  * **Beschreibung:** Maximal 160 Zeichen
  * **Titel:** Maximal 60 Zeichen
  * **Bild:** Mindestens 1200×630 Pixel für optimale Darstellung
  * **Format:** JPEG oder PNG für Bilder

==== Bildanforderungen ====

^ Plattform ^ Empfohlene Größe ^ Seitenverhältnis ^
| Facebook | 1200×630 px | 1.91:1 |
| Twitter | 1200×600 px | 2:1 |
| LinkedIn | 1200×627 px | 1.91:1 |

----

===== Versionshinweise =====

^ Version ^ Datum ^ Änderungen ^
| 1.0.0 | 2025-01-06 | Erstveröffentlichung |

----

===== Siehe auch =====

  * [[.:wvdslang]] - Mehrsprachige Übersetzungen
  * [[.:wvdsimage]] - Bildoptimierung
  * [[https://ogp.me/|Open Graph Protocol]]
  * [[https://developer.twitter.com/en/docs/twitter-for-websites/cards|Twitter Cards]]

----

===== Technische Referenz =====

==== Klasse: syntax_plugin_wvdsopengraph ====

**Datei:** ''lib/plugins/wvdsopengraph/syntax.php''

^ Methode ^ Beschreibung ^
| ''getType()'' | Gibt ''substitution'' zurück |
| ''getSort()'' | Gibt ''50'' zurück (früh) |
| ''handle($match, ...)'' | Parst <og> Block |
| ''render($mode, ...)'' | Keine Ausgabe (nur Meta-Tags) |

==== Klasse: action_plugin_wvdsopengraph ====

**Datei:** ''lib/plugins/wvdsopengraph/action.php''

^ Methode ^ Beschreibung ^
| ''register()'' | Registriert TPL_METAHEADER_OUTPUT Ereignis |
| ''addMetaTags()'' | Fügt Meta-Tags in Header ein |

==== Unterstützte Open Graph Typen ====

^ Typ ^ Verwendung ^
| ''article'' | Blog-Posts, Dokumentation (Standard) |
| ''website'' | Hauptseiten, Startseiten |
| ''profile'' | Benutzerprofile |
| ''book'' | Bücher, Publikationen |

----

<wvds:audit stack="doku" title="wvdsopengraph Plugin">
  <wvds:include ref="code:qualitaet" critical="true">[x][x][x][x]</wvds:include>
  <wvds:include ref="stacks:dokuwiki-php">[x][x][x][x][x]</wvds:include>
  <wvds:include ref="sicherheit:kritis" critical="true">[x][x][x][-][-]</wvds:include>
</wvds:audit>

~~DISCUSSION~~