Panduan PWA SEO

TL;DR — sebuah PWA (Progressive Web App) adalah sebuah normal situs web dengan two extras bolted pada: sebuah manifest itu lets people install ini untuk mereka home screen, dan sebuah service worker itu dapat membuat ini berfungsi offline. untuk Google ini adalah masih hanya sebuah situs web — going PWA melakukan not boost Anda rankings. one thing itu dapat actually hurt Anda adalah sebuah badly set-up service worker itu menampilkan Google sebuah old, cached halaman alih-alih Anda live one.

What sebuah PWA actually adalah

sebuah Progressive Web App adalah sebuah situs web itu’s telah enhanced untuk feel more like sebuah native app. Two pieces membuat ini sebuah PWA:

• sebuah web app manifest (manifest.json) — sebuah kecil file itu tells browser Anda app’s name, icons, dan colors, so sebuah pengunjung dapat tap “Add to Home Screen” (terjemahan) “tambahkan untuk Home Screen” dan get sebuah app-style icon dan splash screen.
• sebuah service worker — sebuah bit dari JavaScript itu runs di background dan dapat cache files so situs memuat fast pada repeat visits dan bahkan berfungsi offline.

itu’s ini. Underneath, sebuah PWA adalah almost selalu sebuah regular JavaScript situs web (React, Vue, Angular, dan so pada). ini adalah sebuah normal situs wearing sebuah app costume.

big myth untuk bust

paling umum thing people believe adalah: “If we turn our site into a PWA, we’ll rank better.” (terjemahan) “jika kami turn kami situs ke sebuah PWA, kami’ll peringkat better.” Google memiliki said plainly itu ini isn’t benar. Google’s John Mueller put ini directly: PWAs “currently don’t have any advantage in Google Search.” (terjemahan) “currently don’t memiliki apa pun advantage di Google Search.” There adalah no “PWA bonus” (terjemahan) “PWA bonus” di peringkat sistem.

manifest file doesn’t help SEO either. ini controls how app installs — icon, name, splash screen — none dari which Google reads when deciding cara peringkat Anda.

one thing itu dapat actually hurt

service worker adalah bagian untuk menjadi careful dengan. Because ini dapat sajikan cached (saved) copy dari Anda halaman, sebuah buruk setup dapat end up showing Google sebuah stale atau bahkan blank “you’re offline” (terjemahan) “Anda’re offline” versi dari sebuah halaman alih-alih nyata, up-untuk-date one. itu’s how sebuah PWA loses traffic setelah launch — not because ini “became a PWA,” (terjemahan) “became sebuah PWA,” tetapi because caching adalah pointed wrong cara.

What untuk actually melakukan

• pastikan Anda nyata halaman konten memuat untuk mesin pencari, not hanya sebuah empty shell itu fills di dengan JavaScript afterward.
• Set Anda service worker so ini fetches fresh HTML dari network pertama, dan hanya falls back untuk cache untuk speed pada things like images dan stylesheets.
• pertahankan basics right: nyata, unique URLs; sebuah baik judul dan deskripsi meta pada setiap halaman; sebuah fast, reliable experience.

menjadi sebuah PWA adalah great untuk Anda pengguna — installable, fast, offline-friendly. hanya don’t expect ini untuk move Anda up di Google, dan don’t let service worker feed Google wrong halaman. Advanced tab memiliki mechanics, caching strategies, dan quotes.

TL;DR — sebuah PWA adalah sebuah manifest + sebuah service worker layered pada top dari what adalah almost selalu sebuah JS/SPA situs — so rendering aturan dari JavaScript/SPA SEO apply unchanged, plus two PWA-spesifik concerns. Google gives PWAs no peringkat advantage (Mueller). manifest.json governs installability, not pengindeksan, dan there’s no evidence peringkat sistem read ini. service worker adalah nyata risk: Google’s renderer melakukan not run service workers when pengindeksan, so sebuah cache-pertama HTML strategy dapat indeks sebuah stale atau offline shell — gunakan network-pertama untuk HTML, cache-pertama untuk static assets. HTTPS adalah sebuah hard requirement untuk service workers dan separately sebuah tiny sinyal peringkat; don’t chain itu ke “PWAs rank better.” (terjemahan) “PWAs peringkat better.” Core Web Vitals adalah satu-satunya legitimate overlap, dan ini adalah engineering, not PWA label.

sebuah PWA adalah sebuah situs web pertama

single sebagian besar berguna frame: sebuah Progressive Web App adalah sebuah normal situs web dengan two things ditambahkan pada top. Per Google’s own definition, PWAs “are web apps built and enhanced with modern APIs to provide enhanced capabilities while still reaching any web user on any device with a single codebase.” (terjemahan) “adalah web apps dibangun dan enhanced dengan modern APIs untuk menyediakan enhanced capabilities while masih reaching apa pun web pengguna pada apa pun device dengan sebuah single codebase.” three pillars Google names adalah Capable, Reliable, dan Installable — note itu none dari three adalah “rankable.” (terjemahan) “rankable.”

