summary_large_image card not showing image with Blogger's data:blog.postImageThumbnailUrl variable

princetrunks · 2013-12-15T06:42:23.000Z

Recently got my Twitter cards approved but it seems the image is not showing. My blog (blog.chucksanimeshrine.com) is Blogger powered so the meta tags for twitter cards have to be coded as such:

<meta content='summary_large_image' name='twitter:card'/>
<meta content='@canimeshrine' name='twitter:site'/>
<meta content='@princetrunks' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='http://www.chucksanimeshrine.com/images/cas_icon_open_graph.jpg' name='twitter:image'/>
</b:if>

Seems that the image being pulled from data:blog.postImageThumbnailUrl in the validater is coming up very small (72x72px) thus probably why the summary_large_image card won’t render it since the minimum is over 260px wide.

One way I thought I could fix this is to find maybe a better Blogger “b: data:” namespace variable catered to pulling higher rez images from the posts (since the post images are well in the requirement for summary_large_image)…but it seems I can’t find such a variable in Blogger’s library.

Also, seems that data:blog.postImageThumbnailUrl is valid nonetheless as this is used in my Open Graph meta tags with Facebook / Google+ not having an issue; the image they pull from data:blog.postImageThumbnailUrl appear to be the right size…at the very least, much bigger than 72x72.

Is this an issue with the API? Seems others are asking the question too in some of the blogger threads with no response. just want to get the image working when my blog posts are shared. All of the other aspects of the Twitter Card are working though…just would like the image to show.

tl;dr: summary_large_image’s twitter:image not showing when using a Blogger powered blog.

Thank you in advance for any help on this

EDIT-SOLUTION**

OK, found a solution, actually it was thanks to code linked by @rchoi in another post… https://dev.twitter.com/docs/cards/twitter-cards-for-cms-wordpress-blogger-tumblr

The key is for anyone with a blogger blog to get this working is to use the code like this and AFTER the line:

<b:includable id=‘post’ var=‘post’>

Here’s the code I pasted after the above line and now it seems the validator is working like a charm

<!--TWITTER CARD CODE-->
<meta name='twitter:site' content='@canimeshrine'/>
<meta content='@princetrunks' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:post.firstImageUrl'>
   <meta name='twitter:card' content='summary_large_image'/>
  
   <meta name='twitter:image' expr:content='data:post.firstImageUrl'/>
   
<b:else/>
   <meta name='twitter:card' content='summary'/>
   <b:if cond='data:blog.postImageThumbnailUrl'>
      <meta name='twitter:image' expr:content='data:blog.postImageThumbnailUrl'/> 
   </b:if>
</b:if>
<meta name='twitter:title' expr:content='data:blog.pageName'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <meta name='twitter:description' expr:content='data:post.snippet'/>
<b:else/>
   <meta content='http://www.chucksanimeshrine.com/images/cas_icon_open_graph.jpg' name='twitter:image:src'/>
   <meta expr:content='data:blog.title' name='twitter:title'/>
    <b:if cond='data:blog.metaDescription'>
     <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    </b:if>    
</b:if>

<!--TWITTER CARD CODE END-->

Granted, there’s probably some spaghetti code and if-else statements that can be truncated as well as simply letting my Open Graph fields handle some other twitter fields too since it also seems that twitter: tags are not yet logged into w3C’s database while Open Graph tags are.

Thank you for that link @rchoi and hope this helps people get twitter cards working for the very tough to code with Blogger template code.

rchoi · 2013-12-16T06:31:54.000Z

Please try refreshing our cache. More here: https://dev.twitter.com/docs/cards/troubleshooting#caching

thiagomgd · 2013-12-16T10:50:52.000Z

The image not showing can be because 3 problems:

Sometimes blogger fail to generate de thumbnail. Is you usa only images from outside your blog, it’ll not have a thumbnail.
The thumbnail size (as you mentioned). I resolved this using firstImageUrl insted of thumbnailurl
The crawler is not getting your image. I had this problem. Even on the validator, the crawler can’t load the image. I resolved this using a robots.txt that allows everything.

princetrunks · 2013-12-16T18:49:00.000Z

Hi Ryan,
I switched over to the basic summary card for the moment… though I’d love to use the large summery instead. The smaller summery does come up with an image but it seems that the API is pulling only a 72x72px thumbnail out of data:blog.postImageThumbnailUrl. Might be the fault of Google/Blogger?

The image that comes out from data:blog.postImageThumbnailUrl from the spiecific post I tested is this:

Seems that Blogger thumbnail image scales are controlled by the “s72-c” portion of these urls. If changed to “s400-c” for example… it does change the thumbnail to a 400px x 400px square.

I’ll see if caching will do anything, though.

princetrunks · 2013-12-16T19:00:00.000Z

