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

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.

princetrunks · 2014-02-27T22:27:39.000Z

I believe I placed this in the head tag…problem is that Google themselves still haven’t made Blogger’s Namespace w3c compliant. Last I used a w3c validator on my blog, if I remember right, it was mainly due to the “data:” calls. Not sure if Google fixed that on their end yet or if there’s a way to make a Blogger Blog truly w3c compliant

techinfoknow · 2014-03-30T23:40:00.000Z

I suggest you to read this http://www.techinfoknow.com/2014/03/twitter-card-blogger.html
If you want to use “summary” or “summary large image” twitter card for blogger I recommend this solution. This also works on multi author blogger blogs .

rchoi · 2014-04-07T05:57:31.000Z

@princetrunks,

Thanks a ton for contributing. Each case is unique (as I’m sure you’re aware) so having people offering their code up is certainly helpful.

Thanks again!