Architecturally, itu codebase adalah almost selalu sebuah JavaScript framework running sebuah single-halaman-application pattern. Which berarti: everything itu governs JS/SPA indexability governs PWA indexability, dengan no modification. nyata <a href> tautan dan History-API routing (not hash fragments) untuk addressability; rendering sisi server atau prerendering untuk konten availability; per-route canonical, judul, dan meta di rendered DOM. jika Anda’ve read JavaScript SEO dan SPA SEO material, Anda sudah know 90% dari PWA SEO — app-shell failure mode, di particular, adalah one Google explicitly documents: “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.” (terjemahan) “beberapa JavaScript situs dapat gunakan app shell model where initial HTML melakukan not berisi actual konten dan Google perlu untuk execute JavaScript sebelum menjadi able untuk see actual halaman konten itu JavaScript generates.” sebuah PWA itu ships sebuah empty shell dengan no SSR/prerender inherits itu masalah directly.

So honest scope dari sebuah PWA-spesifik SEO artikel adalah kecil: manifest, dan service worker. Everything else adalah JS/SPA SEO wearing sebuah manifest.

core myth: “going PWA” (terjemahan) “going PWA” melakukan not meningkatkan rankings

ini adalah headline. Google memiliki telah unusually direct tentang ini. John Mueller, di sebuah Search Central office-hours session, said PWAs “currently don’t have any advantage in Google Search, and as far as I know, there are no plans to change this,” (terjemahan) “currently don’t memiliki apa pun advantage di Google Search, dan sebagai far sebagai I know, tidak ada plans untuk perubahan ini,” dan — ditanyakan whether converting untuk sebuah PWA akan help — “By default, saying going to a PWA will make your rankings better — I don’t think that is the case.” (terjemahan) “oleh default, saying going untuk sebuah PWA akan membuat Anda rankings better — I don’t think itu adalah case.”

He juga pre-empted usual counter-argument, itu “our competitor went PWA and their rankings jumped.” (terjemahan) “kami competitor went PWA dan mereka rankings jumped.” His jawaban: “So just the fact that one of your competitors has moved from one framework to another, and has seen an improvement in search, that framework change from my point of view wouldn’t be responsible for that.” (terjemahan) “So hanya fact itu one dari Anda competitors memiliki moved dari one framework untuk lainnya, dan memiliki seen sebuah improvement di search, itu framework perubahan dari my poin dari view wouldn’t menjadi responsible untuk itu.” dan pada why: “These are essentially different ways of making a website… for the most part, we see these as normal HTML pages.” (terjemahan) “ini adalah essentially berbeda cara dari membuat sebuah situs web… untuk paling bagian, kami see ini sebagai normal HTML halaman.”

Where PWA relaunches melakukan correlate dengan peringkat lifts, ini adalah confounds itu come dengan apa pun big rebuild: modernized internal linking, refreshed dan expanded konten, genuine speed improvements, dan biasanya sebuah marketing push tied untuk relaunch. None dari itu memerlukan PWA label. jika Anda rebuild sebuah 10-untuk-15-year-old organically-grown situs, Anda perubahan sebuah dozen things di once — attributing hasil untuk “PWA” (terjemahan) “PWA” adalah sebuah correlation error.

Manifest.json: installability ≠ indexability

manifest.json file exists untuk membuat Anda app installable. -nya fields — name, short_name, icons, start_url, display, theme_color — drive install prompt, home-screen icon, splash screen, dan whether app opens standalone atau di sebuah browser tab. itu’s entire job.

There’s no evidence Google’s peringkat atau pengindeksan sistem read manifest sebagai sebuah signal. cleanest external confirmation adalah Google’s own PWA checklist, which lists “Is installable” (terjemahan) “adalah installable” dan “Discoverable in search” (terjemahan) “Discoverable di search” sebagai two separate, independent checklist categories — where discoverability adalah defined sebagai ordinary SEO fundamentals: “Enable search engine discovery through unique URLs, descriptive titles, meta descriptions, and structured data.” (terjemahan) “Enable mesin pencari penemuan melalui unique URLs, descriptive judul, meta deskripsi, dan data terstruktur.” Installability (manifest-driven) dan discoverability (classic SEO) adalah treated sebagai parallel concerns, not one feeding lainnya. So: pertahankan sebuah valid manifest because ini adalah what membuat app installable — hanya don’t file ini di bawah SEO.

Service workers: one nyata PWA-spesifik SEO risk

Here’s fact itu penting sebagian besar, dan ini adalah PWA-spesifik: Google’s rendering service melakukan not run Anda service worker when ini renders sebuah halaman untuk pengindeksan. reasoning, dari Martin Splitt: “As we have to assume that someone clicking on your page from a SERP is a first-time visitor, running a service worker is usually not going to do much good.” (terjemahan) “sebagai kami memiliki untuk assume itu someone clicking pada Anda halaman dari sebuah SERP adalah sebuah pertama-time pengunjung, running sebuah service worker adalah biasanya not going untuk melakukan much baik.” sebuah service worker’s whole poin adalah speeding up repeat visits dari sebuah cache — dan Googlebot adalah, oleh design, selalu treated sebagai sebuah pertama-time pengunjung, so there’s nothing untuk ini untuk speed up. Splitt again: “We’re not supporting that because users clicking onto your page from the search result might never have been there beforehand.” (terjemahan) “kami’re not supporting itu because pengguna clicking onto Anda halaman dari search hasil mungkin tidak pernah memiliki telah there beforehand.” Mueller memiliki confirmed ini adalah stable policy, not sebuah temporary state: “I wouldn’t expect it to change — it’s computationally expensive to run service-workers in the background like this for indexing.” (terjemahan) “I wouldn’t expect ini untuk perubahan — ini adalah computationally expensive untuk run service-workers di background like ini untuk pengindeksan.”

