How to structure links on a "Card" for maximum crawler-friendliness

[jcgoodrich]

My question is how to best structure the links on a "Card" while maintaining usability for touchscreens. I've attached a simple wireframe, but the "card" is a format you see a lot now on the web: it's about a "topic" and contains an image for the topic and some text. When you click the card it links to a page about the "topic".

My question is how to best structure the card's html so google can most easily read it. I have two options:

a) Make the elements of the card 2 separate links, one for the image and one for the text. Google would read this as follows.

//image
[](/target URL)

//text
<a href=' target="" url'="">Topic</a href='>

b) Make the entire "Card" a link which would cause Google to read it as follows:

<a></a>

<a>Bunch of div elements that includes anchor text and alt-image attributes above along with a fair amount of additional text.</a>

<a></a>

Holding UX aside, which of these options is better purely from a Google crawling perspective? Does doing (b) confuse the bot about what the target page is about? If one is clearly better, is it a dramatic difference?

Thanks!

PwcPRZK