Tillbaka till bloggen
Har du någonsin undrat varför länkarna du delar på Facebook eller Twitter ibland ser konstiga ut? Vet du hur du kan påverka utseendet på dina delade blogginlägg på sociala medier?
Om du är osäker på om du har gjort allt du kan för att optimera hur dina inlägg eller sidor visas på Facebook och Twitter, då ska du läsa vidare. Vi visar dig hur rätt social media meta tags kan hjälpa dig att förbättra känslan och utseendet i dina förhandsvisningar.
När du delar en länk till en artikel vill du att inlägget ska se snyggt ut. Det bör innehålla en högkvalitativ bild, rätt rubrik, beskrivning och URL. Facebook, Twitter och andra plattformar hämtar dessa parametrar direkt från din webbplats.
Du kan kontrollera vad de hämtar genom att inkludera social media meta tags (till exempel open graph tags) i HTML-koden på dina sidor.
Om Facebook meta tags (=Open Graph meta tags) finns på plats styr du vad som visas i Facebook-inlägget. Om du inte inkluderar dessa Open Graph (og) egenskaper kommer Facebook fortfarande att visa information, men troligen inte på det sätt du önskar. Detsamma gäller för Twitter meta tags. Låt oss visa hur det fungerar med ett exempel på länkdelning på Facebook.
Dela webbinnehåll på Facebook
Facebook är en utmärkt plattform för att dela nytt innehåll. Att skapa ett inlägg av en artikel är så enkelt som att klistra in länken i statusfältet.
Låt oss titta på processen. Vi använder vårt inlägg om Facebook Marketing Strategy som exempel.
När URL:en klistrats in hämtar Facebook data från målsidan och skapar ett snyggt formaterat inlägg. Formatet visas direkt i en preview – både för desktop och mobil. Om du använder Kontentino för att hantera ditt innehåll finns förhandsvisningen tillgänglig direkt i din content calendar.
Förstå meta tags i webbsidans HTML-kod
Meta-egenskaper för sökmotorer
Högst upp i koden hittar vi flera attribut som definierar artikelns parametrar, även kallade meta tags eller meta-egenskaper. Vissa används av sökmotorer för att förstå innehållet genom information som inte syns direkt på sidan. Dessa inkluderar till exempel:
- Meta title – <title>
- Meta description – meta name=”description”
- Robots – meta name=”robots”
Bilden nedan visar HTML-koden för detta inlägg från Kontentino. Du kan se dessa meta tags markerade i grönt.
Identifiera meta tags i HTML-koden för inlägget Facebook Ads Target Audiences 101: The Ultimate Guide
Tips: Osäker på hur du ser koden? Tryck CTRL+U i Windows eller Option + Command + U på Mac.
Tack vare dessa tags vet sökmotorer att sidan ska indexeras (dofollow). Den meta title och meta description som angetts visas sedan i sökresultaten (SERP). Som du ser är de satta till:
- Meta title: ’Facebook Ads Target Audiences 101: The Ultimate Guide | Kontentino Blog – Simplifying Social Media Approval Workflow’
- Meta description: ’Hitta rätt målgrupp med Facebook Ads target audiences.’
Vi vet att dessa inte har optimal längd, men nu fokuserar vi inte på SEO eller Google. Låt oss istället titta på de meta tags som innehåller texten ”og:”.
Dessa kallas ofta för social meta tags, social media meta tags eller helt enkelt og-egenskaper.
I koden för vårt inlägg finns sju olika og-egenskaper:
- og: locale
- og: type
- og: title
- og: description
- og: url
- og: site_name
- og: image
Dessutom finns det fler Facebook meta tags kopplade till bildinställningar:
- og:image:width
- og:image:height
- og:image:alt
- og:image:type
Twitter meta tags
Utöver dessa hittar du även specifika social meta tags för Twitter:
- meta name=”twitter:card”
- meta name=”twitter:title”
- meta name=”twitter:description”
- meta name=”twitter:site”
- meta name=”twitter:image”
För att påverka hur inlägget ser ut på Facebook behöver vi avkoda och redigera innehållet i dessa ”og:”-fält.
Läs vidare för att lära dig mer om: i) Att avkoda og-egenskaper, ii) Riktlinjer för innehåll och iii) Hur du redigerar dem i ditt CMS.
Publicering på Facebook och Twitter med Kontentino
Starta en 14-dagars provperiod med Kontentino och lär dig bemästra social media meta tags. Se din preview innan inlägget går live.
”og:” står för ”Open Graph”. Det är ett protokoll som gör det möjligt att tala om för Facebook hur delat innehåll ska visas. Som Facebook själva nämner i sina instruktioner för utvecklare: ”utan Open Graph-taggar använder Facebook Crawler interna algoritmer för att gissa titel, beskrivning och bild”. Genom att definiera detta explicit säkerställer du högsta möjliga kvalitet.
Open Graph lanserades av Facebook redan 2010 men förvaltas idag av Open Web Foundation. Vi fokuserar på de fyra viktigaste taggarna för utseendet: og:title, og:image, og:url och og:description.
og:title
Här sätter vi titeln på objektet (blogginlägget) så som det ska se ut i det sociala flödet. Facebook hämtar denna och visar den direkt under URL:en.
og:image
Här anger vi URL till bilden som ska representera inlägget. Genom att ange og:image garanterar vi att rätt bild visas på Facebook istället för att plattformen väljer en slumpmässig bild från sidan.
og:url
Denna tagg innehåller den kanoniska URL:en som fungerar som dess permanenta ID i det sociala nätverket.
og:description
Här definierar vi den beskrivande texten som visas vid delning. I vårt exempel: ”Hitta rätt målgrupp med Facebook Ads target audiences.”
Twitter meta tags
Dessa fungerar på samma sätt som Open Graph men är specifikt anpassade för att styra vad Twitter hämtar när en sida delas där.
Bemästra og-taggar
Både Facebook och Twitter erbjuder riktlinjer för dessa taggar. Nu när vi förstår teorin är det dags att gå in i ditt CMS och redigera dem. Vi visar exempel från WordPress, som är världens populäraste CMS.
Om du använder ett SEO-plugin som Yoast SEO, Rank Math eller All in One SEO, är det enkelt att redigera metadata. De flesta bra plugins låter dig ändra taggar för Facebook och Twitter separat. Här visar vi hur det ser ut i Rank Math.
Börja med att redigera inlägget, klicka på SEO-fliken och sedan på fliken ”Social”.
Hitta platsen för att redigera social media meta tags i ditt CMS
Rank Math har en live previewer. Klicka på knappen ”Preview & Edit Social Media” för att se ändringarna i realtid.
Redigera Facebook meta tags
Först ser du en förhandsvisning och därunder de fält som kan justeras.
Preview genererad av Rank Math
I vårt fall var og:image, og:title och og:description inte definierade än, så simulatorn visar standardvärden från den vanliga SEO-metadatan.
Redigera og:title och og:description för ditt blogginlägg
När vi har fyllt i och sparat ändringarna kan vi kontrollera resultatet.
Nya social media meta tags ifyllda för inlägget
Innan vi kollar det slutgiltiga resultatet bör vi nämna andra alternativ. Om du inte har ett SEO-plugin kan du använda specifika plugins som OG eller lägga in koden manuellt. WIX och andra system har också inbyggda lösningar för att lägga till dessa egenskaper.
När du är klar är det dags att testa. Använd Facebook Debugger för att se hur det ser ut live. Glöm inte att rensa cache om ändringarna inte syns direkt.
Open Graph-taggar i Facebook Link Sharing Debugger
Link preview i action i Facebook Sharing Debugger
Som du ser ser allt bra ut och ändringarna har slagit igenom.
Vanliga missförstånd om social media meta tags
Myt 1: De är bara till för SEO.
Dessa taggar spelar en avgörande roll för hur ditt innehåll visas på sociala nätverk, inte bara i sökresultat. De optimerar dina inlägg för Facebook och Twitter och ökar din engagement.
Myt 2: Alla bilder visas perfekt automatiskt.
Utan att specificera og:image eller använda ett Twitter card kan plattformar välja fel bild eller formatera den felaktigt, vilket skadar inläggets utseende.
Myt 3: De är bara viktiga för små webbplatser.
Meta tags är nödvändiga oavsett storlek på webbplats. Genom att använda dem konsekvent på bloggar och produktsidor säkerställer du en professionell display.
Myt 4: Du kan lita på att plattformarna gör rätt.
Att låta Facebook eller Twitter sköta formateringen automatiskt är riskabelt. Utan manuella inställningar kan förhandsvisningen bli ofullständig eller missvisande.
Myt 5: De är svåra att implementera.
Med verktyg som Rank Math är processen enkel. Du behöver inte vara utvecklare för att optimera dina inlägg för social delning.
Myt 6: Twitter cards fungerar bara med statiska bilder.
Twitter cards stöder olika format, inklusive GIF och video, vilket gör dina inlägg mer dynamiska.
Myt 7: Meta tags är bara för ditt eget innehåll.
De hjälper även när ditt innehåll delas på andra webbplatser. Rätt inställda og-taggar gör att ditt innehåll ser professionellt ut oavsett var det sprids.
Slutsats
Vi hoppas att denna guide gett dig klarhet i og-egenskaper och varför de är viktiga. Om du vill ta din social media marketing till nästa nivå, prova Kontentino. Det förenklar team collaboration och godkännandeprocesser för ditt innehåll.
Vår Content Calendar har en inbyggd preview-funktion så att du slipper lämna verktyget för att se hur dina länkar kommer att se ut, vilket sparar värdefull tid.
Genom att kombinera detta med UTM-taggar för analys och schemaläggning får du full kontroll över din sociala närvaro.
FAQ
Vad är en social media meta tag?
Det är data som titlar, bilder och beskrivningar som skickas till sociala plattformar vid delning för att förbättra hur inlägg presenteras för användarna.
Ge exempel på meta tags?
Exempel inkluderar meta property=”og:title”, meta property=”og:image” och meta property=”og:url”, som optimerar delning på Facebook och Twitter.
Vad är social media metadata?
Det inkluderar open graph-data som koncisa titlar och bilder som lyfter inläggets utseende på plattformar som Twitter och Facebook.
Vad är social media tags?
Det är kodsnuttar som twitter card tags eller og tags i HTML-filen som påverkar hur webbsidor visas när de delas socialt.
Hur skapar man meta tags?
En utvecklare lägger in koden i webbsidans HTML-huvud, eller så använder man ett CMS-plugin för att fylla i fält för titel, beskrivning och bild.
Vilka sociala medier använder meta?
De flesta stora nätverk som Facebook, Twitter och LinkedIn använder dem för att optimera hur länkar och inlägg visas.
Är en meta tag nödvändig?
Ja, de är avgörande för digital marketing då de styr ditt innehålls visuella presentation, vilket ökar klickfrekvens och engagement.
Hur hittar man meta tags?
Du kan inspektera en sids HTML-kod eller använda verktyg som Facebook Debugger för att se specifika egenskaper som og:image.
Hur många meta tags ska jag använda?
Fokusera på de viktigaste: og:title, og:image, og:url och Twitter card tags. Kvalitet framför kvantitet ger bäst effekt.
Vad är en Facebook meta tag?
Det är en del av Open Graph-protokollet, som t.ex. og:title, som styr hur din webbsida ser ut när den delas på Facebook.
Vad är og:title-innehåll?
Det definierar den rubrik som visas när din sida delas på sociala plattformar.
Vad är og:image-innehåll?
Det anger URL:en till den bild som ska visas som preview vid delning.
Vad är og:type-innehåll?
Det definierar typen av innehåll (t.ex. artikel eller webbplats), vilket hjälper plattformar att kategorisera det rätt.
Vad är metadata? 3 exempel?
Metadata inkluderar beskrivningstaggar, sessionsvariabler för användare och og:image-taggar som hjälper plattformar att välja rätt bild för delning.
