Okay so Twitter Cards can be a bit of a pain to set up when they don’t just work straight away. It’s a bit of a faff with image sizes & meta tags and I was back and forth on the Twitter card validator a fair few times before I was happy with how they looked.
Hopefully this guide below will save you some time when setting them up yourself.
Twitter cards are even more important now that Twitter are choosing to expand these cards automatically on mobile. This means adding an image to your Tweet is not as necessary as it used to be. This is because if you have Twitter cards set up on your blog an image and link preview (see TechCrunch tweet below) will automatically show up on mobile anyway.
JM Twitter Cards Plugin for WordPress
The easiest way to get Twitter cards on your blog if you are using WordPress is to download the JM Twitter Cards Plugin. This will add the relevant meta tags to your blog for you.
They will something like this, with the parts in red referencing to your blog rather than mine:
<meta name=”twitter:card” content=”summary_large_image”/>
<meta name=”twitter:title” content=”That Social Media Girl – A blog about social media“/>
<meta name=”twitter:site” content=”@ThatSMGirl“/>
<meta name=”twitter:domain” content=”That Social Media Girl“/>
Large Image & Summary Cards for your blog posts
1. Within the settings of the JM Twitter plugin add your Twitter account and then the Twitter account of the website.
2. Next select ‘Summary below large image.’
3. Then select ‘no’ if you want Twitter Cards to take text from your blog rather than your ‘home meta description’ (which you will fill in in a minute).
NB – I choose the ‘no’ option to add the Open Graph tags to the site as my Yoast SEO plugin already does this and I don’t want double OG tags on the page. That can cause issues.
4. You have the option of adding a fallback image incase for some reason your blog image isn’t picked up. It gives you specific sizes for these images but I had to proportionally scale the 280×150 size to 1200×623 to get an image that wasn’t pixelated. Your image also has to be under 1MB.
So I uploaded an image here 1200×623 and selected the image size to be 280x150px. Hit the save button.
5. Now you need to validate your Twitter cards. Login to your website’s Twitter account and go to – https://cards-dev.twitter.com/validator.
6. Take your blog url and paste it in the validator. Twitter will now ask you to fill in some information again to validate your card.
N.B this validation will fail unless you fill in this information exactly as you did in the JM Twitter Cards Plugin. This IS case sensitive so you need to copy and paste exactly what you entered in the JM Twitter Cards plugin. Make sure there are no spaces and the caps are the same.
7. Once successful Twitter will send you an email confirmation. To test your Twitter cards you can take a URL of one of your blog posts and paste it in the validator. You can also check within Twitter itself. Just tweet the link (and click the view summary option if on desktop) to see the Twitter card appear.
Player Cards for your video blog posts.
Now if you embed YouTube videos on your blog you will want to know how to add a player card to these posts. By having a Twitter player card on your blog it means when you tweet the link to the relevant blog post the YouTube embed video will show up in your tweet (just like it does when you tweet a link to a YouTube video directly.) So now you can share the link to your website instead of YouTube but still have the option for people to watch the video within Twitter. AWESOME! 😀
Now that you have the JM Twitter cards plugin installed you will see some options to edit your Twitter cards when you edit each individual blog posts in the backend of WordPress.
1. Go to the blog post with the YouTube video embedded init.
2. Scroll down past your article, you will see a section on Twitter cards. Here you can select the card type as ‘player’ instead of large summary.
3. Now where it says URL of iFrame player (MUST BE HTTPS) you need to add a link that looks like this: https://www.youtube.com/embed/RRCL7PpoGqs.
N.B. To get this link head to your YouTube video click the embed button to get the embed link which will look like this – <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/RRCL7PpoGqs?list=PLzbgofgd6fpcgIWyb_xVGpGedYNSvfpr7” frameborder=”0″ allowfullscreen></iframe>
and just take out the part highlighted in red. To test this works you should be able to copy and past that section of the link into your browser and be able to play the video.
If you add another image to be the thumbnail of the video make sure you add the same “width” and “height” of the image to the player width and height options.
4. Save your changes and update your blog post. When you tweet your link you should see the video embed within Twitter. BOOM!