#1
  1. No Profile Picture
    Newbie
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Sep 2017
    Posts
    2
    Rep Power
    0

    Question Best Practice HTML - Product Listing Pages


    Hi,

    First post here - hoping to get some advice to settle a debate in the office

    So, the question in short is - which is better for SEO on Category Pages - 20 products in a list, and each product has the following HTML structure...

    ...top or bottom?

    Code:
    -----------------------------------
    Product  Thumbnail HTML 20 Per Page
    -----------------------------------
    
    <div class="product">
        <div class="img">
            <a href="/some-product-url/" title="Product Name">
                <img src="/product-image.jpg" alt="Product Name (Product SKU)" width="500" height="500">
            </a>
        </div>
        <article>
            <h2>
                <a href="/some-product-url/" title="Proudct Name">Product Name</a>
            </h2>
        </article>
    </div>
    
    -----------------
            VS
    -----------------
    
    <a href="/some-product-url/" title="Product Name">
        <img src="/product-image.jpg" alt="Product Name (Product SKU)" width="500" height="500">
        Product Name
    </a>
    Last edited by davidjohnfarmer; Sep 13th, 2017 at 11:08 AM.
  2. #2
  3. SeoRaptor
    SEO Chat Adventurer (500 - 999 posts)

    Join Date
    Mar 2016
    Location
    France, Saint-Etienne
    Posts
    993
    Rep Power
    1703
    I would not use the <article> tag because your title can not be considered as an article and I would not use H2 tags for the product title I would use a <span> tag instead to style it (or a lower H tag if you really want to keep using it).

    The most important thing are your products pages that should be full of structured data.

    I guess you could use itemlist microdata on a category page to list the products but I never really used it this way.

    What I would from a dev point of view (don't know the impact on google bot if there is any) is using class name related to products eg <img class="product-list-image" src="..." alt="..." /> for product images <span class="product-name"> for the product name <span class="product-SKU"> for SKU and so on, but I do this more to make things easy when writing CSS than for ranking.

    I would also use full path URLS for the link to pages (in case someone copies your content it gets the full link to your site) and relative link for images (in case someone copies your content the image won't appear on its page without any work)

    Comments on this post

    • davidjohnfarmer agrees
    Owner of Bennetonable - "My opinions are my own - Feel free to disagree & think above the fold."
    Need a quick analysis > Free SEO grader Beta
  4. #3
  5. No Profile Picture
    Newbie
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Sep 2017
    Posts
    2
    Rep Power
    0
    We generally use the JSON format schema data as it keeps the source code tidy.

    The second mark-up (which you might not have seen - you need to scroll down on the code box) - seems to be your preference then?

    My debate was that you use the lightest amount of HTML possible to achieve the same layout, and have only one link per product (the first example code has two)...

    +1 on your comment about the article tag though.

    ~ we wouldn't generally use span class="product-name" - instead just use a wrapper and identify the child item using something like .product-grid > a > span (slightly more CSS, but less HTML).

    =)
  6. #4
  7. SeoRaptor
    SEO Chat Adventurer (500 - 999 posts)

    Join Date
    Mar 2016
    Location
    France, Saint-Etienne
    Posts
    993
    Rep Power
    1703
    ~ we wouldn't generally use span class="product-name" - instead just use a wrapper and identify the child item using something like .product-grid > a > span (slightly more CSS, but less HTML).
    Totally agree, I'm not the best coder, there is a lot of things I need to get better at when it comes to CSS and HTML

    We generally use the JSON format schema data as it keeps the source code tidy.
    JSON is indeed the best way to go. It's the option I use, fast to generate and easier to include.

    My debate was that you use the lightest amount of HTML possible to achieve the same layout, and have only one link per product (the first example code has two)...
    I'm some kind of loading speed fanatic, so i'm totally on your side when it comes to make the code as little as possible, but I still use two links instead of one when it comes to product listings, but I can't assure you this is the right way to go. I do this because it gives e the ability to use one of them to expand the image if needed, (I generally work for client that like changing their mind and ase me do the work 2 or even 3 times).

    The impact on code size of adding the second link if very limited and unnoticeable to the user even if you display 20 products per page.



    To answer your question I would go for the first, removing the <article> and the <h2> but keeping the two links.
    Owner of Bennetonable - "My opinions are my own - Feel free to disagree & think above the fold."
    Need a quick analysis > Free SEO grader Beta

Similar Threads

  1. SEO for New Product, Best Practice
    By DATHAEUS in forum New User SEO Questions and Answers
    Replies: 3
    Last Post: Nov 23rd, 2016, 06:14 PM
  2. Website SEO Product Pages - Condense Product Pages
    By iovacomm in forum New User SEO Questions and Answers
    Replies: 1
    Last Post: Oct 18th, 2014, 02:18 AM
  3. Request for Help with HTML Title Tags for Product Pages
    By BrookSEO in forum Search Engine Optimization
    Replies: 0
    Last Post: Mar 25th, 2013, 03:57 PM
  4. HTML practice
    By kaymeis in forum Web Design, Coding and Programming
    Replies: 13
    Last Post: Jun 15th, 2011, 10:30 AM
  5. Listing product pages under Google Natural search
    By EvanWasHere in forum Google Optimization
    Replies: 3
    Last Post: Sep 16th, 2007, 11:41 AM

IMN logo majestic logo threadwatch logo seochat tools logo