So why adalah itu sebuah risk? Because Anda service worker melakukan run di pengguna nyata’ browser, dan jika Anda told ini untuk sajikan HTML cache-pertama — mengembalikan saved copy, skip network — lalu sebuah nyata repeat pengunjung sees sebuah fast cached halaman, tetapi itu’s sebuah strategy Googlebot tidak pernah executes. danger adalah reverse case: sebuah caching pattern itu, di bawah apa pun error atau fallback condition, hands back sebuah stale document atau offline-fallback halaman. Because rendering adalah stateless dan WRS treats setiap fetch sebagai fresh, sebuah misconfigured caching strategy adalah how sebuah PWA ends up dengan Googlebot pengindeksan sebuah outdated atau empty offline shell alih-alih live konten.

** caching-strategy aturan dari thumb:**

• HTML documents → network-pertama (atau stale-while-revalidate dengan sebuah pendek TTL). Get live halaman; gunakan cache hanya sebagai sebuah offline fallback, dan pastikan itu fallback adalah tidak pernah what sebuah fresh crawl akan indeks.
• Static assets (JS, CSS, images, fonts) → cache-pertama adalah fine dan desirable — mereka don’t perubahan per permintaan dan aren’t dapat diindeks document.

cara audit ini: compare what Googlebot sees terhadap what sebuah repeat pengunjung’s browser menyajikan dari cache. gunakan pemeriksaan URL di Search Console (live test) untuk see rendered HTML Google actually gets, dan periksa ini terhadap live halaman. jika mereka diverge, Anda service worker atau SSR setup adalah pertama suspect. dan watch rendering timeouts pada hybrid setups — sebagai Hamlet Batista noted dari dynamic-rendering era, “Rendering services won’t wait forever for a page to finish loading.” (terjemahan) “rendering services won’t wait forever untuk sebuah halaman untuk finish memuat.” (itu spesifik artikel adalah tentang dynamic rendering, which Google now discourages di favor dari SSR — cite timeout principle, not pattern.)

HTTPS: sebuah service-worker requirement, dan separately sebuah tiny sinyal peringkat

Anda’ll see PWA SEO posts imply “PWAs need HTTPS, and HTTPS boosts rankings, therefore PWAs are more SEO-friendly.” (terjemahan) “PWAs perlu HTTPS, dan HTTPS boosts rankings, therefore PWAs adalah more SEO-friendly.” Two benar facts, wrongly chained.

Fact one: service workers hanya run di sebuah secure context. Per MDN: “Service workers are only available in secure contexts: this means that their document is served over HTTPS, although browsers also treat http://localhost as a secure context, to facilitate local development.” (terjemahan) “Service workers adalah hanya available di secure contexts: ini berarti itu mereka document adalah disajikan di atas HTTPS, although browser juga treat undefined sebagai sebuah secure context, untuk facilitate local development.” itu’s sebuah browser platform aturan, not sebuah SEO tactic — no HTTPS, no service worker, full stop.

Fact two: HTTPS adalah sebuah nyata Google sinyal peringkat, tetapi sebuah minuscule one. Google’s own 2014 announcement: “we’re starting to use HTTPS as a ranking signal. For now it’s only a very lightweight signal — affecting fewer than 1% of global queries, and carrying less weight than other signals such as high-quality content.” (terjemahan) “kami’re starting untuk gunakan HTTPS sebagai sebuah sinyal peringkat. untuk now ini adalah hanya sebuah very lightweight signal — affecting fewer daripada 1% dari global kueri, dan carrying less weight daripada lainnya signals such sebagai tinggi-quality konten.”

poin: apa pun HTTPS situs gets itu sama tiny signal — PWA atau not. sebuah PWA doesn’t get extra SEO credit untuk HTTPS; ini hanya dapat’t function without ini. Don’t sell HTTPS sebagai sebuah PWA SEO benefit.

Core Web Vitals: one legitimate overlap

jika there’s sebuah nyata place where “good PWA” (terjemahan) “baik PWA” dan “good SEO” (terjemahan) “baik SEO” meet, ini adalah performa. Google’s PWA guidance leads dengan reliability — “A reliable Progressive Web App feels fast and dependable regardless of the network” (terjemahan) “sebuah reliable Progressive Web App feels fast dan dependable regardless dari network” — dan Core Web Vitals adalah sebuah confirmed (jika modest) peringkat factor. sebuah well-engineered PWA itu memuat fast dan stays responsive akan tend untuk score well pada Vitals.

tetapi read causation carefully: ini adalah engineering, not PWA-ness. sebuah bloated PWA — huge JS bundle, render-blocking hydration, sebuah di atas-eager service worker — dapat easily post worse Core Web Vitals daripada sebuah plain server-rendered halaman. Vitals win comes dari doing performa berfungsi well, which Anda dapat melakukan dengan atau without sebuah manifest. menjadi sebuah PWA neither guarantees baik Vitals nor grants sebuah shortcut untuk them.

App-like fitur adalah UX, not peringkat factors

