How to Add Thumbnail Image in Your Link | Displayed on Social Posts

How many of you faced a problem: social sharing preview missing in website links, I don’t know. But I faced this issue recently. While I’m sharing my site’s link to social channels, it didn’t preview any thumbnail. It seems odd to me.

Everything was fine. But suddenly what happened I failed to measure. Then I took a deep breath and took a break as I’m surfing in a loop. Doing the same things but didn’t find where is the fault. ?

How to Add Thumbnail Image in Your Link/Post

Suddenly one morning, I came up with an actual cause of the error. For some reason, I’ve deleted my Yoast SEO plugin a few days back. I reactivate the plugin but I’ve unintentionally skipped some essential part of configuring the Yoast Plugin. Basically, The Yoast SEO Plugin has a builtin feature. Through this feature, you can customize the meta descriptions for your social channels along with a custom thumbnail image for a specific page or post. So, if you want to provide a custom thumbnail for your page or post then you have to configure your Yoast SEO plugin correctly. ?

How to Configure the Yoast SEO Plugin?

As my primary motive in this article to help you in availing the Social Sharing Image Thumbnail or Preview feature for your Page or Post so I’m skipping the basic configuration of the Yoast SEO Plugin. You will get a detailed configuration guideline from here.

From here, the most important part starts. To activate Facebook Post Preview or Thumbnail, you have to provide Facebook App ID in Yoast SEO Plugin. Just follow the lead»

WordPress Dashboard » Left Side Menu » SEO » Social » Facebook » Enable Open Graph metadata » Add Facebook App ID
Yoast-SEO-configurtation - gtarafdar

Tada. Your Social configuration for Facebook is done. Just a minute, do you know how you can get the Facebook App Id? If your answer is no then here is your answer. Or if you are already aware of this matter then please skip this part. ?

How to Create Facebook App, App ID, and App Secret?

Without wasting your time simple easy peasy steps for you. To create a Facebook App & App ID, first of all, you have to visit the Facebook for Developers page and login with your Facebook account.

Step2- Then, at the right corner of the top navigation bar, click the My Apps link and select Add New App.

  • Enter Display Name and Contact Email.
  • Click the Create App ID button.
  • The new App will be created and redirected to the Facebook App Dashboard.

