Code by Day | Explore By Weekend

How To Set The Image Thumbnail That Shows When Someone Shares Your Website Link On Social Media Tutorial by Pee Aye Creative

How To Set The Image Thumbnail That Shows When Someone Shares Your Website Link On Social Media

In this Divi tutorial I will show you how to set the image that show sup when someone shares a link to your website on social media.

1. Using the featured image setting

One of the easiest ways to set an image for social media shares is to make sure that all of your posts and pages have a featured image. You should always be using a featured image on your Divi website, and it can be use for both social sharing and also for displaying like at the top of this blog post or on our main blog page. The featured image is the default image which will be shown by social media platforms like Facebook when somebody shares a specific post/page on their platform.

To set a featured image, click on edit on any given page/post from the WordPress Dashboard. Find the Featured image section on the right side and be sure you have one set for every page or post.

set the Divi page or post featured image to share on social media

If you are maing change, don’t forget to click on Publish after you are done.

Use An SEO Or Open Graph Plugin

Social media tools have a set of meta tags called open graph which decide what image to show when you share a post or a page on their network. By default, if you set a featured image to a page/post, that will be one shared. But if you want to use a different image, you need to use an SEO or Open Graph plugin.  These plugins take priority over the featured image. It might sound technical and difficult but it’s actually very simple. Open Graph meta data helps social media websites extract the meta data about your posts or pages. The content in the meta dat that it finds is what is used to control how your content appears when shared on social media platforms like Facebook and Twitter. 

set a social sharing image in Divi with an SEO plugin

To use Open Graph Meta data we would need a SEO plugin such as Yoast SEO, Rank Math, All In One SEO, or The SEO Framework. All of these plugins work well with Divi, so you can use any of them that you prefer or already have installed. For the purpose of this tutorial we are going to demonstrate using Yoast SEO.

Example Using Yoast SEO

Once you have installed and activated the Yoast SEO plugin, go to SEO>Social in the menu. There you can see tabs for a few social media platforms where you can confiture some settings. 

Start with the Facebook tab and make sure the Add Open Graph meta data toggle is Enabled. Then in the Default settings section you can set a default image that will show up by default when a page or post without any image is shared on Facebook.

yoast social sharing settings

You can also check the Twitter tab to configure the default settings. But these are just the default settings. The main place to remebmer to set the image is on the actual post or page.

When you go to any page or post, you will see a new set of tabs related to the SEO plugin like Readability, Scheme, and Social. The Social tab is what we need here. 

configure the social sharing settings in Yoast SEO for Divi

Notice how it had two toggles, one for Facebook preview and one for Twitter preview. Each of these open up and allow you to configure the social sharing image, title, and description that is used when someone shares your Divi website.

Yoast facebook share image for Divi websites 1
Yoast Twitter share image for Divi websites

Example With Open Graph Plugin

If you are not using an SEO plugin, then I recommend a simple little plugin called Open Graph (they actually recently changed the name to Open Graph and Twitter Card Tags). I have used this and it works well and they have all the features you need.

After you install the plugin, you can go directly to any page or post. If you want to browse the main settings, then you can check Settings>Open Graph and Twitter Card Tags. Pretty much everything there is good to go, but it’s nice to be aware of the options can can be adjusted.

At the bottom of any page/post you will see this box:

using Open Graph and Twitter Card Tags with Divi

You can choose a photo, and then notice what it says at the bottom about writign a custom description or leaving it blank to use the excerpt or content.

Now update the page or post to save the settings, and now all that’s left to do is to share your website on Facebook and check out the text and image being displayed there.

Image Not Showing? Debug That Thing!

If you already shared a page or post to Facebook, but either it isn’t showing the right preview image or you want to change the image, Facebook can be pretty stubborn, and it may be showing the wrong image or none at all. This is because their platform uses cache and it needs to be cleared in order to show the correct image from your website.

Thankfully Facebook make this easy with a tool called the you may need to use the Facebook sharing debugger. All you have to do is copy and paste the URL of the page or post inot the tool and click “Debug.” This will scan your page and look for fresh data, and so if you changed or added an image it will update it on the platform.

 

5
Last updated Jan 3, 2021 @ 11:55 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ryan
Ryan
1 month ago

LinkedIn has a debug tool too. https://www.linkedin.com/post-inspector/

photoMaldives

Twitter too: https://cards-dev.twitter.com/validator

(Good article, Nelson).

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart