Här på WPBeginner har vi letat efter nya sätt att maximera vår räckvidd och påverkan. Vi började använda Twitter Cards för att kontrollera exakt hur våra tweets ser ut och för att öka engagemanget.
Hur kan Twitter Cards hjälpa till? När någon delar en länk till ditt innehåll på X (tidigare Twitter) tillhandahåller de automatiskt en bild och en beskrivning.
Detta kan avsevärt förbättra din närvaro i sociala medier och användarnas engagemang. Dessutom ser Twitter Cards till att du får kredit för ditt innehåll.
I den här artikeln visar vi dig hur du enkelt lägger till Twitter Cards på din WordPress-webbplats. Gör dig redo att få dina tweets att glänsa och få mer uppmärksamhet på sociala medier,

Varför använda Twitter Cards i WordPress?
Twitter Cards allow you to add a title, summary, image, and video or audio file to your tweet. På så sätt är det mer troligt att du får fler clicks och retweets.
Du kan se ett live-exempel genom att gå till vår WPBeginner page på X.

Den största fördelen med att ha Twitter Cards är att de ökar antalet personer som följer dina X-konton genom tillskrivning av content. Ofta tweetar folk dina links utan att ge dig rätt kredit.
Säg till exempel att @syedbalkhi retweetar ett post från @wpbeginner utan attribution, och andra retweetar @syedbalkhi. Då är användare som gillar dessa retweets mer benägna att följa @syedbalkhi än @wpbeginner.
Ofta gör content curates detta för att hålla tweetlängderna korta och säkerställa retweets av sina egna tweets.
Med Twitter Cards är detta problem löst eftersom du får kredit till din WordPress website från varje tweet som nämner din artikel.
Nu när du har lärt känna fördelarna med Twitter Cards ska vi ta en titt på hur du implementerar dem i WordPress. Vi kommer att täcka två metoder och visa dig hur du testar och bekräftar dina Twitter Cards:
Metod 1: Använda AIOSEO Plugin för att lägga till Twitter Cards (rekommenderas)
Det enklaste sättet att add to Twitter Cards till din website är att använda All in One SEO (AIOSEO) plugin för WordPress. Det är det bästa pluginet för sökmotorsoptimering för WordPress och används av över 3 miljoner websites.
Först måste du installera och aktivera pluginet AIOSEO. För mer details, följ vår Step-by-Step tutorial om hur du installerar ett WordPress plugin.
Du kan använda den gratis versionen av AIOSEO eftersom den erbjuder en utvald funktion för att ställa in Twitter Cards på din WordPress website.
När pluginet är aktivt går du till ditt WordPress admin area och navigerar till All in One SEO ” Social Networks. Klicka sedan på tabben ”X (Twitter)” och se till att alternativet ”Aktivera X-kort” är aktiverat.

När du har aktiverat Twitter Cards kan du ändra deras appearance med hjälp av olika inställningar.
AIOSEO låter dig välja standardkorttyp för ditt content. Pluginet kommer att ställa in ”Sammanfattning” som standardkorttyp, som visar titeln, sammanfattningen och thumbnail-bilden för ditt innehåll.
Men du kan ändra det till ”Summary with Large Image” från rullgardinsmenyn, och Twitter kommer att visa din tweet med en stor image.

Efter det måste du välja Standard Post Image Source. Det är den image du vill visa på dina Twitter Cards.
Det finns olika alternativ att välja mellan med hjälp av rullgardinsmenyn. Du kan t.ex. ladda upp eller välja en standardbild som ska visas i X-kortet (Twitter) eller välja den utvalda bilden, bifogad bild, den första bilden i innehållet m.m.

Next, add to a Standard Post X Image, which will be used as a backup in case your content does not have an image.
Till exempel, om din bildkälla för inlägg är en featured image, men inlägget saknar en featured image, kommer X att använda standardbilden istället.

Notis: AIOSEO erbjuder fler alternativ för att visa ytterligare data som post författare och den tid det skulle ta att läsa en artikel.
Det finns också ett alternativ för att ställa in standardkällan för Term Image Source, men du behöver AIOSEO Pro eller en högre licens för att använda den här funktionen.
Nu, om du rullar ner, kommer du att se inställningarna för home page för Twitter. Tillägget kommer att visa en preview av hur din home page kommer att se ut på ett Twitter Card.

Under denna section kan you ändra Card Type och add to en Home Page Image.
Detta liknar de steg vi visade tidigare, men skillnaden är att dessa inställningar gäller för din home page.

Därefter anger du en Home Page Rubrik och Description som kommer att visas på Twitter Card.
När detta är gjort, clickar du på knappen ”Save Changes”.

Notis: AIOSEO låter dig också ändra inställningarna för X (Twitter) Card för enskilda poster och pages.
För att göra det, edit någon blogginlägg eller page och rulla sedan ner till AIOSEO Settings i content editor. Klicka nu på tabben ”Social” och select ”X (Twitter)”.

Tillägget visar en preview av ditt posts X Card och ger dig alternativet att använda data från Facebook tabs. Det låter dig också editera X-titeln och description.
Du kan skriva en new titel och description eller använda smarta taggar. Om du till exempel använder taggen ”+ Post Rubrik” ovanför fältet Twitter Rubrik, kommer AIOSEO automatiskt att använda titeln på ditt post i Twitter Card.

