WordPress OG-tags: Sådan øges antallet af klik til dit indlæg på det sociale

Har du hørt om og metatags? Implementerer du og metatags på dit WordPress-websted? Denne artikel viser dig, hvad og metatags er, og hvordan du implementerer dem på dit WordPress-websted.

Når et indlæg fra din blog eller en URL fra dit websted deles på Facebook, gør webstedet for sociale medier et godt stykke arbejde med at trække de rigtige data fra det. Ting som din blog eller websteds URL, et uddrag af postens tekst, et fremhævet billede osv. Vises, hvilket får brugerne til at klikke på det.

Men hvis du er en ivrig Facebook-bruger, har du måske bemærket, at de data, den trækker fra websteder (inklusive dine), ikke altid er perfekte. Nogle gange trækker det et billede, der ikke nøjagtigt repræsenterer indholdet af det delte indlæg, eller det kan udtrække tekst i slutningen af ​​indlægget og bruge det som uddraget, hvilket næsten altid ikke er en god ting, og endnu værre, der er tidspunkter, hvor der ikke er andre data end postens titel (eller indholdet af tag) og URL deles overhovedet!

Dette sker typisk, hvis du ikke implementerer open graph meta tags (aka og meta tags) på dit WordPress-websted. Uden disse vigtige tags vil Facebook (og andre sociale mediesider) ikke være i stand til at få de rigtige oplysninger til visning for et delt indlæg eller link.

Sådan kan det se ud, når du deler en URL på Facebook fra et websted, der ikke opdateres med åbne graf-tags:

facebook del uden og tags

På den anden side ser det sådan ud, når du deler en URL, der implementerer metakoder med åben graf:

facebook del med og1

Facebooks Open Graph (OG) metatags

Facebooks åbne graf-metatags definerer, hvordan et tredjepartswebsted (som din blog) vil blive præsenteret på Facebook.

Selvom det er udviklet af Facebook, bruges metatags med åben graf også af andre sociale netværk (som Twitter og LinkedIn) for at tilpasse den deling, der sker der.

For at inkludere de åbne grafmetatags på dit WordPress-websted skal du tilføje yderligere tags i af dit websted. Ifølge åben grafprotokol, følgende er de krævede egenskaber:

  • og: titel
  • og: type
  • og: billede
  • og: url

 

og mærker facebook1

Ved at bruge åbne grafer på websteder, Neil Patel fundet en stigning i klikfrekvens med 39%.

Sådan kontrolleres der for OG-metatags på dit WordPress-websted?

Se kildekoden på dit WordPress-websted, hvis du ikke er sikker på, om og-tags allerede er blevet placeret på dit websted. I Windows eller Linux skal du trykke på Ctrl + U og i Mac, trykke på Kommando + Alt + U for at se kildekoden.

Hvis det allerede tilføjes, finder du dine og-tags i sektion inde i “

og

Derudover kan du bruge Facebook Sharing Debugger værktøj til at se, hvad Facebook læser om dit websted.

Tilføjelse af OG-metatags til WordPress uden et plugin

For at tilføje og metatags til dine indlæg og sider på WordPress uden at bruge et plugin skal du blot tilføje følgende kodestykke til dit temas functions.php fil.

// Tilføjelse af den åbne graf i funktionen Sprogattributter add_opengraph_doctype ($ output) {return $ output. 'xmlns: og = "https://opengraphprotocol.org/schema/" xmlns: fb = "https://www.facebook.com/2008/fbml"'; } add_filter ('sprog_attributter', 'add_opengraph_doctype'); // Lad os tilføje Open Graph Meta Info-funktion add_og_meta_tag () {global $ post; hvis (! is_singular ()) // hvis det ikke er et indlæg eller en side, skal du ikke tilføje og tags returnere; ekko " \ n "; ekko ' '. "\ n"; ekko ' '. "\ n"; ekko ' '. "\ n"; ekko ' '. "\ n"; ekko ' '. "\ n"; ekko '  '. "\ n"; hvis (! has_post_thumbnail ($ post-> ID)) {// hvis indlægget ikke har fremhævet billede, skal du bruge et standardbillede $ default_image = "https://eksempel.com/billede.jpg"; // erstatt dette med et standardbillede på din server eller et billede i dit mediebibliotekseko ' '; } andet {$ 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);