Step3- Navigate to the Settings » Basic page.

  • In-App Domains field, specify the domain name of your website (ex: Gtarafdar.com).
  • In the Privacy Policy URL field, specify the privacy policy web page URL for login dialogue (ex: https://www.gtarafdar.com/privacy-policy/)
  • Select the Category of your App.
  • Click the Save Changes button.

Stpe4- At the left navigation menu panel, click the PRODUCTS(+) link and navigate to the Add a Product page.

  • Select the Facebook Login product and click the Set-Up.
  • Select the Web as the App platform.
  • Enter the Site URL (ex: https://www.gtarafdar.com).
  • Click the Save button.

Step5- Navigate to the Facebook Login » Settings page.

  • Go to the Client OAuth Settings section. In the Valid OAuth Redirect URIs field, specify the Redirect URL of your OAuth application (ex: https://www.gtarafdar.com/facebook-login-php/).
  • Click Save Changes.

Step6- Change App Status:

  • By default, the App will be In Development mode. To change the App status in Live, click the toggle switch at the top header.
Facebook-Status - gtarafdar
  • On click the Status On/OFF switch, a confirmation dialogue will appear. Confirm to make your app public.

Finally, Navigate to the Settings » Basic page, copy the App ID and App Secret. This App ID and App secret are required to access the Facebook APIs.

Facebook App-ID - gtarafdar

In this way, you can easily create your Facebook APP ID and use it anywhere you want.

Twitter Configuration in Yoast Plugin

Now you get your APP ID and put that ID on the above mentioned filed. In the case of Twitter configuration, you don’t have to anything more. Just enable the Twitter card meta data and Select Summary with a large image from the drop-down menu of The default card type.

Twitter-Steeings gtarafdar

Note: If you want to configure your Pinterest account with your Yoast Plugin then, please visit here- Getting Pinterest Rich Pins for your Articles. You’ll get a detailed outline from the official page of Yoast Plugin.

Adding Thumbnail Image in Your Post or Page

If you don’t want to configure each page, then there is a simple solution for you. Just go to Yoast SEO Plugin’s Social Settings again and you will get a field of adding a default image for all of your pages. Simply choose your best one and select the save changes button.

default-image-selection gtarafdar

If you want to configure every page, then you have to follow this method. After creating a Page then scroll down to the om of the page. You will find the Yoast SEO Plugins Meta Description field. Navigate to Sharing Icon. Then provide a Title for your page. Following that write a Meta Description for your page. Finally, select the desired image for your page. The recommended image size for Facebook is 1200 by 630 pixels. Finally, click the update button from the top of the right menu to update your settings.

Facebook-Thumbnail-Image-setting - gtarafdar

Now check your work how it looks like. If you don’t share your website link on Facebook ever, then just copy the link URL and paste in your Facebook wall at the Facebook status creation field. Wait for a while Facebook will crawl your site and give you a preview. If everything goes fine then your hard work reaches the destination. But if you failed to get what you desired for. Then you have to do more tasks.

Go to the Open Graph Debugger page and debug your page. Just paste your website’s link in the blank field and press the Debug Button. Wait for the result. If you don’t get the result, then click Scrape Again Button.

FB-Link-debugger - gtarafdar

Hopefully, you will get your desired result from here. But if you are still facing the problem, then you need to help Facebook to scrap your site’s data manually. Please go to this Facebook Link Debugger. Then paste your link and click Fetch New Scrapping Options. Then Facebook will scrap your new data. It will also help you when you will update the Facebook Metadata by Yoast but continuously getting the old information.

debugger-new-data - gtarafdar

The final result will be like that-

Thumbnail-of-link gtarafdar

This is how you can add your desired thumbnail image to your links. I tried to cover all the sectors of the adding thumbnail image in your link for Facebook Post by Yoast SEO plugin. If you want to configure the twitter then the essential part will be the same. But the recommended image size for Twitter is 1024 by 512 pixels.

How to Validate Twitter Card for the Website Links

Twitter-Card-Validator-gtarafdar
Twitter Card Validator-gtarafdar

There is an official card validator for checking twitter cards just like Facebook Link debugger. With the help of this tool, you can validate your Twitter card info. It’s so easy and handy tool. You have to log in to your twitter ID and paste your desired link to that tool and check the card design. Here is the tool link ?

How to add Social Thumbnail Image in Links with Rank Math SEO Plugin

Rankmath SEO Plugin
RankMath Best Free SEO Plugin

RankMath is now one of the popular SEO Plugin. So many of us shifted from Yoast to Rankmath due to its huge scalability in their Free version. Recently Yoast is going through very bad times. Their recent updates make unhappy to so many site owners. People are complaining that they are losing their site rank due to the vulnerable updates by Yoast. Moving on.

You can add your OG image or link Thumbnail Image in an intuitive way with the RankMath plugin.

Click on the SEO Score button from the top right above the setting panel of Gutenberg Editor. Following that click on the share icon. A preview popup will appear on that click.

From that popup panel you can check your Facebook Link preview and twitter card view of your link.

You can add custom image from there for each social chanel.

For thumbnail image, they recommend these sizes,

Upload at least 600x315px reommended size is 1200x630px.

For the Twitter card, you can show all data as it is of Facebook by turning on the Use Data from the Facebook Tab button. Or You can set different thumbnail image or title or excerpt.

You can choose the card types for your twitter card from the drop down menu of the card types option.

Also have facility to add Preview Overlay Icon. You can add Play icon or GIF icon to your post thumbnail.

Best Part part is all the changes will be automatically saved. To make a permanent impact you have to just push an update.

Check The Video Tutorial on How to add thumbnail image on links with RankMath Plugin ?

YouTube video

The alternative to Yoast & RankMath SEO Plugin for adding Thumbnail Images

Most of the SEO Plugins has that feature. But if you want a dedicated solution for solving this problem without using Yoast then you can try these plugins.

If you want my personal opinion then try to avoid using too many plugins on your site. Find out possible best solutions for your problems. The best solution to active your social thumbnail is to rely on SEO Plugins.

Ending Thoughts:

I hope this article will help you to solve your problem. If you have any questions please give me a shout at my comment box. I’ll try to help you accordingly. Till then adios ?.

4 replies on “How to Add Thumbnail Image in Your Link | Displayed on Social Posts”

[…] from Freepik. Or you can try PnGTree. But PNG Tree has the limitation. You can download only two images in a single day from your free […]

Nice one brother!. Very effective for the newbies and oldbies like me who are always seeking something to learn. Thanks for sharing these hacks

Leave a Reply

Your email address will not be published. Required fields are marked *

1 Share
Share via
Copy link
Powered by Social Snap