Delningskort: Open Graph-taggar och delningsbilden

Vad en länkförhandsvisning är

När någon delar en länk i ett socialt nätverk eller en meddelandeapp läser plattformen sidan och bygger ett litet kort: en bild, en titel, en kort text och domänen. De flesta plattformar läser då taggarna i Open Graph-protokollet, meta-element i sidans head. X, tidigare Twitter, läser också egna taggar som börjar med twitter:. Varje plattform utformar sitt kort själv och bestämmer hur mycket text den visar. Du bestämmer vad sidan berättar för plattformarna.

Grundtaggarna

Open Graph-protokollet, publicerat på ogp.me, nämner fyra egenskaper som varje sida bör ha: og:title, og:type, og:image och og:url. og:url är sidans kanoniska adress. Valfria men användbara är og:description, og:site_name och og:locale, taggarnas språk och region, till exempel de_DE.

<meta property="og:title" content="Sommarrea: alla muggar nedsatta">
<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="Sex blå muggar på ett träbord">
<meta property="og:description" content="Till och med 31 augusti: lägre priser på muggar och tallrikar.">
<meta property="og:site_name" content="Exempelbutiken">
<meta name="twitter:card" content="summary_large_image">

Skriv varje adress i sin helhet, med https://. Protokollet definierar en adress som en URL som använder http:// eller https://, så en sökväg som /img/sale.jpg är inget giltigt värde. og:url bör stämma med sidans kanoniska länk. Om en tagg förekommer två gånger med olika värden ger protokollet företräde åt den första.

Delningsbilden

De flesta förhandsvisningar visar bilden bred. En bild i förhållandet ungefär 1,91 : 1, till exempel 1 200 × 630 pixlar, rekommenderas ofta och passar i de flesta kort utan beskärning. Kvadratiska bilder beskärs ofta upptill och nedtill, så håll viktigt innehåll i mitten. För Google Discover rekommenderar Google bilder som är minst 1 200 pixlar breda, en stor förhandsvisning som tillåts med inställningen max-image-preview:large och en bild som anges med og:image eller schema.org-märkning. Google avråder också från generiska bilder som webbplatsens logotyp.

og:image:width och og:image:height anger bildens storlek i pixlar. og:image:alt beskriver vad som finns på bilden, inte en bildtext. Protokollet säger att en sida med og:image också bör ange og:image:alt.

Titel och beskrivning

og:title kan skilja sig från title-elementet. Den behöver inte webbplatsens namn, eftersom og:site_name bär det. Plattformar kortar långa texter efter egen längd, så sätt de viktiga orden först. Open Graph-taggar spelar roll även utanför sociala nätverk. Google nämner innehållet i og:title som en av källorna för titellänkar i sökresultaten, tar hänsyn till og:site_name för webbplatsnamnet och listar og:image som ett sätt att ange en föredragen bild.

Taggar för X

Taggen twitter:card väljer korttyp. Värdet summary_large_image begär en stor, bred bild, summary en liten. Om din sida redan har Open Graph-taggar räcker det ofta att lägga till twitter:card. Utvecklarsidorna hos X kunde inte läsas för den här guiden, så kontrollera de aktuella reglerna där innan du förlitar dig på en detalj.

Ett kort per sida

Många webbplatser sätter samma titel och bild på varje sida, ofta via temat. Då ser varje delad länk likadan ut. Ge varje viktig sida en egen og:title, og:description och og:image: en produktsida produktfotot, en artikel dess huvudbild. För og:type använder protokollet bland annat website för en allmän sida och article för en artikel. Ett butiks- eller innehållssystem kan fylla dessa taggar automatiskt från titeln, sammanfattningen och huvudbilden på varje sida. Kontrollera efter en ändring en sida av varje mall.

Varför förhandsvisningen inte ändras

Många plattformar sparar ett kort när de väl har byggt det. Om du ändrar bilden eller titeln senare kan folk fortfarande se det gamla kortet ett tag. Ett nytt filnamn för en ny bild hjälper, eftersom plattformen då ser en ny adress. Vissa plattformar erbjuder ett verktyg som hämtar sidan på nytt.

Innan du delar en sida

• Finns og:title, og:type, og:image och og:url, och är og:url den kanoniska adressen?
• Är varje adress fullständig, med https://?
• Är bilden tillräckligt bred, laddas den, och ligger det viktiga innehållet i mitten?
• Är og:image:alt, og:image:width och og:image:height angivna?
• Finns det en twitter:card-tagg, och är titeln tillräckligt kort?

Arbeta med Do4U

Kontroll av delningskort visar hur en sida ser ut när länken till den delas, och kontrollerar taggarna bakom förhandsvisningen. Du anger en adress. Do4U läser sidan och början av dess delningsbild. Koden samlar Open Graph-taggarna, taggarna för Twitter/X-kortet och reservvärdena, alltså titeln, metabeskrivningen och den första bilden, samt den kanoniska länken och språket. Den läser bildens verkliga format och storlek från filen och jämför dem med taggarna. Du får en neutral förhandsvisning, en tabell över alla taggar, fynd med en kort motivering och föreslagna taggar att kopiera. Taggar som en sida bara sätter med JavaScript syns inte. Ingen AI används, och kontrollen är gratis, med en daglig gräns.

Do4U hittar tips, du kontrollerar och bestämmer. Förhandsvisningen är en neutral skiss: hur en plattform visar länken bestämmer plattformen.