Sørg for at ændre "DIT BRUGER-ID" i del med dit eget Facebook-bruger-id.

Du kan finde dit Facebook-bruger-id ved at besøge din Facebook-profilside i en desktop-browser.

  1. Klik på dit profilbillede, og vælg "Se profilbillede"
  2. Dette åbner Facebooks billedfremviser til dit profilbillede.
  3. URL-adressen skal nu se sådan ud: “https://www.facebook.com/photo?fbid=xxxxxxxxxxxxxxx&set=a.xxxxxxxxxxxxxxx"
  4. Se efter den del bud=xxxxxxxxxxxxxx. Tallene efter bud parameter "xxxxxxxxxxxxxxxx”Er dit bruger-id.
  5. Kopier det, og brug det til at erstatte "DIN BRUGER-ID" i kodestykket ovenfor.

Facebook bruger-id

Du er færdig! Dit websted er nu opdateret med åbne graf-tags.

Tilføjelse af OG-metatags til WordPress med et plugin

De to populære SEO-plugins, Yoast SEO , All in One SEO Pack leveres med åbne grafiske metatag-funktioner.

Tilføjelse af OG-tags med Yoast SEO-plugin

Først skal du installere Yoast SEO. Efter installationen skal du se det nye SEO-punkt i menuen til venstre i sidebjælken.

For at tilføje og tags med Yoast skal du gå til SEO > Social via admin-sidepanelmenuen.

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

yoast seo og tag

Som standard tilføjer Yoast SEO åbne grafkoder til dine indlæg ud af kassen. Du behøver ikke at konfigurere noget. 

Du skal dog konfigurere og tags til forsiden af ​​dit websted.

Under Indstillinger på forsiden sektion, kan du definere en billed-URL til din forside. Dette vil blive brugt til og: billede ejendom på din startside. 

Du kan også tilføje titlen og beskrivelsen, som begge bruges til og: titel , og: beskrivelse egenskaber henholdsvis.

Endelig er der den Standardindstillinger afsnit. Dette giver dig mulighed for at definere en standard billed-URL, der skal bruges til et indlæg og: billede ejendom, hvis der ikke er defineret noget fremhævet billede.

Glem ikke at klikke, når du er færdig Gem ændringer for at dine ændringer skal anvendes.

Konfiguration af OG-mærker pr. Post med Yoast SEO

Hvis du vil indstille og tags manuelt pr. Indlæg, kan du gøre det ved at gå til indlægseditoren og rulle ned til sektionen Yoast Metabox og gå til Social fane.

yoast pr. indlæg og tags

Du kan derefter definere en brugerdefineret parameter for forskellige og tags her.

Når du er færdig med at føje dine og-tags til et indlæg, skal du huske at gemme det, opdatere det eller offentliggøre det, alt efter hvad der er relevant, for at begå de ændringer, du har foretaget.

Tilføjelse af OG-tags med alt i en SEO-pakke

Installer først All in One SEO Pack. Efter installation, gå til All in One SEO > Sociale netværk via dit sides admin sidebar menu. Når du er på siden, skal du gå til Facebook fane.

alt i én seo og tags

Med All in One SEO Pack føjes og tags som standard til dit indlæg ud af kassen, svarende til Yoast.

Der er flere konfigurerbare muligheder her sammenlignet med Yoast, men nogle er kun tilgængelige, når du bruger pro -versionen. Nevertheless, mængden af ​​konfigurerbare muligheder i den gratis version er mere end nok.

  • Standardindlægsbillede - definerer, hvilket billede der skal bruges til et indlæg og: billede ejendom.
  • Standardindlæg Facebook-billede - hvis du vælger standardindstillingen (angivet nedenfor) i standardindstillingen for postbillede, er det her du uploader det brugerdefinerede billede.
  • Standard indlægstype Objektyper - lader dig definere en standardværdi for et indlæg, en side eller en vedhæftet fil og: type ejendom.
  • Vis Facebook-forfatter - du kan linke din Facebook-profil til dit websted. Aktivering af denne mulighed giver dig mulighed for at linke et indlæg til din Facebook-profil, så dine læsere kan følge direkte din FB-side / -profil. Du kan lære mere om, hvordan du konfigurerer dette fra AIOSEO'er hjælpe side.
  • Side navn - giver dig mulighed for at konfigurere, hvilke værdier der skal bruges til et indlæg og: webstedsnavn ejendom. Du kan bruge tags til dynamisk at generere værdien for denne egenskab, du kan også tilføje en standardtekst, eller du kan også blande de to, hvis du ønsker det.

