Anybody who has created a website has probably had this problem. You finish creating it and are ready to push it live. Everything is done. All the hours of design and implementing the features you want. All the sweat, all the hard work and you just want to promote it on social media. You share it with a friend through Facebook Messenger or post it in a Facebook Group and you see some ugly preview photo. No…. all that hard work for nothing. The preview photo is seriously important. If people see an ugly irrelevant photo then it shows to them, your website is not serious.
Luckily, there are easy ways to fix this. You can choose exactly what photo you want to show. You can choose the text to show with the preview also. You can customize everything and it is super simple. It all comes down to including the correct Meta Tags with the image. There is a really great website for this which you can find here. This website will allow you to enter your URL, upload a photo to see how it works and also edit the text. In the top right, there is a generate meta tags button which will give you the code you need to put in your own website header.
If you copy this code and put it in the <head> section like it says, things should be all good. Remember that you do need to upload whatever image you used on the Meta Tags site and link it in the image sections. Without doing this it will not show your image correctly. Once you have added this to the <head> section of your website, you probably want to test it right? The Facebook scraper does not work so regularly so you can actually go into the debug mode and force it to scrape immediately.
To do this, you need to go to the Debug part of the Facebook Developer page. It can be found here. If you enter the URL of your website and hit the ‘Debug’ button you will see the information that Facebook has for your website. This also makes a ‘Scrape Again’ button appear. Click this button after adding all the code to the <head> section and you should now see the Meta Tags you created yourself.
One common problem which I found with this, is that Metatags.io does not provide you with the Facebook App ID and I was getting an error without one. This is a simple fix however. From the debugger page, in the top right corner, hover over your photo and you will see ‘add an app’ appear. Follow the instructions to create one and get the App ID. Copy this down. Where you added the Facebook code in <head> create a new line and write the following; <meta property=”fb:app_id” content=”XXXXXXXXXXXXX” />. Replace the XXXXX with your App ID. Go back to the debugger and scrape again. You should now have everything working perfectly.
There you have it folks. How to create the perfect image preview on Facebook for your website making your website seem more professional and giving others confidence in sharing it. Having a beautiful image as the preview really helps and I spent too long looking for this solution, so happy to share it with you all.