Makro, Your Fancy Web Page and Poor Markup Makes Google Think That Shitty Laptop Costs $21,000

My co-worker wanted me to find a spare battery for their latptop. Not my job, but whatever.

I looked up the brand and noticed a result showing that one of their shit laptops cost ZAR399,999.00.

Curious, I clicked the result and noticed that the laptop was actually more reasonably priced at ZAR3,999.00—issue was that the cents portion was offset.

Makes sense to me but looking at the markup the problem becomes clear:

<p class="price ">
    <span class="mak-save-price">R 3,999</span>
    <span class="mak-product__cents">00</span>
</p>

There’s no separator between the Rands and cents!

A simple fix would be to put the separator and visually hide it.

<p class="price ">
    <span class="mak-save-price">R 3,999</span>
    <span class="visually-hidden">.</span>
    <span class="mak-product__cents">00</span>
</p>

Assuming your .visually-hidden class is defined, you don’t have to write any more CSS. We could make this more semantic by using the <data> element instead, though that might be overkill:

<p>
    <data value="ZAR3999.00">
        <span class="mak-save-price">R 3,999</span>
        <span class="visually-hidden">.</span>
        <span class="mak-product__cents">00</span>        
    </data>
</p>

I was curious as to how to do this semantically and Google has some suggestions. In short, use the price schema.org microdata. Here’s my attempt at doing that:

<p itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span>
        <span itemprop="priceCurrency" content="ZAR">ZAR</span>
        <data itemprop="price" value="3999.00">
            <span class="mak-save-price">3,999</span>
            <span class="visually-hidden">.</span>
            <span class="mak-product__cents">00</span>        
        </data>
    </span>
</p>

Verbose, but more semantic and it’s why templates exist.

All this makes me wonder—can Google understand visual representation? I mean, it can do Web Vitals but does it understand what this page is supposed to look like? It’s fair to assume that the price would be interpreted in Rands and cents, but some might get confused, especially if you use a screen reader. Then again, I tried with NVDA but it didn’t get confused.

Still, you should improve your markup, Makro!