Close

How To Improve SEO with Brilliant and Effective Twitter Cards

Twitter makes up a large portion of my website traffic, and users are inclined to click my link in the first place is my high quality Twitter cards.

Twitter cards convert your boring, standard URL address into a rich greeting card that’s aesthetically pleasing and much more inviting to click. Since implementing Twitter cards, I’ve seen a 30% increase in referral traffic to my website from Twitter, based on Google analytics. Twitter cards also help increase social media funnel conversion rates. You decide, which link would you rather click?

Plain, boring, sketchy. Or would you rather click..

The process of setting up Twitter cards is quite simple, but it does require some basic knowledge of HTML and the ability to modify the HEADER of your website. Here's a guide for building a website on Amazon S3.

While there are several types of Twitter cards, the most common and useful in my opinion, are the summary cards with large image.

Add The Meta Tags to Your Website Header

Start by copy + pasting the below code into the header of your website, that’s the section at the very top of your HTML document. Depending on how you host your site, your header will be accessible via an HTML file, or through header/footer injection plugins (such as on Wordpress, or Wix).

<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@alekseyweyman"> <meta name="twitter:creator" content="@alekseyweyman> <meta name="twitter:title" content="How To Improve SEO with Brilliant and Effective Twitter Cards"> <meta name="twitter:description" content="A step by step guide for improving SEO by adding Twitter cards to your website"> <meta name="twitter:image" content="linktoyourpublicallyaccesibleimage">

Modify Meta Tags

Now you need to modify the code to fit the content of your website.

  • twitter:card- leave this as the default "summary_large_image"
  • twitter:site- add your Twitter @username
  • twitter:creator- add your Twitter @username again
  • twitter:title- a concise title for your content
  • twitter:description- a thorough description of your content
  • twitter:image- direct link to the image that is shown in the card. Image needs to be exactly 2:1 aspect ratio and no bigger than 4096x4096.

Update, Save and Test

Once you update and save your website header with the modified Twitter card info, go to the Twitter card validator and test how your twitter card will look. If you receive an error or do not see your Twitter card in the preview window, go back and make sure the code is properly saved in your HTML document.

If no errors, then Voila! Now when you paste your website URL into a tweet, it will load a beautiful user-friendly Twitter card. Sit back and watch the referral traffic pour in!

If you found this article helpful, please consider sharing it using the social media icons below. For more business related guides, check out my content library!

Tagged in : TechSocial Media

Aleksey Weyman

Aleksey Weyman is a web designer, artist and creator of Millennial Moderator