Why Facebook Doesn't Show the Images of My Blog Posts

16,752 views

Published on

Published in: Self Improvement, Technology
4 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
16,752
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
0
Comments
4
Likes
2
Embeds 0
No embeds

No notes for slide

Why Facebook Doesn't Show the Images of My Blog Posts

  1. 1. How To Make Facebook Pick orShow Up the ExactImage or Images ofYour Blog Posts or Web Pages WhenYou Share Them on Facebook? By Alex BondSearch Engine Talks An Easy ToUnderstand Guide To Help All the Online Marketers, BusinessOwners and BloggersGet Rid of This Very Common Issue Permanently!
  2. 2. Issues People Have Faced and Are Still Facing With Facebook Example: 1There are many people who’ve alreadyexperienced and are still experiencing thisissue. They are sharing a link or one of theirblog posts on Facebook, but Facebook is notshowing up the image of their blog post. Example: 2According to example no. 2, Facebook is ableto pick the images and also giving people anoption to choose their desiredthumbnail, but the problem is none of thoseimages belong to the blog post peopleactually want to share.
  3. 3. Why Is This Happening With Facebook and What’s the Solution? Reason: The reason you’re facing this problem is because, youre not making it easy for Facebook to read the source code of your web pages or blog posts and the properties of your blog posts like: the Title, Description, Image or Images and others. In other words I can say that, Facebook actually and always tries to read the source code of your web pages or blog posts, but not always able to pick or show up the images. Which is why in most of the cases Facebook doesn’t show any image, just like shown in the Example: 1 on the previous slide. And in some cases Facebook does show an image or few images (which is/are actually and mostly the default image/images you’ve on your website or blog) and gives you an option to choose the thumbnail you prefer, but unfortunately that image or those images don’t belong to the blog post you want to share, just like shown in the Example: 2 on the previous slide. Solution and Benefits: To solve this issue or problem and to allow Facebook pull the exact image or images of your web pages or blog posts, Facebook requires you to set up its own social media tags or meta tags in the source code of your web pages or blog posts, which is called “Facebook Open Graph”. Facebook Open Graph meta tags allow Facebook to read the source code of your web pages or blog posts and their properties like: Title, Description, Image or Images etc. and most importantly instruct Facebook which Title, Description, Image or images to pick. Besides, implementing Facebook Open Graph meta tags not only solve this issue, but also increase your Facebook traffic as well.
  4. 4. Which Open Graph Meta Tags To Use?There’re many Open Graph Meta Tags that one can use, but generallynobody use them all. Below is a list of 9 mostly used, recommended andimportant Open Graph Meta Tags that you should use. Remember, allthese meta tags should be placed between the HTML Head tags i.e.:<head> </head>, of the source code of your web pages or blog posts. Meta Tag #1 No. 1 If you’re using any Plugin or App to produce Open Graph Meta Tags then you <meta property="fb:app_id" need to mention an app ID to the Plugin content="Your App ID" /> settings page as Facebook requires it. It also renders better Facebook Insights. Recommended for WordPress users.
  5. 5. Which Open Graph Meta Tags To Use? No. 2 Important tag for better and more data in Facebook Insights. It helps Facebook <meta property="fb:admins" recognize that you’re the website owner content="Your FB Admin/User ID" and thus your website gets connected to /> your Facebook Fan Page. Recommended for all WordPress and Non-WordPress Users. Meta Tag #2 & #3 No. 3 Important tag where you need to mention the title of your web page or<meta property="og:title" content="Title blog post to optimize it on Facebook. You of the blog post/web page" /> need to keep the title less than 95 characters. Recommended for all WordPress and Non-WordPress Users.
  6. 6. Which Open Graph Meta Tags To Use? No. 4 Describes the content of your web blog post. Write a short and compelling<meta property="og:description" description and add few keywords in content="Description of the blog it, so that it can generate more clicks. post/web page" /> You need to keep it within 297 characters. Recommended for all WordPress and Non-WordPress Users. Meta Tag #4 & #5 No. 5 Helps Facebook pull the exact image or images of your web pages or blog posts. Very important and recommended for all <meta property="og:image" WordPress and Non-WordPress Users.content="URL of the image" /> Some more important specifications are there for this tag, which are mentioned in the “Key Notes” slide below.
  7. 7. Which Open Graph Meta Tags To Use? No. 6 Mention the exact URL of the web page or blog post you want to share on<meta property="og:url" content="URL Facebook. This tag makes sure that all of the blog post/web page" /> the likes and shares are counted towards the URL you’ve mentioned in this tag. Thus very important and recommended for all the website owners. Meta Tag #6 & #7 No. 7 Lets Facebook know the name or the tag line of your website or business. Not as important as the other Open Graph Meta <meta property="og:site_name" Tags, but your brand name can be well content="Name or Tag line of your optimized on Facebook through this tag. Website/Business" /> So have it!
  8. 8. Which Open Graph Meta Tags To Use? No. 8 Here in this tag you need to describe the type of your content. Means what type of<meta property="og:type" content=“type content you’re sharing? Like: whether it’s of the content"/> an article, blog, website related or hotel, sport, book related. Just need to mention that. Recommended for both WordPress or Non-WordPress users. Meta Tag #8 & #9 No. 9 You need to specify the language of your content here in this meta tag. If not <meta property="og:locale" specified the then it uses “en_US” as the content=“language of your content"/> default language.
  9. 9. Now How To Set Up the Open Graph Tags? There’re Two Ways To Set It Up 1. For Both WordPress & Non- 2. For WordPress Users Only WordPress UsersThis particular method of setting up the Open If you’re a WordPress user then you can useGraph Meta Tags is common for all the Plugins like: WP Facebook Open Graphwebsite owners, both WordPress and Non- Protocol or WordPress SEO by Yoast and theyWordPress users. will generate the open graph meta tags for all the web pages or blog posts of your website orYou’ve to edit the source code of your web blog.pages and manually implement the opengraph meta tags for each page on your Remember, you must add your Facebook userwebsite or blog. Remember, the open graph or admin ID or an App ID or both of them tometa tags should be placed between the the Plugin settings page in order to make theHTML Head tags i.e.: <head> </head>, of Plugin generate correct open graph meta tags.the source code of your web pages. Besides, this is required by Facebook as well.So friends, now you all know how to make Facebook pull and show up the exact image or images ofyour web pages or blog posts when you share them on Facebook right? Imm hmm!! Wait it’s notthe end yet!! You need to know some important “Key Notes” here on the next slide.
  10. 10. Key Notes:It’s been seen now a days that people are adding more than one image in a blog post orweb page. Now here is the twist, implementing Facebook Open Graph Meta Tags only, isjust not enough to get the image/images of your web pages or blog posts picked upproperly by Facebook. There are few other important things that Facebook wants you totake care of. So what those things are? See below:1. The image or all the images should be at least 200px in both dimensions, means 200x200 px at least.However bigger than that is always better i.e. preferably 1500x1500 px.2. Size of an image shouldn’t exceed 5MB, it has to be within 5MB.So it means that you have to check all the images with "og:image" tag and make sure that your image orimages meet the above specifications highly recommended by Facebook.3. Lastly, WordPress and Non-WordPress users who are generating the open graph meta tags manuallyneed to make sure that they’ve added the "fb:admins" meta tag with their Facebook user ID andWordPress users who are using Plugins need to make sure that they’ve added their Facebook user ID orthe App ID or both of them to the Plugin settings page to ensure correct implementation of open graphmeta tags and as Facebook requires this. Besides, both "fb:admins" & "fb:app_id" tags render more datain Facebook Insights and better News Feed story that ensures high CTR.Now, if you follow all these simple things I’ve mentioned in this presentation then I guarantee that you’llnever encounter this issue regarding images with Facebook!  
  11. 11. Hi Friends! I’m Alex Bond, a Digital, Internet & Online Marketing Consultant, have been working in this industry for more than 8 years and trying my best to help business owners achieve their goals. Besides, I’m a simple kind of person trying hard each and every single moment to reach my goals and I love connecting with new people. Connect with me, not as a client but as a friend first! Thanks and God Bless You All!  Facebook Twitter Google+Image Credit: Gotcha

×