Open Graph

Open Graph er et sæt metadata, der fortæller sociale medier og beskedapps, hvordan en webside skal præsenteres, når nogen deler et link. Det styrer typisk den titel, korte tekst og det billede, der vises i linkets forhåndsvisning. Uden oplysningerne gætter platformen ud fra sidens øvrige indhold, og det gæt er ikke altid kønt.

Metadataene ligger i sidens kode og er normalt usynlige for den besøgende. De vigtigste hedder blandt andet og:title, og:description, og:image, og:url og og:type. “OG” er blot den korte betegnelse for Open Graph. Et CMS eller SEO-plugin kan ofte udfylde felterne uden, at du selv skal skrive kode.

Open Graph er ikke det samme som en metabeskrivelse. Metabeskrivelsen er primært skrevet til søgeresultater, mens Open Graph-beskrivelsen bruges i delte links. De kan godt have samme tekst, men de har forskellige opgaver og forskellige pladsforhold. Et budskab, der fungerer på Google, er ikke nødvendigvis det bedste under et stort billede på LinkedIn.

Det er heller ikke det samme som strukturerede data. Begge dele er metadata, men strukturerede data beskriver sidens indhold for søgemaskiner i bestemte skemaer. Open Graph beskriver først og fremmest, hvordan linket skal vises i sociale sammenhænge.

På en virksomhedsside kan en god forhåndsvisning være forskellen på et link, der ser færdigt ud, og et link med forkert billede, afskåret titel eller en tilfældig cookie-tekst. Det gør ikke dårligt indhold godt. Men det sørger for, at godt indhold ikke møder læseren i en krøllet skjorte.

Start med de fire grundfelter: titel, type, URL og billede. Titlen skal forklare siden uden at være hele overskriften kopieret med dato, kategori og firmanavn tre gange. URL’en bør være sidens rigtige, kanoniske adresse. Typen er ofte website eller article, afhængigt af indholdet.

Delingsbilledet kræver mest opmærksomhed. Vælg et motiv, der kan forstås i lille størrelse og tåler forskellige beskæringer. Undgå små tekstlinjer, logoer helt ude i kanten og skærmbilleder med 40 detaljer. På en hjemmeside kan billedet godt være det samme som sidens hero-billede, men det skal ikke være det.

Skriv en separat Open Graph-beskrivelse, når sidens almindelige title tag og metatekst ikke passer til en deling. En caseside kan eksempelvis have en præcis SEO-titel, mens delingsteksten i stedet forklarer, hvad læseren konkret kan se i casen. Hold løftet realistisk. Previewet skal få den rigtige person til at klikke, ikke alle personer til at klikke.

Kontrollér felterne på sidetyper, ikke kun på forsiden. Produkter, kategorier, blogindlæg og kampagnesider kan bruge forskellige skabeloner. På en webshop bør hvert produkt som minimum dele sit eget navn, sin egen URL og et relevant produktbillede. Ellers kan 200 produkter ende med det samme generiske billede.

Test linket efter publicering. Meta har et Sharing Debugger-værktøj, og LinkedIn har Post Inspector. De viser, hvad platformen har læst, og kan ofte bede platformen hente siden igen. Det er nødvendigt, fordi sociale platforme gemmer previews i cache. Du kan have rettet siden, mens det gamle billede stadig bliver vist.

Lav en fast skabelon for delingsbilleder. En enkel ramme med motiv, diskret logo og plads til en kort overskrift giver sammenhæng på tværs af artikler. Den bør hænge sammen med virksomhedens visuelle identitet, men ikke være så låst, at alle delinger ligner den samme annonce.

En frisør deler en ny side om brudestyling på Facebook. Linket viser salonens logo som et lille, sløret billede, titlen “Ydelser” og teksten fra cookiebanneret. Siden ser fin ud, når man åbner den, men forhåndsvisningen giver ingen grund til at klikke.

Siden får en Open Graph-titel: “Brudestyling i Aalborg — se forløb og muligheder”. Beskrivelsen forklarer kort, at siden viser prøvestyling, tidsplan og booking. Der laves et delingsbillede med en enkel detalje fra en opsætning og salonens navn i et hjørne. Billedet bliver komprimeret, så det ikke er unødigt tungt.

Da linket allerede er delt, viser Facebook fortsat den gamle udgave. Adressen køres derfor gennem Metas debugger, som henter metadataene igen. LinkedIn testes separat, fordi platformene ikke nødvendigvis beskærer eller cacher på samme måde.

Frisøren deler derefter siden i et lokalt bryllupsforum. Det nye preview gør emnet klart, men der loves ikke “Aalborgs bedste brudestyling” eller andre resultater, siden ikke kan dokumentere. Linket fungerer som en rolig introduktion til indholdet.

