Nybörjarguide om hur man lägger till Twitter-kort i WordPress

Har du någonsin undrat varför vissa tweets får betydligt fler klick än andra, även när innehållet är liknande? Hemligheten ligger ofta i hur innehållet visas när det delas. Vanliga text-tweets scrollas förbi, men tweets med iögonfallande förhandsvisningar fångar uppmärksamheten och driver klick.

Här på WPBeginner använder vi Twitter-kort för att styra hur våra tweets ser ut och för att öka engagemanget. Vi ser en märkbar ökning av vår trafik och engagemangsgrad på sociala medier.

Det bästa? Att lägga till Twitter Cards på din WordPress-webbplats kräver inga kodningskunskaper eller teknisk expertis. Vi visar dig flera metoder för att ställa in detta, från enkla plugin-lösningar till manuell implementering, så att du kan välja vad som fungerar bäst för din kunskapsnivå.

Varför använda Twitter-kort i WordPress?

Twitter Cards låter dig lägga till en titel, sammanfattning, bild och video- eller ljudfil till din tweet. På så sätt är du mer benägen att få fler klick och retweets.

Du kan se ett liveexempel genom att gå till vår WPBeginner-sida på X.

Den största fördelen med Twitter Cards är att de ökar antalet personer som följer dina X-konton genom innehållsattribution. Ofta twittrar folk dina länkar utan att ge dig korrekt kredit.

Till exempel, säg att @syedbalkhi retweetar ett inlägg från @wpbeginner utan attribution, och andra personer retweetar @syedbalkhi. Då är användare som tittar på dessa retweets mer benägna att följa @syedbalkhi än @wpbeginner.

Ofta gör innehållskuratorer detta för att hålla tweetlängderna korta och säkerställa retweets av sina egna tweets.

Med Twitter Cards löses detta problem eftersom du får kredit till din WordPress-webbplats från varje tweet som nämner din artikel.

Nu när du känner till fördelarna med Twitter-kort, låt oss titta på hur du implementerar dem i WordPress. Vi kommer att täcka två metoder och visa dig hur du testar och validerar dina Twitter-kort:

1. Använda AIOSEO-plugin för att lägga till Twitter-kort (rekommenderas)
2. Lägga till Twitter-kort i WordPress (kodmetod)
3. Testa och validera dina Twitter-kort
4. Vanliga frågor
5. Experthandledningar om att använda Twitter med WordPress

Metod 1: Använda AIOSEO Plugin för att lägga till Twitter-kort (rekommenderas)

Det enklaste sättet att lägga till Twitter-kort på din webbplats är att använda All in One SEO (AIOSEO)-plugin för WordPress. Det är det bästa WordPress SEO-pluginet och används av över 3 miljoner webbplatser.

Först måste du installera och aktivera AIOSEO-pluginet. För mer information, följ vår steg-för-steg-handledning om hur man installerar ett WordPress-plugin.

Du kan använda gratisversionen av AIOSEO eftersom den erbjuder en funktion för att ställa in Twitter-kort på din WordPress-webbplats.

När pluginet är aktivt, gå till ditt WordPress-adminområde och navigera till All in One SEO » Social Networks. Klicka sedan på fliken 'X (Twitter)' och se till att alternativet 'Aktivera X-kort' är aktiverat.

När du har aktiverat Twitter Cards kan du ändra deras utseende med olika inställningar.

AIOSEO låter dig välja standardkorttyp för ditt innehåll. Pluginet ställer in 'Sammanfattning' som standardkorttyp, som visar titel, sammanfattning och miniatyrbild för ditt innehåll.

Du kan dock ändra det till ‘Summary with Large Image’ från rullgardinsmenyn, och Twitter kommer att visa din tweet med en stor bild.

Därefter måste du välja Standardbildkälla för inlägg. Det är bilden du vill visa på dina Twitter-kort.

Det finns olika alternativ att välja mellan via rullgardinsmenyn. Du kan till exempel ladda upp eller välja en standardbild som visas i X (Twitter) Card eller välja den framhävda bilden, bifogad bild, den första bilden i innehållet med mera.

Lägg sedan till en standardbild för inlägg (Default Post X Image), som kommer att användas som en reserv om ditt innehåll inte har någon bild.

Till exempel, om din inläggsbildkälla är en utvald bild, men inlägget saknar en utvald bild, kommer X att använda standardbilden istället.

Förutom det erbjuder AIOSEO fler alternativ för att visa ytterligare data som inläggsförfattare och den tid det tar att läsa en artikel.

Det finns också ett alternativ för att ställa in Standardbildkälla för termer, men du behöver AIOSEO Pro eller en högre licens för att använda den här funktionen.

Nu, om du scrollar ner, ser du startsidans inställningar för Twitter. Pluginet kommer att visa en förhandsgranskning av hur din startsida kommer att se ut på ett Twitter-kort.

Under den här sektionen kan du ändra korttyp och lägga till en startsidesbild.

Detta liknar stegen vi visade tidigare, men skillnaden är att dessa inställningar är för din hemsida.

Ange sedan en sidtitel och beskrivning som kommer att visas på Twitter-kortet.

När det är gjort, klicka på knappen 'Spara ändringar'.

Förutom det låter AIOSEO dig också ändra X (Twitter) kortinställningarna för enskilda inlägg och sidor.

För att göra det, redigera ett blogginlägg eller en sida och scrolla sedan ner till AIOSEO Settings i innehållseditor. Klicka nu på fliken 'Social' och välj 'X (Twitter)'.

Pluginet visar en förhandsgranskning av ditt inläggs X-kort och ger dig möjlighet att använda data från Facebook-fliken. Det låter dig också redigera X-titeln och beskrivningen.

