To grow your audience, you need to share your website with others on social media.
Since your website represent your brand, more people will likely share your link if they can identify with your brand image, title, and description on social media.
But sometimes, you might find out that little things like changing the image of your website when shared on social media is not so little at all.
How do you make sure that the right images are getting shared from your site on social media?
Imagine having the image of a competitor, a random person or a brand image who has got nothing to do with your business appear on Facebook anytime you share the link to your website.
This is costly and can bring legal problems to your business if care is not taken to resolve it immediately.
Recently, I had to solve this problem for one of our clients.
He owns a real estate property events and auction website that organizes monthly meetings among property experts, investors and speculators.
It happened that anytime he shares his link on Facebook, the image that Facebook uses is that of one of the event speakers in the past and he doesn’t want this.
The picture doesn’t represent his website or what it does.
This is hurting his brand perception on Facebook and he wants it changed.
He wants an image of the event sponsors and his parent company instead.
In this post, I’ll list out all the possible solutions to this problem.
Also, I’ll go into details of how we eventually solved the problem for our client.
How does your website look on Facebook?
<meta> tags are used to specify the attributes of your website when your link is shared on social media.
Social media websites like Facebook and Twitter will scrape the associated webpage whenever a link is shared on their platform to read its <meta> tags.
After which, the right information will be displayed on the platform.
Facebook uses <meta> tags that are based on the Open Graph Protocol.
When you share your website on Facebook or any other social media, the link is often replaced with an image, a title, and a description of your website.
These items are known as Open Graph Objects.
The way your web page appears on Facebook depends on the content of your website.
Open Graph Objects are unique and are different for each page of your website.
You can set a unique open graph object for each page of your website because they affect your click through rates and conversions.
Our focus for this article is on the image that appears when you share the homepage link of your website.
There are two ways of checking how your website thumbnail appears when shared on Facebook.
You can either send your homepage link to anyone on Facebook Messenger or use the Facebook Sharing Debugger tool.
Facebook Sharing Debugger tool let you see the image that Facebook displays when your website is shared on its platform and other Open Graph properties of your website.
The visible attributes of a shared web page on Facebook are; a prominent image, page title, description, and the domain name.
In the Sharing Debugger tab, enter your website homepage link and click on Debug to see the Link Preview of your website on Facebook and its attributes.
3 Ways to change the default website image for social sharing
Some of these methods can be applied to any type of website while others are specific to a particular type of website.
However, if you know your way around HTML codes, you shouldn’t have any problem implementing this on your website.
For the sake of this article, I’ll assume that you’re using WordPress content management system as the platform of choice for your website.
WordPress is easy to manage both from the admin and the client side.
I strongly recommend that you make a switch to this platform if you have a website that handles a lot of content.
And if for some reason you need help with switching to a WordPress website, don’t hesitate to use our services at 5252World Digital Agency.
That being said, here are some of the ways to tell Facebook which image to use for your website homepage.
1. Change social media sharing link thumbnails for WordPress websites using Yoast SEO plugin
The preferred plugin to use here is Yoast SEO plugin.
The free version will work well for this.
It’s possible that there might be other plugins with this function but for the sake of this article, install Yoast SEO plugin and follow all the instruction below:
1. On your WordPress dashboard, locate “SEO” on the left pane and click on “Social”.
2. Click on the Facebook tab. In the Facebook settings, enable “Add Open Graph meta data”.
3. Upload your image in the Image URL of the “Frontpage settings” section.
4. Add your site title in the space provided for Title.
5. Add your site description in the space provided for Description.
6. Set the Image URL in the “Default settings”. This is the image that is used if your post or page being shared doesn’t contain any images.
Click on Save to save the changes you’ve made.
2. How to change the featured image shared on Facebook for a specific post
Social media have a way of messing up with our posts when everything look so perfect from our end.
If you have issues with the image shared on social media for a specific post on your website, there is a solution.
We’ll also be using the SEO plugin by Yoast to configure this settings.
Make sure you have the plugin installed on your website if you are using WordPress as your CMS.
1. Open the post and click on “Edit” to edit the article.
2. Go to the section for Yoast at the writing section of the article.
3. Click on the social media sharing icon and click on the Facebook or Twitter tab
4. Add the post title, description, and your preferred image on their respective sections.
Update your article and test your post using the Facebook Debugger Tool.
3. Add a <meta> tag to the head section of your website to change the featured image on social media – Recommended for all Websites
To add Open Graph <meta> tags using this method, you need to locate the <head> section of your website.
If you can’t locate the <head> section of your website on WordPress, download the Insert Headers & Footers plugin from the WordPress community and insert the codes on your website head using the plugin.
Make sure that you have the image you want to use as your website thumbnail on your website server.
Upload the image on your server with dimensions of 1200×627 pixels and a maximum size of 5mb.
Locate the <head> section of your webpage and insert these codes to change the Open Graph objects of your website:
1. <meta property=”og:image” content=”X” />
Replace X with your image URL.
2. <meta property=”og:type” content=”X” />
Replace X with a specified “type” for your webpage.
For general webpages, replace X with “website”. For blog articles, replace X with “article”.
3. <meta property=”og:url” content=”X” />
Replace X with the URL of your website to be shared on Facebook.
4. <meta property=”og:title” content=”X” />
Replace X with your website title which shouldn’t be more than 88 characters.
This will appear alongside your image on Facebook.
5. <meta property=”og:description” content=”X” />
Replace X with a description of your website which shouldn’t be more than 200 characters.
Here is a sample of how your code should look like when you’re done:
<meta property=”og:image” content=”https://5252world.com/logo/”/>
<meta property=”og:type” content=”website”/>
<meta property=”og:url” content=”https://5252world.com”/>
<meta property=”og:title” content=”Digital Media Agency & Consultancy “/>
<meta property=”og:description” content=”Get strategy and execution for your websites, SEO, and content marketing”/>
Save the changes and you’re good to go.
The next step is to use the Facebook Sharing Debugger Tool to test the changes.
Insert your URL and click the Debug button.
If you notice that the image is still the same as the old one, check the Time Scraped section and click on “Scrape Again” to refresh the report.
If you need help with your website design or redesign, don’t forget to use the contact form to get started.