Delingskort: Open Graph-tags og delingsbilledet

Hvad en linkforhåndsvisning er

Når nogen deler et link i et socialt netværk eller en messenger, læser platformen siden og bygger et lille kort: et billede, en titel, en kort tekst og domænet. De fleste platforme læser til det tags fra Open Graph-protokollen, som er meta-elementer i sidens head. X, tidligere Twitter, læser også sine egne tags, der begynder med twitter:. Hver platform udformer selv sit kort og afgør, hvor meget tekst det viser. Du afgør, hvad siden fortæller platformene.

De grundlæggende tags

Open Graph-protokollen, offentliggjort på ogp.me, nævner fire egenskaber, som hver side bør have: 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, tagsenes sprog og region, for eksempel de_DE.

<meta property="og:title" content="Sommerudsalg: alle krus er nedsat">
<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 træbord">
<meta property="og:description" content="Indtil 31. august: lavere priser på krus og tallerkener.">
<meta property="og:site_name" content="Eksempel Shop">
<meta name="twitter:card" content="summary_large_image">

Skriv hver adresse fuldt ud med https://. Protokollen definerer en adresse som en URL, der bruger http:// eller https://, så en sti som /img/sale.jpg er ikke en gyldig værdi. og:url bør svare til sidens kanoniske link. Hvis et tag optræder to gange med forskellige værdier, giver protokollen forrang til det første.

Delingsbilledet

De fleste forhåndsvisninger viser billedet bredt. Et billede i forholdet ca. 1,91 : 1, for eksempel 1200 × 630 pixel, anbefales ofte og passer til de fleste kort uden beskæring. Kvadratiske billeder beskæres ofte foroven og forneden, så hold vigtigt indhold i midten. Til Google Discover anbefaler Google billeder, der er mindst 1200 pixel brede, en stor forhåndsvisning tilladt med indstillingen max-image-preview:large og et billede angivet med og:image eller schema.org-markering. Google fraråder også generiske billeder som websitets logo.

og:image:width og og:image:height angiver billedets størrelse i pixel. og:image:alt beskriver, hvad der er på billedet, ikke en billedtekst. Protokollen siger, at en side med og:image også bør angive og:image:alt.

Titel og beskrivelse

og:title kan afvige fra title-elementet. Det behøver ikke websitets navn, fordi og:site_name bærer det. Platforme afkorter lange tekster ved deres egen længde, så sæt de vigtige ord først. Open Graph-tags betyder også noget uden for sociale netværk. Google nævner indholdet af og:title som en af kilderne til titellinks i søgeresultaterne, tager hensyn til og:site_name for websitets navn og nævner og:image som én måde at angive et foretrukket billede på.

Tags til X

Tagget twitter:card vælger korttypen. Værdien summary_large_image beder om et stort, bredt billede, summary om et lille. Hvis din side allerede har Open Graph-tags, er det ofte nok at tilføje twitter:card. X' udviklersider kunne ikke læses til denne guide, så tjek de aktuelle regler dér, før du stoler på en detalje.

Ét kort pr. side

Mange websites sætter samme titel og billede på alle sider, ofte via temaet. Så ser hvert delt link ens ud. Giv hver vigtig side sin egen og:title, og:description og og:image: en produktside produktfotoet, en artikel dens hovedbillede. Til og:type bruger protokollen blandt andre typer website til en almindelig side og article til en artikel. Et shop- eller indholdssystem kan udfylde disse tags automatisk ud fra titel, opsummering og hovedbillede på hver side. Tjek efter en ændring én side af hver skabelon.

Hvorfor forhåndsvisningen ikke ændrer sig

Mange platforme gemmer et kort, når de først har bygget det. Hvis du senere ændrer billedet eller titlen, kan folk stadig se det gamle kort i et stykke tid. Et nyt filnavn til et nyt billede hjælper, fordi platformen så ser en ny adresse. Nogle platforme tilbyder et værktøj, der henter siden igen.

Før du deler en side

• Findes og:title, og:type, og:image og og:url, og er og:url den kanoniske adresse?
• Er hver adresse fuldstændig, med https://?
• Er billedet bredt nok, indlæses det, og er det vigtige indhold i midten?
• Er og:image:alt, og:image:width og og:image:height angivet?
• Er der et twitter:card-tag, og er titlen kort nok?

Arbejd med Do4U

Tjek af delingskort viser, hvordan en side ser ud, når dens link deles, og tjekker tagsene bag forhåndsvisningen. Du indtaster én adresse. Do4U læser siden og starten af dens delingsbillede. Koden samler Open Graph-tags, Twitter/X-korttags og reserverne, dvs. titlen, metabeskrivelsen og det første billede, samt det kanoniske link og sproget. Den læser billedets reelle format og størrelse fra filen og sammenligner dem med tagsene. Du får en neutral forhåndsvisning, en tabel over alle tags, fund med en kort begrundelse og foreslåede tags, du kan kopiere. Tags, som en side kun sætter med JavaScript, ses ikke. Der bruges ingen AI, og tjekket er gratis med en daglig grænse.

Do4U finder hints, du tjekker og beslutter. Forhåndsvisningen er en neutral skitse: Hvordan en platform viser linket, afgør platformen.