Need help to add Twitter meta tags to your blogger. Here is the step by step tutorial for how to add, implement or setup Twitter cards social media meta tags to your blogger with images to make your blogger links look better on Twitter.

How To Add Twitter Cards Meta Tags To Blogger

The Twitter cards meta tags were the social media meta tags for Twitter which enable any webpage of your blog to become a rich object in social graph. In short when someone tweet your blog post, the tweeted item looks better on Twitter. It works as Facebook Open Graph works for Facebook posts. For example :

If you posted a link of any of your post on Twitter without setting up Twitter cards tags,
it will look like this :

how to add twitter cards to blogger
twitter tweets without twitter cards blogger


Which is not an impressive piece of content. A social media user cancel this instead of tweeting it, But after adding the Twitter cards meta tags it looks like this :


twitter tweets with twitter cards blogger



This is more likely to get clicked and Tweeted by users, so if you want to add, implement or setup Twitter cards social media meta tags to your blogger just follow the given step by step tutorial with images :


Note : If you have already added Facebook open graph tags in your blogger, then you have to add only basic tags because twitter can fetch data from open graph tags except few.

Steps : How To Add Open Twitter Cards Tags To Blogger


Option 1 : If you have already added Open Graph tags for Facebook.


Step 1. Log in to your Blogger account, then go to Dashboard > Template > Edit HTML.


Edit blogger template


Step 2. Click anywhere inside the Template code, then search for the following code ( CTRL+F ) :


<head>


Step 3. Add this code just below it.


<meta content='summary_large_image' name='twitter:card'/>
<meta content='@your-name' name='twitter:site'/>
<meta content='@your-name' name='twitter:creator'/>


adding twitter cards tags to blogger



Step 4. Configuration of Twitter cards tags :


  • Replace your-name with your name or with your blog title.
  • ( Optional ) Change summary_large_image with the type of twitter card.

Types of Twitter card :


  • summary: Default Card, including a title, description, thumbnail, and Twitter account attribution.
  •  summary_large_image: Similar to a Summary Card, but with a prominently featured image ( Recommended ). For more info click here.


Step 5. Click on Save Template.



Option 2 : If you have not added Open Graph tags for Facebook.


Step 1. Log in to your Blogger account, then go to Dashboard > Template > Edit HTML.


Edit blogger template


Step 2. Click anywhere inside the Template code, then search for the following code ( CTRL+F ) :


<head>


Step 3. Add this code just below it.


<meta content='summary_large_image' name='twitter:card'/>
<meta content='@your-name' name='twitter:site'/>
<b:switch var='data:blog.pageType'>
<b:case value='index'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:default/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
</b:switch>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<meta content='@your-name' name='twitter:creator'/>
<b:switch var='data:blog.pageType'>
<b:case value='item'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:default/>
<meta content='img-url-for-home-page' name='twitter:image'/>
</b:switch>


adding twitter cards meta tags to blogger



Step 4. Configuration of Twitter cards tags :


  • Replace your-name with your name or with your blog title.
  • ( Optional ) Change summary_large_image with the type of twitter card.
  • Replace img-url-for-home-page with url of the image you want to show for homepage.

Types of Twitter card :


  • summary: Default Card, including a title, description, thumbnail, and Twitter account attribution.
  •  summary_large_image: Similar to a Summary Card, but with a prominently featured image ( Recommended ). For more info click here.


Step 6. Click Save template.


Enjoy !


