There is no secret to the fact that having beautiful pictures on your blog posts is the key to social media engagement. Adding beautiful images to your posts is a must if you want to have successful results, and have your followers and visitors sharing your post all over their social media.
Everybody is drawn to beautiful images because they entice all senses, in addition to summarizing the whole concept of your post in one simple glance. To me, personally, it goes like this: "if I like what I see, I'll read it". Surveys show that posts with images get shared a whooping 87% more that posts with no images at all, so indeed it is major component of a successful post. Crazy enough, many people share posts, just because they fall in love with the image, even if they did not completely read it.
​. . . so this is how this blog post was born:
For the longest time, I wanted to create a Twitter account for my blog. I've heard great things about the benefits of having a Twitter account for your blog, but for some reason, it felt more complicated and intimidating (at least to me), so I kept putting in the back burner. So, back on June 2016, I finally decided to take the plunge, and I created my Twitter account @JoyfulSavings, and added the Twitter share button to my blog. I was so excited about it until I did my first Twitter share test!!!! — Immediately I noticed that the Tweet was posting but WITH NO LINKED IMAGE! I was convinced that I was doing something wrong, because almost all my fellow bloggers had perfect Twitter shares with linked images . . . ​In case you are not sure what I'm referring to, this is what I mean:
​I was so confused, that I even asked several of my blogger friends what they were doing to make the blog image to show on their Twitter shares, and they all told me that they were not doing anything special at all.
So here I go on my internet hunt to find out exactly what I was doing wrong, and after days and days of research, and confusing articles, I finally figured it out. It was not something I was doing wrong, after all!
I know nothing at all about coding or programming of social media, but I do know for a fact that all major social media platforms like Facebook, Pinterest, Instagram, StumbleUpon, etc, automatically 'fetch' the blog post images (at least one, whenever you have them), every time your blog posts are shared on social media . . . however . . .
for some reason, Twitter has decided not to work the same way, and not to automatically fetch the image/s of your blog post. They are the only major social media platform that I know of that does not do it! So, how do you solve this problem?
A. For WordPress Users
​Most of my friend bloggers use WordPress, and through my research on the subject I discovered that, luckily, WordPress has a built-in plugin called Yoast-SEO, that when selected, it automatically adds/creates the Twitter Card to each blog post. This happens so automatically, that most of WordPress users don't even realize that it's happening, or what a blessing that plugin is. Believe or not, I've seen some WordPress bloggers not using this amazing benefit, so make sure you are not one of them! If you use WordPress, you are one of the lucky ones, and if you are not using this plugin to add the Twitter Cards, please do — it is so simple, and the benefits of adding clickable images to your Tweets are unlimited. ​ This is how you do it in WordPress (or something very alike):
Make sure that the image you want to use for your Twitter Card is at least 280px x 150px.
Image that are smaller will NOT load Image is way TOO BIG, might not load either (it happened to me once) you might have to resize and re-post
Note: Through the extend of my research, and up to this time, only WordPress was mentioned as a platform that works with Yoast-SEO plugin, which automatically creates the Twitter Card for each post.
Unfortunately, ​through my research, I also discovered that Yoast-SEO Plugin is only designed to work with WordPress (as far as I read).
​I use Weebly as my blog platform, and at this point there is no available plugin to automatically create the Twitter Cards on my blog posts, so it has to be done manually. Weebly is an amazing platform, and the cost of using and hosting a blog with them is incredibly low, compared to any other blog platform. However, since they are not a 100% blog-dedicated, there are certain limitations on what's available, though they are growing and making great additions every day! For me, not having an available plugin that automatically adds Twitter Cards to my blog posts is not a strong-enough factor to leave them, because pretty much everything they do not offer within their platform, I can easily get through free third party apps.
Even though I wasn't able to find a Twitter Card plugin that works with Weebly, after several attempts, trials, and errors, I finally figured out a 2 super easy ways to add the Twitter Cards to my blog posts. It took me forever to find a way around it, so I decided to write this post to show you how to do it, so here it goes:
B. Non-WordPress: how-to manually add Twitter Cards to your blog posts
Notes:
First, let's explain the Meta Tags:
The meta tags below, are a set of codes that allow Twitter to load an image, title, and description of your post when it is shared on Twitter; this is what is called Twitter Cards. It sounds complicated, but luckily it is pretty much a fix template, with the exception of the red-marked sections, which you have to update with the specific information of each blog post. To make it easily accesible, I copied the template and keep it handy on a Word file, and I simply update it with the information of each new post I need to create a Twitter Card for. (Once you type you Twitter Handle on the template, you can remove the red font, as you won't have to change it anymore, unless you have different Twitter accounts).
Meta Tags Template
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Description of the post under the title" /> <meta name="twitter:title" content="Post title" /> <meta name="twitter:site" content="@YourTwitterHandle" /> <meta name="twitter:image" content="http://Image address of the image you want to use" /> <meta name="twitter:creator" content="@YourTwitterHandle" />
>>To find the image address, right click on the image you want to use, and click on 'Copy Image Address'.
Now, let's create the Meta Tags
1. The Embed Code Element
2. The Image Caption
3. Validate your Twitter Card
Once the post gets published, you need to validate your twitter card to make sure it is working properly. Go to Twitter Card Validator here, or click on the image below. The Card validator screen looks like this:
Sometimes you might have to try the preview a second time for Twitter to pick up the card. If it does not show by the 2nd or 3rd attempt, there might be something wrong with the code, and you might have to review it. That's it . . . there you have how to add Twitter Cards to your Weebly Blog Post, as easy as 1,2,3! ​From now on, whenever your blog post is Tweeted/Shared, it will load the image, title, and description of the post, and when users click on the image, they will be taken directly to your website.
Other Notes:
Your Turn!
Are you a Weebly user, and you know any other tricks that can help other Weebly users, I would love to hear from you on the comments below!
Article link: http://www.joyfulsavings.com/blog/how-to-add-twitter-cards-to-weebly-blog-posts
It was wonderful to have you visiting, and to be able to share this post with you! Feel free to use the Share Buttons, to share this post with friends and Social Media! Thank you for visiting, and I look forward to seeing you again!
31 Comments
Thank you Jacky for your in-depth instructions on creating twitter cards for Weebly. You are so thorough in your tutorial which is so appreciated. I tried pasting the code into my site Header (as there are other instructions I had from Weebly about that, which worked for me).
Reply
Joyful Savings
11/15/2016 01:30:17 pm
You are welcome Leanne, it was my pleasure to spare users the headache of figuring it out themselves.
Reply
1/12/2017 01:19:58 pm
Thank you for this Jacky! I didn't know what I was doing wrong! I'm still trying to learn how to do different things and sometimes it becomes overwhelming. But, with sites like yours, I'm learning! Thanks again!
Reply
Joyful Savings
1/12/2017 08:48:41 pm
You are more than welcome Sue! This post is one of my most visited, and it has an #1 - 5 google rank. I am so glad I can help with this tutorial. It took me weeks to be able to figure out how to add Twitter Cards to my site. Thank you for your kind comment. It means the world to me to know I can be of help!
Reply
3/23/2017 12:16:38 pm
Thank you soooo much! I couldn't figure out why images weren't showing on Twitter, and your article has helped me immensely! Weebly should link this article on their forum.
Reply
Joyful Savings
3/27/2017 09:12:41 pm
You are more than welcome Sheri! — I am so happy that out of my frustration, I created this post, and that I have been able to help so many people. This is one of my best ranked and most visited posts, thought not everyone leaves a comment.
Reply
Holly S
5/2/2017 06:11:06 pm
What code do you add for the general Twitter Card?
Reply
Joyful Savings
5/2/2017 08:34:35 pm
I use the same Meta Tags Template, Holly.
Reply
Holly S
5/3/2017 02:13:54 pm
Thanks! 6/15/2017 01:40:28 am
This worked perfectly, thank you! I have a dumb question though...if I post a bitly link and that's shared, do the twitter cards still show up? I'm going to assume yes, but wondered if you had a different experience. Thanks again!
Reply
Joyful Savings
6/15/2017 10:27:43 am
I'm glad my article was helpful to you Daneen. Yes, the bitly links perfectly as long as the meta tags were set correctly. I use bitly links all the time, and the image shows perfectly on Twitter. Have a great day!
Reply
Your instruction is great and has helped fix my Weebly site's general Twitter Card. Unfortunately, placing the meta tag code on individual pages are not overridinging the one on my main SEO> header page. Nor is the twitter card code I tried placing in an individual blog post. Wondering why this might not be working? Any ideas. I have deleted all twitter card meta tags from everywhere except the main SEO> header Thanks! Lisa
Reply
Joyful Savings
9/20/2017 10:08:16 am
I wish I could tell you why, but I can't. The individual meta tags on individual pages do override the main meta tag for me (and I retested it just in case Weebly took some feature away), but it is still working. So are the meta tags for the blog posts.... Sorry, but I have no idea why it's not working for you. You might try to check the size of the image, as there are some min. and max. size requirements: (https://dev.twitter.com/cards/types/summary-large-image). Good luck!
Reply
I'm having a similar issue. I have twitter cards in some of my blog posts. I'm also trying to put a twitter card on my blog's home page. When I put it in the SEO Header Code, the twitter card of one of my blog posts overrides it. When I move it to an "embed code" box on the blog sidebar, it overrides all individual blog post twitter cards.
Reply
Hi again, Ok so I was able to get a blog post specific Twitter Card working partially buy embedding code into the beginning one post. I say partially because the copy shows correctly, but not the image. This is the post I am testing:
Reply
Joyful Savings
9/17/2017 07:41:30 pm
Hi Lisa,
Reply
9/17/2017 10:25:48 am
Thank you Jackie for this step-by-step guide! Weebly needs to step forward on their blogging features. I follow your instructions and seems to be working, except that like Lisa's comment, I cannot get the image on the card, I get a " is whitelisted for summary_large_image card" message. Any clues on this?
Reply
Joyful Savings
9/17/2017 07:47:40 pm
Hi,
Reply
9/19/2017 08:34:41 am
Hi, thanks for your quick reply. I have indeed verify those requirements and my images should be fine, that's why I don't understand why they are not showing. 10/19/2017 05:56:20 am
Thanks for the update. It was a big help for reference and helped identify the ultimate the issue for my twitter card: " are not always the same depending on the language settings on your computer, so be sure to check quotation marks!
Reply
Joyful Savings
2/25/2018 10:16:25 am
You are welcome Darren!
Reply
Joyful Savings
2/25/2018 10:14:16 am
Your are WELCOME WELCOME WELCOME Keely. It is really satisfying to know I saved so many from the frustration I went through!
Reply
Lisa
1/31/2018 04:14:51 pm
Hi,
Reply
Joyful Savings
2/25/2018 10:21:53 am
I think once I was able to create one of those, but I would have to dig it out, because I can't remember where I placed it.
Reply
Joyful Savings
3/14/2018 02:40:45 pm
Hi Lisa,
Reply
Diana
4/27/2018 12:07:05 am
Thanks! Everything works except I when I leave spaces in descriptions then it only shows the first word. Any idea why?
Reply
Joyful Savings
4/27/2018 12:43:16 pm
Hi Diana,
Reply
George
9/8/2018 03:55:49 pm
In case you're still searching for an answer on I had the same problem and found that I'd mistakenly deleted the original "straight" quotation marks at the beginning and end of the description and had replaced them with "curly" quotation marks. 12/9/2018 04:04:03 am
Thank you so much! I was getting really frustrated when sharing to Twitter just gave me a bit of my post's opening and a link. Thanks to your pre-made meta tags section, I was able to give a post a Twitter card on my first attempt!
Reply
12/9/2018 04:06:07 am
Whoops, I put my website incorrectly for my last comment.
Reply
Leave a Reply. |
Welcome to
|