Så här använder du Open Graph-taggar

Så här använder du Open Graph-taggar

Använder du titeltaggar och metabeskrivningstaggar? Självklart gör du det eftersom du redan vet att metataggar kan bidra till att öka din placering i sökmotorer.

Men visste du att metataggar faktiskt påverkar din trafik i sociala medier? Visst, det finns Googles authorship-taggar, men hur är det med Facebook och Twitter? Faktum är att båda har sina egna metataggar för sociala medier som kan hjälpa dig att öka mängden social trafik du får.

Har du sett de där inläggen på sociala medier som har häftiga bilder och videor? Du kanske inte vet att du inte behöver någon programvara eller några premiumkonton för att göra samma sak med dina sociala inlägg.

De kallas Facebook Open Graph och Twitter Cards. Så här kan du utnyttja dem båda:

Facebook Open Graph

När du delar en bild på Facebook, hur ser den då ut?

Nja, det ser inte alltid ut så. Facebook försöker läsa koden på din sida, men det går inte alltid att få fram dina bilder. Om du inte använder Open Graph-taggarna när du delar en URL från din webbplats på Facebook kan det se ut så här:

Det var så här det brukade se ut med Quick Sprout innan jag implementerade Open Graph-taggar på min webbplats. Efter att ha implementerat Open Graph-taggar kunde jag öka min Facebook-trafik med 174 %, helt enkelt för att det nu fanns en bild bredvid mina Quick Sprout-statusuppdateringar.

Nu när du är övertygad om att du bör använda Open Graph, så här gör du för att konfigurera det på din webbplats.

og:title

Det här är platsen där du lägger in titeln på ditt innehåll. Tänk dig att detta liknar din vanliga html-titeltagg som en sökmotor skulle använda. När du skapar og:title ska du hålla antalet tecken på mindre än 95 tecken.

Exempel: <meta property=”og:title” content=”11 kreativa sätt att bygga länkar”/>

og:type

Det är här du beskriver vilken typ av innehåll du delar. Är det en video, en bild, ett blogginlägg osv. Här är hela listan som du kan välja mellan när du definierar din innehållstyp:

Aktiviteter

• aktivitet
• sport

Företag

• bar

Företag

• bar
• Företag
• café
• hotell
• restaurang

Grupper

• förening
• Sports_league
• Sports_team

Organisationer

• band
• regering
• non_profit
• skola
• universitet

Personer

• skådespelare
• idrottare
• författare
• direktör
• musiker
• politiker
• offentlig personlighet

Platser

• Stad
• Land
• Landmärke
• Stat_provins

Produkter och underhållning

• album
• bok
• dryck
• mat
• spel
• produkt
• sång
• film
• tv_show

Websidor

• blogg
• webbplats
• artikel

Exempel: <meta property=”og:type” content=”article”/>

og:description

Detta liknar också din html-metabeskrivningstagg eftersom den används för att beskriva ditt innehåll. Du bör inte bry dig om att den är rik på nyckelord, utan istället bör du komma fram till en övertygande beskrivning som kommer att resultera i fler klick. Du har upp till 297 tecken för den här taggen.

Exempel: <meta property=”og:description” content=”Är du trött på att bygga länkar på det gamla vanliga sättet? Du vet, metoderna som kräver att du skickar ut e-post till tusentals webmasters och tigger om länkar. ”/>

og:image

Kommer du ihåg att jag nämnde att jag kunde öka min Facebook-trafik med 174 %? Det berodde på att jag använde Open Graph för att se till att Facebook visade en bild varje gång någon delade en URL från Quick Sprout.

Om du använder en og:image-tagg ser du till att en bild visas tillsammans med det innehåll du delar. På så sätt sticker den ut mot alla andra textbaserade statusuppdateringar som folk ser i sina tidslinjer.

Innan jag går in på hur du kan använda den här taggen ska jag gå igenom Facebooks krav. En bild måste vara minst 50px x 50px, men helst större än 200px x 200px. Dessutom får bilden inte vara större än 5 MB.

