Ta kontroll over dine sosiale utdrag

Sosiale signaler blir stadig viktigere i SEO. Facebook-aksjer, Tweets og Google + 1 har nådd et slikt volum at de har potensial til å være et godt mål for innholdskvalitet. Derfor har søkemotorer begynt å vurdere disse signalene når de rangerer nettsider.

Sosiale signaler er fortsatt ikke så viktige som andre rangeringsfaktorer som et nettsteds lenkeprofil og innhold, men de vil utvilsomt være en viktig rangeringsfaktor i fremtiden.

For å maksimere synligheten til innholdet vårt, må vi kontrollere hvordan det ser ut som en sosial utdrag. En god sosial utdrag har potensial til å tiltrekke seg mange ekstra besøkende til våre nettsteder. La oss se hvordan vi kan lage en av disse.


Sosiale utdrag?

En sosial utdrag er en forhåndsvisning av en side Det brukes når du deler den siden på sosiale medier. I stedet for en enkel kobling, får brukerne ytterligere informasjon om innholdet bak lenken.

Hvis vi for eksempel vil dele artikkelen om paginering fra Webdesigntuts + på Facebook, ser vi følgende sosiale kodebiten:

En sosial utdrag på Google+ ser omtrent det samme ut:

Så i stedet for en grunnleggende link ser brukerne mye mer informasjon om siden. Vi kan se et forhåndsvisningsbilde, tittelen og til og med en kort beskrivelse. Dette gjør det lettere for oss å bestemme om koblingen er verdt å klikke på.

Disse sosiale utdragene er genereres automatisk. Personen som deler nettsiden har ingen kontroll over bildet, tittelen og beskrivelsen som blir brukt. Disse kan kun endres av webmaster selv (vi lærer hvordan du gjør dette senere i artikkelen).


Hvorfor sosiale utdrag er viktige

Sosialt utdrag av en side er noe mange nettredaktører glemmer, potensielt forårsaker skjermproblemer på sosiale medier. Hvis sosialt kodeoppslag ikke er tilstede, vises en sosial kode ofte feil.

Målet med sosiale utdrag er å overtale folk til å klikke på dem. Jo flere folk klikker på det, desto flere besøkende får den underliggende siden. Det er derfor du bør behandle dem som en gratis reklame. En tilsvarende annonse bør ha et iøynefallende bilde, en klikkverdig tittel og en interessant beskrivelse. En sosial utdrag bør ha de samme elementene.

Hvis et av disse elementene ikke virker riktig, for eksempel feil miniatyrbilde vises, kan det til slutt koste deg besøkende og klienter.

Dette er et eksempel på en side som har ikke implementerte sosiale utdrag. Jeg delte en side av 'De Bakboetiek', en butikk som spesialiserer seg på bakervarer. De har også en nettbutikk hvor de selger produkter som denne kake popmugg, men som du kan se, er dette sosiale utdraget ikke spesielt nyttig ...

I stedet for å vise et miniatyrbilde av kakeformen og en kort beskrivelse, kan vi bare se logoen og feil tittel. Det er ikke engang en beskrivelse! Hvordan skal dette sosiale utdraget bringe besøkende fra Facebook til deres nettside?


Den åpne grafprotokollen

Sosiale utdrag er basert på Open Graph Protocol. Det brukes til å gjøre en nettside til en rik objekt i den sosiale grafen. Takket være dette kan sosiale medier som Facebook, Google+ og Twitter identifisere viktige elementer på en side.

OG-protokollen er basert på RDFa (husk RDFa fra vår strukturert dataartikkel?). Vi kan implementere det ved å bruke tillegg koder i av en side.

Mer informasjon om Open Graph Protocol finnes på ogp.me.


Opprette en sosial utdrag

Nå er det på tide å ta kontroll over vår egen sosiale utdrag. Det finnes flere elementer som kan tweaked: miniatyrbildet, tittelen, beskrivelsen, nettadressen og innholdstypen.

Merk: Følgende merking brukes av Facebook og Google+. Twitter bruker forskjellige metakoder, som vi diskuterer senere.

thumbnail

Dette er kanskje det viktigste elementet i en sosial utdrag. Det er den delen som de fleste brukere vil se først, så sørg for at du bruker et klart bilde for dette.

Jeg foreslår at du bruker et firkantet bilde på minst 200 x 200 piksler. Hvis bildet er for lite, kan det ikke vises, eller et annet bilde av siden kan brukes i stedet (i noen tilfeller bildet av en annonse ...).

Vi kan spesifisere plasseringen av miniatyrbildet med denne markeringen:

Tittel

Dette er tittelen på ditt sosiale utdrag. Det er det nest viktigste elementet, ved siden av miniatyrbildet. Tittelen din skal overtale brukeren til å klikke på den. Det fungerer også som en ankertekst for lenken til siden.

Koden for tittelen ser slik ut:

Beskrivelse

Skriv en kort oppsummering av siden som kan brukes som en beskrivelse. Jeg bruker ofte meta-beskrivelsesteksten til en sosial utdrag, men du kan velge hva du vil. Bare vær sikker på at det kile leserens nysgjerrighet og gjør ham eller henne til å klikke på linken.

Innholdstype

