WordPress OG-taggar: Så här ökar du klick till ditt inlägg på socialt

Har du hört talas om og metataggar? Implementerar du og-metataggar på din WordPress-webbplats? Den här artikeln visar dig vad metataggar är och hur du implementerar dem på din WordPress-webbplats.

När ett inlägg från din blogg eller en URL från din webbplats delas på Facebook, gör webbplatsen för sociala medier ett bra jobb med att dra in rätt data från den. Saker som din bloggs eller webbplatsens URL, ett utdrag av inläggets text, en utvald bild etc. visas, vilket får användarna att klicka på den.

Men om du är en ivrig Facebook-användare kanske du har märkt att informationen som hämtas från webbplatser (inklusive din) inte alltid är perfekt. Ibland drar det en bild som inte korrekt representerar innehållet i det delade inlägget, eller så kan det extrahera text nära slutet av inlägget och använda den som utdrag, vilket nästan alltid inte är bra, och ännu värre, där är tillfällen där inga andra uppgifter än postens titel (eller innehållet i tag) och URL delas alls!

Detta händer vanligtvis om du inte implementerar openna graph-metataggar (aka och metataggar) på din WordPress-webbplats. Utan dessa viktiga taggar kommer Facebook (och andra sociala mediasidor) inte att kunna få rätt information att visa för ett delat inlägg eller länk.

Så här kan det se ut när du delar en URL på Facebook från en webbplats som inte uppdateras med öppna diagramtaggar:

facebook dela utan og taggar

Å andra sidan ser det ut så här när du delar en webbadress som implementerar metataggar för öppna diagram:

facebook dela med og1

Facebook: s Open Graph (OG) metataggar

Facebooks metataggar med öppna diagram definierar hur en tredje parts webbplats (som din blogg) kommer att presenteras på Facebook.

Även om den är utvecklad av Facebook används metataggar med öppen graf också av andra sociala nätverk (som Twitter och LinkedIn) för att anpassa den delning som händer där.

För att inkludera de öppna metataggarna på din WordPress-webbplats måste du lägga till ytterligare taggar i på din webbplats. Enligt öppet diagramprotokollär följande egenskaper som krävs:

  • och: titel
  • och: typ
  • og: bild
  • och: url

 

og taggar facebook1

Genom att använda öppna diagram på webbplatser, Neil Patel hittade en höjning av klickfrekvensen med 39%.

Hur letar du efter OG-metataggar på din WordPress-webbplats?

Titta på källkoden på din WordPress-webbplats om du inte är säker på om og-taggar redan har placerats på din webbplats. I Windows eller Linux trycker du på Ctrl + U och i Mac trycker du på Kommando + Alt + U för att visa källkoden.

Om det redan läggs till hittar du dina og-taggar i inuti ”

og

Dessutom kan du använda Facebook delningsfelsökare verktyg för att se vad Facebook läser om din webbplats.

Lägga till OG-metataggar till WordPress utan ett plugin

För att lägga till og-metataggar till dina inlägg och sidor på WordPress utan att använda ett plugin, lägg bara till följande kodavsnitt i ditt temas functions.php fil.

// Lägga till den öppna grafen i funktionen Språkattribut add_opengraph_doctype ($ output) {return $ output. 'xmlns: og = "https://opengraphprotocol.org/schema/" xmlns: fb = "https://www.facebook.com/2008/fbml"'; } add_filter ('språk_attribut', 'add_opengraph_doctype'); // Låt oss lägga till Open Graph Meta Info-funktion add_og_meta_tag () {global $ post; om (! is_singular ()) // om det inte är ett inlägg eller en sida, lägg inte till og-taggar returnerar; eko " \ n "; eko ' '. "\ n"; eko ' '. "\ n"; eko ' '. "\ n"; eko ' '. "\ n"; eko ' '. "\ n"; eko '  '. "\ n"; if (! has_post_thumbnail ($ post-> ID)) {// om inlägget inte har någon bild, använd en standardbild $ default_image = "https://exempel.com/bild.jpg"; // ersätt detta med en standardbild på din server eller en bild i ditt mediebibliotekseko ' '; } annat {$ thumbnail_src = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'large'); eko ' '; } eko "\ n \ n ";} add_action ('wp_head', 'add_og_meta_tag', 0);