I think you are on to something with firstImageUrl. Problem is, I’ve tried that too and I either get a template output error on my blog stating that data:post.firstImageUrl doesn’t exist (that’s probably just based on where in the b:if statements I put it)… but in all cases, the validator says “image not found” when I switch over from postImageThumbnailUrl to firstImageUrl.

Since you were able to get firstImageUrl to work… do you mind letting me see how that was coded?

Seems Blogger’s buggy way it deals with Open Graph protocols (or schema.org & JS coding in general) with their custom XML namespace just makes things a hassle compared to using tools supplied by services like WordPress. I’d switch to WordPress since I’ve gone through all of Blogger’s crazy headaches over the years but with Google owing Blogger and Google continuing to prove they prefer their services over 3rd party… I feel it’s only better to stick with them in the context of SEO. :-/

Anyways, pardon the rant, if you can show me how to code firstImageUrl in the OpenGraph/TwitterCard meta tags… that would be awesome. Thanks so much in advance.

princetrunks · 2013-12-16T19:14:02.000Z

…went back again to summery_large_image, though the validator shows the summary card with the tiny thumbnail…the final output on my tweets doesn’t show it. I’ll try the caching options. I put up a new Blogger post today that got pinged fine by Facebook and tumblr just fine…small on G+ though too.

(odd, my first reply to you was put into moderation)

princetrunks · 2013-12-16T19:16:07.000Z

For some reason my first reply got lost in moderation.

I’d say it might be fixed using firstImageUrl instead. I tried but the validator stated the image was not found.

Would it be possible to show me how you coded the meta tags in Blogger to work with firstImageUrl?

rchoi · 2013-12-19T07:10:21.000Z

+1 for being a good contributor! Thanks for updating your request with the solution!

princetrunks · 2013-12-19T22:18:19.000Z

No problem Can’t tell you how many times I’ve looked up similar threads on other coding forums where the person goes “FIXED IT” but never says how, lol.

I did notice with a few tests after changing the code that the actual final tweets are not reflecting the validator’s output; ie: still not showing the images… but that might then be the cache/robots.txt issue. I’ll give some time for the Twitterbot to do another crawl. I made sure to explicitly give Twitterbot full access in the robots.txt file. If it still doesn’t show…I’ll probably put up another thread

thiagomgd · 2013-12-20T10:37:53.000Z

No problem, here it is. I use fb open graph and twitter together.

<b:if cond=‘data:post.firstImageUrl’>

I used this: ‘data:post.snippet + “Veja mais no site”’ on description, because I wasn’t able to generate a text to image-only posts, or posts that sometimes (don’t know why) blogger don’t get a snippet. Since the description is needed for summary, I just added a fixed text.

thiagomgd · 2013-12-20T10:42:39.000Z

Just for testing, change your robots.txt to just:
User-agent: *
If it works this way, you’ll know that robots is the problem, and you can start working from this.
Sometimes I prefer givin full access to everyone (for testing reasons), so I’ll be sure that I didn’t forgot one permission.

princetrunks · 2013-12-20T16:08:42.000Z

awesome. Will do. Mine originally said:


User-agent: robot
Disallow:

before I added an explicit User-agent call for Twitterbot but I’ll try this global permission text

princetrunks · 2013-12-20T16:09:51.000Z

awesome. I was trying something like this but blogger would send a template error. Thanks a bunch.

princetrunks · 2013-12-20T17:38:10.000Z

yep… that worked

Not sure why my robots.txt had such odd permissions. Better to just let the spiders crawl

rchoi · 2013-12-20T20:19:58.000Z

@thiagomgd, Thanks so much!

askdadblog · 2014-01-24T21:29:42.000Z

I have the exact same problem with FB open graph tags pulling in the 72*72. Do you think this would work there too?

princetrunks · 2014-01-24T21:36:33.000Z

it’s worth a shot since Twitter Cards and Open Graph are for the most part, the same thing. I think I once saw one of my FB posts utilize an image I designated with Twitter Card tags before the Open Graph one.

askdadblog · 2014-01-24T23:27:26.000Z

I tried, it kicked back a template error on the page. Sigh… I am so tired of Facebook pulling in my header image. I need to switch to a more open CMS, but like you, I enjoy the reliability and SEO value of blogger.

princetrunks · 2014-01-24T23:38:15.000Z

That sucks :-/ Yeah, I never had a reason to move over to say Wordpress since I’d imagine Google will move their own blog environment in the organic searches before a 3rd party one.

Here’s my Open Graph code; for the most part, Facebook has been scaling the header images in my posts… maybe cropping them a bit off but definitely not the 72x72 error like I was originally getting with Blogger/Twitter Cards. Hope this can be of help.

DevilzArt · 2014-02-27T04:09:31.000Z

thanks for this meta tag, i implement this code in my blog, but something wrong. this code not valid in w3c validator. because meta must placed in header.