Pålitliga WordPress-handledningar, när du behöver dem som mest.
Nybörjarguide till WordPress
WPB Cup
25 miljoner+
Webbplatser som använder våra plugins
16+
År av WordPress-erfarenhet
3000+
WordPress-handledningar
av experter

Hur man lägger till Facebook Open Graph Meta Data i WordPress-teman

Tidigt i vår WordPress-resa märkte vi att vissa webbplatser såg fantastiska ut när de delades på Facebook medan andra såg hemska ut. Skillnaden var inte innehållets kvalitet. Det var om webbplatsägaren hade konfigurerat Facebook Open Graph-metadata korrekt.

Facebook Open Graph-taggar är i princip instruktioner som talar om för sociala medieplattformar hur de ska visa ditt innehåll. Utan dem måste Facebook gissa vilken bild som ska användas och vilken text som ska visas, ofta med dåliga resultat.

Med korrekt implementering av Open Graph kontrollerar du exakt hur dina WordPress-inlägg visas när de delas, vilket leder till bättre engagemang och fler klick.

Vi har hjälpt otaliga WordPress-användare att implementera Open Graph-metadata genom åren, så vi vet vilka metoder som fungerar bäst. I den här guiden går vi igenom flera beprövade metoder för att lägga till Facebook Open Graph-taggar i ditt WordPress-tema.

Hur man lägger till Facebook Open Graph Meta Data i WordPress-teman