tambahkan-untuk-home-screen, offline mode, push notifications, app-like navigation — semua genuine, valuable PWA benefits, dan semua engagement/retention fitur, not pengindeksan atau peringkat inputs. Google’s PWA checklist membuat split explicit oleh putting “installable” (terjemahan) “installable” dan “discoverable in search” (terjemahan) “discoverable di search” di separate buckets.

Don’t treat “installable” (terjemahan) “installable” sebagai sebuah single, universal capability either — ini varies oleh browser dan OS, which adalah one more alasan ini dapat’t menjadi sebuah SEO signal (Google akan memiliki no consistent, cross-browser perilaku untuk reward). beforeinstallprompt event itu lets sebuah PWA tampilkan -nya own custom install UI adalah sebuah Chromium-hanya mechanism; per MDN’s PWA installability guide, ini adalah “not supported on iOS.” (terjemahan) “not didukung pada iOS.” pada iOS Safari, installation happens hanya melalui manual Share → tambahkan untuk Home Screen flow (extended untuk Chrome, Edge, Firefox, dan Orion pada iOS 16.4+, semua dari which gunakan Apple’s diperlukan WebKit mesin pada iOS dan so share itu limitation), not sebuah automatic prompt. None dari itu perubahan SEO picture — ini hanya berarti “is my PWA installable” (terjemahan) “adalah my PWA installable” isn’t sebuah yes/no fact independent dari which browser dan OS sebuah pengunjung adalah pada.

Twitter Lite adalah case study everyone reaches untuk sebagai “proof PWAs help SEO” (terjemahan) “proof PWAs help SEO” — dan -nya documented hasil adalah nyata (sebuah 65% increase di halaman per session, 75% increase di Tweets dikirim, 20% decrease di bounce rate) — tetapi setiap one dari itu adalah sebuah engagement metric. Google’s own case study dari ini tidak pernah mentions SEO, pencarian organik, atau rankings di semua. Great hasil; wrong column.

Ecommerce PWA storefronts: sebuah pendek callout

PWA storefronts tambahkan sebuah few wrinkles worth naming, because mereka compound SPA risks. Client-side routing plus faceted navigation dapat generate dapat di-crawl-looking URLs itu semua resolve untuk yang sama shell, atau sebuah explosion dari parameter URLs. Cart dan checkout state lives client-side dan seharusnya tidak pernah gate dapat diindeks product konten. dan setiap product halaman harus independently kembalikan nyata, unique HTML — app-shell trap adalah sebagian besar expensive exactly where Anda memiliki paling halaman. fixes adalah yang sama ones dari ecommerce dan faceted-navigation SEO; PWA layer doesn’t perubahan them, ini hanya membuat SSR/prerender discipline more penting.

Bing dan PWAs

Worth sebuah line: Bing memiliki published no PWA-spesifik peringkat atau pengindeksan guidance. -nya webmaster guidelines adalah PWA-agnostic (umum crawlability, sitemaps, robots.txt, IndexNow), dan Microsoft’s extensive PWA docs adalah entirely tentang Edge install prompts, PWABuilder, dan Microsoft Store packaging — distribution dan installation, sebuah separate track dari web-search pengindeksan. So untuk Bing, default untuk ordinary JS-rendering crawlability guidance; there’s no PWA exception untuk learn.

intinya

PWA SEO adalah JavaScript/SPA SEO plus exactly two additions: ignore manifest sebagai sebuah SEO input (ini adalah untuk installability), dan configure service worker so ini tidak pernah traps Googlebot di sebuah stale atau offline cache. Get itu right dan sebuah PWA indeks exactly like apa pun lainnya well-dibangun situs — no bonus, no penalty, hanya yang sama aturan.

AI summary

sebuah condensed take pada Advanced versi:

• sebuah PWA adalah sebuah situs web pertama. ini adalah sebuah manifest.json (installability) + sebuah service worker (offline/caching) layered pada what’s almost selalu sebuah JS/SPA situs. semua JavaScript/SPA SEO aturan apply unchanged.
• No peringkat advantage. Google’s John Mueller: PWAs “currently don’t have any advantage in Google Search.” (terjemahan) “currently don’t memiliki apa pun advantage di Google Search.” “Going PWA” (terjemahan) “Going PWA” melakukan not meningkatkan rankings.
• Manifest.json adalah SEO-irrelevant. ini controls install prompts, icons, start_url, display — there’s no evidence peringkat sistem read ini. Google’s PWA checklist lists “installable” (terjemahan) “installable” dan “discoverable in search” (terjemahan) “discoverable di search” sebagai separate categories.
• ** one nyata risk adalah service worker.** Google’s renderer doesn’t run service workers when pengindeksan (ini treats setiap crawl sebagai sebuah pertama-time visit), so sebuah cache-pertama HTML strategy dapat indeks sebuah stale atau offline shell. gunakan network-pertama untuk HTML, cache-pertama untuk static assets.
• HTTPS ≠ sebuah PWA SEO perk. ini adalah sebuah hard requirement untuk service workers (secure context) dan separately sebuah “very lightweight” (terjemahan) “very lightweight” sinyal peringkat setiap HTTPS situs gets. Don’t chain two.
• Core Web Vitals adalah satu-satunya legit overlap — dan ini adalah performa engineering, not PWA label. sebuah bloated PWA dapat score worse.
• App-like fitur (install, offline, push) adalah engagement, not peringkat. Twitter Lite’s famous gains adalah engagement metrics; itu case study tidak pernah mentions SEO. Installability itself varies oleh browser/OS (iOS Safari memiliki no beforeinstallprompt, hanya manual tambahkan untuk Home Screen) — one more alasan ini dapat’t menjadi sebuah sinyal peringkat.
• Bing memiliki no PWA-spesifik guidance; default untuk ordinary JS crawlability.

