Fix blogger facebook thumbnail problem

Today we shall be learning How to Fix blogger facebook thumbnail problem by adding Open Graph to our Blogspot theme. so as for all our Articles to seem alongside their images when shared on social media. Kindly follow the instructions below on How to Fix blogger facebook thumbnail problem.

Also Read: How to Remove Sora Template Footer Credit (Step by Step)

Fix blogger facebook thumbnail problem

1. Log in to your Dashboard
2. Go to Layout –> Edit HTML
3. Click anywhere inside the code area and to open a search box type CTRL+F from the keyboard.
4. Type or paste the following code into the search box and hit enter.
5. </head>
6. Now Copy the following code and paste it before the above line:

Facebook OpenGraph Tags

<!– Facebook OpenGraph –>
<meta content=’article’ property=’og:type’/>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<!– Title, URL & Description –>
<meta expr:content=’data:blog.pageName’ property=’og:title’/>
<meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/>
<b:if cond=’data:blog.metaDescription’>
<meta expr:content=’data:blog.metaDescription’ name=’og:description’/>
<b:else/>
<meta expr:content=’data:post.snippet’ name=’og:description’/>
</b:if>
<!– Image –>
<b:if cond=’data:blog.postImageUrl’>
<meta expr:content=’data:blog.postImageUrl’ property=’og:image’/>
<meta property=’og:image:width’ content=’1200’/>
<meta property=’og:image:height’ content=’630’/>
</b:if>
<!– FB specific –>
<meta content=’YOUR_FACEBOOK_ID’ property=’fb:admins’/>
<meta content=’YOUR_APP_ID’ property=’fb:app_id’/>

NOTE: you cant copy the above code because we have disabled copy and paste on this site, just use the download button below to download its and follow up with other instructions here

Also Read: Ahrefs SEO Metrics: How To Use Some SEO Terms in Ahrefs

Customization

Replace YOUR_FACEBOOK_ID with your Facebook App ID Admin Name.

Replace YOUR_APP_ID with your Facebook App ID Code.

How to Create Facebook App

create Facebook app with these simple steps I have written below:

1. Go to Facebook developer tab and click on it.
2. LINK ⇒ https://developers.facebook.com
3. Then go to Website Option.
4. Enter the app name which you have wanted.
5. Click on Create Facebook App.
6. After this you have to choose a category, you can choose an App for Pages.
7. Your App Id and App key are created automatically. The App Secret Key is obfuscated. You can click on the show button to see your App Id and App Security Key.

Also Read: Easiest Way to Prevent WordPress From Generating Image Sizes

Twitter Cards

<!– Twitter Card –>
<meta content=’summary_large_image’ name=’twitter:card’/>
<!– Title, URL & Description –>
<meta expr:content=’data:blog.pageName’ name=’twitter:title’/>
<meta expr:content=’data:blog.url’ name=’twitter:url’/>
<b:if cond=’data:blog.metaDescription’>
<meta expr:content=’data:blog.metaDescription’ name=’twitter:description’/>
<b:else/>
<meta expr:content=’data:post.snippet’ name=’twitter:description’/>
</b:if>
<!– Image –>
<b:if cond=’ data:blog.postImageUrl’>
<meta expr:content=’ data:blog.postImageUrl’ name=’twitter:image’/>
<meta property=’twitter:image:width’ content=’280’/>
<meta property=’twitter:image:height’ content=’150’/>
</b:if>
<!– Twitter specific –>
<meta content=’SITE-TWITTER-HANDLE‘ name=’twitter:site’/>
<meta content=’YOUR-TWITTER-HANDLE‘ name=’twitter:creator’/>

NOTE: you cant copy the above code because we have disabled copy and paste on this site, just use the download button below to download its and follow up with other instructions here

Customization

Replace SITE-TWITTER-HANDLE with your link to your Twitter Handle.

Replace YOUR-TWITTER-HANDLE with your Twitter Username. example @AfolabiAchiever.

Google Publisher Markup

<!– G+ Publisher –>
<!– Title & Description –>
<meta expr:content=’data:blog.pageName’ itemprop=’name’/>
<b:if cond=’data:blog.metaDescription’>
<meta expr:content=’data:blog.metaDescription’ itemprop=’description’/>
<b:else/>
<meta expr:content=’data:post.snippet’ itemprop=’description’/>
</b:if>
<!– Image –>
<b:if cond=’data:blog.postImageUrl’>
<meta expr:content=’data:blog.postImageUrl’ itemprop=’image’/>
</b:if>
<!– G+ specific –>
<link href=’G+ BUSINESS PAGE URL’ rel=’publisher’/>

NOTE: you cant copy the above code because we have disabled copy and paste on this site, just use the download button below to download its and follow up with other instructions here

Also Read: 5 Untapped Ways to Use Pinterest to Drive Blog Traffic

Customization

Replace G+ BUSINESS PAGE URL with your Google Plus link.

From The Author: how to fix blogger facebook thumbnail problem, Love the Post. Kindly Spread the Good news by sharing with friends and also leaving your feedback below. Remember you can also follow us on our social media handles for More updates and also Subscribe to our email newsletter.