Türkçe çeviri: Headless Ecommerce SEO

TL;DR — Headless ecommerce anlamına gelir sizin storefront (ne shoppers see) dır oluşturulmuş separately -den sizin commerce motor (Shopify, Commercetools, BigCommerce). bençin SEO, ne önem taşır dır nasıl sizin storefront renders sayfalar. oluştur them on server veya at deploy time ve Google alır finished HTML. oluştur them in browser ve Google sahiptir -e wait bençin JavaScript — hangi o -ebilir yap, ama o’s slower ve riskier.

ne “headless” anlamına gelir bençin bir store

bir traditional ecommerce platform (WooCommerce, standard Shopify) handles everything in bir system: o stores sizin products, süreçler orders, ve renders HTML sayfalar shoppers ve crawlers see. bir headless setup splits şunlar responsibilities. bir commerce motor manages products, inventory, ve checkout. bir separate frontend framework — genellikle sonraki.js, Nuxt, veya Astro — fetches şu data ve renders ne visitors aslında see.

commerce motor dır now invisible -e arama motorları. ne Google sees dır whatever sizin frontend renders.

bir decision şu determines SEO outcomes

nasıl yapar sizin frontend oluştur her sayfa?

• SSR (server-side rendering) — server builds sayfa her biri bençin istek. Crawlers al complete HTML. Safe bençin SEO.
• SSG (static site generation) — sayfalar dır pre-oluşturulmuş olarak HTML files at deploy time. Fastest ve safest bençin SEO.
• CSR (client-side rendering) — server sends bir empty shell; JavaScript builds sayfa in browser. Google -ebilir render o, ama on bir delayed queue. diğer crawlers çoğu zaman -ebilir’t.

en çok headless storefronts kullan sonraki.js, Nuxt, veya Astro — tümü of hangi support SSR ve SSG. risk dır accidentally enabling CSR bençin product veya category sayfalar.

ne siz now kendi

In bir monolithic platform, oluşturulmuş-in modules veya plugins ele al SEO basics. In bir headless setup, siz oluştur tümü of bu:

• Title tags ve meta descriptions (per sayfa, değil sitewide)
• Canonical tags (especially critical bençin fasetli gezinme ve varyant URLs)
• XML sitemap generation
• JSON-LD structured data (Product, BreadcrumbList, organizasyon)
• robots.txt

frameworks bu küme kapsar — JavaScript SEO, sonraki.js, React, Headless CMS — her adres bir piece of bu picture.

TL;DR — Headless ecommerce SEO sahiptir two layers: rendering architecture (hangi determines whether Googlebot alır HTML veya bir empty shell) ve structured data / feed layer (hangi determines eligibility bençin rich sonuçlar ve free product listings in Google Shopping). On rendering: SSR ve SSG dır safe, CSR requires explicit verification. On structured data: Product schema ile Offer (değil AggregateOffer) dır required bençin merchant listing eligibility; ProductGroup + hasVariant handles varyant sets yapğru biçimde. On feeds: bir Google Merchant Center feed dır independent of sizin frontend rendering ve equally önemli bençin Shopping surfaces — headless yapmaz exempt siz -den feed quality requirements.

Rendering architecture bençin headless stores

canonical headless ecommerce stack kullanır sonraki.js (Vercel Commerce) veya Nuxt. Shopify Hydrogen runs on React Router 7 — o migrated off Remix in late 2024, ve olarak of mid-2026 Shopify’s kendi @shopify/remix-oxygen package carries bir deprecation notice pointing integrators -e react-router ve @shopify/hydrogen/oxygen instead. (bazı of Shopify’s kendi docs sayfalar hâlâ göster older Remix-flavored code samples; kontrol et package sürüm siz’re aslında çalışbir yerine doc sayfa siz land on.) tümü of bunlar default -e server-side rendering veya static generation, hangi anlamına gelir Googlebot alır full HTML on ilk fetch — no render-queue wait.

başarısızlık modes dır framework-specific ama izle bir pattern:

sonraki.js: switching bir product veya category sayfa -e bir Client Component pushes rendering -e browser. App Router routes dır Server Components tarafından default; risk dır accidentally marking bir high-trafik sayfa 'use client' ve değil catching o. Verify ile curl veya view-kaynak — eğer product title ve description değildir in raw HTML, sayfa dır CSR.

Shopify Hydrogen (React Router): React Router’s framework mode kullanır server-side loaders tarafından default, aynı pattern Remix kullanılan önce migration. risk dır Oxygen (Shopify’s hosting) caching configuration — stale cached responses -ebilir sun eski bençerik -e crawlers uzun sonra bir product update.

