I have a website hosted on blogger http://www.dragonballtown.net, When I try to share the website post in facebook, it shows my website logo instead of post image.
I'm using these Open graph Meta tags:-
<b:if cond='data:blog.pageType == "index"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='blog' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='blog-logo.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
But this is not working for me, I tried facebook open graph debugger to re-scrape site but it's still showing logo image with post url while sharing on facebook
Try this code
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.postImageUrl' property='og:image' />
<b:else/>
<meta content='blog-logo.jpg' property='og:image' />
</b:if>
Change data:blog.postImageThumbnailUrl with data:blog.postImageUrl make sure it rendered, view source code of your site on item pages.
Related
Facebook and Twitter are currently grabbing the first image it finds on the page when sharing my homepage URL. What I want Facebook and Twitter to grab is my homepage image.
I tried to edit my existing Blogger/Blogspot open graphs, by adding some of the meta tags I found in the below blog posts but I am unable to achieve my goal. Can anyone please help me.🙏
How to Use Facebook Open Graph Meta Tags for Blogger/Blogspot?
Add Open Graph Tags To Blogger (With Images)
How To Add Twitter Cards Meta Tags To Blogger
The Essential Meta Tags for Social Media
Default website image for social sharing
Here are my existing open graph meta tags:
<!-- Metadata for Open Graph protocol. See http://ogp.me/. -->
<b:if cond='data:view.isHomepage'>
<meta content='website' property='og:type'/>
</b:if>
<b:if cond='data:view.isSingleItem'>
<meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:view.isMultipleItems and not data:view.isHomepage'>
<meta content='object' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title.escaped' property='og:site_name'/>
<meta expr:content='data:view.title.escaped' property='og:title'/>
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage'
expr:content='data:widgets.Blog.first.posts[0].featuredImage' name='meta' property='og:image'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredImage' property='og:image'/>
<meta expr:content='data:view.featuredImage' name='twitter:image'/>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:view.title.escaped' name='twitter:title'/>
<meta expr:content='data:blog.url.canonical' name='twitter:url'/>
<meta expr:content='data:view.description.escaped' name='twitter:description'/>
<b:if cond='data:view.isHomepage'>
You can use the tag <meta content='image_url_here' property='og:image'/>, between the bloc condition (url== homePage):
<b:if cond='data:view.isHomepage'>
<meta content='image_url_here' property='og:image'/>
</b:if>
When I try to share any content of my blogger in facebook or if I just copy the link and paste there something like this happen (see the empty square that is supposed to have an image):
I have tried to take a look at Facebook developer tool and it says that:
Warnings That Should Be Fixed
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Share App ID Missing The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.
I have tried to follow some solutions that I found:
1) Edit HTML and just above the </head> tag paste the following piece of code.
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>
2) search for <b:includable id='post' var='post'> and paste the below code after this tag
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='article' property='og:type'/>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<b:else/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<b:else/>
<meta content='https://lh3.googleusercontent.com/-9Fy3-ME-5VA/VfhZDh1oQOI/AAAAAAAABFc/SPkLmVpV1aY/s1600/no-thumbanil-available.png' property='og:image'/>
</b:if>
</b:if>
<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>
None of these solutions solved the problem. Can you help me?
Iam trying to add this code This is correct way to add or any thing wrong in this code. I presently run my website in blogger.
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='logo-link' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='app_id' property='fb:app_id'/>
<meta content='fb_admins' property='fb:admins'/>
The following line should be change. FROM
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
TO
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
In your code, Blogger will use it's default thumbnail as 72px X 72px size. I have changed it to the original size path.
You can also include author markup into this code by adding the following line, below to <b:includable id='post' var='post'> in your Blogger source code.
<meta expr:content='data:post.author' name='author'/>
I'm trying to customize how a blog share looks in facebook, so far I add this as recommended in facebook
<meta content='0how' property='og:site_name'/>
<meta content='0how' property='og:title'/>
<meta content='0how' property='og:description'/>
<meta content='image.jpg'/>
<meta content='http://0how.blogspot.com/' property='og:url'/>
<meta content='blog' property='og:type'/>
I want this settings just for the main page, but the problem is that this settings also apply when sharing an individual post. Is there a way disable it for posts.
I am assuming you are trying to set up open graph data for a blogger blog . refer this tutorial to set appropriate titles for individual posts of your website . Also refer this tutorial for an in depth explanation
<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Open Graph Meta Tags END -->
I've been struggling with these for months now.
I just changed them and the Facebook Debugger thinks everything's fine except for admins and app ID whih I hope I don't have to get into.
But, when the like button is clicked, some posts show my generic favicon, some show an image for an old post, some show no image at all, and a rare few show an image from the post.
Some of them show the correct title of the blog post, some show a link instead, some show nothing.
I was hoping that a brief snippet of text from the post would show but that never happens.
This all seems to be totally random. Here's my code for my site:
<!-- BEGIN Open Graph tags -->
<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content=blog' property='og:type'/>
<meta content='http://speechnotrecognised.blogspot.com.au/2012/08/our-second-first-post_28.html' property='article:author'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://i1252.photobucket.com/albums/hh569/speechnotrecognised/snricon4_zpsde4bdf38.jpg' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='http://i1252.photobucket.com/albums/hh569/speechnotrecognised/snricon4_zpsde4bdf38.jpg' property='og:image'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>
<!-- END Open Graph tags -->
I see several problems with your code:
- you are using the blog title to generate keywords?!
- for individual blog posts og:type should be 'article' not 'blog';
- I don't think you can use an URL for article:author;
- you don't specify either your Facebook admin ID or the app ID;
- you should use the canonical URL instead of data:blog.homepageUrl to work around blogger's country redirection.
Here is my solution: Open Graph markup for Blogger [version 3]