Därefter rullar du ner och väljer Image Source för ditt Twitter Card. Använd rullgardinsmenyn för att välja den image du vill visa för ditt inlägg, gillar en utvald image, attachment image, första image i content, och så vidare.
Slutligen kan du välja Twitter Card Type från rullgardinsmenyn. Som standard kommer AIOSEO att ställa in den på ”Summary”, men du kan ändra den till ”Summary with Large Image”.

Därefter uppdaterar eller publicerar du ditt blogginlägg. Du har nu utan problem addat Twitter Cards till din WordPress website.
Metod 2: Lägga till Twitter Cards i WordPress (kodmetod)
Denna metod kräver att kod läggs till i filerna för ditt tema eller barntema. Öppna bara header.php-filen eller använd det gratis pluginet WPCode för att add to denna custom-kod precis före taggen </head>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?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 värdet för ”twitter:card” på rad 14 till ”summary_large_image” om du vill visa ett summary-kort med en stor image.
Om du inte vet hur man arbetar med PHP eller om du runar på issues med metod 2, vänligen använd metod 1.
Testa och bekräfta dina Twitter Cards
Innan links från din WordPress site börjar visa Twitter Cards, måste du först kontrollera det i Twitter Card Validator.
Bara heada över till Card Validator page på Twitter utvecklarnas website. Enter URL:en till ett post från din WordPress site och click på knappen ”Preview card”.

Card Validator visar inte längre en preview av tweeten, men den visar en logging om Twitter-kortet hämtar utan problem eller ej.
Update: Tidigare var du tvungen att ansöka om att få delta i Twitter Cards. Twitter har dock implementerat ett system som automatiskt whitelistar domäner när du testar dem med giltigen eller bara delar en URL på Twitter.
Expertguider om hur du använder Twitter med WordPress
Vi hoppas att den här artikeln hjälpte dig att lägga till Twitter-kort i WordPress. Du kanske också vill se några andra guider relaterade till att använda X (Twitter) med WordPress.
- Så här tweetar du automatiskt när du publicerar ett nytt post i WordPress
- Så här lägger du till Twitters delnings- och retweetknapp i WordPress
- Så här embedar du faktiska tweets i blogginlägg i WordPress
- Hur man fixar trasiga Twitter Cards Images i WordPress
- Hur man visar författarens Twitter och Facebook på sidan Profil
- Bästa Twitter tillägg för WordPress (Jämförelse)
- Så här displayed du senaste tweets i WordPress (steg för steg)
- Så här addar du dina social media feeds till WordPress (steg för steg)
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Aramide
You’ve been so awesome in passing great information on WordPress. Your tutorials are so great and are wonderful learning materials. Thanks for always being there for us.
WPBeginner Support
Goad you’ve found our content helpful
Admin
Dee
Hi! I have a free wordpress.com blog, and I’m not sure how to add twitter cards to that. I don’t know if I can edit the html of my theme without a plugin (if I can, I don’t know how to find the html code) (super new to WP) is there any way to add twitter cards for free
WPBeginner Support
You would need to reach out to WordPress.com for what they currently have available.
Admin
MStokely
Thank you! It took awhile for this to work I guess because cache needed to be cleared but this is the ONLY solution I found that worked.
WPBeginner Support
Glad our guide was able to help
Admin
Pierre
Question about this, when I am posting a link from my site on Twitter, the preview image is only showing the WordPress W logo instead of what I set in Yoast. Is it just a matter of waiting it out or a, I doing something wrong?
WPBeginner Support
You may want to ensure you’ve cleared any caching on your site for twitter to get the correct image and after that, you would need to wait for Twitter’s cache to clear.
Admin
neo
thanks for the guide, adding Twiter Cards through Yoast was the easies way for me
WPBeginner Support
Glad our article could help
Admin
MIke
Hey there, very late to this article but am wondering how to amend the php code to produce the large image with summary card.
I’ve given it a shot but not managed it yet. Ideas and advice appreciated.
cheers
Mark Larson
I’m getting this error:
”Notice: Use of undefined constant full – assumed ’full’ in”
Not sure how to get rid of it.
Ted Bergman
Thanks for this post. When I need to know how to do something on WordPress I come here first. Your easy to understand instructions are priceless!
Sarah Bridge
I’ve done all the steps using Yoast and validated my url – but there is still no image coming up when I post my URL on Twitter? It said this:
Sarah Bridge
The card for your website will look a little something like this!
and underneath on the right hand side it has the correct words but on the left hand side where an image should be there’s nothing but a grey box with what looks like a grey scroll in it. You can click on it to get to my website but I’d like a image there rather than a grey box. Any thoughts?
Daniela
Have successfully done this in the past. However, it was always when using summary card with large image (which is set as the default in my Yoast settings). Now trying to post summary card (regular, not large image), but Yoast is overriding it to summary card large image. How do I prevent this?
As a note, I’m doing both methods: adding info to Yoast plug in and writing metadata tags in a plug in.
Chinny
This was very helpful! Thanks. Did it and the twitter cards automatically came up even for previous tweets.
Haris
ERROR: Required meta tag missing (twitter:text:description)
Getting this error