WordPress OG-koder: Slik øker du antall klikk til innlegget ditt på sosialt

Har du hørt om og metakoder? Implementerer du og metakoder på WordPress-nettstedet ditt? Denne artikkelen viser deg hva metakoder er og hvordan du implementerer dem på WordPress-nettstedet ditt.

Når et innlegg fra bloggen din eller en URL fra nettstedet ditt deles på Facebook, gjør nettstedet for sosiale medier en god jobb med å hente inn riktige data fra det. Ting som bloggen eller nettstedsadressen din, et utdrag av innleggets tekst, et utvalgt bilde osv. Vises, og får brukerne til å klikke på det.

Men hvis du er en ivrig Facebook-bruker, har du kanskje lagt merke til at dataene den henter fra nettsteder (inkludert dine) ikke alltid er perfekte. Noen ganger trekker det et bilde som ikke nøyaktig representerer innholdet i det delte innlegget, eller det kan hente ut tekst nær slutten av innlegget og bruke det som utdraget, noe som nesten alltid ikke er bra, og enda verre, der er tider der ingen andre data enn posttittelen (eller innholdet i tag) og URL deles i det hele tatt!

Dette skjer vanligvis hvis du ikke implementerer openn graph metakoder (aka og metakoder) på WordPress-nettstedet ditt. Uten disse viktige kodene vil ikke Facebook (og andre sosiale medier) kunne få den riktige informasjonen som kan vises for et delt innlegg eller en lenke.

Slik kan det se ut når du deler en URL på Facebook fra et nettsted som ikke oppdateres med åpne grafkoder:

facebook del uten og tags

På den annen side ser det slik ut når du deler en URL som implementerer metakoder med åpen graf:

facebook del med og1

Facebooks Open Graph (OG) Metatags

Facebooks åpne grafmetakoder definerer hvordan et tredjepartsnettsted (som bloggen din) vil bli presentert på Facebook.

Selv om den er utviklet av Facebook, brukes metakoder med åpen graf også av andre sosiale nettverk (som Twitter og LinkedIn) for å tilpasse delingen som skjer der.

For å inkludere metakoder med åpen graf på WordPress-nettstedet ditt, må du legge til flere koder i på nettstedet ditt. Ifølge åpen grafprotokoll, er følgende egenskaper:

  • og: tittel
  • og: type
  • og: image
  • og: url

 

og tagger facebook1

Ved å bruke åpne grafer på nettsteder, Neil Patel funnet en økning i klikkfrekvens med 39%.

Hvordan se etter OG-metakoder på WordPress-nettstedet ditt?

Se på kildekoden til WordPress-nettstedet ditt hvis du ikke er sikker på om og -koder allerede er plassert på nettstedet ditt. I Windows eller Linux, trykk Ctrl + U og i Mac, trykk Kommando + Alt + U for å se kildekoden.

Hvis det allerede legges til, finner du og-kodene dine i seksjonen inne i “

og

I tillegg kan du bruke Facebook deling debugger verktøy for å se hva Facebook leser om nettstedet ditt.

Legge til OG-metakoder til WordPress uten plugin

For å legge til og metakoder i innleggene og sidene dine på WordPress uten å bruke et plugin, bare legg til følgende kodebit i temaet ditt functions.php filen.

// Legge til den åpne grafen i funksjonen Språkattributter add_opengraph_doctype ($ output) {return $ output. 'xmlns: og = "https://opengraphprotocol.org/schema/" xmlns: fb = "https://www.facebook.com/2008/fbml"'; } add_filter ('språk_attributter', 'add_opengraph_doctype'); // La oss legge til Open Graph Meta Info-funksjonen add_og_meta_tag () {global $ post; hvis (! is_singular ()) // hvis det ikke er et innlegg eller en side, ikke legg til og tagger returnerer; ekko " \ n "; ekko ' '. "\ n"; ekko ' '. "\ n"; ekko ' '. "\ n"; ekko ' '. "\ n"; ekko ' '. "\ n"; ekko '  '. "\ n"; hvis (! has_post_thumbnail ($ post-> ID)) {// hvis innlegget ikke har utvalgt bilde, bruk et standardbilde $ default_image = "https://example.com/image.jpg"; // erstatt dette med et standardbilde på serveren din eller et bilde i mediebibliotekets ekko ' '; } annet {$ thumbnail_src = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'large'); ekko ' '; } ekko "\ n \ n ";} add_action ('wp_head', 'add_og_meta_tag', 0);

Forsikre deg om at du endrer "DIN BRUKER-ID" i del med din egen Facebook-bruker-ID.