Se till att du ändrar "DITT ANVÄNDAR-ID" i dela med ditt eget Facebook-användar-id.

Du hittar ditt Facebook-användar-id genom att besöka din Facebook-profilsida i en skrivbordsbläddrare.

  1. Klicka på din profilbild och välj "Visa profilbild"
  2. Detta öppnar Facebooks bildvisare för din profilbild.
  3. URL-adressen ska nu se ut så här: “https://www.facebook.com/photo?fbid=xxxxxxxxxxxxxxx&set=a.xxxxxxxxxxxxxxx"
  4. Leta efter delen fbid=XXXXXXXXXXXXXX. Siffrorna efter fbid parameter "xxxxxxxxxxxxxxxx”Är ditt användar-ID.
  5. Kopiera det och använd det för att ersätta ”DITT ANVÄNDAR-ID” i kodavsnittet ovan.

Facebook-användar-id

Du är klar! Din webbplats är nu uppdaterad med öppna diagramtaggar.

Lägga till OG-metataggar till WordPress med ett plugin

De två populära SEO-pluginsna, Yoast SEO och All in One SEO Pack levereras med öppna grafiska metataggfunktioner.

Lägga till OG-taggar med Yoast SEO-plugin

Installera först Yoast SEO. Efter installationen bör du se det nya SEO-objektet i den vänstra admin-sidofältmenyn.

För att lägga till og-taggar med Yoast, gå till SEO > Social via admin-sidofältmenyn.

När du är på sidan, gå till Facebook-fliken.

yoast seo og tag

Som standard lägger Yoast SEO till öppna inläggstaggar till dina inlägg direkt. Du behöver inte konfigurera någonting. 

Du måste dock konfigurera og-taggar för startsidan på din webbplats.

Enligt Inställningar på förstasidan avsnitt kan du definiera en bild-URL till din förstasida. Detta kommer att användas för og: bild egendom för din hemsida. 

Du kan också lägga till titeln och beskrivningen, som båda används för och: titel och och: beskrivning egenskaper respektive.

Slutligen finns det Standardinställningar sektion. Detta låter dig definiera en standardbild-URL som ska användas för ett inlägg og: bild egendom om det inte finns någon definierad bild.

Glöm inte att klicka när du är klar Spara ändringar för att dina ändringar ska tillämpas.

Konfigurera OG-taggar per inlägg med Yoast SEO

Om du vill ställa in og-taggar manuellt per inlägg kan du göra det genom att gå till inläggsredigeraren och bläddra ner till avsnittet Yoast Metabox och gå till Social fliken.

yoast per inlägg och taggar

Du kan sedan definiera en anpassad parameter för olika og-taggar här.

När du är klar med att lägga till dina og-taggar i ett inlägg, se till att du sparar det, uppdaterar det eller publicerar det, beroende på vad som är tillämpligt, för att göra de ändringar du har gjort.

Lägga till OG-taggar med allt i ett SEO-paket

Installera först All in One SEO Pack. Efter installationen, gå till All in One SEO > Sociala nätverk via webbplatsens administratörssidmeny. När du är på sidan, gå till Facebook fliken.

allt i ett seo og taggar

Med allt i ett SEO-paket läggs og-taggar till ditt inlägg som standard direkt från lådan, liknande Yoast.

