Inhaltsverzeichnis
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
<og> title = Seitentitel description = Beschreibung image = :wiki:logo.png type = article </og>
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:
<og> title = de:Kryptographie|en:Cryptography|sl:Kriptografija description = de:Einführung|en:Introduction|sl:Uvod </og>
Das Plugin erkennt automatisch die Sprache aus dem Namespace-Pfad.
Automatische Tags
Ohne
====== 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>
</code> Ergebnis (bei deutscher Seite): * Titel: „OpenSSL Dokumentation“ * Beschreibung: „Umfassende Anleitung“ ==== Beispiel 3: Minimale Konfiguration ==== Anforderung: Nur das Bild überschreiben, Rest automatisch. <code>
</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
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 =====
* WvdS.DokuWiki.Lang Plugin (DEAKTIVIERT) - Mehrsprachige Übersetzungen
* WvdS.DokuWiki.Image Plugin - Bildoptimierung
* Open Graph Protocol
* 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 |
Diskussion