Clean HTML headings to align with SEO best practices

templates/app/components/product_card_component.html.erb

@@ -40,15 +40,15 @@
       class="dark:text-black <%= text_flex_classes %>"
     >
       <header class="product-card_header <%= title_text_classes %>">
-        <h2>
+        <span>
           <%= link_to(
             truncate(product.name, length: 50),
             product_path(product),
             class: 'info',
             itemprop: "name",
             title: product.name
           ) %>
-        </h2>
+        </span>
       </header>
       <section 
         class="product-card_price font-sans-md mt-1 lg:mt-0 <%= price_classes %>"

templates/app/views/home/_collection.erb

@@ -1,7 +1,7 @@
 <% if products.length > 0 %>
   <section class="wrapper mb-12">
     <div class="flex items-center justify-between mb-7">
-      <h3 class="font-serif text-h4 md:text-h3"><%= title %></h3>
+      <span class="font-serif text-h4 md:text-h3"><%= title %></span>
       <%= render "shared/call_to_action", { label: "Shop All", type: 'secondary', url: products_path } %>
     </div>
 

templates/app/views/home/_collections_with_call_to_action.html.erb

@@ -1,6 +1,6 @@
 <section class="grid-container grid-cols-1 gap-7 wrapper py-4 lg:py-12 lg:grid-cols-3">
   <div class="flex flex-col items-center justify-center py-10 px-3">
-    <h3 class="text-h2.5 text-center font-serif mb-5">Become the brand everyone talks about.</h3>
+    <span class="text-h2.5 text-center font-serif mb-5">Become the brand everyone talks about.</span>
     <%= render "shared/call_to_action", { label: "Get Started", url: 'https://solidus.io/get-started', target: '_blank' } %>
   </div>
 

templates/app/views/home/_featured_product_banner.html.erb

@@ -7,7 +7,7 @@
     )) %>
     <div class="absolute bottom-0 left-0 right-0 text-center pb-14">
       <span class="rounded-full px-3 py-1 bg-white text-sm text-black mb-2">New</span>
-      <h4 class="text-h3 font-serif-md mb-6 text-white md:mb-11 md:text-h2.5"><%= product.name %></h4>
+      <div class="text-h3 font-serif-md mb-6 text-white md:mb-9 md:text-h2.5"><%= product.name %></div>
       <%= render "shared/call_to_action", { label: "Shop Now", type: 'secondary', url: product } %>
     </div>
   </div>

templates/app/views/products/_featured_product_card.html.erb

@@ -6,7 +6,7 @@
     class: 'w-full object-cover'
   )) %>
   <div class="absolute flex flex-col gap-y-2 lg:gap-y-4 inset-x-6 bottom-6 lg:inset-x-8 lg:bottom-8">
-    <h3 class="text-white drop-shadow-sm text-h6 font-serif md:text-h5 lg:text-h3"><%= product.name %></h3>
+    <span class="text-white drop-shadow-sm text-h6 font-serif md:text-h5 lg:text-h3"><%= product.name %></span>
     <%= render partial: "shared/call_to_action", :locals => { :label => "Shop now", :url => product } %>
   </div>
 </div>

templates/app/views/products/_product_taxons.html.erb

@@ -1,8 +1,8 @@
 <% if !product.taxons.blank? %>
   <section class="product-taxons">
-    <h2 class="product-taxons__title">
+    <h1 class="product-taxons__title">
       <%= t('spree.look_for_similar_items') %>:
-    </h2>
+    </h1>
 
     <ul class="product-taxons__list">
       <% product.taxons.each do |taxon| %>

templates/app/views/products/_products.html.erb

@@ -10,14 +10,14 @@
 <% end %>
 
 <% if products.empty? %>
-  <h2 class="products__results-title font-serif-md text-body-20 mb-6 lg:text-body-lg">
+  <span class="products__results-title font-serif-md text-body-20 mb-6 lg:text-body-lg">
     <%= t('spree.no_products_found') %>
-  </h2>
+  </span>
 <% else %>
   <% if params.key?(:keywords) %>
-    <h1 class="products__results-title font-serif-md text-body-20 mb-6 lg:text-body-lg">
+    <span class="products__results-title font-serif-md text-body-20 mb-6 lg:text-body-lg">
       <%= t('spree.search_results', keywords: h(params[:keywords])) %>
-    </h1>
+    </span>
   <% end %>
 
   <%= render 'products/products_grid', products: products, taxon: taxon %>

templates/app/views/products/_products_by_taxon.html.erb

@@ -1,7 +1,7 @@
 <section class="products-by-taxon">
-  <h5 class="products-by-taxon__title mt-10 mb-4 font-serif text-h6 lg:text-h5">
+  <span class="products-by-taxon__title mt-10 mb-4 font-serif text-h6 lg:text-h5">
     <%= link_to products_by_taxon.name, taxon_seo_url(products_by_taxon) %>
-  </h5>
+  </span>
 
   <%= render 'products/products', products: taxon_preview(products_by_taxon), taxon: products_by_taxon %>
 </section>

templates/app/views/products/index.html.erb

@@ -9,9 +9,9 @@
   </aside>
   <section class="products_section col-span-full md:col-span-9 lg:col-span-10">
     <% if params[:keywords] && @products.empty? %>
-      <h6>
+      <span style="text-red drop-shadow-sm text-h6 font-serif md:text-h5 lg:text-h3">
         <%= t('spree.no_products_found') %>
-      </h6>
+      </span>
     <% else %>
       <%= render 'products', products: @products, taxon: @taxon %>
     <% end %>