Open Graph og SoMe

Når du poster et link fra din hjemmeside på de sociale medier er det vigtigt, at du har styr på hvilket indhold der følger med. Ellers vil systemerne bag fx Facebook 'bare' tage hvad de kan og vise det – hvilket ikke altid er godt.

Jeg vil vise to måder at tilføje Open Graph tags [OG tags] information til dine artikler:

1. Open Graph med ITP Meta
ITP Meta – et plugin hvor du opretter tags og tilføjer dem til den url som din artikel er baseret på

2. Open Graph med SP Pagebuilder
Nem måde at lægge OG tags ind hvis du bruger SP Pagebuilder

Generelt om Open Graph

Open Graph er baseret på nogle tags og informationer, der bliver sat ind i den enkelte artikel. De sociale medier fx Facebook kan så aflæse de tags du har valgt at lægge ind i artiklen – og så præsentere dem direkte i feed'et.

Du bør altid tilføje følgende OG tags:

og:url
Den url du poster fra. Det skal være den rene url – uden variabler af nogen slags – fx https://ditdomaene.dk

og:title
Titlen på din artikel uden brug af branding som fx dit sitenavn

og:description
En kort beskrivelse af indholdet. Typisk en til to sætninger – men ganske kort

og:image
Link til det billede der skal vises når du poster. Anbefalingerne til billedets størrelse er 1200x630 px – jeg anbefaler 1000x500 px. Hvis billedet er mindre en 600 px i bredden vises det i venstre side med teksten i højre side

Image

Billedet er over 600 px bred og vises med teksterne under billedet

Image

Billedet er under 600 px bred og vises som et lille billede i venstre side

Open Graph med ITP Meta

1. ITP Meta download og installation

Download ITP Meta fra hjemmesiden og installér på helt normal vis. Når pakken er installeret bliver du gjort opmærksom på at du også skal installere 'Prism Library' – det er ret tydeligt markeret at dette bibliotek mangler. Husk at aktivere plugin'et under plugins.


Selvom ITP Meta installeres som et plugin så vises det via menupunktet 'Komponenter' hvilket gør det nemt at finde frem til indstillingerne. Klik på menuen Komponenter > IPT Meta så er du inde på det mest simple dashboard.

På dashboard'et er der kun et enkelt punkt at koncentrere sig om – nemlig 'URLs Manager'. Det er her det hele foregår. De andre punkter er kun vigtige hvis du vil oprette dine egne tags eller tilpasse plugin'et.

Klik på URLs Manager – så kan du komme igang med at oprette dine egne url.

Her kan du læse mere og
downloade ITP Meta

2. Opret url

Du kan oprette en url til en enkelt Joomla! artikel ved at taste den url der indeholder artiklens alias – husk altid at starte med /

Du kan også oprette en url til en kategorivisning fx en blog ved at taste den url der indeholder aliaset til din blog fx den jeg vil lave til /blogcreatedby

Når du klikker Gem første gang får du mulighed for at oprette tags.

Klik på Ny så åbner vinduet hvor du kan tilføje dine tags.

3. Tilføje tags

I venstre side vises de felter der skal indeholde tag informationerne. I højre side vises de standard tags der ligger i systemet. Du skal starte i Open Graph Basic – her er de tags du har brug for.

Klik på fx Images – nu får du automatisk sat et og:image tag op – det eneste du skal gøre er at udfylde linket til hvor billedet ligger.

Dette skal være den fulde url – kopier linket ind og klik Gem.

4. Oversigt over dine tags

Når du har oprettet det første tag kommer du tilbage til din oversigt. Nu kan du oprette næste tag fx og:title osv

5. Oversigt over dine tags

For at have overblik over tags kan du i venstre kolonne sortere dem så du nemt kan overskue hvilke tags du har lagt ind.

Giv dem evt. samme placering som de vil få i et Facebook feed.

og:image

og:url

og:title

og:description

6. Tjek dit indhold

Inden du poster noget skal du tjekke om det er det rigtige indhold samt om mængden af tekst vises rigtigt. Det gør du via Facebook Debugging Tool som du finder her.

Kopiér og indsæt din url og klik på knappen Debug. Nu vises dine OG informationer som de vil se ud når du poster siden i dit feed. Det er nu du skal justere hvis der er noget der ikke ser ud som det skal. Vær særlig opmærksom på din description – der er ikke plads til mange ord.

Det kan være at du er nødt til at klikke flere gange på knappen 'Scrape Again' for at få opdateret til det seneste indhold.

Her kan du finde Facebook
Facebook debugging tool

Open Graph med SP Pagebuilder

Open Graph med SP Pagebuilder

Som lovet vil jeg også fortælle om hvordan OG informationen lægges ind hvis siden er oprettet med SP Pagebuilder. Det må siges at være noget nemmere.

Åbn din side i Pagebuilder og klik på knappen 'Options' øverst til højre.

Den første tab der vises hedder 'Open Graph'

Indtast dine oplysninger og klik gem – så har du oprette OG informationer til den side – nemt ikke?

Det eneste der mangler er at kunne tilføje flere OG informationer som fx url – men det kan være, at det kommer i en fremtidig opdatering.