Exempel: <meta property=”og:image” content=”https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”/>

og:url

I den här taggen ska du placera URL:en för den sida du delar. Den här taggen kan verka irrelevant, men den är viktig eftersom du ibland har mer än en URL för samma innehåll. Genom att använda den här taggen ser du till att alla delningar går till en URL istället för flera URL:er, vilket bör hjälpa din Facebook Edgerank.

Exempel: <meta property=”og:url” content=”https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/”/>

og:site_name

Den här taggen talar om för Facebook vad din webbplats heter. Du behöver egentligen inte den här taggen, men det skadar inte att inkludera den.

Exempel: <meta property=”og:site_name” content=”Quick Sprout”/>

fb:admins

Om du har en fansida på Facebook och vill få mer data i Facebook Insights måste du använda den här taggen. Den talar om för Facebook att du är webbplatsens ägare och kopplar din Facebook-fansida till din webbplats.

Exempel: <meta property=”fb:admins” content=”500013011″/>

När du nu har dina metataggar för Facebook Open Graph på plats kan vi gå vidare till Twitter Cards.

Twitter Cards

Har du någonsin sett en tweet som denna?

Dessa detaljerade tweets visas bara när du använder Twitter Cards. Skulle du inte vilja ha det på din webbplats? Det kommer att hjälpa den att sticka ut från mängden.

Här är hur du utnyttjar Twitter Cards:

Om du använder SEO for WordPress-pluginet från Yoast följer du bara dessa steg. För alla andra följer du stegen nedan.

twitter:card

Denna metatag beskriver vilken typ av innehåll du delar. Du har tre alternativ med Twitter: foto (för bilder), spelare (för videor) och sammanfattning (för allt annat). Om du inte definierar ditt kort kommer Twitter att välja sammanfattning som standard.

Exempel: <meta name=”twitter:card” content=”summary”>

twitter:url

Detta är sidan du delar på Twitter. På samma sätt som Facebook frågar efter en URL gör Twitter detta också eftersom du kan ha samma innehåll på din webbplats flera gånger. Detta garanterar att en URL får alla tweets. Annars kommer dina tweets att delas upp på flera webbadresser.

Exempel: <meta name=”twitter:url” content=”https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/”>

twitter:title

Som din Facebook Open Graph-titel bör denna inte fyllas med nyckelord. Gör den övertygande så att folk vill klicka på den. Precis som med Facebook bör du begränsa antalet tecken till 70.

Exempel: <meta name=”twitter:title” content=”11 Creative Ways to Build Links”>

twitter:description

Detta liknar en metabeskrivningstagg du skulle använda för Google. Men fyll den inte med nyckelord. Ditt mål bör vara att skapa en övertygande mening som uppmanar människor att klicka sig vidare till din webbplats. Din beskrivning är begränsad till 200 tecken.

Exempel: <meta name=”twitter:description” content=” Är du trött på att bygga länkar på det gamla vanliga sättet? Du vet, de metoder som kräver att du skickar ut e-post till tusentals webmasters och tigger om länkar. ”>

twitter:image

För att få din tweet att sticka ut behöver du en bild. Dina bilder måste vara mindre än 1 MB i filstorlek och de får inte vara mindre än 60px x 60px. Bilder som är större än 120px x 120px kommer att få en ny storlek.

Exempel: <meta name=”twitter:image” content=” https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”>

När du har använt Twitter Card-metataggarna på din webbplats måste du ansöka om medlemskap i Twitters Card-program. När du blir godkänd kommer webbadresser från din webbplats att visas i kortformat.

Slutsats

Metataggar är inte bara till för sökmotorer. Webbplatser för sociala medier utnyttjar dem också. Precis som du skulle optimera dina metataggar för Googles rankning och klickfrekvens måste du göra samma sak för Facebook och Twitter.