Share
Sociala signaler blir allt viktigare i SEO-världen. Facebook-aktier, Tweets och Google +1 har nått en sådan volym att de har potential att vara ett utmärkt mått på innehållskvalitet. Det är därför sökmotorer har börjat överväga dessa signaler när de rankar webbsidor.
Sociala signaler är fortfarande inte lika viktiga som andra rankningsfaktorer som en webbplatss länkprofil och innehåll, men de kommer utan tvivel att vara en viktig rankingfaktor i framtiden.
För att maximera synligheten av vårt innehåll måste vi kontrollera hur det ser ut som ett socialt utdrag. Ett bra socialt utdrag kan leda till många extra besökare på våra webbplatser. Låt oss se hur vi kan skapa en av dessa.
En social delbit är en förhandsvisning av en sida Det används när du delar den sidan på sociala medier. Istället för en enkel länk får användarna ytterligare information om innehållet bakom länken.
Om vi till exempel vill dela artikeln om pagination från Webdesigntuts + på Facebook ser vi följande sociala kod:
Ett socialt utdrag på Google+ ser ungefär ut på samma sätt:
Så istället för en grundläggande länk ser användarna mycket mer information om sidan. Vi kan se en förhandsgranskningsbild, titeln och till och med en kort beskrivning. Det gör det lättare för oss att bestämma om länken är värd att klicka.
Dessa sociala utdrag är genereras automatiskt. Den person som delar webbsidan har ingen kontroll över bilden, titeln och beskrivningen som används. Dessa kan bara ändras av webmaster själv (vi lär oss hur du gör det senare i artikeln).
Den sociala snippet på en sida är något som många webmasters glömmer, vilket potentiellt orsakar problem med displayen på sociala medier. Om markeringen av sociala fragment inte finns, visas ett socialt utdrag ofta felaktigt.
Målet med sociala utdrag är att övertala folk att klicka på dem. Ju fler människor klickar på det, desto fler besökare får den underliggande sidan. Det är därför du borde behandla dem som en gratis reklam. En likvärdig annonsering bör ha ett iögonfallande fotografi, en klickverksam titel och en intressant beskrivning. En social delbit bör ha samma element.
Om ett av dessa element inte fungerar korrekt, till exempel visas fel miniatyrbild, kan det slutligen kosta dig besökare och kunder.
Detta är ett exempel på en sida som har inte implementerade sociala utdrag. Jag delade en sida av 'De Bakboetiek', en butik som specialiserat sig på bakutrustning. De har också en webbshop där de säljer produkter som denna tårta popmögel, men som du kan se är det här sociala fragmentet inte särskilt användbart ...
Istället för att visa en miniatyr av kakformen och en kort beskrivning kan vi bara se logotypen och fel titeln. Det finns inte ens en beskrivning! Hur ska det här sociala fragmentet få besökare från Facebook till deras hemsida?
Sociala utdrag är baserade på Open Graph Protocol. Det används för att göra en webbsida till ett rikt objekt i den sociala grafen. Tack vare detta kan sociala medier som Facebook, Google+ och Twitter identifiera viktiga delar av en sida.
OG-protokollet är baserat på RDFa (kom ihåg RDFa från vår strukturerade dataartikel?). Vi kan implementera det genom att använda ytterligare taggar i av en sida.
Mer information om Open Graph Protocol finns på ogp.me.
Nu är det dags att ta kontroll över vårt eget sociala utdrag. Det finns flera element som kan tweaked: miniatyren, titeln, beskrivningen, webbadressen och innehållstypen.
Notera: Följande markering används av Facebook och Google+. Twitter använder olika metataggar, som vi diskuterar senare.
Det här är kanske det viktigaste inslaget i ett socialt utdrag. Det är den del som de flesta användare ser först, så se till att du använder en tydlig bild för detta.
Jag föreslår att du använder en fyrkantig bild på minst 200 x 200 pixlar. Om bilden är för liten visas den kanske inte eller en annan bild på sidan kan användas istället (i vissa fall bilden av en annons ...).
Vi kan ange platsen för miniatyren med denna markering:
Detta är titeln på ditt sociala utdrag. Det är det näst viktigaste elementet, bredvid miniatyren. Din titel ska övertyga användaren att klicka på den. Det fungerar också som en ankare text för länken till sidan.
Koden för titeln ser ut så här:
Skriv en kort sammanfattning av sidan som kan användas som en beskrivning. Jag använder ofta min meta-beskrivningstext för ett socialt utdrag, men du kan välja vad du vill. Se bara till att det kittlar läsarens nyfikenhet och gör att han eller hon klickar på länken.
Om du vill ange innehållet på sidan kan du använda og: typ märka. Om denna tagg utelämnas kommer sidan att kategoriseras som "webbplats". Andra innehållstyper som kan användas är musik, video, artikel, bok och profil. Mer information finns på den inbyggda objektsidan på Facebook.
Detta är den URL som användaren kommer att skickas till när han klickar på titeln. Lägg till den kanoniska URL-adressen till den här taggen:
Om du vill spårtrafik som kommer från sociala medier, Du kan lägga till spårningsparametrar som tillåter information att visas i Google Analytics. Använd Google URL Builder för detta.
Du behöver bara lägga till tre parametrar: Källa, Medium och Kampanj.
Den slutliga webbadressen kommer att se ut så här: http://www.website.com/article-title?utm_source=facebook&utm_medium=social&utm_campaign=article-name
Twitter använder en annan markering för att skapa Twitter-kort. Twitter-kort tillåter dig att bifoga media till tweets som länkar till ditt innehåll.
Tre typer av medier kan användas:
Låt oss diskutera varje Twitter-kort individuellt:
Sammanfattningskortet är ett Twitter-kort som liknar de sociala fragmenten vi ser på Facebook och Google+. Den kan användas för olika innehållstyper (blogginlägg, artiklar, produkter ...). Ett sammandragskort kan se ut så här:
Först och främst måste vi identifiera typen av Twitter-kort via Twitter: card tagg (i detta fall en sammanfattning). Webbadressen ska vara den kanoniska webbadressen till sidan. De twitter: titel tagg ska inte vara längre än 70 tecken. Beskrivningen å andra sidan är begränsad till 200 tecken. Bilden används som en miniatyrbild och ska vara kvadratisk. Bilder som är mindre än 60 x 60px kommer inte att visas. Slutligen, den skapare tagg kan användas för att ge kredit till författaren.
Det finns flera delar av ett fotokort som också används i Sammanfattningskortet. Den stora skillnaden mellan de två är stylingen av tweeten. Fotokortet sätter bilden framför och mitt i tweeten.
Twitter använder Twitter: image URL för fotot. Om bilden är mindre än 280 x 150 px kommer den inte att visas. Du kan ange en bredd och höjd på bilden för att hjälpa Twitter att bevara bildens bildförhållande när du ändrar storlek.
Ett fotokort kan se ut så här:
De Twitter: card och Twitter: image tagg krävs, resten är valfritt.
Spelarkortet används för ljud och video. Mediefilen är inbäddad i tweeten via en iframe. Nedsidan av ett spelarkort är det det måste godkännas av Twitter!
Om du vill använda ett spelarkort för godkännande, lägg till följande kod på din sida:
De Twitter: card tagg används för att identifiera spelarkortet. URL, Titel, Bild och Beskrivning liknar andra spelarkort. De Twitter: spelare tagg innehåller en HTTPS-länk till iframe-spelaren. Du kan ange bredden och höjden på iframe via twitter: spelare: bredd och Twitter: spelare: höjd taggar.
Ett par andra krav på spelarkort:
Twitter letar efter Twitter: card taggar på din hemsida, men om den inte hittar någon faller den tillbaka till markeringen av Open Graph. Det betyder att du inte behöver skapa dubbla taggar. Du kan helt enkelt komplettera dina befintliga Open Graph-taggar med twitter-kort-taggar.
Twitter ser följande taggar som liknar (twitter markup till vänster, OG till höger)
Sökmotorer spenderar mer och mer tid på sociala signaler eftersom de är en bra indikator för kvalitetsinnehåll. För att förbättra chansen att någon klickar på ett socialt utdrag, måste vi ta kontroll över innehållet. Vi kan göra detta via Open Graph-protokollet för Facebook och Google+. För Twitter måste vi komplettera dessa Open Graph-taggar med Twitter-specifik kod.
För att hjälpa dig med genomförandet av sociala utdrag har jag samlat flera verktyg som kan vara användbara:
Accentsconagua