På selve siden er der stadig en tydelig CTA til booking. Open Graph-forhåndsvisningen skal få den relevante læser ind på siden. Sidens indhold og næste skridt skal gøre resten. Det er samme grundprincip, som gennemgås i guiden om at skabe en brugervenlig hjemmeside, der giver flere henvendelser.

Den mest almindelige fejl er et forkert eller manglende billede. Platformen vælger så måske det første billede i indholdet, et ikon fra footeren eller et gammelt standardbillede. Løsningen er ikke at håbe på et bedre gæt. Løsningen er at angive og:image korrekt og teste det.

En anden fejl er at forveksle Open Graph med direkte rækkevidde. Metadata giver ikke flere visninger af sig selv og ændrer ikke algoritmen i Meta Ads. De forbedrer den pakke, linket bliver vist i. Indhold, distribution, målgruppe og timing afgør stadig, hvor mange der ser det.

Pas også på med tekst på billedet. En forhåndsvisning af et link bliver vist i mange størrelser, og platformen kan skære siderne af. Hvis hele budskabet står som små bogstaver på billedet, kan det forsvinde. Lad titel og beskrivelse bære informationen og brug billedet til genkendelse.

Sidst kan plugins og temaer skrive modstridende metadata. To SEO-plugins eller et tema med egne delingsfelter kan efterlade flere og:title- og og:image-tags. Platformen vælger ikke nødvendigvis den, du havde i tankerne. Kig derfor i kildekoden eller brug et testværktøj, hvis previewet opfører sig mærkeligt.

Open Graph blev oprindeligt udviklet af Facebook, men bruges bredt af andre platforme og apps. Nogle tjenester har deres egne ekstra formater, eksempelvis kortmetadata til X. I praksis kan et godt grundsæt af Open Graph-oplysninger dog dække en stor del af de almindelige delinger.

Et alt-tekst-felt erstatter ikke en Open Graph-beskrivelse. Alt-tekst beskriver et billede for blandt andet skærmlæsere og situationer, hvor billedet ikke vises. Open Graph-beskrivelsen forklarer siden. Begge dele er relevante, men til forskellige mennesker og systemer.

Ændrer du delingsbilledet, kan den gamle version leve videre i cache. Det betyder ikke nødvendigvis, at opsætningen stadig er forkert. Brug platformens inspektionsværktøj, kontrollér den konkrete URL og giv systemet tid til at hente filen igen.

Open Graph er en af de små tekniske opgaver, der er billig at få rigtig fra starten og irriterende at rydde op i på 300 gamle sider. Når grundskabelonen er på plads, bør felterne være en del af den almindelige publicering sammen med SEO-titel, billede og intern linkbuilding. Du kan læse mere om synlighed i guiden til flere gratis besøgende på hjemmesiden.

Lav navngivning og dimensioner, som redaktionen kan følge. Et billede med filnavnet artikel-open-graph.webp er lettere at finde end design-final-ny3.jpg. Gem originalen, så teksten kan ændres uden at komprimere den samme fil igen.

Kontrollér også, at billedets URL er offentlig og stabil. Et preview kan fejle, hvis filen kræver login, er blokeret, har et midlertidigt link eller returnerer en forkert MIME-type.

Det første fejlsøgningstrin er at åbne sidens kildekode og kontrollere, at de forventede og:-felter faktisk findes. Et SEO-plugin kan vise de rigtige værdier i WordPress, mens en cache eller en skabelon stadig sender ældre metadata til besøgende. Sammenlign derfor det, du har indtastet, med den HTML, platformen kan hente.

Kontrollér derefter billedet. URL’en skal kunne åbnes uden login, og serveren skal levere en rigtig billedfil. Et billede kan se fint ud i mediebiblioteket og alligevel være blokeret for en ekstern crawler. Det samme gælder, hvis en CDN-adresse er udløbet, eller hvis en sikkerhedsregel afviser forespørgslen.

Delingsplatforme gemmer ofte en kopi af metadata. Derfor kan en rettelse være korrekt på hjemmesiden, selv om et gammelt preview fortsat vises. Brug platformens kontrolværktøj til at hente siden igen, og undgå at ændre titel og billede flere gange i blinde. Ellers ved du ikke, hvilken rettelse der faktisk virkede.

På en webshop bør produkt- og kategorisider have en konsekvent fallback. Mangler et produkt et egnet billede, er et neutralt brandbillede bedre end et tomt felt eller et tilfældigt ikon. Open Graph skal ikke erstatte produktdata, men sikre at delingen stadig ser gennemtænkt ud.