In any case, I would say that this is a bug on Google's end. SO is already using microdata to annotate the relevant content on its Q&A pages, and Google's own testing tool is parsing it just fine.
(Looking at the page source, I do notice that we could be making more use of microdata than we already are. For example, comments are not currently marked up with microdata at all, even though there's a schema for that, and we're also not annotating the author / editor links and timestamps below posts. But that's something for a separate feature-request.)
Furthermore, the issue shown in your screenshot seems to only affect the featured snippet at the top of the search results page — the normal search results below look just fine, even when showing the exact same page. So I'd say that this is an issue with the featured snippet generation at Google — for some reason, it's ignoring the explicit text property used to mark the post text in the SO microdata, and instead choosing to show the entire content of the Question item (which just happens to begin with the vote buttons).
Now, I'm sure that SO could modify their HTML code so that those vote buttons would not show up in Google's snippets. (The easiest way would be to simply remove the hidden text.) The not so easy part is finding a way to do that while still keeping them accessible by screen readers and text-only browsers.
One option would be to restructure the HTML so that the vote buttons logically come after the post text. Given SO's table-based post layout, this would be a bit tricky to do, but not impossible — for example, the HTML could be changed from the current:
<table>
<tr>
<td class="votecell"><!-- vote buttons here --></td>
<td class="postcell"><!-- post text here --></td>
</tr>
<tr><!-- comments etc. here --></tr>
</table>
to something like:
<table>
<tr>
<td style="height: 0px"><!-- empty zero-height cell --></td>
<td class="postcell" rowspan="2"><!-- post text here --></td>
</tr>
<tr>
<td class="votecell"><!-- vote buttons here --></td>
</tr>
<tr><!-- comments etc. here --></tr>
</table>
That could be a lot of work for a minor change, especially since this would also require some code review and testing to make sure that nothing in the SO front-end JS code breaks because it assumes that post text and vote buttons share the same parent table row. (A quick search I just did found only a single suspicious .closest("tr")
call, and that's in the comment UI code, but I could easily have missed something.) Still, Google SERPs are kind of important for SO, so this might be worth spending the effort, even if it's (arguably) just a workaround for a Google bug.
Ps. If you want to test the effect of the HTML change suggested above on SO, you can paste the following jQuery code to your browser's JS console and run it:
$('.postcell, .answercell').each( function () {
var row = $(this).closest('tr'), vote = row.children('.votecell');
if (vote.length == 0) return;
row.prepend('<td style="height: 0px">').after( $('<tr>').append(vote) );
$(this).attr('rowspan', 2);
} );
At a glance, everything seems to look and work the same after running this code, although I only spent a few minutes testing this.
solved
to titles making it "Google friendly"...