How to prevent nested secondary information from polluting anchor text?

Question

Say I have a website that lists items and presents them in clickable blocks with a few details, like this:

<a href="/product/1234">
    <img src="/product-1234.jpg" />
    <div class="price">$25</div>
    <div class="reviews">10 reviews, 90% satisfied</div>
    <div class="title">Vintage red pantaloon</div>
    <div class="availability">6 available</div>
    <div class="shipping">Ships in 3 days</div>
</a>

The idea being that the block contains a prominent title and some secondary details, all arranged on a thumbnail image used as background, but the whole block should be clickable and link to the item page.

Of course human users would mostly see the prominent title, but I suppose that for a search engine, the anchor text of this link would be something like $25 10 reviews, 90% satisfied Vintage red pantaloon 3 available Ships in 3 days (...woulnd't it?). And I'd rather have search engines associate this link specifically to Vintage red pantaloon and not all the text from secondary details.

Is it possible to have specific parts ignored from search engines in the anchor text, or tell them to give more weight to some text that should be considered as "primary"?

(Or maybe there's no need to worry about that?)

Answer 1

Is it possible to have specific parts ignored from search engines in the anchor text, or tell them to give more weight to some text that should be considered as "primary"? (Or maybe there's no need to worry about that?)

There is no need worry about that. It is not because there is a price next to Vintage red pantaloon that it hampers Google's algorithms capacity to detect Vintage red pantaloon. If the price is not interesting information for any query, they will filter it out.

Now, you can reinforce the importance of Vintage red pantaloon by mentioning it in the ALT tag of your image. You could also add it in the filename of your picture (product1234-vintage-red-pantaloon.jpg).

Answer 2

Theres a wonderful tool out there for you. Go to textalyzer.net and run all your text on your page through it and it will measure the prominence of pairs of words on the page. This will give you an idea what words are and are not important in a page.

The problem with this:

<a href="/product/1234">
<img src="/product-1234.jpg" />
<div class="price">$25</div>
<div class="reviews">10 reviews, 90% satisfied</div>
<div class="title">Vintage red pantaloon</div>
<div class="availability">6 available</div>
<div class="shipping">Ships in 3 days</div>
</a>

.. is that it isn't quite correct. Those DIVS need to change to spans if you must include them. Also, having all those extra tags reduces your code to text ratio which means search engines might think you don't have much content. Test your page with seositecheckup.com and you'll see what I mean.

In your case, I would just have an anchor represent the actual item and on a separate page, talk about the item. For example:

Product listing page (assuming all HTML headers are previously intact):

<p>These are our products. Select one</p>
<a href="/product/1234">The best vintage red platoon on the market</a>
<a href="/product/5678">Product 5678</a>

Just try to describe the product with the fewest words possible that best describe the product.

Then on product 1234's page you could have:

<img src="product1234.jpg"><br>
<div class="productdetail">
<p>This vintage red pantaloon product costs $25. Only 6 are available. There are 10 reviews for this product and 90% of our customers are satisfied. Shipping time required is three days.</p>
</div>
<a href="/product/1234/reviews">See reviews</a>
<a href="/product/shipping">Learn more on product shipping</a>

My HTML code is in a rough copy format and should be tweaked to make the page look better.

So make the primary text of the product on a category or main page, then link it to the product details page so that the secondary text doesn't "pollute" the main product text on the main page.