Det finns fler konfigurerbara alternativ här jämfört med Yoast, men vissa är bara tillgängliga när du använder pro -versionen. Nevertheless, mängden konfigurerbara alternativ i gratisversionen är mer än tillräckligt.

  • Standard inläggsbild - definierar vilken bild som ska användas för ett inlägg og: bild fast egendom.
  • Standardpost Facebook-bild - om du väljer alternativet för standardbild (anges nedan) i standardalternativet för postbild är det här du laddar upp den anpassade bilden.
  • Standardtyper för inläggstyp - låter dig definiera ett standardvärde för ett inlägg, sida eller bilagor och: typ fast egendom.
  • Visa Facebook-författare - du kan länka din Facebook-profil till din webbplats. Om du aktiverar det här alternativet kan du länka ett inlägg till din Facebook-profil så att dina läsare kan följa din FB-sida / profil direkt. Du kan lära dig mer om hur du konfigurerar detta från AIOSEO hjälpa sidan.
  • Sidnamn - låter dig konfigurera vilka värden som används för ett inlägg och: webbplatsnamn fast egendom. Du kan använda taggar för att dynamiskt generera värdet för den här egenskapen, du kan också lägga till en standardtext, eller så kan du också blanda de två om du vill.

Efter artiklarna ovan finns det ett avsnitt för att konfigurera webbplatsens hemsida och taggar. Under Startsida Inställningar avsnitt kan du definiera följande:

  • Bild - för din startsida og: bild fast egendom.
  • Titel - för din startsida och: titel fast egendom. Du kan använda variabler för att dynamiskt generera detta.
  • Beskrivning - för din startsida och: beskrivning fast egendom.
  • Objekt typ - för din startsida och: typ fast egendom.

Slutligen finns det en avancerade inställningar avsnitt, som låter dig definiera ytterligare öppna metataggar som t.ex. fb: app_id, fb: administratörerEtc.

När du är nöjd med din konfiguration, glöm inte att göra det spara ändringar.

Konfigurera OG-taggar per inlägg med allt i ett SEO-paket

Du kan konfigurera taggar per inlägg och AIOSEO som Yoast. Gå till inläggsredigeraren och bläddra ner till AIOSEO-metaboxen och gå sedan till Social fliken.

aioseo per inlägg och taggar

Alternativen här liknar vad som diskuterades ovan. Du kan gå vidare och definiera anpassade parametrar för dina og-taggar för det här inlägget, åsidosätta vilka alternativ du definierade i AIOSEOs inställningar.

När du är klar med att lägga till dina og-taggar i ett inlägg, se till att du sparar det, uppdaterar det eller publicerar det, beroende på vad som är tillämpligt, för att göra de ändringar du har gjort.

Det täcker hur du lägger till og-taggar till din WordPress-webbplats. Förhoppningsvis har den här artikeln hjälpt dig att välja ett bättre tillvägagångssätt för det och att du har lärt dig lite om hur viktigt det är att implementera og-taggar på din webbplats.

Om du vill se fler WordPress-tips och tricks, kolla in vårt fullständiga 101 lista över WordPress-tips och tricks.

Ladda ner listan över 101 WordPress-trick som alla bloggare borde veta

101 WordPress-tricks

Klicka här för att ladda ner nu

// Lägga till den öppna grafen i språkattributen

funktion add_opengraph_doctype ($ output) {

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

}


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


// Låt oss lägga till Open Graph Meta Info

funktion add_og_meta_tag () {


global $ post;


om (! is_singular ()) // om det inte är ett inlägg eller en sida, lägg inte till og-taggar

tillbaka;

eko " \ n ";

eko ' '. "\ n";

eko ' '. "\ n";

eko ' '. "\ n";

eko ' '. "\ n";

eko ' '. "\ n";

eko ' '. "\ n";


om (! has_post_thumbnail ($ post-> ID)) {// om inlägget inte har någon bild, använd en standardbild

$ default_image = "https://exempel.com/bild.jpg"; // ersätt detta med en standardbild på din server eller en bild i ditt mediebibliotek

eko ' ';

}


else {

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

eko ' ';

}


eko "\ n \ n ";

}


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

Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...