Open Graph-metataggar - Vad du behöver veta

Vill du att folk ska lägga märke till dina inlägg i sociala medier?

Varje dag skrivs över 4 miljoner blogginlägg, så det är avgörande att dela ditt arbete på sociala nätverk. Open Graph är en av de viktigaste komponenterna för att nå en bredare publik.

Alla känner inte till vikten av Open Graph. Vad är det egentligen? Hur kan det hjälpa dig att bli uppmärksammad?

Vad är Open Graph?

“Open Graph metataggar, likt meta descriptions och titlar, styr hur URL:er skrivs när de delas på sociala medier.”

Det är enklare att definiera sidinnehåll på sociala nätverk tack vare Facebooks Open Graph-projekt för att standardisera social information över webbplatser.

Dessa taggar förser sociala nätverkstjänster med information som sidans titel, beskrivning och utvalda bild i head-sektionen på en webbsida. Denna process bevarar konsekvensen och äktheten hos den visade informationen.

Varför använda Open Graph?

Open Graph stöds i olika sociala nätverk som:

• Facebook;
• Twitter/X;
• Pinterest;
• Viber;
• Telegram;
• WhatsApp.

Enligt Google förbättrar protokollet ”Recommended Content Blocks”.

Vad händer om Open Graph inte används?

Eftersom Facebook är osäkert på vad som ska visas i förhandsgranskningen kan det använda vilken bild som helst (det kan till och med ta en annonsbanner eller något från din sidhuvud).

Som ett resultat kan Facebook inte avgöra vilka delar av förhandsgranskningen som ska visas.

• Open Graph skapar förhandsgranskningar för webbplatser relaterade till sociala medier.
• Open Graph-taggar hjälper individer att hitta material i sociala flöden, vilket leder till ökade besök.

När besökare skrollar ner på din webbplats sida, ju högre upp ditt material visas, desto mer uppmärksamhet får det. Det gör att användare kan få en förhandsgranskning innan de klickar.

Använd OG-taggar för att hjälpa människor att hitta ditt material på Facebook och andra sociala medieplattformar.

OG-metaelement används för att skapa utdrag när URL:er delas i privata konversationer på webbplatser som använder protokollet.

Betydelsen av Open Graph-protokollet för ditt företag

Denna typ av interaktion förenklas av Facebooks Open Graph-protokoll. Open Graph-markup är en metod för att organisera och spåra förhandsgranskningsdata. Det ger dig fullständig kontroll över hur ditt material visas på sociala nätverk utöver dina egna.

För att underlätta integration skapades rika grafobjekt som delar Facebooks standarduppsättning av egenskaper. Facebook har kontroll över informationsflödet från externa källor (eller gillade, etc.). Denna information tillhandahålls av Open Graph-metataggar när de rör sig genom en webbplats sidhuvud.

Eftersom många människor får tillgång till en sida via sociala medier är Open Graph-taggar viktigare än någonsin. CTR kan öka när sökningen förbättras. Open Graph underlättar processen för delning i sociala medier. Open Graph stöds brett över sociala nätverkssajter. Twitter/X:s Open Graph-taggar är ett bra exempel; Twitter/X stöder Open Graph.

Vad betyder detta egentligen?

Varför bry sig om att märka ditt server-side-innehåll med Open Graph? Finns det en potential att de extra taggarna kommer att förbättra din webbplats prestanda och locka fler besökare? Här är några av anledningarna till varför vi tror att Open Graph kan göra en enorm skillnad.

De flesta framstående sociala nätverk använder Open Graph-taggar

Om du inte har tid att lära dig HTML, kan du istället använda Facebook Open Graph-taggar. Du kan använda dessa etiketter för att anpassa namn, beskrivningar och foton som visas på alla de viktigaste sociala nätverkssajterna.

Open Graph-taggar är verkligen för sociala medier

Open Graph designades för att visa exempel på information inom det sociala nätverket. Det organiserar information på sätt som går utöver att bara dela en webbsida.

Funktion för optimerad bild

Du kan använda Open Graph-taggar för att specificera vilken bild som ska visas i din sociala förhandsgranskning. Standardalternativet behöver inte väljas. Människor är mer benägna att klicka på länkar till ditt blogginlägg eller din webbplats om de ser bra ut.

Det handlar om sociala förhandsgranskningar, inte sökförhandsgranskningar

Både sökmotoroptimering och sociala medier-marknadsföring är avgörande, men de har distinkta krav. Open Graph-komponenter löste ett gammalt SEO-problem: det faktum att förhandsgranskningar av inlägg i sociala nätverk hade oattraktiva titlar och beskrivningar.