Custom React + Vite: out of box, bu pure CSR. Google -ebilir render o, ama o’s riskiest configuration. ekle React Server Components veya switch -e bir framework.

Structured data bençin headless product sayfalar

bir headless frontend owns onun kendi <head> — hangi anlamına gelir structured data dır entirely sizin responsibility. Three schema types önem taşır bençin ecommerce:

Product schema — minimum viable markup: name, image, offers (ile price, priceCurrency, availability). kullan Offer bençin direct-purchase sayfalar -e qualify bençin merchant listing eligibility; AggregateOffer blocks şu eligibility.

ProductGroup + hasVariant — Feb 2024 schema update. ne zaman bir sayfa represents bir product mevcut in birden çok varyantlar (size, color, material), wrap varyantlar in bir ProductGroup ile variesBy (e.g., https://schema.org/color) ve bağlantı her varyant ile hasVariant. bu söyler Google relationship ve avoids yinelenen bençerik sinyaller genelinde varyant URLs.

BreadcrumbList — yardımcı olur Google understand sizin site’s hierarchy ve enables breadcrumb rich sonuçlar. Especially önemli in headless setups nerede URL structure dır custom.

Google Merchant Center ve headless

sizin frontend rendering dır independent of sizin GMC feed. hatta bir perfectly SSR-rendered headless store hâlâ gerektirir bir product feed submitted -e Merchant Center -e qualify bençin free Shopping listings ve full range of merchant listing experiences. feed’s attribute quality — title, GTIN, image, price parity — dır bir sıralama faktörü in organic product grids, separate -den sizin on-sayfa SEO. yapmayın ele al feed olarak bir ads concern; o’s bir arama concern de.

nerede -e go sonraki

bu küme kapsar rendering ve framework layer in depth:

• JavaScript SEO — general başarısızlık modes (parity, interaction, state, timing) şu uygula -e herhangi bir JS-heavy storefront
• sonraki.js SEO — dominant headless commerce framework; App Router, Metadata API, sitemap.ts, LCP image, ISR pitfalls
• React SEO — underlying rendering model; nasıl Google’s Web Rendering Service queues ve süreçler React sayfalar
• Headless CMS SEO — ne zaman sizin product bençerik lives in bir CMS (Contentful, Sanity, Storyblok) yerine commerce motor itself
• Headless Commerce Platforms — comparing gerçek platform options (Shopify Hydrogen, BigCommerce, commercetools, Salesforce PWA Kit, Medusa, Saleor, Elastic Path) ve ne her leaves siz -e oluştur
• Composable Commerce — MACH architecture pattern bir level up -den headless, ve SEO ownership risk of assembling bir stack -den independent vendors

Headless ecommerce SEO sahiptir two layers:

Rendering layer (determines crawlability):

• SSR ve SSG produce HTML Googlebot reads on ilk fetch — safe
• CSR produces bir empty shell; Google renders o later (queued, -ebilir timeout) — risky
• sonraki.js / React Router (Hydrogen) / Nuxt default -e SSR/SSG; verify product/category sayfalar değildir accidentally CSR ile curl veya view-kaynak

Structured data ve feed layer (determines rich-sonuç ve Shopping eligibility):

• Product schema: kullan Offer (değil AggregateOffer) on direct-purchase sayfalar bençin merchant listing eligibility
• ProductGroup + hasVariant (Feb 2024): correct markup bençin varyant sets
• GMC feed quality (title, GTIN, image, price parity) dır bir independent sıralama faktörü bençin Shopping surfaces — değil optional in headless setups

ne siz -meli now oluştur explicitly (no platform plugin):

• Per-sayfa title + meta description
• Canonical tags (critical bençin faceted nav ve varyant URLs)
• XML sitemap
• JSON-LD (Product, BreadcrumbList)
• robots.txt

Google arama Central

• Product structured data — Product, Offer, ProductGroup schema requirements
• Understand JavaScript SEO basics — nasıl Googlebot handles JavaScript-rendered bençerik
• düzelt lazy-loaded bençerik — intersection observer, infinite scroll
• XML sitemaps — sitemap format ve submission

Google Merchant Center

• Free listings bençin products — eligibility bençin organic Shopping surfaces
• Product data specification — feed attribute requirements

Framework dokümantasyon

• sonraki.js Metadata API — App Router metadata, generateMetadata
• sonraki.js sitemap.ts — file-based sitemap generation
• React Router: data loading — server-side loader functions ( pattern Shopify Hydrogen now kullanır)

“Some JavaScript sites may use the app shell model where the initial HTML does not contain the actual content and Google needs to execute JavaScript before being able to see the actual page content that JavaScript generates … The page may stay on this queue for a few seconds, but it can take longer than that.” — Google arama Central, “Understand the JavaScript SEO basics.” Jump -e quote

“We do an HTTP request, and we get something back … some barebone HTML and all it does is load the JavaScript and run the JavaScript. Then, this HTML … goes into rendering. Rendering runs JavaScript — boom!, a lot of content happens that wasn’t there before.” — Martin Splitt, Google Developer Advocate, Google Webmaster Central Office Hours hangout. [kaynak: Office Hours recording — verify karşı live audio]

Headless Ecommerce SEO Checklist

Rendering verification

• curl -s https://yourstore.com/products/[slug] | grep '<title>' — confirms title in raw HTML
• View kaynak on bir product sayfa — product name ve description visible olmadan JavaScript
• yapğrula category/collection sayfalar ayrıca render server-side (en çok CSR mistakes dır on dynamic routes)
• kontrol et Google arama Console → URL Inspection → “Test live URL” bençin herhangi bir key sayfalar

Structured data

• Product schema on her PDP: name, image, offers (ile price, priceCurrency, availability)
• kullanarak Offer (değil AggregateOffer) on direct-purchase sayfalar — required bençin merchant listing eligibility
• ProductGroup + hasVariant + variesBy bençin varyant sets (color, size, material)
• BreadcrumbList on product ve category sayfalar
• Validate ile Rich sonuçlar test et

teknik SEO ownership

• Unique <title> ve <meta name="description"> per sayfa (değil sitewide template)
• canonical etiketi on her sayfa (especially varyant ve filtered URLs)
• XML sitemap generated ve submitted (bençerir product ve category sayfalar)
• robots.txt accessible ve correct (yapmaz block JS/CSS)
• 301 yönlendirmeler ele alınır at framework/CDN level (değil lost in bir SPA router)

Google Merchant Center

• Product feed submitted -e GMC (hatta eğer kullanarak organic listings yalnızca)
• Price parity: feed price matches landing-sayfa price tam olarak
• GTINs included bençin branded products
• Feed diagnostics reviewed in GMC → Diagnostics

Headless Ecommerce SEO: Decision Framework

Framework choice tarafından SEO risk

ne zaman -e seç SSG vs. SSR

kullan SSG ne zaman:

• Product catalog dır relatively stable (<100 updates/day)
• siz kullan ISR bençin revalidation (sonraki.js revalidate, Nuxt useAsyncData ile lazy)
• Performance dır top priority (static HTML -den CDN edge)

kullan SSR ne zaman:

• Product availability, pricing, veya personalization changes per istek
• gerçek-time inventory dır critical (out-of-stock -meli olmak accurate)
• Catalog dır de büyük -e pre-oluştur at deploy time

kaçın CSR bençin:

• Product sayfalar
• Category/collection sayfalar
• herhangi bir sayfa siz iste -e rank organically

nasıl -meli bu headless route render?

seç at route-template level. Product detail ve category sayfalar -ebilir yap farklı decisions.

yaygın headless ecommerce SEO failures

Product bençerik görünür in browser ama değil in view-kaynak

muhtemel neden ol: bir product route veya data-fetching path moved -e client-side rendering, such olarak bir high-level sonraki.js Client Component.

düzelt: Fetch data in bir Server Component, loader, veya server route ve döndür indexable product bençerik in initial HTML. yapğrula ile curl ve view-kaynak, değil yalnızca hydrated DOM.

arama sonuçları göster bir generic title genelinde çok söyleıda products

muhtemel neden ol: headless frontend dır kullanarak bir sitewide fallback çünkü route metadata yapmaz receive product data server-side.

düzelt: Generate title, description, ve canonical -den route’s server-side product response. tarama birden çok product ve category templates ve yapğrula her raw response contains beklenen unique values.

Price veya availability dır stale bençin crawlers

muhtemel neden ol: SSG/ISR veya edge caching outlives catalog update, -iken client fetch shows shoppers bir newer değer sonra hydration.

düzelt: Connect commerce events -e revalidation veya shorten cache window bençin price-sensitive routes. Compare raw HTML, rendered sayfa, feed, ve checkout bençin aynı SKU until tümü four agree.

Product rich sonuçlar dır missing despite valid-looking JSON-LD

muhtemel nedenler: markup dır injected yalnızca sonra JavaScript, kullanır AggregateOffer on bir direct-purchase sayfa, omits required offer fields, veya describes data şu yapmaz match sayfa.

düzelt: Emit bir server-rendered Product object ile appropriate Offer, o hâlde çalıştır Rich sonuçlar test et ve compare onun values ile visible product ve GMC feed.

varyant URLs compete veya canonical’laştır unpredictably

muhtemel neden ol: frontend creates crawlable state URLs olmadan bir consistent canonical ve olmadan expressing relationship arasında product grup ve onun varyantlar.

düzelt: seç indexable varyant strategy, koru canonicals consistent ile o, ve implement ProductGroup plus hasVariant nerede sayfa represents bir varyant ayarla. tarama her selectable state -e verify emitted URL ve markup.

Products disappear sonra bir headless migration

muhtemel nedenler: Legacy URLs lack server-side yönlendirmeler, yeni sitemap dır incomplete, veya SPA navigation masks server 404s.

düzelt: test et eski URLs olarak direct istekler, validate eski—e-yeni yönlendirme map, ve compare yeni sitemap ile live catalog. Client router behavior değildir bir substitute bençin bir HTTP yönlendirme.

Verify headless rendering layer

Inspect raw HTML bençin required sinyaller

çalıştır bu in bir shell karşı bir product ve bir category URL. Replace sample values ile terms şu -meli görün on şunlar sayfalar.

url='https://store.example/products/example'
html="$(curl -fsSL "$url")"
printf '%s' "$html" | grep -i '<title'
printf '%s' "$html" | grep -i 'rel="canonical"'
printf '%s' "$html" | grep -F 'Example Product Name'
printf '%s' "$html" | grep -F 'application/ld+json'

eğer bir sinyal vardır yalnızca sonra browser runs JavaScript, bu test et exposes raw-response gap.

Compare bir URL listesi in bulk ile Python

Save canonical product/category URLs in urls.txt, bir per line. bu raporlar status, whether final HTML contains bir title ve canonical, ve nasıl çok söyleıda Product schema strings görün.

from urllib.request import Request, urlopen
from urllib.error import HTTPError
import re

for url in open("urls.txt", encoding="utf-8"):
    url = url.strip()
    if not url:
        continue
    try:
        response = urlopen(Request(url, headers={"User-Agent": "HeadlessSEOCheck/1.0"}))
        html = response.read().decode("utf-8", errors="replace")
        print(url, response.status,
              "title=" + str(bool(re.search(r"<title[^>]*>.+?</title>", html, re.I | re.S))),
              "canonical=" + str('rel="canonical"' in html.lower()),
              "product_schema=" + str(len(re.findall(r'"@type"\s*:\s*"Product"', html))))
    except HTTPError as error:
        print(url, error.code, "HTTP error")

Chrome DevTools’ta oluşturulmuş meta verilerini inceleme

Paste bu -e Console on bir product sayfa. o kontroller hydrated DOM; compare sonuç ile raw-response scripts above -e detect parity problems.

({
  title: document.title,
  canonical: document.querySelector('link[rel="canonical"]')?.href ?? null,
  productSchemas: [...document.querySelectorAll('script[type="application/ld+json"]')]
    .filter((node) => /"@type"\s*:\s*"Product"/.test(node.textContent)).length,
  productHeading: document.querySelector('h1')?.textContent?.trim() ?? null,
});

-den yaklaşık industry

• Vercel Commerce (sonraki.js starter) — open-kaynak headless storefront reference implementation
• Shopify Hydrogen dokümantasyon — Shopify’s resmî headless framework (oluşturulmuş on React Router 7 olarak of 2026; bazı doc sayfalar hâlâ göster pre-migration Remix code samples)
• Google arama Central: Understand JavaScript SEO basics — Google’s developer rehberlik on JS rendering (web.dev’s JS SEO article sahiptir olmuş retired; bu güncel home bençin şu rehberlik)
• Onely: nasıl yapar Google tarama JS bençerik? bir Experiment — detailed teknik breakdown of nasıl Googlebot tarar ve indexes JavaScript-rendered bençerik ( previous bağlantı in bu slot 404’d; bu Onely’s güncel eşdeğeri piece)
• Google arama Central: Product structured data — resmî schema requirements bençin rich sonuçlar ve merchant listings

test et yourself: Headless Ecommerce SEO

Five quick questions on headless store architecture ve SEO. seç bir yanıt her biri bençin, o hâlde kontrol et.

Değişiklik günlüğü