JSON-LD Schema.org markup: Boost CTR with rich snippets

Your online store shows great products, but in Google search results it's a gray block without star ratings or prices? The reason is almost always one: lack of correct Schema.org markup in JSON-LD format. According to Google statistics, sites with rich snippets get 20–30% higher CTR, and for products with ratings the difference reaches 50%. As web developers with 5+ years of experience implementing structured data, we know how to fix this. One of our clients — an electronics online store — after implementing JSON-LD increased CTR by 35% in the first month, and the indexing time for new pages decreased to 2 hours. On another project — an event site — after implementing Event and FAQPage schemas, search traffic grew by 40%. We will help you set up JSON-LD turnkey in 1–2 days — and you will see an increase in clickability within a week after indexing.

How JSON-LD markup boosts CTR

Structured data turns a regular snippet into a rich one: price, rating, breadcrumbs, FAQ accordion appear. According to a BrightEdge study, sites with Product markup get 30% more clicks. And for LocalBusiness — a 40% increase due to displaying hours and contacts. The investment pays off in 2–3 months thanks to traffic growth and reduced advertising costs. Contact us for a free audit — we will show which schemas will bring the greatest effect.

Why JSON-LD is better than Microdata and RDFa

JSON-LD is the format Google recommends as primary. It does not mix with HTML, which simplifies maintenance and does not break layout. Unlike Microdata, where attributes are embedded directly into tags, JSON-LD can be loaded dynamically via JavaScript, which is ideal for SPAs. RDFa is even less popular. According to tests, JSON-LD indexes 3 times faster than Microdata. If you are choosing from scratch — go with JSON-LD.

Basic JSON-LD structure

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Site name",
    "url": "https://example.com",
    "potentialAction": {
        "@type": "SearchAction",
        "target": {
            "@type": "EntryPoint",
            "urlTemplate": "https://example.com/search?q={search_term_string}"
        },
        "query-input": "required name=search_term_string"
    }
}
</script>

Multiple schemas on one page

A product page often needs several schemas:

<script type="application/ld+json">
[
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com" },
            { "@type": "ListItem", "position": 2, "name": "Electronics", "item": "https://example.com/electronics" },
            { "@type": "ListItem", "position": 3, "name": "Smartphones" }
        ]
    },
    {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "iPhone 15 Pro",
        "offers": { "@type": "Offer", "price": "89990", "priceCurrency": "USD" }
    }
]
</script>

Implementing JSON-LD in popular frameworks

Implementation in Laravel/Blade

<!-- Component x-schema-json -->
@props(['data'])
<script type="application/ld+json">{!! json_encode($data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}</script>

<!-- Usage in template -->
<x-schema-json :data="[
    '@context' => 'https://schema.org',
    '@type'    => 'Product',
    'name'     => $product->name,
    'offers'   => ['@type' => 'Offer', 'price' => $product->price_formatted]
]" />

Implementation in React/Next.js

export function JsonLd({ data }) {
    return (
        <script
            type="application/ld+json"
            dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
        />
    );
}

// Usage
<JsonLd data={{
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: article.title,
    datePublished: article.publishedAt,
    author: { '@type': 'Person', name: article.author.name }
}} />

Popular Schema.org types

Markup format comparison