Sidans titel, meta descriptions och Open Graph-titel, beskrivning, URL och bildtaggar måste alla vara unika för att innehållet ska optimeras för sökmotorer och sociala nätverk.

Du har kontroll över ditt material

Oavsett om du publicerar ditt material själv eller om någon annan gör det, har du fullständig kontroll över hur det kommer att visas på sociala medier.

Även om du anpassar varje inlägg i sociala medier, kommer majoriteten av dina kunder att ignorera förhandsgranskningen. Besökare som väljer att dela ditt material kommer att göra det med en väl vald bild, titel och beskrivning om dina Open Graph-taggar är så bra som de kan vara. Detta är mycket viktigt eftersom du har full kontroll över informationen som sprids om ditt företag.

Typer av Open Graph-taggar

Open Graph-taggar som og:title, og:image, og:type och og:url gör att sociala nätverksplattformar kan visa din information. Du måste använda dessa kritiska taggar, men du kan också använda andra.

En Facebook-skärmdump som innehåller kopplingar till komponenterna og:image, og:url, og:title och og:description.

og:site_name

og:site_name-taggen ska innehålla domänen där ditt innehåll kan hittas. Som ett resultat ersätter den varumärkesnamnet, som skulle ha funnits i meta-titeln (och därför inte tillåtas i og:title tag).

og:site_name-taggen ska inkludera namnet på din webbplats eller ditt varumärke, medan og:title-taggen ska innehålla titeln på din artikel.

og:site_name Kod <meta property="og:site_name" content="Your Site Name" />

Använd samma site name-tagg över hela din webbplats.

og:title

og:title-taggen föreslås för att ställa in sidans titel. Det liknar hur meta-titlar används i SEO. När du använder en befintlig meta-titel, se till att hålla og:title-fältet fritt från innehåll som är specifikt för ditt varumärke eller din webbplats.

og:title Kod <meta property="og:title" content="Title" />

Denna tagg bör visas på alla sidor på din webbplats som en användare kanske vill dela på Facebook, Twitter/X eller en annan social nätverkssajt.

Håll titeln mellan 40 och 50 tecken lång; annars kommer den att klippas av.

Om du vill att fler människor ska besöka din webbplats måste titeln göra mer än att bara beskriva den.

Till skillnad från sökmotorers meta-titlar bör du inte inkludera ditt domännamn eller någon annan information som kan användas för att identifiera dig.

og:type

Använd og:type-taggen för att specificera vilken typ av material som skickas in. Detta informerar den sociala nätverkssajten om vilken typ av innehåll du delar, såsom ett blogginlägg, en webbsida, en video eller en ljudfil.

og:type Kod <meta property="og:type" content="article" />

Använd objekttypen ”article” för information som kräver förklaring, såsom blogginlägg.

Lägg till webbplatstypen till webbplatsens andra sidor.

Du måste använda rätt filformat om du vill överföra en fil som innehåller både text och ljud eller video. Denna sida innehåller en lista över alla objektkategorier.

og:locale

og:locale-taggen ger information om språket som det överförda materialet är skrivet på. Användare av sociala nätverkssajter bör informeras om att innehåll som publiceras på webbplatser kan ses på ett antal språk.

og:locale Kod <meta property="og:locale" content="en_GB" />

Eftersom Facebook antar att allt som saknar en og:locale-tagg är skrivet på amerikansk engelska, kan du ignorera denna tagg (en_US) om du driver en webbplats i USA som helt består av engelskt material.

Om innehållet du tillhandahåller är skrivet på ett annat språk än amerikansk engelska, se till att använda rätt OG-tagg.

og:url

Använd helt enkelt og:url-taggen för att specificera var du vill publicera innehållet.

og:url Kod <meta property="og:url" content="https://www.yourdomain.com/title.html" />

Denna tagg måste tillhandahålla sidans kanoniska URL.

og:description

Uttalandet som ingår i en og:description-tagg måste vara kortfattat, okomplicerat och så engagerande som möjligt för att uppmuntra läsare att besöka en webbplats.

Du är fri att återanvända informationen så länge den är relevant, på grund av att denna tagg liknar en som används av sökmotorer.

og:description Kod <meta property="og:description" content="Your description." />

Det skulle vara bra om du kunde hålla din beskrivning mellan 50 och 100 tecken lång. Facebook-inlägg bör vara mellan två och fyra ord som mest; inlägg som är längre än fyra ord är mer benägna att raderas.

För att få flest klick och uppmärksamhet på materialet du tillhandahåller, bör beskrivningen du ger vara så detaljerad och övertygande som möjligt.

og:image