Official documentation

Primary-source material pada PWAs, rendering, dan facts ini artikel rests pada.

Google / web.dev

• What adalah Progressive Web Apps? — Google’s definition dan three pillars (Capable, Reliable, Installable).
• What membuat sebuah baik Progressive Web App? (PWA checklist) — separates “Is installable” (terjemahan) “adalah installable” dari “Discoverable in search” (terjemahan) “Discoverable di search” sebagai distinct categories.
• Service workers (Learn PWA) — caching strategies dan service-worker lifecycle.
• memahami JavaScript SEO Basics — app-shell failure mode Google documents.
• membangun dapat diindeks Progressive Web Apps (2016) — Google’s original PWA-indexability post.
• Twitter Lite case study — engagement metrics (note: no SEO/organic claims anywhere di ini).
• HTTPS sebagai sebuah sinyal peringkat (2014) — “very lightweight signal” (terjemahan) “very lightweight signal” statement.

MDN / platform

• Service Worker API — secure-context (HTTPS) requirement.
• membuat PWAs installable — browser/OS installability differences, including why beforeinstallprompt isn’t didukung pada iOS.

Bing / Microsoft (no PWA-spesifik peringkat guidance exists — ini adalah install/distribution docs)

• Bing Webmaster Guidelines — umum crawlability; PWA-agnostic.
• Overview dari Progressive Web Apps (PWAs) — Edge install dan distribution focus.

Quotes dari source

pada—record statements. Where sebuah quote adalah relayed oleh sebuah ketiga party alih-alih sebuah Google-owned URL, caveat says so.

Google — no PWA peringkat advantage

• “PWAs currently don’t have any advantage in Google Search, and as far as I know, there are no plans to change this.” (terjemahan) “PWAs currently don’t memiliki apa pun advantage di Google Search, dan sebagai far sebagai I know, tidak ada plans untuk perubahan ini.” — John Mueller, Google, Search Central office-hours (Nov 2021). Read coverage
• “By default, saying going to a PWA will make your rankings better — I don’t think that is the case.” (terjemahan) “oleh default, saying going untuk sebuah PWA akan membuat Anda rankings better — I don’t think itu adalah case.” — John Mueller, sama session. Read coverage
• “So just the fact that one of your competitors has moved from one framework to another, and has seen an improvement in search, that framework change from my point of view wouldn’t be responsible for that.” (terjemahan) “So hanya fact itu one dari Anda competitors memiliki moved dari one framework untuk lainnya, dan memiliki seen sebuah improvement di search, itu framework perubahan dari my poin dari view wouldn’t menjadi responsible untuk itu.” — John Mueller, sama session. Read coverage

Google — what sebuah PWA adalah, dan app-shell risk

• “Progressive Web Apps (PWA) are web apps built and enhanced with modern APIs to provide enhanced capabilities while still reaching any web user on any device with a single codebase.” (terjemahan) “Progressive Web Apps (PWA) adalah web apps dibangun dan enhanced dengan modern APIs untuk menyediakan enhanced capabilities while masih reaching apa pun web pengguna pada apa pun device dengan sebuah single codebase.” — web.dev. Jump untuk quote
• “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.” (terjemahan) “beberapa JavaScript situs dapat gunakan app shell model where initial HTML melakukan not berisi actual konten dan Google perlu untuk execute JavaScript sebelum menjadi able untuk see actual halaman konten itu JavaScript generates.” — Google Search Central. Jump untuk quote
• “Enable search engine discovery through unique URLs, descriptive titles, meta descriptions, and structured data.” (terjemahan) “Enable mesin pencari penemuan melalui unique URLs, descriptive judul, deskripsi meta, dan data terstruktur.” — web.dev PWA checklist, “Discoverable in search.” (terjemahan) “Discoverable di search.” Jump untuk quote

Google — service workers dan pengindeksan (relayed)

• “As we have to assume that someone clicking on your page from a SERP is a first-time visitor, running a service worker is usually not going to do much good.” (terjemahan) “sebagai kami memiliki untuk assume itu someone clicking pada Anda halaman dari sebuah SERP adalah sebuah pertama-time pengunjung, running sebuah service worker adalah biasanya not going untuk melakukan much baik.” — Martin Splitt, Google. Read coverage
• “We’re not supporting that because users clicking onto your page from the search result might never have been there beforehand.” (terjemahan) “kami’re not supporting itu because pengguna clicking onto Anda halaman dari search hasil mungkin tidak pernah memiliki telah there beforehand.” — Martin Splitt, Google (Google I/O 2019). Read coverage
• “I wouldn’t expect it to change — it’s computationally expensive to run service-workers in the background like this for indexing.” (terjemahan) “I wouldn’t expect ini untuk perubahan — ini adalah computationally expensive untuk run service-workers di background like ini untuk pengindeksan.” — John Mueller, Google (reported July 2023). Read coverage