Du kan skriva en ny titel och beskrivning eller använda smarta taggar. Om du till exempel använder taggen '+ Post Title' ovanför fältet Twitter Title, kommer AIOSEO automatiskt att använda ditt inläggs titel i Twitter-kortet.

Skrolla sedan ner och välj Bildkälla för ditt Twitter-kort. Använd rullgardinsmenyn för att välja den bild du vill visa för ditt inlägg, till exempel en utvald bild, bifogad bild, första bilden i innehållet och så vidare.

Slutligen kan du välja typ av Twitter-kort från rullgardinsmenyn. Som standard ställer AIOSEO in det på 'Sammanfattning', men du kan ändra det till 'Sammanfattning med stor bild'.

Uppdatera eller publicera sedan ditt blogginlägg. Du har nu framgångsrikt lagt till Twitter Cards på din WordPress-webbplats.

Metod 2: Lägga till Twitter-kort i WordPress (kodmetod)

Den här metoden kräver att kod läggs till i dina tema- eller barntemafiler. Öppna helt enkelt header.php-filen eller använd WPCode gratis plugin för att lägga till denna anpassade kod precis före </head>-taggen:

<?php
#twitter cards hack
if(is_single() || is_page()) {
  $twitter_url    = get_permalink();
 $twitter_title  = get_the_title();
 $twitter_desc   = get_the_excerpt();
   $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_thumb  = $twitter_thumbs[0];
      if(!$twitter_thumb) {
      $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
  $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<?
  if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
  }
}
?>

Du kan ändra ‘twitter:card’ värdet på rad 14 till ‘summary_large_image’ om du vill visa ett sammanfattningskort med en stor bild.

Om du inte vet hur du ska arbeta med PHP eller stöter på problem med Metod 2, använd då Metod 1.

Testa och validera dina Twitter-kort

Innan länkar från din WordPress-webbplats börjar visa Twitter Cards måste du först kontrollera dem i Twitter Card Validator.

Gå helt enkelt till sidan Card Validator på Twitters utvecklarwebbplats. Ange URL:en för ett inlägg från din WordPress-webbplats och klicka på knappen 'Preview card'.

Kortvalideraren visar inte längre en förhandsgranskning av tweeten, men den visar en logg över huruvida Twitter-kortet laddades framgångsrikt eller inte.

Vanliga frågor

Vi har gått igenom grunderna för att lägga till Twitter Cards på din WordPress-webbplats, men du kanske fortfarande har några frågor. Nedan följer de vanligaste frågorna vi får om Twitter Cards och deras implementering.

1. Fungerar Twitter-kort automatiskt när jag lägger till dem på min WordPress-webbplats?

Twitter-kort bör fungera automatiskt när du har implementerat metataggarna korrekt på din webbplats. Det kan dock ta lite tid för Twitter att känna igen och börja visa dina kort. Du kan påskynda processen genom att använda Twitters Card Validator-verktyg för att testa dina URL:er och begära att Twitter genomsöker din webbplats.

2. Vad är skillnaden mellan Summary och Summary med Large Image Twitter Cards?

Den huvudsakliga skillnaden är bildstorleken och layouten. Sammanfattningskort visar en liten miniatyrbild på vänster sida av tweeten, medan sammanfattningskort med stor bild visar en stor, framträdande bild ovanför texten. Kort med stor bild tenderar att få mer engagemang men tar upp mer utrymme i tidslinjen.

3. Kan jag använda olika typer av Twitter-kort för olika sidor på min webbplats?

Ja, du kan absolut använda olika typer av Twitter-kort för olika sidor. De flesta SEO-plugins som All in One SEO (AIOSEO) låter dig ställa in specifika Twitter-kortinställningar för enskilda inlägg och sidor. Detta ger dig flexibilitet att välja den bästa korttypen för varje innehåll.

4. Varför visas inte mina Twitter-kort när jag delar mitt innehåll?

Det finns flera anledningar till varför Twitter-kort kanske inte visas: metataggarna är inte korrekt implementerade, Twitter har ännu inte genomsökt din webbplats, det finns fel i din kortmarkup, eller så uppfyller dina bilder inte Twitters krav. Använd Twitters Card Validator för att felsöka och identifiera eventuella problem.

5. Måste jag godkänna mina Twitter-kort hos Twitter innan jag använder dem?

Nej, Twitter kräver inte längre godkännande för Twitter Cards. Så länge dina kort är korrekt implementerade och följer Twitters riktlinjer, bör de visas automatiskt när ditt innehåll delas.

6. Vilka bildstorlekar fungerar bäst för Twitter Cards?

För Summary-kort, använd bilder som är minst 144×144 pixlar (kvadratiskt format fungerar bra). För Summary with Large Image-kort, använd bilder som är minst 300×157 pixlar med ett bildförhållande på 1,91:1. Den maximala filstorleken för bilder är 5 MB, och Twitter stöder JPG-, PNG-, WebP- och GIF-format.

Experthandledningar om att använda Twitter med WordPress

Vi hoppas att den här artikeln hjälpte dig att lägga till Twitter-kort till WordPress. Du kanske också vill se några andra guider relaterade till att använda X (Twitter) med WordPress.

• Hur du automatiskt twittrar när du publicerar ett nytt inlägg i WordPress
• Hur man lägger till Twitter-delnings- och retweetsknapp i WordPress
• Hur man bäddar in faktiska tweets i WordPress-blogginlägg
• Hur man fixar trasiga Twitter-kortbilder i WordPress
• Hur man visar författarens Twitter- och Facebook-information på profilsidan
• Bästa Twitter-plugins för WordPress (jämförda)
• Hur man visar de senaste tweetsen i WordPress (steg för steg)
• Hur man lägger till dina sociala medier-flöden till WordPress (steg för steg)

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.