Efter ovenstående punkter er der et afsnit til konfiguration af dit websteds startside og tags. Under Startsideindstillinger sektion, kan du definere følgende:

  • Billede - til din startside og: billede ejendom.
  • Titel - til din startside og: titel ejendom. Du kan bruge variabler til dynamisk at generere dette.
  • Beskrivelse - til din startside og: beskrivelse ejendom.
  • Objektype - til din startside og: type ejendom.

Endelig er der en Avancerede indstillinger sektion, som giver dig mulighed for at definere yderligere åbne graf-metatags som f.eks fb: APP_ID, fb: adminsOsv

Når du er tilfreds med din konfiguration, så glem det ikke Gem ændringer.

Konfiguration af OG-mærker pr. Post med alt i en SEO-pakke

Du kan konfigurere pr. Indlæg og tags med AIOSEO som Yoast. Gå til indlægseditoren, rul ned til AIOSEO-metaboxen, og gå derefter til Social fane.

aioseo pr. indlæg og tags

Indstillingerne her ligner det, der blev diskuteret ovenfor. Du kan gå videre og definere brugerdefinerede parametre til dine og-tags til dette indlæg og tilsidesætte de muligheder, du definerede i AIOSEOs indstillinger.

Når du er færdig med at føje dine og-tags til et indlæg, skal du huske at gemme det, opdatere det eller offentliggøre det, alt efter hvad der er relevant, for at begå de ændringer, du har foretaget.

Det dækker, hvordan du tilføjer og tags til dit WordPress-websted. Forhåbentlig hjalp denne artikel dig med at vælge den bedre tilgang til det, og at du har lært lidt om, hvor vigtigt det er at implementere og tags på dit websted.

Hvis du gerne vil se flere WordPress-tip og -tricks, skal du tjekke vores fulde 101 liste over WordPress tip og tricks.

Download listen over 101 WordPress-tricks, som enhver blogger skal kende

101 WordPress-tricks

Klik her for at downloade nu

// Tilføjelse af den åbne graf i sprogattributterne

funktion add_opengraph_doctype ($ output) {

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

}


add_filter ('sprog_attributter', 'add_opengraph_doctype');


// Lad os tilføje Open Graph Meta Info

funktion add_og_meta_tag () {


global $ post;


hvis (! is_singular ()) // hvis det ikke er et indlæg eller en side, skal du ikke tilføje og tags

vende tilbage;

ekko " \ n ";

ekko ' '. "\ n";

ekko ' '. "\ n";

ekko ' '. "\ n";

ekko ' '. "\ n";

ekko ' '. "\ n";

ekko ' '. "\ n";


hvis (! has_post_thumbnail ($ post-> ID)) {// hvis indlægget ikke har fremhævet billede, skal du bruge et standardbillede

$ default_image = "https://eksempel.com/billede.jpg"; // erstatt dette med et standardbillede på din server eller et billede i dit mediebibliotek

ekko ' ';

}


else {

$ 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
David har arbejdet i eller omkring online- og digitalindustrien i de sidste 21 år. Han har stor erfaring i software- og webdesignindustrien ved at bruge WordPress, Joomla og nicher omkring dem. Han har arbejdet med softwareudviklingsbureauer, internationale softwarevirksomheder, lokale marketingbureauer og er nu Head of Marketing Operations hos Aphex Media - et SEO-bureau. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencefordel ved at bruge en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag. Hans blanding af teknologisk ekspertise kombineret med et stærkt forretningssans giver hans forfatterskab en konkurrencefordel.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig at forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...