How To Add Twitter Cards To Weebly Blog Posts

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:

This is how my blog posts were showing on Twitter.

This is how I wanted my blog posts to show.

​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.
Images that are smaller will NOT load
Images that are TOO BIG, might not load either (it happened to me once)
and you might have to resize and re-post

Unfortunately, ​through my research, and as of day I created this post, I also discovered that Yoast-SEO Plugin is only designed to work with WordPress.

​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  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:

•  If you are not sure if your blog platform has a plugin that creates the Twitter Cards for you: 1) consult your customer service  2) do a test by sharing one of your own posts with images on Twitter, or 3) do a Card Validation, as explained on item 3 below —  If there is an available plugin, your tweeted post will load a clickable image.
• ​I have obviously tested this method only on Weebly, but I would dare to say that it would also work on any other website that 1) allows embedded codes and/or 2) has an Image Caption field that accepts html codes. — Don't be afraid to test his method on any other website, after all, if it does not work, all you have to do is remove the codes.

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

• Update the template above, substituting the red-marked sections with your current blog post information (make sure you leave everything else intact)
• Once updated, you have 2 options to embed the tags into your post:

1.  The Embed Code Element

• Drag the Embed Code Element into your blog post
• Copy and paste there the whole updated set of Meta Tags.  To make things simple, place the Embed Code right at the very top of your blog post.  That way it will be easy to find it in the event you have to make any changes at a later time
• Update and Publish your blog post
• Validate your Twitter Card (see instructions below)

2. The Image Caption

• Right click on the first image of your post*
• Scroll down and click on Caption
• Copy and paste there the whole set of updated meta tags
• Close the image
• Update and Publish your post
• Validate your Twitter Card (see instructions below)​

​*(You can really place the meta tags in any of images, but to me, it's just easier to copy them on the first image of your blog. However, Twitter will show the image for which you used the image address for, regardless of which image you choose to save the meta tags in).

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:

• Type the url/link address of your blog post on the Card URL field
• Press on Preview Card
• Once you do that, you should see to the right of the screen the Card Preview, and how your Card will look like when someone shares your post on Twitter

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:

1. You can place a general Twitter Card on your main Settings> SEO> Header Code, and that Twitter Card will apply globally to all pages on your website, even the blog posts, when there is no other Twitter Card placed on a specific blog post
2. This one is awesome » After you place a general Twitter Card (1. above), you can still add a more specific Twitter Card on any of your pages as needed.  Simply create a Twitter Card for that page, and:  a) go to Pages   b) go to the page you want to edit   c) go to SEO Settings, and   d) paste the Meta Tags on the Header Code space.  Make sure your page is not set to ☑ Hide this page from search engines, or the Twitter Card will not be created.  (You can check that right at the bottom, under the Header Code section).
3. Once a Twitter Card has been placed on any individual Blog Post, it will override the general Twitter Card explained on #1 above.  (I tried this once on the main page of one of my blogs, and it did not work, but you are welcome to try it, in the event this has changed since then).

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

---