HTTPS: platform requirement vs. sinyal peringkat

• “Service workers are only available in secure contexts: this means that their document is served over HTTPS, although browsers also treat http://localhost as a secure context, to facilitate local development.” (terjemahan) “Service workers adalah hanya available di secure contexts: ini berarti itu mereka document adalah disajikan di atas HTTPS, although browser juga treat undefined sebagai sebuah secure context, untuk facilitate local development.” — MDN, Service Worker API. Jump untuk quote
• “we’re starting to use HTTPS as a ranking signal. For now it’s only a very lightweight signal — affecting fewer than 1% of global queries, and carrying less weight than other signals such as high-quality content.” (terjemahan) “kami’re starting untuk gunakan HTTPS sebagai sebuah sinyal peringkat. untuk now ini adalah hanya sebuah very lightweight signal — affecting fewer daripada 1% dari global kueri, dan carrying less weight daripada lainnya signals such sebagai tinggi-quality konten.” — Google, “HTTPS as a ranking signal” (terjemahan) “HTTPS sebagai sebuah sinyal peringkat” (2014). Jump untuk quote

Installability varies oleh browser/OS

• “This is not supported on iOS.” (terjemahan) “ini adalah not didukung pada iOS.” — MDN, pada beforeinstallprompt custom-install-prompt event. Jump untuk quote

pada rendering timeouts (dated context)

• “Rendering services won’t wait forever for a page to finish loading.” (terjemahan) “rendering services won’t wait forever untuk sebuah halaman untuk finish memuat.” — Hamlet Batista, mesin pencari Land. Read artikel

seharusnya I go PWA — dan what akan ini melakukan untuk SEO?

sebuah quick walk melalui pertanyaan people actually bring untuk ini topic.

“We’re considering a PWA. Will it help our SEO?” (terjemahan) “kami’re considering sebuah PWA. akan ini help kami SEO?”

• No inherent peringkat benefit — Google says PWAs get no advantage di Search. → bangun PWA untuk pengguna benefits (installable, offline, fast repeat memuat), not untuk rankings. → ini won’t hurt SEO either, sebagai panjang sebagai Anda rendering dan service worker adalah siapkan correctly (continue below).

“We’re building/have a PWA. Is my content actually indexable?” (terjemahan) “kami’re membangun/memiliki sebuah PWA. adalah my konten actually dapat diindeks?”

• melakukan initial HTML berisi nyata konten (SSR/prerender), atau adalah ini sebuah empty app shell filled oleh JS?
• Empty shell, no SSR → ini adalah app-shell trap. tambahkan SSR atau prerendering sebelum worrying tentang anything PWA-spesifik. (sama fix sebagai apa pun SPA.)
• SSR/prerender di place → baik; move untuk service worker.

“How should my service worker cache pages?” (terjemahan) “How seharusnya my service worker cache halaman?”

• HTML documents → network-pertama (atau stale-while-revalidate, pendek TTL). tidak pernah cache-pertama untuk HTML.
• Static assets (JS/CSS/images/fonts) → cache-pertama adalah fine dan baik.
• Offline fallback halaman → pastikan ini dapat tidak pernah menjadi versi sebuah fresh crawl indeks.

“My PWA lost rankings/traffic after launch. Where do I look?” (terjemahan) “My PWA lost rankings/traffic setelah launch. Where melakukan I look?”

1. Run pemeriksaan URL (live test) di Search Console — adalah Google seeing nyata halaman atau sebuah stale/offline/empty one?
2. jika stale atau empty → suspect service-worker caching strategy (cache-pertama HTML) atau sebuah missing SSR langkah.
3. jika konten’s there tetapi rankings masih dropped → lihat what else rebuild changed: tautan internal, konten, redirects, speed. PWA label adalah rarely cause.

“Do I need to do anything special with the manifest for SEO?” (terjemahan) “melakukan I perlu untuk melakukan anything special dengan manifest untuk SEO?”

• No. pertahankan ini valid untuk installability; ini memiliki no SEO role. Spend effort pada URLs, judul, meta, data terstruktur, dan Core Web Vitals instead.

PWA SEO checklist

Scannable pass untuk keeping sebuah Progressive Web App dapat di-crawl dan dapat diindeks:

