Inferred Property
The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Missing Properties
The following required properties are missing: og:type, og:image
I am not really sure and will not go into details, but I think you can solve this error by making your own image that will wholly represent your blog or website in different social media platforms like Facebook and Twitter. You will need to provide an image URL that contains your website's logo or banner, and this will be coded inside your theme's HTML.
You will be needing the following in this tutorial:
a. Your own edited image with a size of 550 x 300 pixels. This image contains your blog/website logo and anything that will represent your website. Make sure to make it look professional yet simple. See mine below.
b. Once you have your image, upload it in your Blogger and get its URL like the sample below which is the URL of the image above.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhflkOqzRui64JikLJLCqf0D11d32r_11-0T5OqSYW8WXomy_aeQXFlczIYdFf5hkUPz1tL0pC_gWC6eBXS4aw2PRK7rW0MxatsgpZacAsF1m13ANNGF3WdJ1DJmPA86wGy49oxR0GxzS4/s1600/56475898343240004643.jpg
STEPS:
1. Go to your Blogger Theme > Edit HTML.
2. Search (Ctrl + F) for twitter:creator. When you find it, the whole code will be the same as below.
<meta content='Facebook App ID here' property='fb:app_id'/>
<meta content='FB Admin ID' property='fb:admins'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<meta content='FB Admin ID' property='fb:admins'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
3. Delete all the line of code above and replace it with the following code.
<meta property="fb:app_id" content="FB App ID"/>
<meta property="fb:pages" content="FB Page ID"/>
<meta property="og:url" content="https://www.yourdomainname.com"/>
<meta property="og:title" content="Your website title"/>
<meta property="og:description" content="Your website description."/>
<meta property="og:type" content="website"/>
<meta property="og:site_name" content="Yourdomainname.com"/>
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhflkOqzRui64JikLJLCqf0D11d32r_11-0T5OqSYW8WXomy_aeQXFlczIYdFf5hkUPz1tL0pC_gWC6eBXS4aw2PRK7rW0MxatsgpZacAsF1m13ANNGF3WdJ1DJmPA86wGy49oxR0GxzS4/s1600/56475898343240004643.jpg"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@username"/>
<meta name="twitter:title" content="Your website title"/>
<meta name="twitter:description" content="Your website description."/>
<meta name="twitter:creator" content="@username"/>
<meta name="twitter:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhflkOqzRui64JikLJLCqf0D11d32r_11-0T5OqSYW8WXomy_aeQXFlczIYdFf5hkUPz1tL0pC_gWC6eBXS4aw2PRK7rW0MxatsgpZacAsF1m13ANNGF3WdJ1DJmPA86wGy49oxR0GxzS4/s1600/56475898343240004643.jpg"/>
<meta name="twitter:domain" content="Yourdomainname.com"/>
<link rel="canonical" href="https://www.yourdomainname.com" />
<meta property="fb:pages" content="FB Page ID"/>
<meta property="og:url" content="https://www.yourdomainname.com"/>
<meta property="og:title" content="Your website title"/>
<meta property="og:description" content="Your website description."/>
<meta property="og:type" content="website"/>
<meta property="og:site_name" content="Yourdomainname.com"/>
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhflkOqzRui64JikLJLCqf0D11d32r_11-0T5OqSYW8WXomy_aeQXFlczIYdFf5hkUPz1tL0pC_gWC6eBXS4aw2PRK7rW0MxatsgpZacAsF1m13ANNGF3WdJ1DJmPA86wGy49oxR0GxzS4/s1600/56475898343240004643.jpg"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@username"/>
<meta name="twitter:title" content="Your website title"/>
<meta name="twitter:description" content="Your website description."/>
<meta name="twitter:creator" content="@username"/>
<meta name="twitter:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhflkOqzRui64JikLJLCqf0D11d32r_11-0T5OqSYW8WXomy_aeQXFlczIYdFf5hkUPz1tL0pC_gWC6eBXS4aw2PRK7rW0MxatsgpZacAsF1m13ANNGF3WdJ1DJmPA86wGy49oxR0GxzS4/s1600/56475898343240004643.jpg"/>
<meta name="twitter:domain" content="Yourdomainname.com"/>
<link rel="canonical" href="https://www.yourdomainname.com" />
In the above code, make sure to replace all the bold letters with your own.
4. When done, save your template.
5. Now, go to Facebook Debugger, click here.
6. In the Enter a URL type your website domain name and press the Debug button.
7. In the "Warnings That Should Be Fixed", you will still find there an error message but the two (2) errors (The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags. and The following required properties are missing: og:type, og:image) that we wanted to solve and fix in this tutorial were gone already. And if you continue scrolling down, you will see there the preview of your website domain name when shared in Facebook or Twitter platform.
8. Done!
Important Note:
The Facebook Debugger Tool will not work unless you already shared your website or blog URL or post URL in Facebook before. To make it work, you need to at least share a post in Facebook first.
If you have something to share or ask regarding this tutorial, please do not hesitate to leave a comment below. Thank you!
0 Comments
Post a Comment