How best to wrap anchor tags around a product tile
-
Hi
Say I am on a Product Listing page on ecommerce website and I have product tiles which contain images and name/price underneath them. Is it better to wrap the whole product tile (image and name/price) in an anchor tag (linking to their product page) or to wrap the image and the name/price underneath in anchor tags separately (linking to the product page) ?
thanks
-
To wrap anchor tags around a product, you'll typically want to create a hyperlink that, when clicked, leads to a page or resource related to the product
-
A possible answer to this issue could be:
"To effectively wrap anchor tags around a product tile, you should ensure that the anchor tag encloses the entire content of the product tile. This can be done by placing the opening <a> tag at the start of the product tile and the closing </a> tag at the end of it. Here’s a step-by-step approach:
Start with the opening anchor tag before any of the product tile content. Add the href attribute to the anchor tag with the URL you want the user to be directed to when they click the product tile.
Ensure that the anchor tag has display block (display: block;) style applied to it, so it takes up the full tile space. This is important for making the whole area clickable.
Place all the HTML that makes up the product tile between the opening and closing anchor tags. This includes the image, product title, price, and any other information you wish to display.
Close the anchor tag after all the product tile content.
Remember to style the anchor tag to remove any default styling like underlines (text-decoration: none;) and ensure it inherits text colors (color: inherit;), so it blends seamlessly with your product tile design.Test the implementation across different browsers and devices to ensure the clickable area covers the entire tile consistently."
By wrapping the entire tile in an anchor tag and ensuring the tag is displayed as a block-level element, users will be able to click anywhere on the tile to navigate to the product's detail page.
-
To wrap anchor tags around a product tile effectively:
Use a parent container for the product tile.
Place the anchor tag within the container.
Ensure the anchor tag covers the entire product tile for accessibility.
Set the anchor's href attribute to the product's page URL.
This approach allows users to click anywhere on the product tile to access more details, improving user experience. -
It's generally better to wrap the whole product tile, including the image and name/price, in a single anchor tag. This approach provides a larger clickable area for users, improving the overall user experience and making it easier for them to access the product details.
.
.
.
( IT Business Analyst ) ( -
It's generally best to wrap the entire product tile in a single anchor tag for a larger clickable area and improved user experience on e-commerce product listings.
-
Hi,
In most cases, it's better to wrap the whole product tile (image and name/price) in a single anchor tag linking to the product page. This approach provides a larger clickable area and offers a better user experience, as visitors can click anywhere within the tile to access the product details. It simplifies navigation and ensures consistency in user expectations when interacting with product listings on an e-commerce website.
.
.
.
( Diploma Courses In Canada ) (Canada PR) (PMP Exam Prep)
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Over Optimised Magento Pages
We are working on a clients Magento site and we've added new copy which has a decent keyword density which is in line with best practice. When we run it through Moz we are getting a Key Word Stuffing alert saying the page has 27 keywords, where we can only see about 11. This is the page https://www.greatbeanbags.com/bean-bag-cushions The client is pushing back saying the page must have already been optimised before as our new copy has triggered the stuffing alert. But my guess is the page was already stuffed but buy some Magento code we can't see. Any ideas? #magento #Keyworddensity
Content Development | | Marketing_Optimist0 -
Unsolved Using NoIndex Tag instead of 410 Gone Code on Discontinued products?
Hello everyone, I am very new to SEO and I wanted to get some input & second opinions on a workaround I am planning to implement on our Shopify store. Any suggestions, thoughts, or insight you have are welcome & appreciated! For those who aren't aware, Shopify as a platform doesn't allow us to send a 410 Gone Code/Error under any circumstance. When you delete or archive a product/page, it becomes unavailable on the storefront. Unfortunately, the only thing Shopify natively allows me to do is set up a 301 redirect. So when we are forced to discontinue a product, customers currently get a 404 error when trying to go to that old URL. My planned workaround is to automatically detect when a product has been discontinued and add the NoIndex meta tag to the product page. The product page will stay up but be unavailable for purchase. I am also adjusting the LD+JSON to list the products availability as Discontinued instead of InStock/OutOfStock.
Technical SEO | | BakeryTech
Then I let the page sit for a few months so that crawlers have a chance to recrawl and remove the page from their indexes. I think that is how that works?
Once 3 or 6 months have passed, I plan on archiving the product followed by setting up a 301 redirect pointing to our internal search results page. The redirect will send the to search with a query aimed towards similar products. That should prevent people with open tabs, bookmarks and direct links to that page from receiving a 404 error. I do have Google Search Console setup and integrated with our site, but manually telling google to remove a page obviously only impacts their index. Will this work the way I think it will?
Will search engines remove the page from their indexes if I add the NoIndex meta tag after they have already been index?
Is there a better way I should implement this? P.S. For those wondering why I am not disallowing the page URL to the Robots.txt, Shopify won't allow me to call collection or product data from within the template that assembles the Robots.txt. So I can't automatically add product URLs to the list.0 -
Best strategy for Researching for FAQ
Hi, I work for an eCommerce. I want to create a FAQ section on category pages with the question relative to that particular category. For Example -https://www.lockthedeal.com/catalog/energy/battery/four-wheeler?subcategory=Cars This is a sample URL for which I want to create a FAQ section.
On-Page Optimization | | RaviM
What would be the best way to do research for FAQs?0 -
Tag Clouds in Google Despite Canonical Links for Single Tags/Articles
I am frustrated to see a lot tag clouds in Google even though I programmed my tagged pages to display a canonical link to the linking article if the is only one result for the tag cloud. The goal to to make sure that the article, which is of better quality than the tag page, ends up in Google without a bunch of thin tag pages getting in there. For instance this article should be in Google and this tag should not be because that tag has a canonical URL for that article. I do not have a lot of experience with tag cloud SEO because I prefer to limit such pages to categories, but I have found tag clouds to be important for aggregating information for specific issues, people, or places that are not already a site category. Some tags I have used to power social media pages that update automatically from RSS feeds for their related tag archives. That is quite useful for pages like that. Should I start using Meta noindex for those instead of rel canonical? I have already done that for author profiles because author profiles get a lot of on site links compared to individual articles because my gridviews use javascript for paging. The same is true for the tags, so if a tag is tagged in 30 articles it will have links from 30 articles but if those articles are not in the latest 20 for that tag only the latest 20 will have links back from the tag archive. I also suspect having a lot of tag pages with little content to negatively impact my indexing rate. I will see a number of recent tag pages added before new articles.
On-Page Optimization | | CopBlaster.com0 -
Product Descriptions (SEO)
So I would like a few opinions. How long should a product description be? Enough to get the point across? 100 words? 800 words? Over detailed? Any advice would be appreciated.
On-Page Optimization | | mattl990 -
Is there any benefit to removing brand name from the title tag?
I just signed up for Moz recently, and have noticed that in my crawl errors, I have hundreds of issues with my title tag being too long. My business is selling prints for landscape/travel/nature photography, and I've built these pages dynamically to where the title tag for pages selling individual photos has the title of the photo for sale followed by a hyphen and then the brand name. The same goes for gallery pages "Gallery Name | Brand Name". Would it be worth it to shorten the title tags by removing the brand name from these pages? Or will that actually harm more than help? Thanks in advance!
On-Page Optimization | | shannmg10 -
Benefits of having a Title-Tag that fits on the SERP
Has anyone seen any case studies that show that title-tags that fit on the page (http://moz.com/blog/new-title-tag-guidelines-preview-tool) have a higher ctr than title-tags that don't fit? I know it's been said that keywords past the pixel limit still matter but if there's a major benefit to ctr for title-tags that fit....Any thoughts?
On-Page Optimization | | GSO0 -
Is there a guide to best practices for site content and blogs?
We have been working hard producing good content for our sites and now we need to know what are the most current best practices regarding placing and organizing content. We do the usual social media blast with Twitter, FB, G+ with each blog post. But it seems there is more that can and should be done. What about authorship and schema tags?
On-Page Optimization | | devonkrusich0