====== WvdS.DokuWiki.OpenGraph Dodatak ======

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

----

===== Definicija =====

Dodatak **wvdsopengraph** generira Open Graph i Twitter Card meta oznake za optimalan prikaz pri dijeljenju na društvenim mrežama. Podržava višejezične sadržaje i prepisivanje specifično za stranicu.

===== Slučajevi korištenja =====

  * **Dijeljenje na društvenim mrežama** - Optimiziran pregled na Facebooku, LinkedInu, Twitteru
  * **SEO poboljšanje** - Strukturirani metapodaci za tražilice
  * **Višejezični wikiji** - Automatsko prepoznavanje jezika za meta oznake
  * **Brendiranje** - Ujednačen izgled pri povezivanju

----

===== Sintaksa =====

<code>
<og>
title = Naslov stranice
description = Opis
image = :wiki:logo.png
type = article
</og>
</code>

==== Parametri ====

^ Parametar ^ Tip ^ Standard ^ Opis ^
| ''title'' | string | //(Naslov stranice)// | Naslov za društvene mreže |
| ''description'' | string | //(Tagline)// | Opis (maks. 160 znakova) |
| ''image'' | string | //(Standardna slika)// | DokuWiki Media putanja |
| ''type'' | string | article | Open Graph tip |

----

===== Višejezične vrijednosti =====

Sve vrijednosti podržavaju pipe format:

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

Dodatak automatski prepoznaje jezik iz putanje namespacea.

----

===== Automatske oznake =====

Bez ''<og>'' bloka dodatak automatski generira:

^ Oznaka ^ Izvor ^
| ''og:title'' | Naslov stranice (H1) |
| ''og:description'' | Wiki tagline ili defaultDescription |
| ''og:url'' | Trenutni URL stranice |
| ''og:site_name'' | Naslov wikija |
| ''og:type'' | article |
| ''og:image'' | defaultImage iz konfiguracije |

----

===== Primjeri =====

==== Primjer 1: Jednostavno prepisivanje ====

**Zahtjev:** Prilagođene meta oznake za stranicu projekta.

<code>
<og>
title = Moj projekt
description = Opsežan opis projekta
image = :projekti:banner.jpg
</og>

====== Moj projekt ======

Sadržaj stranice...
</code>

**Rezultat:**
  * Open Graph naslov: "Moj projekt"
  * Opis: "Opsežan opis projekta"
  * Slika pregleda: projekti:banner.jpg

==== Primjer 2: Višejezično ====

**Zahtjev:** Različiti naslovi i opisi ovisno o jeziku.

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

**Rezultat (za hrvatsku stranicu):**
  * Naslov: "OpenSSL dokumentacija"
  * Opis: "Opsežan vodič"

==== Primjer 3: Minimalna konfiguracija ====

**Zahtjev:** Prepisati samo sliku, ostalo automatski.

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

**Rezultat:**
  * Naslov, opis, URL: automatski generirano
  * Slika: clanci:feature-image.jpg

----

===== Generirane HTML oznake =====

<code html>
<!-- Open Graph -->
<meta property="og:title" content="OpenSSL dokumentacija">
<meta property="og:description" content="Opsežan vodič">
<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=hr:crypto:openssl">
<meta property="og:site_name" content="Baza znanja">
<meta property="og:type" content="article">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="OpenSSL dokumentacija">
<meta name="twitter:description" content="Opsežan vodič">
<meta name="twitter:image" content="https://example.com/lib/exe/fetch.php?media=crypto:openssl-banner.png">
</code>

----

===== Način rada =====

==== Cjevovod obrade ====

<code>
1. Analiza stranice
   └── Traži <og>...</og> blok na početku stranice

2. Ekstrakcija parametara
   └── Parsira parove ključ = vrijednost
   └── Prepoznaje de:X|en:Y format

3. Prepoznavanje jezika
   └── Određuje jezik iz namespacea
   └── Izvlači odgovarajuću vrijednost

4. Generiranje meta oznaka
   └── Kreira og:* i twitter:* oznake
   └── Umeće u <head>
</code>

==== Razrješavanje URL-a slike ====

Dodatak konvertira DokuWiki Media-ID u potpune URL-ove:

^ Ulaz ^ Izlaz ^
| '':wiki:logo.png'' | ''https://domain/lib/exe/fetch.php?media=wiki:logo.png'' |
| '':projekti:banner.jpg'' | ''https://domain/lib/exe/fetch.php?media=projekti:banner.jpg'' |

----

===== Konfiguracija =====

==== Administratorske postavke ====

Preko **Admin → Konfiguracija → wvdsopengraph**:

^ Postavka ^ Tip ^ Standard ^ Opis ^
| ''defaultDescription'' | Tekst | //(Tagline)// | Standardni opis (višejezično) |
| ''defaultImage'' | Tekst | //(prazno)// | Standardna slika Media-ID |
| ''twitterSite'' | Tekst | //(prazno)// | Twitter @korisničkoime za twitter:site |
| ''enableTwitterCards'' | Da/Ne | Da | Generiraj Twitter Card oznake |

==== Preporučena konfiguracija ====

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

----

===== Rukovanje greškama =====

^ Scenarij ^ Ponašanje ^
| Nema <og> bloka | Koristi automatske vrijednosti |
| Slika nije pronađena | Koristi defaultImage |
| Nevažeći jezik | Fallback na prvu vrijednost |
| Prazna vrijednost | Oznaka se ne generira |

----

===== Najbolje prakse =====

  * **Opis:** Maksimalno 160 znakova
  * **Naslov:** Maksimalno 60 znakova
  * **Slika:** Najmanje 1200×630 piksela za optimalan prikaz
  * **Format:** JPEG ili PNG za slike

==== Zahtjevi za slike ====

^ Platforma ^ Preporučena veličina ^ Omjer stranica ^
| Facebook | 1200×630 px | 1.91:1 |
| Twitter | 1200×600 px | 2:1 |
| LinkedIn | 1200×627 px | 1.91:1 |

----

===== Napomene o verzijama =====

^ Verzija ^ Datum ^ Promjene ^
| 1.0.0 | 2025-01-06 | Prva objava |

----

===== Vidi također =====

  * [[.:wvdsi18n]] - Višejezični prijevodi
  * [[.:wvdsimage]] - Optimizacija slika
  * [[https://ogp.me/|Open Graph Protocol]]
  * [[https://developer.twitter.com/en/docs/twitter-for-websites/cards|Twitter Cards]]

----

===== Tehnička referenca =====

==== Klasa: syntax_plugin_wvdsopengraph ====

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

^ Metoda ^ Opis ^
| ''getType()'' | Vraća ''substition'' |
| ''getSort()'' | Vraća ''50'' (rano) |
| ''handle($match, ...)'' | Parsira <og> blok |
| ''render($mode, ...)'' | Nema izlaza (samo meta oznake) |

==== Klasa: action_plugin_wvdsopengraph ====

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

^ Metoda ^ Opis ^
| ''register()'' | Registrira TPL_METAHEADER_OUTPUT događaj |
| ''addMetaTags()'' | Dodaje meta oznake u header |

==== Podržani Open Graph tipovi ====

^ Tip ^ Korištenje ^
| ''article'' | Blog postovi, dokumentacija (standard) |
| ''website'' | Glavne stranice, početne stranice |
| ''profile'' | Korisnički profili |
| ''book'' | Knjige, publikacije |

----

<wvds:audit stack="doku" title="wvdsopengraph Dodatak">
  <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~~