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.
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).
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?
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.
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.
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:
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:
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.
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.
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.
Den endelige nettadressen vil se slik ut: http://www.website.com/article-title?utm_source=facebook&utm_medium=social&utm_campaign=article-name
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:
La oss diskutere hvert Twitter-kort individuelt:
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.
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.
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:
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)
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.
For å hjelpe deg med implementeringen av sosiale utdrag, har jeg samlet flere verktøy som kan være nyttige: