Have you ever shared your blog post's link on Facebook but apparently the shared link either displays the incorrect, cropped image or unrelated photo to the blog post? Quite disappointing, isn't it?
Why does it happen? It happens because it's either you didn't put an open graph protocol or you did a mistake when putting it.
And as a result, when sharing your blog post link, the preview displays undesirable image which affects potential clicks pointing to your blog.
So is it still needed to fix your blog's Facebook open graph?
Of course! Definitely, YES!
Fixing your Facebook Open Graph Tags lets Facebook scrape the right image.
Applying custom open graph protocols lets you assign or specify which image and what size of the image should be displayed when a certain link is shared on Facebook.
Viewers tend to click a certain link when a preview is available for that link– not just the meta description but also the image.
Think of it like a Youtube video or Facebook video. Do you think you'll click it if the thumbnail is inappropriate? Sometimes, you'll not click it, right?
Do you want to get more clicks instead of getting less? Of course, you want more viewers, right?
Here's an example of mine (my blog's main homepage URL/link) before and after implementing open graph tags to my blogger (blogspot) blog.
 |
| BEFORE |
As you can see, the Facebook Sharing Debugger shows that my blog's homepage image wasn't there. It only shows the blog title and description.
 |
| AFTER |
But right after adding a custom open graph protocol, Facebook displays the blog's homepage image, title, and description.
Here's another example.
 |
| BEFORE |
 |
| AFTER |
So how do you fix Facebook scraping the cropped or incorrect blog post image by applying Facebook Open Graph Protocols?
1. Log in to your Blogger (Blogspot) Blog.
2. Go to your Blogger Dashboard and select 'Theme'.
3. Click 'Backup'.
Always download a backup of your theme in case anything goes wrong. This strategy will help you restore to its previous state.
4. Click 'Edit HTML'.
5. Find <head> tag.
6. Just above <head> tag, paste this code before the ending of '>'.
xmlns:og='http://ogp.me/ns#'
7. Below <head> tag, find the line <b:include name='head-content'/> and paste this code below it.
<meta content='Pinoy Tech Says' name='og:site_name '/><meta expr:content='data:view.title.escaped' property='og:title'/><meta expr:content='data:view.description.escaped' property='og:description'/><meta content='article' property='og:type'/> <b:if cond='data:blog.url == data:blog.homepageUrl'> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0f0GPFCIWvrYge6l5z9cR1o8CIRftCDNahqgEjDVn2jaNGGvCe8QxPXe8FNEdE434SbGdG1ftgG3PV_CcSpBjr2MQjoKlF6ulrZSyd5Jdi9OvcvUd46urJgDaMlyxxmUQQQdKbxmv8ljc/s1200/20200623_124711_0000.png' property='og:image'/></b:if><b:if cond='data:view.featuredImage'><meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/><b:elseif cond='data:widgets'/><b:loop reverse='true' values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'><meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' property='og:image'/></b:loop><b:elseif cond='data:blog.postImageUrl'/><meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' property='og:image'/></b:if><!-- Open Graph Tags Generator for Blogger: https://www.pinoytechsays.com -->
Replace the red text with the URL of your homepage image.
Replace the blue text with the title of your blog.
8. Click 'Save'.
9. Test the link by going to Facebook Sharing Debugger Tool and paste the link of your blog or your blog article.
10. If the debugger doesn't show changes in result, click 'Scrape Again' until you see the changes.
Take a note that Facebook will automatically use the first image on your blog article and resize it to 1200 x 630 image size if an image is not of 1200 x 630 pixels of size. Fortunately, if you optimize your image to the standard size of an image that Facebook will scrape – 1200 x 630 pixels, your link preview will be shown correctly.
So that's how to fix your link preview on Facebook if it displays wrong, cropped, or inappropriate image.
Did this post help you? Share us your thoughts in the comment section below, Digital Conquerors!
Eto ba yun?
ReplyDeleteAng alin po?
DeletePost a Comment