Ange URL:en för bilden som ska användas i det sociala utdraget med hjälp av og:image-elementet. Använd en bild som är både intressant och direkt relevant för artikelns innehåll för att öka sannolikheten att människor klickar sig vidare till din webbplats.

Detta OG-element fungerar på liknande sätt som bild schema markup, som används av sökmotorer för att ge rika resultat.

og:image Kod <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png" />

Om du vill att din webbplats delbara sidor ska rankas högre i bild-SEO, använd innovativa foton som matchar ditt varumärke. Även om en sida inte sannolikt kommer att delas ofta, är det en smart idé att märka den med din logotyp ifall någon delar den i framtiden.

För att undvika att verka pixlig eller lågkvalitativ bör ditt originalkonstverk ha ett bildförhållande på 1.91:1 och en upplösning på minst 1200 gånger 630 pixlar.

og:image:width- och og:image:height-taggarna säkerställer att tidigare delade bilder visas korrekt. Installera Yoast på din WordPress-webbplats om du inte redan har gjort det för att få dem tillagda automatiskt. Om du inte redan har gjort det, här är koden:

<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

Lägg till Open Graph i WordPress

Att lägga till OG-taggar i WordPress är det enklaste, vanligaste och enklaste sättet att åstadkomma det med Yoast SEO-pluginet. Detta plugin bör redan vara installerat om din webbplats är inställd så att sökmotorer enkelt kan hitta den.

Uppdatera sidan eller artikeln där Open Graph ska infogas med Yoast SEO:s ”sociala” alternativ.

Fyll i rutorna för og:image, og:title och og:description på Facebook-dragspelsmenyn.

Yoast kommer att konfigurera din og:url-tagg, Twitter/X-kort och bildstorlekar åt dig. Om du inte instruerar Yoast att använda en specifik bild, kommer den att använda huvudbilden från inlägget.

När din webbplats delas visas ingen bild som standard. Du kan ändra detta genom att tillhandahålla en skärmdump av hela webbplatsen. Detta fel uppstår när en bild-URL saknar og:image-taggen.

På Yoasts huvudinställningssida kan du välja den webbplatsövergripande og:image.

Att lägga till OG-taggar i din WordPress-blogg är verkligen enkelt. Du behöver bara gå till:

WordPress Sidopanel: Yoast>Socialt>Facebook.

Växla omkopplaren och spara sedan den befintliga bilden. Vi anser att du bör välja en logotyp. Du kan också göra samma sak för Twitter/X och Pinterest.

Lägg till Open Graph manuellt

Om du kan koda och inte använder ett av de tidigare systemen är OG-taggar enkla att installera.

Du kan kopiera och klistra in innehållet nedan på din webbplats, men vänligen ändra det för att passa dina behov.

<meta property="og:site_name" content="INSERT SITE NAME" /> <meta property="og:title" content="INSERT TITLE" /> <meta property="og:description" content="INSERT DESCRIPTION" /> <meta property="og:url" content="INSERT URL" /> <meta property="og:type" content="INSERT TYPE" /> <meta property="og:image" content="INSERT IMAGE URL" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="INSERT IMAGE URL" />

Testa dina Open Graph-metataggar

Låt oss anta att du har förstått hur man inkluderar Open Graph på din webbplats.

Om din webbplats är korrekt klassificerad bör den se utmärkt ut när den delas på sociala medier. Testa alltid ditt arbete innan du släpper det till allmänheten.

Innan du delar en URL, dubbelkolla att dina OG-taggar hämtas och visas korrekt.

Dessa verktyg kan vara användbara för att testa dina OG-taggar:

• Pinterest Rich Pins Validator
• Twitter/X Card Validator
• Facebook Sharing Debugger
• LinkedIn Post Inspector

Ange helt enkelt en URL i någon av dessa tjänster för att få de ursprungliga metataggarna. När du delar den får du en uppfattning om hur den kommer att se ut för andra.

Granska förhandsgranskningens bild, titel och beskrivning innan du fortsätter. Du kan få varningar om taggar du inte behöver, som du antingen kan lägga till eller ignorera.

Om URL-testet misslyckas bör du försöka igen med en annan tagg. Kontrollera att varje verktyg fungerar genom att besöka dess URL. Du kan prata om det när det är klart.

Slutsats

Det är avgörande att behålla kontrollen över vad du delar på sociala medier. Trafik och konverteringsfrekvenser ökar när rika objekt visas i Open Graph. Börja med ett enda blogginlägg. När du har sett resultatet blir det mycket enklare att tillämpa Open Graph-taggar i dina nästa inlägg i framtiden.

Vanliga frågor