Delingskort: Open Graph-tagger og delingsbildet

Hva en lenkeforhåndsvisning er

Når noen deler en lenke i et sosialt nettverk eller en meldingstjeneste, leser plattformen siden og lager et lite kort: et bilde, en tittel, en kort tekst og domenet. De fleste plattformer leser da taggene i Open Graph-protokollen, som er meta-elementer i sidens head. X, tidligere Twitter, leser også sine egne tagger som begynner med twitter:. Hver plattform utformer kortet selv og bestemmer hvor mye tekst den viser. Du bestemmer hva siden forteller plattformene.

De grunnleggende taggene

Open Graph-protokollen, publisert på ogp.me, nevner fire egenskaper som hver side bør ha: og:title, og:type, og:image og og:url. og:url er sidens kanoniske adresse. Valgfrie, men nyttige, er og:description, og:site_name og og:locale, språket og regionen for taggene, for eksempel de_DE.

<meta property="og:title" content="Sommersalg: alle krus er satt ned">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Seks blå krus på et trebord">
<meta property="og:description" content="Til 31. august: lavere priser på krus og tallerkener.">
<meta property="og:site_name" content="Eksempelbutikken">
<meta name="twitter:card" content="summary_large_image">

Skriv hver adresse i sin helhet, med https://. Protokollen definerer en adresse som en URL som bruker http:// eller https://, så en sti som /img/sale.jpg er ikke en gyldig verdi. og:url bør stemme med sidens kanoniske lenke. Hvis en tagg står to ganger med ulike verdier, gir protokollen forrang til den første.

Delingsbildet

De fleste forhåndsvisninger viser bildet bredt. Et bilde i forholdet omtrent 1,91 : 1, for eksempel 1200 × 630 piksler, anbefales ofte og passer de fleste kort uten beskjæring. Kvadratiske bilder beskjæres ofte øverst og nederst, så hold viktig innhold i midten. For Google Discover anbefaler Google bilder som er minst 1200 piksler brede, en stor forhåndsvisning tillatt med innstillingen max-image-preview:large og et bilde angitt med og:image eller schema.org-merking. Google fraråder også generiske bilder som nettstedets logo.

og:image:width og og:image:height oppgir bildets størrelse i piksler. og:image:alt beskriver hva som er på bildet, ikke en bildetekst. Protokollen sier at en side med og:image også bør angi og:image:alt.

Tittel og beskrivelse

og:title kan avvike fra title-elementet. Den trenger ikke nettstedets navn, fordi og:site_name har det. Plattformer kutter lange tekster ved sin egen lengde, så sett de viktige ordene først. Open Graph-tagger betyr også noe utenfor sosiale nettverk. Google nevner innholdet i og:title som en av kildene til tittellenker i søkeresultatene, tar hensyn til og:site_name for nettstedsnavnet og oppgir og:image som én måte å angi et foretrukket bilde på.

Tagger for X

Taggen twitter:card velger korttypen. Verdien summary_large_image ber om et stort, bredt bilde, summary om et lite. Hvis siden din allerede har Open Graph-tagger, er det ofte nok å legge til twitter:card. Utviklersidene til X kunne ikke leses for denne veiledningen, så sjekk de gjeldende reglene der før du stoler på en detalj.

Ett kort per side

Mange nettsteder setter samme tittel og bilde på alle sider, ofte via temaet. Da ser hver delt lenke lik ut. Gi hver viktig side sin egen og:title, og:description og og:image: en produktside produktbildet, en artikkel hovedbildet sitt. For og:type bruker protokollen blant annet website for en generell side og article for en artikkel. Et butikk- eller innholdssystem kan fylle ut disse taggene automatisk fra tittelen, sammendraget og hovedbildet på hver side. Sjekk én side av hver mal etter en endring.

Hvorfor forhåndsvisningen ikke endrer seg

Mange plattformer lagrer et kort når de først har laget det. Hvis du endrer bildet eller tittelen senere, kan folk fortsatt se det gamle kortet en stund. Et nytt filnavn for et nytt bilde hjelper, fordi plattformen da ser en ny adresse. Noen plattformer har et verktøy som henter siden på nytt.

Før du deler en side

• Finnes og:title, og:type, og:image og og:url, og er og:url den kanoniske adressen?
• Er hver adresse fullstendig, med https://?
• Er bildet bredt nok, lastes det, og er det viktige innholdet i midten?
• Er og:image:alt, og:image:width og og:image:height angitt?
• Finnes det en twitter:card-tagg, og er tittelen kort nok?

Arbeid med Do4U

Sjekk av delingskort viser hvordan en side ser ut når lenken deles, og sjekker taggene bak forhåndsvisningen. Du skriver inn én adresse. Do4U leser siden og begynnelsen av delingsbildet. Koden samler Open Graph-taggene, Twitter/X-korttaggene og reservene, det vil si tittelen, metabeskrivelsen og det første bildet, samt den kanoniske lenken og språket. Den leser bildets faktiske format og størrelse fra filen og sammenligner dem med taggene. Du får en nøytral forhåndsvisning, en tabell over alle tagger, funn med en kort begrunnelse og foreslåtte tagger du kan kopiere. Tagger som en side bare setter med JavaScript, blir ikke sett. Det brukes ingen KI, og sjekken er gratis, med en daglig grense.

Do4U finner tips, du sjekker og bestemmer. Forhåndsvisningen er en nøytral skisse: Hvordan en plattform viser lenken, avgjør plattformen.