Now you will see optimized Title, description, image etc on your Twitter tweet linked with your blogger. If you have any issue use Twitter card Validator . Still not resolved comment below. Stay Updated, Browse Howbloggerz ! :)
Love it? Don't forget to Subscribe
  • Sflamesworld
    Sflamesworld
    17 October 2017 at 16:06
    thanks bro
    Saurabh Jarial
    Saurabh Jarial
    22 October 2017 at 12:02
    Thanks! Keep blogging!
  • Cheshta Sharma
    Cheshta Sharma
    12 February 2018 at 09:57
    hi I have tried everything but the changes made are not being saved. can you help.
    Saurabh Jarial
    Saurabh Jarial
    19 February 2018 at 16:16
    Hi Cheashta,
    Please contact me via contact form after applying the changes and don't forget to mention your blog address.
    I look forward to your reply.
  • Vimal..
    Vimal..
    10 March 2018 at 00:08
    Thanks it's working dude!!!
    Saurabh Jarial
    Saurabh Jarial
    11 March 2018 at 22:22
    Have fun!
  • Trillionclues
    Trillionclues
    20 June 2018 at 14:01
    Hi, Jarial

    This really helped me out after encountered numerous issues when trying to validate the Twitter card successful addition.

    Thanks once again.
    Saurabh Jarial
    Saurabh Jarial
    7 July 2018 at 17:00
    :) Happy Blogging!
  • Sanzeda
    Sanzeda
    24 August 2018 at 13:32
    The changes I made are not saved. I have tried everything I could find in the internet. Please help
    Saurabh Jarial
    Saurabh Jarial
    6 September 2018 at 23:10
    Can you elaborate?
  • admin
    admin
    16 January 2019 at 21:27
    Thanks for the code, works perfectly!!!....
  • VERYWELL INFORMED
    VERYWELL INFORMED
    23 February 2019 at 19:56
    I tried to put twitter card code in to my blogger template nearly a hundred times, but it didn't work every time. I had got frustrated and finally your code provided in this article worked. Thank you so much.
    Saurabh Jarial
    Saurabh Jarial
    4 May 2019 at 12:15
    Have a Nice day :)
  • CDAD
    CDAD
    26 June 2019 at 20:34
    OMG! Thanks!!!! Try others codes, but only yours works :)
  • Admin
    Admin
    2 December 2019 at 21:31
    Really! Your trick is very simple. I tried many ways but they didn't work but this is working. Thank you!!!
  • K. M.zaman
    K. M.zaman
    6 December 2019 at 23:28
    Thank you. I've all set. But I confused about "Replace img-url-for-home-page with url of the image you want to show for homepage."
    I've set a url of a uploaded screen shot of my blog homepage. Is it right?
    Saurabh Jarial
    Saurabh Jarial
    6 January 2020 at 18:44
    It is a sort of big logo (landscape) which will be displayed for homepage just the way post image is used for posts.
  • Kingutaji
    Kingutaji
    28 January 2020 at 23:15
    Thanks alot it really worked for me
  • Mr. John
    Mr. John
    9 May 2020 at 13:41
    Thanks a lot
  • Ibnu'Sheikh
    Ibnu'Sheikh
    26 June 2020 at 19:49
    Thanks a million.
  • Techieds Blog
    Techieds Blog
    3 August 2020 at 19:10
    Thanks it work for me
  • Ankur Panthri
    Ankur Panthri
    16 August 2020 at 19:36
    Thanks for this tip. Worthy sharing. I am sharing it on my Quora Space-"Tech Guide"��
  • Vishal Bagul
    Vishal Bagul
    16 October 2020 at 19:14
    It's ok in validation but not working for my blog How?
    Saurabh Jarial
    Saurabh Jarial
    17 October 2020 at 19:50
    How can you say, it's not working on your blog?
  • Vishal Bagul
    Vishal Bagul
    19 October 2020 at 12:09
    Image not appearing in tweet
    Is there any activation button on validation page?I'm not able to see it on phone
    Saurabh Jarial
    Saurabh Jarial
    19 October 2020 at 19:56
    I tested your blog zhatkaa. Everything is working fine.
  • Oliver U.
    Oliver U.
    26 November 2020 at 17:50
    Thanks a lot sir, I've been searching for these codes everywhere, I appreciate your work.
  • Meira
    Meira
    1 January 2021 at 01:30
    Thank you very much!!