• nyata konten adalah server-rendered atau prerendered — not sebuah empty app shell filled oleh JavaScript setelah muat.
• setiap route memiliki sebuah nyata, unique URL via History API (no hash/#! routing).
• setiap route mengembalikan -nya own canonical, judul, dan deskripsi meta di rendered DOM.
• Service worker menyajikan HTML network-pertama (atau stale-while-revalidate, pendek TTL) — tidak pernah cache-pertama untuk HTML documents.
• Static assets (JS/CSS/images/fonts) dapat menjadi cache-pertama; itu’s fine.
• offline-fallback halaman dapat tidak pernah menjadi what sebuah fresh crawl indeks.
• pemeriksaan URL (live test) menampilkan Google nyata, saat ini halaman — compared terhadap live halaman.
• manifest adalah valid untuk installability, tetapi Anda’re not treating ini sebagai sebuah SEO lever.
• Installability adalah tested per browser/OS, not assumed universal (iOS Safari memiliki no beforeinstallprompt; ini adalah manual tambahkan untuk Home Screen) — dan none dari itu variance adalah treated sebagai sebuah SEO issue.
• disajikan di atas HTTPS (diperlukan untuk service workers anyway).
• Core Web Vitals adalah healthy — verify JS bundle dan hydration aren’t dragging LCP/INP down.
• Ecommerce: product halaman setiap kembalikan nyata unique HTML; faceted-nav/client routing isn’t spawning shell-hanya atau infinite parameter URLs.

PWA SEO — cheat sheet

melakukan ini affect SEO?

Service-worker caching oleh resource jenis

Fast facts

• Google gives PWAs no peringkat advantage (Mueller).
• Google’s renderer melakukan not run service workers when pengindeksan.
• HTTPS sinyal peringkat: “fewer than 1% of global queries” (terjemahan) “fewer daripada 1% dari global kueri” (Google, 2014).
• Bing: no PWA-spesifik guidance — treat sebagai apa pun JS situs.

Incident playbook: search traffic dropped setelah sebuah PWA release

1. Freeze release path. Stop further service-worker dan routing deployments while Anda pertahankan failing production state dan release identifiers.
2. Confirm scope. Segment drop oleh template, directory, device, dan deployment time. sebuah PWA-wide failure seharusnya not menjadi assumed dari one broken route.
3. Compare three respons. Save raw respons HTTP, sebuah fresh rendered halaman dengan storage cleared, dan sebuah returning-pengguna halaman controlled oleh service worker. periksa judul, canonical, robots directives, primary copy, tautan, dan status perilaku.
4. Inspect registration dan cache policy. di DevTools Application, identify active worker, -nya scope, waiting versi, cache names, dan navigation handler. Confirm HTML navigations adalah not trapped behind sebuah old cache-pertama respons.
5. Bypass worker. Unregister ini atau gunakan DevTools’ bypass option, reload, dan repeat affected route. jika defect disappears, worker atau -nya cache adalah mungkin boundary; jika ini remains, continue sebagai sebuah ordinary JavaScript SEO incident.
6. Restore sebuah safe navigation path. Roll back worker atau switch document permintaan untuk network-pertama dengan sebuah explicit offline fallback. melakukan not delete semua caches blindly jika pengguna depend pada offline data.
7. Validate dan monitor. Test sebuah clean browser, sebuah updating browser, dan sebuah offline browser. lalu inspect representative URLs dan watch search performa melalui normal recrawl window.

Treating manifest sebagai sebuah SEO file

Stuffing keywords ke name, short_name, atau icon metadata melakukan not membuat halaman more dapat diindeks. gunakan manifest untuk installation perilaku dan put search-relevant konten di dapat di-crawl HTML dengan ordinary judul, tautan, dan canonicals.

Caching HTML forever

sebuah cache-pertama aturan itu treats navigations like immutable assets dapat pertahankan old copy, canonicals, atau robots directives alive setelah sebuah release. Cache versioned JS, CSS, dan images aggressively; give HTML sebuah network-aware update strategy.

Returning offline shell sebagai sebuah successful halaman

Serving yang sama offline app shell untuk setiap unavailable URL dapat look like banyak berbeda URLs returning identical thin konten. pertahankan offline experience clearly separate dari normal navigation dan melakukan not pretend sebuah missing document adalah requested halaman.

Hiding navigation behind non-tautan controls

sebuah button itu perubahan client state dapat berfungsi di app while providing no dapat di-crawl <a href> path untuk destination. gunakan nyata tautan untuk routes mesin pencari dan pengguna perlu untuk ikuti, lalu enhance transition dengan JavaScript.

Testing hanya sebagai sebuah warm returning pengguna

sebuah developer browser dengan sebuah installed worker dan populated cache dapat mask sebuah broken pertama visit. Test clean storage, sebuah upgrade dari previous worker, dan sebuah returning visit. itu adalah distinct PWA states.

contoh: asset caching dan document caching perlu berbeda aturan

following simplified service-worker logic menampilkan boundary. Hashed assets dapat menjadi cache-pertama; document navigations seharusnya try network sebelum falling back.

self.addEventListener('fetch', event => {
  const request = event.request;

  if (request.mode === 'navigate') {
    event.respondWith(
      fetch(request).catch(() => caches.match('/offline/'))
    );
    return;
  }

  if (['script', 'style', 'image', 'font'].includes(request.destination)) {
    event.respondWith(
      caches.match(request).then(cached => cached || fetch(request))
    );
  }
});

exact production policy depends pada update dan offline requirements, tetapi SEO lesson adalah stable: HTML adalah not yang sama jenis dari immutable asset sebagai sebuah fingerprinted bundle.

contoh: dapat di-crawl route versus app-hanya state

<!-- Search engines and users get a real destination. -->
<a href="/products/running-shoes/">Running shoes</a>

<!-- This changes app state but exposes no destination URL. -->
<button onclick="showCategory('running-shoes')">Running shoes</button>

sebuah PWA dapat intercept tautan untuk sebuah app-like transition tanpa menghapus -nya dapat di-crawl URL.

Prompt: review sebuah service-worker caching strategy

Paste worker source dan sebuah route inventory. melakukan not sertakan secrets atau private API respons.

Audit this service worker for search and freshness risks. Classify each fetch route as
document navigation, versioned static asset, API response, media, or offline fallback.
For each route, state the current strategy, the stale-content failure mode, and a safer
strategy. Pay special attention to HTML served cache-first, redirect handling, offline
shells returned for real URLs, cache-version cleanup, and worker scope. Quote the exact
code that creates each finding. Do not claim that PWA features provide a ranking boost.

Route inventory:
[PASTE ROUTES AND CONTENT TYPES]

Service worker:
[PASTE SOURCE]

Prompt: bangun PWA release QA matrix

Create a release QA matrix for this PWA. Cover a clean first visit, a returning visit
with the current worker, an upgrade from the previous worker, offline navigation, and a
worker-bypassed visit. For each state, list how to reproduce it and what to compare in
the raw response and rendered page: status behavior, title, canonical, robots, primary
content, internal links, and freshness. Use only the routes and requirements I provide;
flag missing evidence instead of inventing expected results.

Routes and requirements:
[PASTE ROUTE | EXPECTED CONTENT | OFFLINE REQUIREMENT | RELEASE CHANGE]

SHELL framework untuk PWA SEO reviews

• S: server respons. sebuah usable pertama respons, atau sebuah deliberate rendering strategy, harus expose halaman alih-alih hanya sebuah empty app shell.
• H: Hrefs. penting routes gunakan dapat di-crawl tautan dengan stable URLs, not controls itu exist hanya sebagai client-side state.
• E: Expected metadata. judul, canonicals, robots directives, dan data terstruktur remain correct di raw dan rendered states.
• L: Live documents. Navigation permintaan memiliki sebuah freshness policy appropriate untuk HTML; stale cached documents melakukan not silently outlive releases.
• L: Lifecycle tests. QA covers install, activate, update, waiting-worker, offline, dan bypass states alih-alih one warm developer session.

framework mempertahankan PWA-spesifik review narrow. jika semua five pass, sebagian besar remaining berfungsi adalah ordinary JavaScript, performa, dan indexability QA.

DevTools Console: inspect active worker dan caches

Run ini di browser DevTools Console pada PWA. ini reports registrations dan cache names tanpa mengubah either one.

const registrations = await navigator.serviceWorker.getRegistrations();
console.table(registrations.map(r => ({
  scope: r.scope,
  active: r.active?.scriptURL || '',
  waiting: r.waiting?.scriptURL || '',
  installing: r.installing?.scriptURL || ''
})));
console.log('Caches:', await caches.keys());

DevTools Console: compare sebuah network fetch dengan sebuah cached respons

const path = location.pathname;
const network = await fetch(path, { cache: 'no-store' });
const cached = await caches.match(path);
console.table({
  network: { status: network.status, type: network.type },
  cache: { found: Boolean(cached), status: cached?.status ?? '' }
});

hasil proves itu sebuah respons exists di sebuah cache; ini melakukan not prove which fetch handler akan win untuk setiap navigation. Confirm routing di worker source dan Network panel.

Regex: temukan risky cache-pertama navigation handlers

gunakan ini sebagai sebuah review aid, not sebuah parser. ini looks untuk sebuah navigation condition diikuti nearby oleh sebuah cache lookup.

request\.mode\s*===?\s*['"]navigate['"][\s\S]{0,500}caches\.(?:match|open)\s*\(

Validate sebuah PWA SEO release

Test yourself: PWA SEO

Five quick pertanyaan pada how Progressive Web Apps interact dengan search. Pick sebuah jawaban untuk setiap, lalu periksa.

Resources worth Anda time

My related writing

• JavaScript SEO Issues & Best Practices — rendering foundation setiap PWA sits pada; app-shell, SSR, dan what Google’s renderer melakukan dan doesn’t melakukan.
• Beginner’s Guide untuk SEO teknis — where rendering dan crawlability fit di bigger picture.

My speaking

• How Search berfungsi (SlideShare) — my walkthrough dari crawling, rendering, pengindeksan, dan peringkat, pipeline sebuah PWA memiliki untuk pass melalui. (Standing disclaimer: “This is my understanding of systems… not going to be 100% complete or accurate.” (terjemahan) “ini adalah my understanding dari sistem… not going untuk menjadi 100% complete atau accurate.”)

dari sekitar industry

• Google: Progressive Web Apps Don’t peringkat Better daripada Regular situs (mesin pencari Journal) — Mueller office-hours coverage itu anchors myth-bust.
• Google Says Progressive Web Apps (PWAs) memiliki No Advantage di Search (mesin pencari Roundtable) — independent write-up dari yang sama session.
• Service Worker – What SEOs perlu untuk Know (SearchViu) — Splitt/Mueller statements pada why renderer skips service workers.
• memahami JavaScript SEO Basics (Google) — app-shell failure mode, documented di source.
• What membuat sebuah baik Progressive Web App? (PWA checklist) (web.dev) — installability dan discoverability sebagai separate categories.
• Twitter Lite case study (web.dev) — nyata engagement angka, dan proof mereka adalah tidak pernah tentang SEO.

Videos

• Google Search Central (YouTube) — Martin Splitt’s JavaScript SEO dan rendering explainers cover exact pipeline (crawl → render → indeks) sebuah PWA depends pada, including how stateless renderer handles JS. Channel

Log perubahan