Setting The Social Sharing Image For Your Divi Website
The Divi Builder and theme is great, and you can build awesome websites and blog content with it! So why not encourage people to share it? One of the most effective ways to create engagement and spread the word about your website is to share it on social media. But if people share your website with only an ugly link, it looks bad for your brand. You want the shared link to look good, convey your message, and obviously tempt the visitor to click on it. And one of the ways to do so is to set an image that is displayed whenever someone shares a post or page of your website on a social media platform like Facebook or Twitter.
So how do you choose this image?
In this tutorial I am going to who you how to set the image which will show up when someone shares your website on social media. We are going to explain several ways to set your desired image so that you can choose one that works best for you. We will also talk about something called Open Graph meta data and use it to get desired results, so next time you see your website being shared on any social media platform it will look something like great.
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.
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.Â
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.
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.Â
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.
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:
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.
Check Out Our Super Cool Plugin!
Enjoy the hundreds of settings in the Divi Social Sharing Buttons plugin, a beautiful new Divi module to add and customize social media sharing buttons and custom sharing options on any page, post, or Theme Builder template!
I hope you have enjoyed learning How To Set The Image Thumbnail That Shows When Someone Shares Your Website Link On Social Media. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
OUR ONCE A YEAR SALE IS HAPPENING NOW!!!
25% OFF all Divi Plugins, Courses, and Child Themes!
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
I’m pleased to announce our next update to version 2.2 of our Divi Events Calendar plugin with a full new search and filter module!
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
LinkedIn has a debug tool too. https://www.linkedin.com/post-inspector/
Good to know, thanks for sharing this Ryan!
Twitter too: https://cards-dev.twitter.com/validator
(Good article, Nelson).
Nice, thanks!
I had to use the facebook debug before it would work. I’m not able to see an image when I’m trying to share the page on LinkedIn though.