Du finner Facebook-bruker-ID-en din ved å gå til Facebook-profilsiden i en nettleser på skrivebordet.

  1. Klikk på profilbildet ditt og velg "Vis profilbilde"
  2. Dette åpner Facebooks bildeviser for profilbildet ditt.
  3. URL-en skal nå se ut slik: “https://www.facebook.com/photo?fbid=xxxxxxxxxxxxxxx&set=a.xxxxxxxxxxxxxxx"
  4. Se etter delen bud=xxxxxxxxxxxxxx. Tallene etter bud parameter "xxxxxxxxxxxxxxxx”Er bruker-ID-en din.
  5. Kopier det og bruk det til å erstatte “DIN BRUKER-ID” i kodebiten ovenfor.

facebook bruker-ID

Du er ferdig! Nettstedet ditt er nå oppdatert med åpne grafiketter.

Legge til OG-metakoder til WordPress med et plugin

De to populære SEO-pluginene, Yoast SEO og Alt i ett SEO Pack leveres med funksjoner for metakoder med åpen grafikk.

Legge til OG-koder med Yoast SEO-plugin

Først installerer du Yoast SEO. Etter installasjonen, bør du se det nye SEO-elementet i venstre sidefeltmeny for admin.

For å legge til og -koder med Yoast, gå til SEO > selskap via admin-sidefeltmenyen.

Når du er på siden, går du til Facebook-fanen.

yoast seo og tag

Som standard legger Yoast SEO til åpne grafkoder til innleggene dine. Du trenger ikke å konfigurere noe. 

Du må imidlertid konfigurere og -koder for forsiden av nettstedet ditt.

Under Forsideinnstillinger seksjon, kan du definere en URL til bildet for forsiden din. Dette vil bli brukt til og: image eiendommen til hjemmesiden din. 

Du kan også legge til tittelen og beskrivelsen, som begge brukes til og: tittel og og: beskrivelse eiendommer henholdsvis.

Til slutt er det Standard instillinger seksjon. Dette lar deg definere en standard URL til bildet som skal brukes til et innlegg og: image eiendom i tilfelle det ikke er definert noe omtalt bilde.

Ikke glem å klikke når du er ferdig lagre endringer for at endringene dine skal brukes.

Konfigurere OG-tagger per innlegg med Yoast SEO

Hvis du vil angi og -koder manuelt per innlegg, kan du gjøre det ved å gå til innleggsredigereren og bla ned til delen Yoast Metabox og gå til selskap fanen.

yoast per innlegg og tagger

Du kan deretter definere en tilpasset parameter for forskjellige og-koder her.

Når du er ferdig med å legge til og-kodene dine i et innlegg, må du huske å lagre det, oppdatere det eller publisere det, avhengig av hva som er aktuelt, for å foreta endringene du har gjort.

Legge til OG-koder med alt i ett SEO-pakke

Først installerer du All in One SEO Pack. Etter installasjon, gå til Alt i ett SEO > Sosiale nettverk via nettstedets admin-sidefeltmeny. Når du er på siden, går du til Facebook fanen.

alt i ett seo og tags

Med All in One SEO Pack legges og -koder til innlegget ditt som standard utenom boksen, i likhet med Yoast.

Det er flere konfigurerbare alternativer her sammenlignet med Yoast, men noen er bare tilgjengelige når du bruker pro -versjonen. Nevertheless, mengden konfigurerbare alternativer i gratisversjonen er mer enn nok.

  • Standard innleggsbilde - definerer hvilket bilde som skal brukes til et innlegg og: image eiendom.
  • Standard innlegg Facebook-bilde - hvis du velger alternativet for standardbilde (sett under) i standardalternativet for innleggsbilde, er det her du laster opp det egendefinerte bildet.
  • Standard innleggstype Objekttyper - lar deg definere en standardverdi for et innlegg, en side eller et vedlegg og: type eiendom.
  • Vis Facebook-forfatter - du kan koble Facebook-profilen din til nettstedet ditt. Hvis du aktiverer dette alternativet, kan du koble et innlegg til Facebook-profilen din, slik at leserne dine kan følge FB-siden / profilen din direkte. Du kan lære mer om hvordan du konfigurerer dette fra AIOSEOs hjelpe side.
  • Side navn - lar deg konfigurere hvilke verdier som skal brukes til et innlegg og: nettstednavn eiendom. Du kan bruke koder for å generere verdien for denne egenskapen dynamisk, du kan også legge til en standardtekst, eller du kan også blande de to hvis du ønsker det.

Etter elementene ovenfor er det en del for å konfigurere nettstedets hjemmesider og koder. Under Startsideinnstillinger kan du definere følgende:

  • Bilde - for hjemmesiden din og: image eiendom.
  • Tittel - for hjemmesiden din og: tittel eiendom. Du kan bruke variabler for å generere dette dynamisk.
  • Beskrivelse - for hjemmesiden din og: beskrivelse eiendom.
  • Objekttype - for hjemmesiden din og: type eiendom.

Endelig er det en Avanserte innstillinger seksjon, som lar deg definere flere åpne grafiske metakoder som f.eks fb: app_id, fb: adminsOsv

Når du er fornøyd med konfigurasjonen din, ikke glem å gjøre det lagre endringer.

Konfigurere OG-tagger per innlegg med Alt i en SEO-pakke

Du kan konfigurere per innlegg og koder med AIOSEO som Yoast. Gå til innleggsredigereren og bla ned til AIOSEO-metaboksen, og gå deretter til selskap fanen.

aioseo per innlegg og tagger

Alternativene her ligner på det som ble diskutert ovenfor. Du kan fortsette og definere egendefinerte parametere for og-kodene dine for dette innlegget, og overstyre alternativene du definerte i AIOSEOs innstillinger.

Når du er ferdig med å legge til og-kodene dine i et innlegg, må du huske å lagre det, oppdatere det eller publisere det, avhengig av hva som er aktuelt, for å foreta endringene du har gjort.

Det dekker hvordan du legger til og -koder på WordPress-nettstedet ditt. Forhåpentligvis hjalp denne artikkelen deg med å velge en bedre tilnærming til det, og at du har lært litt om hvor viktig det er å implementere og -koder på nettstedet ditt.

Hvis du ønsker å se flere WordPress-tips og triks, kan du sjekke ut hele 101 liste over WordPress-tips og triks.

Last ned listen over 101 WordPress-triks hver blogger burde vite

101 WordPress-triks

Klikk her for å laste ned nå

// Legge til den åpne grafen i språkattributtene

funksjon add_opengraph_doctype ($ output) {

returnere $ output. 'xmlns: og = "https://opengraphprotocol.org/schema/" xmlns: fb = "https://www.facebook.com/2008/fbml"';

}


add_filter ('språk_attributter', 'add_opengraph_doctype');


// La oss legge til Open Graph Meta Info

funksjon add_og_meta_tag () {


global $ post;


hvis (! is_singular ()) // hvis det ikke er et innlegg eller en side, må du ikke legge til og -koder

tilbake;

ekko " \ n ";

ekko ' '. "\ n";

ekko ' '. "\ n";

ekko ' '. "\ n";

ekko ' '. "\ n";

ekko ' '. "\ n";

ekko ' '. "\ n";


hvis (! has_post_thumbnail ($ post-> ID)) {// hvis innlegget ikke har utvalgt bilde, bruk et standardbilde

$ default_image = "https://eksempel.com/bilde.jpg"; // erstatt dette med et standardbilde på serveren din eller et bilde i mediebiblioteket ditt

ekko ' ';

}


annet {

$ thumbnail_src = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'large');

ekko ' ';

}


ekko "\ n \ n ";

}


add_action ('wp_head', 'add_og_meta_tag', 5);

om forfatteren
David Attard
Forfatter: David Attardnettside: https://www.linkedin.com/in/dattard/
David har jobbet i eller rundt den elektroniske / digitale industrien de siste 18 årene. Han har lang erfaring innen programvare- og webdesignindustrien ved å bruke WordPress, Joomla og nisjer rundt dem. Som digital konsulent er hans fokus på å hjelpe bedrifter med å få et konkurransefortrinn ved å bruke en kombinasjon av deres nettside og digitale plattformer som er tilgjengelige i dag.

En ting til... Visste du at folk som deler nyttige ting som dette innlegget også ser FANTASTISK ut? ;-)
Vær så snill forlate en nyttig kommenter med tankene dine, så del dette på Facebook-gruppen din (e) som synes dette er nyttig, og la oss høste fordelene sammen. Takk for at du delte og var hyggelig!

Avsløring: Denne siden kan inneholde lenker til eksterne nettsteder for produkter som vi elsker og anbefaler helhjertet. Hvis du kjøper produkter vi foreslår, kan vi tjene et henvisningsgebyr. Slike avgifter påvirker ikke våre anbefalinger, og vi godtar ikke betaling for positive anmeldelser.

Forfatter (e) Fremvist på:  Inc Magazine-logoen   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   og mange flere ...