Brad Bartell

Tag: JavaScript

  • Why JSON-LD is Critical for Modern SEO: A Real-World Example from Modere

    If you want your brand to stand out on Google, it’s no longer enough to simply rank high—you need to look great too. One of the most powerful (yet often overlooked) tools for enhancing your search appearance is JSON-LD structured data. During my time at Modere, I saw firsthand how implementing JSON-LD, particularly for product reviews, helped us turn basic listings into rich, eye-catching results. Here’s why JSON-LD matters—and how we used it to drive more visibility and credibility.

    What is JSON-LD?

    JSON-LD (JavaScript Object Notation for Linked Data) is a way to add machine-readable metadata to your web pages without disrupting the user experience. It tells Google—and other search engines—important information about your content: products, reviews, organization info, FAQs, and more.

    Unlike older methods like Microdata or RDFa, JSON-LD is simple to implement and doesn’t require nesting tags within your HTML. Instead, it sits cleanly in the <head> (or sometimes <body>) of your page as a standalone block of code.

    The Opportunity at Modere:

    At Modere, we were already gathering thousands of authentic product reviews through Yotpo, a leading customer review platform. However, while these reviews were visible on the page, they weren’t showing up in Google’s search results as rich snippets (the star ratings you often see under a product link).

    Without structured data, Google had no way to easily associate our reviews with our products—which meant we were missing out on valuable trust signals and click-through opportunities.

    How We Solved It: Adding JSON-LD to Our Next.js Website

    Working within a Next.js framework, we developed a process to dynamically inject JSON-LD into our product pages based on real Yotpo review data. Here’s how we approached it:

    • Pulled Yotpo data: On page load (or during server-side generation), we accessed the latest review counts and average ratings via Yotpo’s API.
    • Generated JSON-LD: For each product page, we created a JSON-LD schema following Google’s Product schema guidelines, including fields like name, description, aggregateRating, and review.
    • Injected it into the page: Using Next.js’ <Head> component, we embedded the JSON-LD inside a <script type=”application/ld+json”> tag.

    Here’s a simple version of what we added:

    import Head from 'next/head';

export default function ProductPage({ product, yotpoReviews }) {
  const jsonLd = {
    "@context": "https://schema.org/",
    "@type": "Product",
    "name": product.name,
    "description": product.description,
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": yotpoReviews.average_score,
      "reviewCount": yotpoReviews.total_reviews
    }
  };

  return (
    <>
      <Head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        />
      </Head>
      {/* Rest of product page */}
    </>
  );
}

    The Results:

    After Google re-crawled our pages:

    • Many Modere products started displaying review star ratings directly in search results.
    • Click-through rates improved, particularly on competitive products.
    • Customer trust increased before even landing on the site—because seeing those stars makes a strong first impression.

    Why This Matters for Your Website:

    Adding JSON-LD structured data isn’t just a “nice to have”—it’s becoming a necessity if you want your site to:

    • Earn rich snippets (stars, pricing, availability, FAQ dropdowns)
    • Improve click-through rates (CTR) from search results
    • Provide better context for AI models and voice search systems
    • Future-proof your SEO against evolving search engine expectations

    If you’re running a modern site—whether it’s built on Next.js, WordPress, Shopify, or anything else—you should be leveraging JSON-LD. It’s one of the highest-ROI, lowest-friction ways to boost your search appearance and show customers (and Google) that your content deserves attention.

    At Modere, this simple but strategic addition helped us bridge the gap between customer experiences and search engine visibility—and it’s something I recommend to every brand serious about their digital presence.

  • Share API For Consultant Marketing Pages

    When I was working with Arbonne, we faced a unique challenge:

    How could we empower Consultants to easily share marketing pages that looked better, performed better, and still properly linked back to their e-commerce stores for attribution?

    To make the sharing experience effortless, we leveraged the Web Share API.

    With a single click, Consultants could open their device’s native share options and automatically send a personalized link — no copying and pasting, no extra steps.

    Each Consultant had a unique identifier we called their Consultant Business Name (CBN). Traditionally, the CBN was added as part of the subdomain to route traffic to their personalized shopping sites. However, due to limitations in our tech stack, we had to host these new marketing pages on a separate server — one that didn’t inherently recognize the CBN structure.

    To solve this, we used a cookie-based approach:

    • When a visitor landed on a marketing page through a shared link, the query string appended the CBN (e.g., ?cbn=JohnDoe).
    • JavaScript then read that query string and set a cookie storing the CBN.
    • As users browsed the site, JavaScript dynamically updated shopping URLs to include the correct CBN — ensuring purchases still attributed to the right Consultant.

    The key was automation:

    Rather than training Consultants to manually add query parameters, we simply taught them to use the Share button — which handled all the logic behind the scenes.

    Here’s a simplified version of the sharing logic:

    JavaScript
    if (navigator.share) {
  navigator.share({
    title: 'Check out Arbonne!',
    text: 'Discover amazing products through my Arbonne Consultant store!',
    url: window.location.href + "?cbn=" + cookievalue
  }).then(() => {
    console.log('Thanks for sharing!');
  }).catch(console.error);
}

    Beyond just improving the sharing process, these marketing pages offered major SEO advantages over the legacy e-commerce platform:

    • Custom page titles and meta descriptions
    • Open Graph tags for better social media previews
    • Faster load times with clean, lightweight HTML
    • More targeted keyword optimization around product categories and promotions

    The result?

    These pages didn’t just perform better for direct links — they also started ranking organically in search engines, driving new discovery traffic and expanding the reach of each Consultant’s business.