Hvis du vil spesifisere innholdet på siden, kan du bruke og: type stikkord. Hvis denne taggen utelates, blir siden kategorisert som "nettside". Andre innholdstyper som kan brukes, er musikk, video, artikkel, bok og profil. Mer informasjon finner du på den innebygde objektsiden på Facebook.

URL

Dette er nettadressen brukeren vil bli sendt til når han klikker på tittelen. Legg den kanoniske nettadressen til denne taggen:

Hvis du vil spor trafikk kommer fra sosiale medier, Du kan legge til sporingsparametere som tillater informasjon å vises i Google Analytics. Bruk Google URL Builder for dette.

Du trenger bare å legge til tre parametere: Kilde, Middels og Kampanje.

  • Kilde: facebook
  • Middels: sosialt
  • Kampanje: et unikt navn / id

Den endelige nettadressen vil se slik ut: http://www.website.com/article-title?utm_source=facebook&utm_medium=social&utm_campaign=article-name


Twitter-kort

Twitter bruker et annet oppslag for å lage Twitter-kort. Twitter-kort lar deg knytte media til tweets som knytter til innholdet ditt.

Tre typer medier kan brukes:

  • sammendrag: ligner på et sosialt utdrag på Facebook og Google+
  • bilde: et fotokort
  • spiller: et mediaspillerkort

La oss diskutere hvert Twitter-kort individuelt:

Sammendrag

Sammendragskortet er et Twitter-kort som ligner på sosiale utdragene vi ser på Facebook og Google+. Den kan brukes til ulike innholdstyper (blogginnlegg, artikler, produkter ...). Et sammendragskort kan se slik ut:

     

Først av alt må vi identifisere typen Twitter-kort via twitter: kort tag (i dette tilfellet et sammendrag). Nettadressen skal være den kanoniske nettadressen til siden. De twitter: tittel tagg bør ikke være mer enn 70 tegn. Beskrivelsen derimot er begrenset til 200 tegn. Bildet brukes som et miniatyrbilde og bør være firkantet. Bilder mindre enn 60 x 60 px vil ikke bli vist. Endelig, den skaperen tag kan brukes til å gi kreditt til forfatteren.

Bilde

Det finnes flere elementer av et fotokort som også brukes i sammendragskortet. Den store forskjellen mellom de to er stylingen av tweetet. Fotokortet legger bildet foran og midt i tweetet.

Twitter bruker twitter: image URL for bildet. Hvis dette bildet er mindre enn 280 x 150 px, blir det ikke vist. Du kan angi bredde og høyde på bildet for å hjelpe Twitter til å bevare bildeforholdet mellom bildet når du endrer størrelsen.

Et fotokort kan se slik ut:

      

De twitter: kort og twitter: image tag er nødvendig, resten er valgfritt.

Spiller

Spillerkortet brukes til lyd og video. Mediefilen er innebygd i tweetet via en iframe. Ulempen på et spillerkort er det må godkjennes av Twitter!

Hvis du vil bruke et spillerkort til godkjenning, legg til følgende kode på siden din:

       

De twitter: kort tag brukes til å identifisere spillerkortet. Nettadresse, tittel, bilde og beskrivelse ligner på andre spillerkort. De twitter:-spiller tag inneholder en HTTPS-lenke til iframe-spilleren. Du kan spesifisere bredden og høyden til iframe via twitter: spiller: bredde og twitter: spiller: høyde tags.

Et par andre krav til spillerkort:

  • Bruk en HTTPS-URL (videoen må også vises via HTTPS)
  • Stopp eller pause kontroller er obligatoriske
  • Ingen automatisk avspilling er tillatt
  • Innholdet må ikke kreve at du logger på

Twitter-kort og den åpne grafen

Twitter ser først etter twitter: kort koder på nettstedet ditt, men hvis det ikke finner noen, faller det tilbake til Open Graph-oppslaget. Dette betyr at du ikke trenger å opprette dupliserte koder. Du kan bare supplere dine eksisterende Open Graph-koder med Twitter-kort-tagger.

Twitter ser følgende koder som liknende (twitter-markering til venstre, OG til høyre)

  • twitter: ul = og: url
  • twitter: beskrivelse = og: beskrivelse
  • twitter: title = og: title
  • twitter: image = og: image
  • twitter: image: width = og: image: width
  • twitter: bilde: height = og.image.height

Konklusjon

Søkemotorer bruker mer og mer tid på sosiale signaler fordi de er en god indikator for kvalitetsinnhold. For å forbedre sjansen for at noen klikker på en sosial utdrag, må vi ta kontroll over innholdet. Vi kan gjøre dette via Open Graph-protokollen for Facebook og Google+. For Twitter må vi supplere disse Open Graph-koder med Twitter-spesifikk kode.


Nyttige ressurser

For å hjelpe deg med implementeringen av sosiale utdrag, har jeg samlet flere verktøy som kan være nyttige:

  • Google + -utklippsskaper: Bruk dette verktøyet til å generere en HTML-kode for en sosial utdrag. Bare lim inn koden i hovedenheten på siden din, og du er ferdig.
  • Facebook Debugger: Kontroller den åpne grafinformasjonen som ble skrapt fra siden din.
  • Riktuttestverktøy: kan brukes til å sjekke informasjonen i sosialt utdrag.