I recently realized that my Blogger posts showed a weird behavior in the Facebook sharer: Instead of the summary displaying the first few paragraphs of my actual post, it was using the first comment below the post.
A comment as a post summary? Really? This was bad.
At first I thought I might have messed up my Blogger template. After years of edits and tweaks, I just might have tinkered with something I shouldn't have. So, to test what was really going on, I made a completely new Blogger blog using the clean and untouched stock template titled 'Simple'. You're on it.
Next, I wrote a first comment below my new post saying "This is a comment, and should not be in an OpenGraph share summary [...]".
All set and ready to test. I brought my brand new post to the Facebook sharer. And, lo and behold:
Aha! Me messing with my template was not the issue. This is obviously the default behavior.
But, the problem exists nonetheless. And I realize that now I'm up against two giants: Google (the Blogger team) and Facebook (the OpenGraph team). Not exactly outfits you can just call up and say, "Hey, guys, mind fixing this?"
So that's basically where it's at right now. Back at my regular blog I have tried different kinds of hacks and tweaks (excuse the geekery here): explicitly providing the Opengraph meta-tags in my Blogger template for starters. But this deals only with the data that is already correct, i.e. og:site_name, og:url, og:type, og:title and og:image. I have as of yet not figured out a way to get a snippet of Blogger's post.body into an og:description since it seems to not yet exist up in the <head> portion of the page where the meta tags reside (//end of geekery portion). But even if I could figure out a way around this error, I shouldn't have to. Neither should anyone else on the Blogger platform.
So, are you experiencing the same problem? Sitting on an idea or solution? Working at Google or Facebook? Don't hesitate to make yourself heard in the comments! (Hell, you might even show up in the OpenGraph summary of this post).
Links
» My test post on this blog
» My test post in the Facebook sharing dialog
» My test post through the Facebook Opengraph debugger
EDIT: Tech-blogger George B. Moga was familiar with the issue. Hit the jump for more info.
This is the deal:
OpenGraph parses the page looking for the first paragraph, <p>...</p>, to use for description.
But Blogger uses <div> instead of <p> to encapsulate paragraphs. Hence, the first <p> that will be encountered is the comment.
Editing the template and putting <p>...</p> around the entire post body will help in a few select cases, e.g. where the post starts off with plain text, and not some img or div:s.
EDIT2: I found that inserting a span after the p will help it survive a lot better, so go:
<p><span><data:post.body/></span></p>
EDIT2: I found that inserting a span after the p will help it survive a lot better, so go:
<p><span><data:post.body/></span></p>
The real workaround is to use another editor that creates a more semantic markup. George and others suggest Windows Live Writer (part of the Live Essentials package).
But, as I said - this is a major annoyance in the platform. One that the Blogger team really should address quickly. The platform and loads of its bloggers are surely losing traffic through badly shared content right now.
You wouldn't want us to migrate to Wordpress, would you? (A platform that creates beautiful OpenGraph tags by default btw ... just saying...)
As promised over on Twitter:
ReplyDeleteThe problem is that the post body is contained within a < div> tag and the comments are using a paragraph tag < p>. OpenGraph is parsing the page and using the first < p> as description, and in your case that's the comment...
So basically it's actually Blogger's fault, because the online post editor defaults to < div>'s instead of < p> tags - which are definitely more semantic that the generic < div>.
I did't encounter this problem because I almost always blog through third-party software (Windows Live Writer preferably or Word) that uses the correct paragraph tag. And when I use the online editor I manually correct the HTML code...
Thanks a lot, George! That is actually some very helpful information!
ReplyDeleteI just modified the template with (the rather ugly) hack to encapsulate the entire post body in a paragraph, like this:
<p><data:post.body/></p>
... and ran it through the OpenGraph debugger againg. And it works! :)
And it seems <p><span><data:post.body/></span></p> works even better still. It might just have saved me the trouble of editing ~700 posts.
ReplyDeleteYeah, going back to fix hundreds of posts is no fun :(
DeleteThat's the problem with Blogger, the platform is customizable and (I think) easier to use than Wordpress (because you don't need to go into php to make changes to the template), but the default tools are just not very good, especially the online editor. I suspect the dev team inside Google is on a tight budget and they don;t have enough resources to implement/fix everything. On top of that the problem with OpenGraph integration is that it would "help" their "rivals" - Facebook - so I imagine it's nowhere near the top of the list of priorities.
Hi all . I have been scouring forums, twitter, FB, google - EVERYWHERE .. Need some help . I have 2 apps that I submitted this week on FB .. One app has been rejected 6 times, the other 3 times, I have never had this issue before .. All of a sudden I was issued a warning on my last submission .. They are requiring removal of fangating/likegating code and requiring that my app now much have a logout button .. along with this comes a link to their new policy, effective Oct 10th ... the other app is completely in compliance with this new policy but they still keep rejecting (I have actually included a link to a video of me testing the app because they claim they are not able to test according to my instructions) .. was wondering if there is any word of the streets of similar stories? i have never had any problems before getting my apps approved .. .thanks ahead of time
ReplyDelete