SEO Optimization

This guide explains how Search Engine Optimization (SEO) is implemented and managed in the Bagisto Headless storefront.

Overview

Bagisto Headless uses a combination of Next.js Metadata API, dynamic schema generation, and optimized structural elements to ensure high visibility on search engines. The implementation focuses on three core pillars: dynamic metadata, structured data, and search engine directive management.

1. Meta Tags and Open Graph

Metadata is managed dynamically using Next.js's native generateMetadata function.

Global Fallbacks

Static fallback values for common pages (Home, Login, Register) are defined in a centralized configuration.

File: src/utils/metadata.ts

export const staticSeo = {
  default: {
    title: "Bagisto Headless",
    description: "Headless eCommerce with Bagisto",
    image: "/Logo.webp",
    canonical: "/",
  },
  // ... page-specific fallbacks
};

Dynamic Generation

For dynamic pages like Products and Categories, metadata is generated by fetching data from the Bagisto API and mapping it to the Metadata object.

File: src/utils/helper.ts (generateMetadataForPage) The helper function handles:

• Title & Description: Maps Bagisto SEO fields to HTML tags.
• Open Graph (OG): Generates social sharing tags for Facebook, LinkedIn, etc.
• Twitter Cards: Configures large image previews for Twitter.
• Canonical URLs: Prevents duplicate content issues by explicitly defining the preferred URL.

2. Structured Data (JSON-LD)

Structured data helps search engines understand the content and context of your pages, which can lead to rich snippets (like star ratings and prices) in search results.

File: src/app/(public)/product/[...urlProduct]/page.tsx

We implement Product Schema on all product detail pages:

const productJsonLd = {
  "@context": "https://schema.org/",
  "@type": "Product",
  name: product?.name,
  description: product?.description,
  sku: product?.sku,
  // ... price and availability
};

return (
  <>
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(productJsonLd) }}
    />
    {/* Page Content */}
  </>
);

3. Dynamic Robots.txt

The robots.txt file is generated dynamically to control how search engine crawlers interact with your site.

File: src/app/robots.ts

• Allowed Trails: Open access to the home page and catalog.
• Disallowed Trails: Blocks sensitive or non-indexed paths like /customer/* and /checkout.
• Sitemap Link: Deep-links the sitemap location for faster indexing.

4. Sitemap Generation

The storefront is configured to point search engines to a sitemap.xml. While the core storefront handles the routing, sitemaps are typically generated based on the dynamic slugs provided by the Bagisto API (Products and Categories).

Note: Ensure your NEXTAUTH_URL or a custom BASE_URL is set in environment variables to generate absolute URLs in the sitemap.

5. SEO Best Practices

• Semantic HTML: Every page uses a single <h1> and a logical heading hierarchy.
• Alt Text: Images used in ProductCard and HeroCarousel include descriptive alt tags fetched from the media gallery.
• Performance: Low TTFB and optimized images (via next/image) contribute to better Core Web Vitals, a key ranking factor.

Next Steps

• 🏗️ Architecture Overview - How SEO sits in the global app shell.

• 🧱 Feature Components - See how Product Cards contribute to SEO.