Inhaltsverzeichnis
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
<og> title = Naslov stranice description = Opis image = :wiki:logo.png type = article </og>
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:
<og> title = de:Kryptographie|en:Cryptography|hr:Kriptografija description = de:Einführung|en:Introduction|hr:Uvod </og>
Dodatak automatski prepoznaje jezik iz putanje namespacea.
Automatske oznake
Bez
====== 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>
</code> Rezultat (za hrvatsku stranicu): * Naslov: „OpenSSL dokumentacija“ * Opis: „Opsežan vodič“ ==== Primjer 3: Minimalna konfiguracija ==== Zahtjev: Prepisati samo sliku, ostalo automatski. <code>
</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
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 =====
* WvdS.DokuWiki.i18n Dodatak - Višejezični prijevodi
* WvdS.DokuWiki.Image Dodatak - Optimizacija slika
* Open Graph Protocol
* 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 |
Diskussion