Du kan använda snabblänkarna nedan för att hoppa direkt till den metod du är mest intresserad av:

  1. Lägga till Facebook Open Graph-metadata med AIOSEO
  2. Ställ in Facebook Open Graph-metadata med Yoast SEO
  3. Adding Facebook Open Graph Metadata Using Code

    Metod 1: Lägga till Facebook Open Graph-metadata med AIOSEO

    All in One SEO är ett populärt WordPress SEO-plugin som används av över 3 miljoner webbplatser. Det låter dig enkelt optimera din webbplats för sökmotorer såväl som sociala plattformar som Facebook och Twitter.

    Först måste du installera och aktivera den kostnadsfria All in One SEO-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

    Efter aktivering måste du besöka sidan All in One SEO » Social Networks. Här kan du ange din Facebook-sidans URL och alla dina andra sociala nätverk.

    AIOSEO SEO-plugin för WordPress

    Klicka sedan på fliken Facebook högst upp på sidan, så ser du att Open Graph Markup är aktiverat som standard.

    Du kan klicka på knappen 'Ladda upp eller välj bild' för att välja en standardbild för Facebook OG om en artikel inte har en Open Graph-bild.

    Ange standardbild för Open Graph

    Om du skrollar ner kan du anpassa ditt webbplatsnamn, beskrivning och fler inställningar. Glöm inte att klicka på den blå knappen 'Spara ändringar' när du är klar.

    Nu när du har ställt in webbplatsomfattande Open Graph-metataggar, är nästa steg att lägga till Open Graph-metadata för enskilda inlägg och sidor.

    Som standard använder AIOSEO din inläggstitel och beskrivning för Open Graph-titeln och beskrivningen. Du kan också manuellt ställa in Facebook-miniatyren för varje sida och inlägg.

    Redigera helt enkelt inlägget eller sidan och skrolla ner till sektionen 'AIOSEO-inställningar' under redigeraren. Härifrån, byt till fliken Sociala medier, så ser du en förhandsgranskning av din miniatyrbild.

    AIOSEO Facebook-förhandsgranskning

    Du kan ställa in sociala medier-bilden här, liksom titeln och beskrivningen.

    Bläddra bara ner till fältet 'Bildkälla'. Du kan välja att använda den markerade bilden, ladda upp en anpassad bild eller andra alternativ.

    Välj vilken WordPress-bild du vill använda som din Facebook-miniatyr

    Metod 2: Ställ in Facebook Open Graph-metadata med Yoast SEO

    Yoast SEO är ett annat WordPress SEO-plugin som du kan använda för att lägga till Facebook Open Graph-metadata på alla WordPress-webbplatser.

    Det första du behöver göra är att installera och aktivera pluginet Yoast SEO. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

    När Facebook Open Graph-data har aktiverats är den aktiverad som standard.

    Du kan kontrollera detta genom att gå till Yoast SEO » Inställningar och skrolla ner till avsnittet Social delning. Nu kan du se till att funktionen för Open Graph-data är aktiverad.

    Aktivera Facebook Open Graph

    du behöver gå till SEO » Social och välja alternativet ‘Aktiverad’ under ‘Lägg till Open Graph-metadata’.

    Du kan spara dina inställningar eller fortsätta och konfigurera andra Facebook sociala alternativ.

    Du kan ange ett Facebook-app-ID om du använder ett för din Facebook-sida och insikter. Du kan också ändra din hemsidas Open Graph meta-titel, beskrivning och bild.

    Slutligen kan du ställa in en standardbild som ska användas när ingen bild är inställd för ett inlägg eller en sida.

    Premiumversionen av Yoast SEO låter dig också ställa in Open Graph-metadata för enskilda inlägg och sidor. Redigera helt enkelt ett inlägg eller en sida och scrolla ner till avsnittet 'Yoast SEO' under redigeraren.

    Ställ in open graph-metadata för inlägg och sidor med Yoast

    Härifrån kan du ställa in en Facebook-miniatyrbild för det specifika inlägget eller sidan. Om du inte anger en inläggstitel eller beskrivning, kommer pluginet att använda din SEO-metatitel och beskrivning.

    Du kan nu spara ditt inlägg eller din sida, och pluginet kommer att lagra dina Facebook Open Graph-metadata.

    Metod 3: Lägga till Facebook Open Graph-metadata med kod

    Den här metoden kräver vanligtvis att du kopierar och klistrar in kod i din temas functions.php-fil. Vi rekommenderar dock att du lägger till koden med hjälp av WPCode-pluginet istället, vilket gör det enklare och säkrare att lägga till anpassad kod i WordPress.

    WPCode kommer också med ett bibliotek av färdiga kodavsnitt, inklusive ett för att lägga till grundläggande Open Graph-taggar, så det tar bara ett par klick.

    Installera och aktivera först det kostnadsfria WPCode-pluginet. För mer information, se vår guide om hur man installerar ett WordPress-plugin.

    Efter aktivering kan du gå till Kodavsnitt » + Lägg till avsnitt från din WordPress-instrumentpanel.

    Sök efter kodavsnittet 'Add basic Open Graph Tags' i biblioteket. När du hittar det, för muspekaren över det och klicka på knappen 'Använd kodavsnitt'.

    Välj kodsnutten 'Lägg till grundläggande Open Graph-taggar' från biblioteket

    Sedan kommer WPCode automatiskt att lägga till koden åt dig, samt ställa in webbplatsens sidhuvud som plats för infogning.

    WPCode lägger automatiskt till koden för Open Graph-data

    Därefter behöver du bara växla kodavsnittet till ‘Aktiv’ och klicka på knappen ‘Uppdatera’. Din webbplats kommer nu att börja visa Facebook Open Graph-metadata i WordPress-huvudet.

    Aktivera och uppdatera kodsnutt

    Om du är en avancerad användare kan du fortfarande kopiera och klistra in koden nedan i din temas functions.php-fil.

    Eftersom detta kräver att du redigerar dina temafiler direkt, se till att du säkerhetskopierar dina temafiler innan du gör några ändringar.

    //Adding the Open Graph in the Language Attributes
    function add_opengraph_doctype( $output ) {
            return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
        }
    add_filter('language_attributes', 'add_opengraph_doctype');
     
    //Lets add Open Graph Meta Info
     
    function insert_fb_in_head() {
        global $post;
        if ( !is_singular()) //if it is not a post or a page
            return;
            echo '<meta property="fb:app_id" content="Your Facebook App ID" />';
            echo '<meta property="og:title" content="' . get_the_title() . '"/>';
            echo '<meta property="og:type" content="article"/>';
            echo '<meta property="og:url" content="' . get_permalink() . '"/>';
            echo '<meta property="og:site_name" content="Your Site Name Goes Here"/>';
        if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
            $default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
            echo '<meta property="og:image" content="' . $default_image . '"/>';
        }
        else{
            $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
            echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
        }
        echo "
    ";
    }
    add_action( 'wp_head', 'insert_fb_in_head', 5 );
    

    Kom ihåg att lägga till ditt webbplatsnamn på rad 17, där det står 'Your Site Name Goes Here'. Därefter bör du ändra standardbildens URL på rad 19 med en av dina egna bild-URL:er.

    Vi rekommenderar att du lägger en bild med din logotyp där, så om ditt inlägg inte har en miniatyrbild, så hämtas din webbplats logotyp.

    Du måste också lägga till ditt eget Facebook App ID på rad 13. Om du inte har en Facebook-app kan du ta bort rad 13 från koden.

    Experthandledare på Facebook och WordPress

    Vi hoppas att den här artikeln hjälpte dig att lägga till Facebook Open Graph-metadata i WordPress. Du kanske också vill se några andra guider relaterade till hur du kan använda Facebook i WordPress:

    Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.

    Upplysning: Vårt innehåll stöds av läsarna. Det innebär att om du klickar på några av våra länkar kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt och hur du kan stödja oss. Här är vår redaktionella process.

    Det ultimata WordPress-verktyget

    Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som alla proffs bör ha!

    Läsarnas interaktioner

    222 CommentsLeave a Reply

    1. Det är bra att AIOSEO kan ställa in en standard Open Graph-bild för inlägg utan utvalda bilder.
      Jag har några äldre blogginlägg utan inställda utvalda bilder, så det är bra att jag kan ange min fullständiga logotyp (med en bild av mig redigerad) som en Open Graph-bild.
      Detta gör att mina inlägg delas korrekt på sociala medier även om jag inte har hunnit lägga till en utvald bild.

    2. This is indeed helpful but SEO Yoast’s interface doesn’t look like this anymore. This needs updating.

      • Thank you for letting us know that their interface has been updated, we will look to update it when we update the article :)

        Admin

    3. Tack för handledningen. Jag har lagt till Open Graph i AIO SEO och jag är fortfarande förvånad över att AIO SEO säger att det inte finns någon. Jag spenderade ungefär en halvtimme på detta innan jag upptäckte att jag var tvungen att klicka på uppdatera igen i SEO-utvärderingen så att pluginet skulle ladda ner de nya WordPress-inställningarna och göra en ny SEO-analys. En så enkel sak och det tog mig så lång tid.

    4. Hej, tack för kodavsnittet, jag ser fram emot att prova det. En fråga, kommer det då att tillåta FB att hämta den utvalda bilden (är det “miniatyrbilden”?) och utdraget för varje blogginlägg, eller kommer det bara att använda den webbplatsomfattande logotypbilden som anges i rad 19? Jag har provat Blog2Social, men inläggen saknade den utvalda bilden och utdraget och såg inte bra ut. Tack!

      • Kodavsnittet bör ställa in din utvalda bild till inläggets utvalda bild.

        Admin

    5. Hej,

      Grymt kodat. MEN, varför ändras inte og:url och og:image. Jag provade med ett inlägg utan bild satt som standard. Men när jag kontrollerar det på fb-debuggern, plockar den upp min logotyp från sidfoten istället för att hämta bilden jag lade till i og:image-delen.
      Titeln fungerar, den ändrades från originalet och jag klistrade också in og:description. Alla de viktigaste meta-taggarna men bild och url.
      Varför är det så?

      Tack,
      Atila

      • Se till att du har rensat all cache på din WordPress-webbplats, eftersom det är den vanligaste anledningen till att den inte uppdateras för att matcha koden.

        Admin

    6. hej hur kan jag ändra koden för att lägga till OG-taggar för anpassade inläggstyper jag försökte genom att ändra den här kodraden om ( !is_singular()) till om ( is_singluar( array( ‘post’, ‘publications’) ) ) men min webbplats ger ett fatalt fel. kan någon snälla hjälpa tack

      • You should not need to modify the code to work with custom post types and it should work on them :)

        Admin

    7. Hej, jag har provat alla föreslagna lösningar men jag saknar fortfarande några parametrar i schemat:
      Ett obligatoriskt fält saknas: id
      Ett obligatoriskt fält saknas: price
      Ett obligatoriskt fält saknas: availability

      Finns det någon lösning via ett plugin eller genom att uppdatera function.php-koden?

      • Det skulle vara markup för en produkt du säljer på din webbplats och All in One SEO har alternativet att lägga till den markupen till dina produkter.

        Admin

      • Även om det inte är specifikt för SMS-meddelanden, hjälper markupen även med det.

        Admin

    8. Om jag använder Yoast SEO-inställningarna, kommer det att ta tid att visa det perfekta resultatet i Facebook-delningar? Eller kommer det att börja fungera inom några minuter?

      • Det skulle bero på din webbplats cachning och eventuell cachning på Facebook för hur lång tid det tar

        Admin

          • Om det inte visas vad du har angett på varje social webbplats, vill du kontakta Yoast support och låta dem veta för att säkerställa att det inte finns något problem med pluginet.

    9. Hej
      När jag delar mitt inlägg på Facebook är det så här min utvalda bild ser ut.
      Men när jag delar på WhatsApp visas inte min utvalda bild med länken, snälla hjälp mig..

      • Om du använder Yoast för att lägga till metadata, rekommenderar vi först att du kontaktar Yoast för att säkerställa att det inte finns några kända problem.

        Admin

    10. Min titel ser ut så här i förhandsgranskningen:

      %%title%% %%page%% %%sep%% %%sitename%%

      Hur fixar jag det här?

    11. Hej, snälla hjälp mig
      Facebook har blockerat min webbplats, nu i Facebook-utvecklarappen kan jag inte ens länka min webbplats eftersom den har blockerat Facebook

      Berätta hur jag blockerar din webbplats med Facebook

    12. Hej

      Kan du vänligen ge råd om när du använder ett barn-tema – behöver jag kopiera föräldratemats functions.php och sedan lägga till ovanstående skript i ett nygenererat functions.php och ladda upp det till barn-temats mapp ELLER lägger jag bara till skriptet i föräldratemats functions.php

      Tack för att du läste Sadie

    13. Hur skulle jag ta bort "Av ..." från att visas på kortet?

      För närvarande har vi ett problem där det visas som: webbplatsnamn | Av webbplatsnamn

      Vi vill bara att det första webbplatsnamnet ska visas och inte två gånger.

    14. Jag använder detta på en egenvärd webbplats. Vad gör jag med ANVÄNDAR-ID:t som jag ska ersätta eftersom webbplatsen inte finns på wordpress.com?

    15. Hej,
      Jag har ett stort problem!!
      När jag delar mitt inlägg på Facebook är det hur min inläggets bild visas.
      Men när jag delar på WhatsApp visas inte min bild med länken, snälla hjälp mig..

    16. Allt bra, men fortfarande ett problem, hur lägger man till Facebook ID? Efter att ha använt den här koden visas följande Facebook ID-meddelande.

      Egenskapen ‘fb:app_id’ bör anges explicit. Ange app-ID så att inlägg som delas till Facebook korrekt tillskrivs appen. Alternativt kan app_id anges i URL:en när delningsdialogen öppnas.

    17. Jag gillade den här artikeln, men i januari 2018 verkar det här alternativet med *manuell kod* inte fungera helt. Till exempel, även om jag har verifierat att standardbildsinställningen fungerar, när jag skapar ett nytt inlägg, ser jag INGENSTANS ett fält där man kan börja redigera metadata för "open graph (og)".

      Förslag? Tack!

    18. Tack för så bra information. Men jag har en fråga.

      Hur hjälpsamt är det att lägga till Facebook graph-metadata på vår webbplats..?

      Och om det är mycket hjälpsamt, till vilket syfte är det hjälpsamt..?

    19. Detta plugin gav mig en vit dödsskärm, uppenbarligen en konflikt med något eller att minnet överskreds

    20. Vad händer om jag vill ändra miniatyrbilden inte för hela webbplatsen, utan bara för en sida på min WordPress-webbplats? Till exempel försöker jag dela en evenemangssida från min webbplats och vill ha en unik, relevant miniatyrbild. Hjälp?

    21. Hej, jag ville inkludera Worpress SEO by Yoast men jag är inte säker på om den senaste versionen är kompatibel med min version av Worpress (4.2.2) vet du om det är säkert att aktivera?

      Tack allihopa

    22. Måste min Facebook-profil vara offentlig för att mitt Facebook-användar-ID ska vara bra att använda här?

    23. Jag har lagt till koden för att manuellt lägga till detta i mitt tema. Men saker och ting fungerar inte. Måste min profil vara offentlig för att mitt Facebook-användar-ID ska vara tillgängligt?

    24. Är detta fortfarande giltigt idag? Jag provade det och det fungerar, men jag märkte följande i koden: “xmlns:fb=”http://www.facebook.com/2008/fbml”‘;

      Är inte 2008 lite gammalt? Finns det ett nyare protokoll vi borde använda idag?

    25. Hej, tack för att du postade. Jag har en fundering kvar. Jag förstod att i varje inlägg är dynamiskt konstruerat av de funktioner du förklarade så bra. Vad jag inte kan lista ut är var variablerna som anropas av den funktionen definieras och lagras. När du sätter property=\"og:type\" content=\"article\", OK du definierar med en fast sträng. Men när du använder: property=\"og:title\" content=\"'. get_the_title() . '"', var kommer funktionen get_the_title() att hämta den ifrån? Hur kan jag i förväg definiera dessa värden för varje inlägg på ett sätt som koden plockar rätt meta-data för varje parameter?

      • get_the_title() hämtar din inläggstitel. Om du vill använda något annat kan du alltid hämta värdet från en metaruta. Med pluginet Advanced Custom Fields skulle det vara något i stil med get_field("my_field"), eller med ett vanligt WordPress anpassat metafält skulle det vara get_post_meta($post->ID, "my_field", true). Se get_post_meta()

    26. Väl förklarat! Jag försöker lista ut var jag kan lägga till koden för att kontrollera storleken på den utvalda bilden, eftersom FB behöver en storlek med minst 200 pixlar för både bredd och höjd, annars kommer den att använda en annan bild från inlägget.
      All hjälp vore stor!

    27. Jag har försökt använda Yoast för att aktivera mina metadata så att jag kan använda Rich Pins på Pinterest. Jag har gjort vad den här handledningen säger, men Pinterest känner fortfarande inte igen mitt inlägg. Finns det ett annat plugin jag kan prova?

    28. Jag lade till Yoast-pluginet och det finns inga sociala alternativ. Snälla hjälp mig. Jag är desperat med detta problem.

      • När du väl har installerat Yoast, titta under SEO » Dashboard » Titles & Metas och under det finns Social.
        I Social bör du aktivera "Lägg till Open Graph-metadata" under fliken Facebook.

        • Det här alternativet finns helt enkelt inte med v4.6 av pluginet.
          Under SEO >> Dashboard är flikarna jag har: Dashboard, Allmänt, Funktioner, Företagsinformation, Webmasterverktyg och Säkerhet. Ingen omnämning av Titlar & Metas eller Social.

          Är detta för att jag inte har konfigurerat en Facebook-profil? Detta borde väl inte behövas bara för att kunna konfigurera OG-grejer!

    29. Jag lade till social delning i mallen för sökresultat, så varje utdrag har en delningsknapp MEN metadata som delas är rörig och okontrollerbar med detta, finns det ett sätt att få detta att fungera bättre när det finns 20 resultat på samma sida med olika metabeskrivningar för varje?

    30. Hej, kan du hjälpa mig? Jag lade till koden i funktionen och vad måste jag lägga till i head?

    31. Här är också en fin förbättring för att göra ett undantag för hemsidan:

      if (is_front_page()){
      echo ”;
      echo ”;
      echo ”;
      }else{
      echo ”;
      echo ”;
      }

    32. Jag har laddat ner Yoast-pluginet och konfigurerat det för min hemsida, men när jag anger webbplatsen på Facebook visas fortfarande inte bilden jag har angett, eller textutdraget jag har skrivit.
      Jag kan inte heller hitta min Facebook-URL med länken du gav, den ger mig bara ett fel...
      Jag försökte felsöka men det står att Facebook-sidor inte kan felsökas och att de inte har någon cache.
      Sååå... ingenting har fungerat hittills!

    33. Hej där,

      Jag har SEO Yoast och jag laddade upp den nya bilden och det fungerar fortfarande inte på Facebook……???

    34. Jag ville bara tacka dig för denna mycket grundliga beskrivning av processen att ansluta Facebook till din WordPress-sida. Jag har försökt göra det i dagar nu och följt andra webbplatser och rekommendationer. Ikväll stötte jag på din sida från en Google-sökning och pang, det fungerade. Hurra! Tack så mycket.

    35. Tack för denna information. Det var verkligen lätt att följa. Jag laddade upp Yoast-pluginet och följde alla steg och sparade, men miniatyrbilden är fortfarande bara en tom ruta. Tar det lite tid att spridas? Behöver jag logga ut och in igen på Facebook? eller Wordpress?

    36. Hej! När jag ersätter den här länken med mitt namn http://graph.facebook.com/syedbalkhi fick jag det här felet

      { "error": { "message": "(#803) Kan inte fråga användare efter deras användarnamn (mahm0od)", "type": "OAuthException", "code": 803 } }

      Någon lösning?

    37. Hej allihopa, jag har problem med og:description, i princip saknas all formatering på den delade sidan. Nya rader respekteras inte, hur kan jag kontrollera det?
      Tack!

    38. Tack för detta. Jag vill dela länkar direkt från min webbplats med hjälp av sociala knappar. Men när jag klickar på till exempel Facebook-delningsknappen, använder bilden och beskrivningen fortfarande tidigare information. Även om jag har uppdaterat bilden och beskrivningen med Yoast SEO och specifikt anpassat bilden och beskrivningen för det inlägget. Kan jag få veta vad jag gjorde fel?

    39. Tack. Jag kan inte säga hur länge jag har försökt att lista ut detta. Lätt att göra med ZiPLIST för recept men kunde inte lista ut det för artiklar.

    40. Hej! Jag har ett problem som jag inte vet hur jag ska lösa. När jag försöker dela en länk på Facebook från min blogg, eller en specifik sida, visas detta meddelande "sidan hittades inte" eller länken med symboler som jag inte förstår. Jag kontrollerade länkarna med objektfelsökaren och detta är vad som visas: obligatorisk egenskap 'og:title' av typen 'string' tillhandahölls inte. Hur kan jag lösa det, snälla?

    41. @ Syed Balkhi. —– Vill bara fråga dig detta, efter att jag har ställt in alla taggar och fått ett rent debug-testresultat utan några varningar, när någon klickar på Facebook-gilla-knappen som jag använder på min webbsida, visas den inte i Facebooks tidslinje, den visas bara i avsnittet senaste aktivitet, varför är det så? Finns det något annat jag måste lägga till för att den ska visas direkt i nyhetsflödet när de klickar på GILLA-knappen??????

    Lämna ett svar

    Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt vår kommentarspolicy, och din e-postadress kommer INTE att publiceras. Använd INTE nyckelord i namn fältet. Låt oss ha en personlig och meningsfull konversation.