Panduan PWA SEO

TL;DR — sebuah PWA (Progressive Web App) adalah sebuah wajar situs web dengan dua extras bolted pada: sebuah manifest itu lets orang 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 tidak boost Anda rankings. satu hal itu dapat sebenarnya hurt Anda adalah sebuah badly set-up service worker itu menampilkan Google sebuah old, cached halaman alih-alih Anda langsung satu.

Apa sebuah PWA sebenarnya adalah

sebuah Progressive Web App adalah sebuah situs web itu’s telah enhanced untuk feel lebih like sebuah native app. Dua 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 untuk Home Screen” (terjemahan) “tambahkan untuk Home Screen” dan mendapatkan sebuah app-style icon dan splash screen.
• sebuah service worker — sebuah bit dari JavaScript itu berjalan di background dan dapat cache files so situs memuat fast pada repeat visits dan bahkan berfungsi offline.

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

big myth untuk bust

paling umum hal orang believe adalah: “Jika we turn our site menjadi a PWA, we’ll rank better.” (terjemahan) “jika kami turn kami situs ke sebuah PWA, kami’ll peringkat better.” Google memiliki mengatakan plainly itu ini tidak benar. Google’s John Mueller put ini secara langsung: PWAs “saat ini jangan memiliki any advantage di Google Search.” (terjemahan) “saat ini jangan memiliki apa pun advantage di Google Search.” Di sana adalah Tidak “PWA bonus” (terjemahan) “PWA bonus” di peringkat sistem.

manifest file tidak help SEO either. ini controls bagaimana app installs — icon, name, splash screen — none dari yang Google membaca ketika deciding cara peringkat Anda.

satu hal itu dapat sebenarnya hurt

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

Apa untuk sebenarnya melakukan

• pastikan Anda nyata halaman konten memuat untuk mesin pencari, tidak 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 hal 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 jangan expect ini untuk move Anda up di Google, dan jangan 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 apa adalah hampir selalu sebuah JS/SPA situs — so rendering aturan dari JavaScript/SPA SEO apply unchanged, plus dua PWA-spesifik concerns. Google memberikan PWAs Tidak peringkat advantage (Mueller). manifest.json governs installability, tidak pengindeksan, dan ada Tidak evidence peringkat sistem baca ini. service worker adalah nyata risk: Google’s renderer melakukan tidak jalankan service workers ketika 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 secara terpisah sebuah tiny sinyal peringkat; jangan chain itu ke “PWAs rank better.” (terjemahan) “PWAs peringkat better.” Core Web Vitals adalah satu-satunya legitimate overlap, dan ini adalah engineering, tidak PWA label.

sebuah PWA adalah sebuah situs web pertama

«The single most useful frame: a Progressive Web App is a normal website with two things added on 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.” The three pillars Google names are Capable, Reliable, and Installable — note that none of the three is “rankable.” » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

«Architecturally, that codebase is almost always a JavaScript framework running a single-page-application pattern. Which means: everything that governs JS/SPA indexability governs PWA indexability, with no modification. Real <a href> links and History-API routing (not hash fragments) for addressability; server-side rendering or prerendering for content availability; per-route canonical, title, and meta in the rendered DOM. If you’ve read the JavaScript SEO and SPA SEO material, you already know 90% of PWA SEO — the app-shell failure mode, in particular, is 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.” A PWA that ships an empty shell with no SSR/prerender inherits that problem directly. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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

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

ini adalah headline. Google memiliki telah unusually direct tentang ini. John Mueller, di sebuah Penelusuran Central office-hours session, mengatakan PWAs “saat ini jangan memiliki any advantage di Google Search, dan sebagai far sebagai I know, di sana adalah Tidak plans untuk ubah ini,” (terjemahan) “saat ini jangan memiliki apa pun advantage di Google Search, dan sebagai far sebagai I know, tidak ada plans untuk perubahan ini,” dan — ditanyakan apakah converting untuk sebuah PWA akan help — “Oleh default, saying going untuk a PWA akan membuat Anda rankings better — I jangan think itu adalah itu case.” (terjemahan) “oleh default, saying going untuk sebuah PWA akan membuat Anda rankings better — I jangan think itu adalah case.”

He juga pre-empted biasa counter-argument, itu “our pesaing went PWA dan mereka rankings jumped.” (terjemahan) “kami pesaing went PWA dan mereka rankings jumped.” His jawaban: “So sekadar itu fact itu satu dari Anda pesaing memiliki moved dari satu kerangka kerja untuk another, dan memiliki seen an improvement di penelusuran, itu kerangka kerja ubah dari my point dari view tidak akan menjadi responsible untuk itu.” (terjemahan) “So hanya fact itu satu dari Anda pesaing memiliki moved dari satu kerangka kerja untuk lainnya, dan memiliki seen sebuah improvement di penelusuran, itu kerangka kerja perubahan dari my poin dari view tidak akan menjadi responsible untuk itu.” dan pada mengapa: “Ini adalah essentially berbeda ways dari membuat a website… untuk itu paling part, we see ini sebagai wajar HTML halaman.” (terjemahan) “ini adalah essentially berbeda cara dari membuat sebuah situs web… untuk paling bagian, kami see ini sebagai wajar HTML halaman.”

Di mana 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-tahun-old organically-grown situs, Anda perubahan sebuah dozen hal di setelah — attributing hasil untuk “PWA” (terjemahan) “PWA” adalah sebuah correlation error.

Manifest.json: installability ≠ indexability

manifest.json file ada 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 apakah app opens standalone atau di sebuah browser tab. itu’s entire job.

ada Tidak evidence Google’s peringkat atau pengindeksan sistem baca manifest sebagai sebuah sinyal. paling bersih external konfirmasi adalah Google’s own PWA checklist, yang lists “Adalah installable” (terjemahan) “adalah installable” dan “Discoverable in search” (terjemahan) “Discoverable di penelusuran” sebagai dua terpisah, independent checklist categories — di mana discoverability adalah didefinisikan sebagai ordinary SEO fundamentals: “Enable penelusuran engine discovery melalui unique URLs, descriptive titles, meta descriptions, dan 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, tidak satu feeding lainnya. So: pertahankan sebuah valid manifest karena ini adalah apa membuat app installable — hanya jangan file ini di bawah SEO.

«Google doesn’t publish a page stating in exact words that manifest.json is excluded from ranking; this is a well-supported inference from the “no advantage” statement, the checklist’s separation of the two categories, and the manifest’s total absence from Google’s ranking-factor docs — phrase it as “no evidence it’s read,” not “confirmed ignored.” » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Service workers: satu nyata PWA-spesifik SEO risk

Di sini’s fact itu penting sebagian besar, dan ini adalah PWA-spesifik: Google’s rendering service melakukan tidak jalankan Anda service worker ketika 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 seseorang clicking pada Anda halaman dari sebuah SERP adalah sebuah pertama-time pengunjung, berjalan sebuah service worker adalah biasanya tidak going untuk melakukan banyak baik.” sebuah service worker’s seluruh poin adalah speeding up repeat visits dari sebuah cache — dan Googlebot adalah, oleh design, selalu treated sebagai sebuah pertama-time pengunjung, so ada tidak ada apa pun 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 tidak supporting itu karena pengguna clicking onto Anda halaman dari penelusuran hasil mungkin tidak pernah memiliki telah di sana beforehand.” Mueller memiliki confirmed ini adalah stable policy, tidak 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 tidak akan expect ini untuk perubahan — ini adalah computationally expensive untuk jalankan service-workers di background like ini untuk pengindeksan.”

«These three rep statements are relayed by SearchViu (Splitt at Google I/O 2019/2020; Mueller reported July 2023); I’ve confirmed the Splitt and Mueller quotes as exact substrings on that page but they’re a third-party relay, not a Google-owned URL. Note also that “never runs” is slightly too absolute — Google’s Splitt has indicated web workers can sometimes execute; the safe framing is “the rendering service doesn’t run service workers by design,” not “under no circumstance.” » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh enam, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

So mengapa adalah itu sebuah risk? Karena Anda service worker melakukan jalankan 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. Karena rendering adalah stateless dan WRS memperlakukan setiap fetch sebagai fresh, sebuah misconfigured caching strategy adalah bagaimana sebuah PWA ends up dengan Googlebot pengindeksan sebuah outdated atau empty offline shell alih-alih langsung konten.

** caching-strategy aturan dari thumb:**

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

cara audit ini: bandingkan apa Googlebot sees terhadap apa sebuah repeat pengunjung’s browser menyajikan dari cache. gunakan pemeriksaan URL di Search Console (pengujian langsung) untuk see dirender HTML Google sebenarnya mendapatkan, dan periksa ini terhadap langsung 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 tidak akan tunggu forever untuk sebuah halaman untuk finish memuat.” (itu spesifik artikel adalah tentang dynamic rendering, yang Google now discourages di favor dari SSR — cite timeout principle, tidak pattern.)

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

Anda’ll see PWA SEO posts imply “PWAs perlu HTTPS, dan HTTPS boosts rankings, karena itu PWAs adalah lebih SEO-friendly.” (terjemahan) “PWAs perlu HTTPS, dan HTTPS boosts rankings, karena itu PWAs adalah lebih SEO-friendly.” Dua benar facts, wrongly chained.

Fact satu: service workers hanya jalankan di sebuah secure context. Per MDN: “Service workers adalah hanya tersedia di secure contexts: ini berarti itu mereka document adalah served over HTTPS, although browsers juga treat http://localhost sebagai a secure context, untuk facilitate local development.” (terjemahan) “Service workers adalah hanya tersedia di secure contexts: ini berarti itu mereka document adalah disajikan di atas HTTPS, although browser juga treat tidak terdefinisi sebagai sebuah secure context, untuk facilitate local development.” itu’s sebuah browser platform aturan, tidak sebuah SEO tactic — Tidak HTTPS, Tidak service worker, penuh berhenti.

«Fact two: HTTPS is a real Google ranking signal, but a 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) (Ringkasan bahasa Indonesia untuk bagian empat puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

poin: apa pun HTTPS situs mendapatkan itu sama tiny sinyal — PWA atau tidak. sebuah PWA tidak mendapatkan extra SEO credit untuk HTTPS; ini hanya dapat’t function tanpa ini. jangan sell HTTPS sebagai sebuah PWA SEO benefit.

Core Web Vitals: satu legitimate overlap

jika ada sebuah nyata place di mana “good PWA” (terjemahan) “baik PWA” dan “good SEO” (terjemahan) “baik SEO” memenuhi, ini adalah performa. Google’s PWA guidance leads dengan reliability — “A reliable Progressive Web App feels fast dan dependable regardless dari itu 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 tetap responsive akan tend untuk score well pada Vitals.

tetapi baca causation dengan hati-hati: ini adalah engineering, tidak 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-dirender halaman. Vitals win muncul dari melakukan performa berfungsi well, yang Anda dapat melakukan dengan atau tanpa sebuah manifest. menjadi sebuah PWA neither jaminan baik Vitals nor grants sebuah shortcut untuk them.

App-like fitur adalah UX, tidak peringkat factors

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

jangan treat “installable” (terjemahan) “installable” sebagai sebuah single, universal kemampuan either — ini varies oleh browser dan OS, yang adalah satu lebih alasan ini dapat’t menjadi sebuah SEO sinyal (Google akan memiliki Tidak 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 “tidak supported pada iOS.” (terjemahan) “tidak 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 yang gunakan Apple’s diperlukan WebKit mesin pada iOS dan so share itu limitation), tidak sebuah automatic prompt. None dari itu perubahan SEO picture — ini hanya berarti “adalah my PWA installable” (terjemahan) “adalah my PWA installable” tidak sebuah Ya/Tidak fact independent dari yang 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 terdokumentasi hasil adalah nyata (sebuah 65% increase di halaman per session, 75% increase di Tweets dikirim, 20% decrease di bounce rate) — tetapi setiap satu 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 sedikit wrinkles worth naming, karena 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 status checkout 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 persis di mana Anda memiliki paling halaman. memperbaiki adalah yang sama ones dari ecommerce dan faceted-navigation SEO; PWA layer tidak perubahan them, ini hanya membuat SSR/prerender discipline lebih penting.

Bing dan PWAs

Worth sebuah line: Bing memiliki published Tidak 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 terpisah track dari web-penelusuran pengindeksan. So untuk Bing, default untuk ordinary JS-rendering crawlability guidance; ada Tidak PWA exception untuk learn.

intinya

PWA SEO adalah JavaScript/SPA SEO plus persis dua 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. Mendapatkan itu right dan sebuah PWA indeks persis like apa pun lainnya well-dibangun situs — Tidak bonus, Tidak 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 apa hampir selalu sebuah JS/SPA situs. semua JavaScript/SPA SEO aturan apply unchanged.
• Tidak peringkat advantage. Google’s John Mueller: PWAs “saat ini jangan memiliki any advantage di Google Search.” (terjemahan) “saat ini jangan memiliki apa pun advantage di Google Search.” “Going PWA” (terjemahan) “Going PWA” melakukan tidak meningkatkan rankings.
• Manifest.json adalah SEO-irrelevant. ini controls install prompts, icons, start_url, display — ada Tidak evidence peringkat sistem baca ini. Google’s PWA checklist lists “installable” (terjemahan) “installable” dan “discoverable in search” (terjemahan) “discoverable di penelusuran” sebagai terpisah categories.
• ** satu nyata risk adalah service worker.** Google’s renderer tidak jalankan service workers ketika pengindeksan (ini memperlakukan 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 secara terpisah sebuah “very lightweight” (terjemahan) “very lightweight” sinyal peringkat setiap HTTPS situs mendapatkan. jangan chain dua.
• Core Web Vitals adalah satu-satunya legit overlap — dan ini adalah performa engineering, tidak PWA label. sebuah bloated PWA dapat score worse.
• App-like fitur (install, offline, push) adalah engagement, tidak 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 Tidak beforeinstallprompt, hanya manual tambahkan untuk Home Screen) — satu lebih alasan ini dapat’t menjadi sebuah sinyal peringkat.
• Bing memiliki Tidak PWA-spesifik guidance; default untuk ordinary JS crawlability.

Dokumentasi resmi

Utama-sumber material pada PWAs, rendering, dan facts ini artikel rests pada.

Google / web.dev

• Apa adalah Progressive Web Apps? — Google’s definition dan three pillars (Capable, Reliable, Installable).
• Apa membuat sebuah baik Progressive Web App? (PWA checklist) — separates “Is installable” (terjemahan) “adalah installable” dari “Discoverable in search” (terjemahan) “Discoverable di penelusuran” 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: Tidak SEO/organic claims anywhere di ini).
• HTTPS sebagai sebuah sinyal peringkat (2014) — “very lightweight signal” (terjemahan) “very lightweight sinyal” statement.

MDN / platform

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

Bing / Microsoft (Tidak PWA-spesifik peringkat guidance ada — 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 sumber

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

Google — Tidak PWA peringkat advantage

• “PWAs saat ini jangan memiliki any advantage di Google Search, dan sebagai far sebagai I know, di sana adalah Tidak plans untuk ubah ini.” (terjemahan) “PWAs saat ini jangan memiliki apa pun advantage di Google Search, dan sebagai far sebagai I know, tidak ada plans untuk perubahan ini.” — John Mueller, Google, Penelusuran Central office-hours (Nov 2021). Baca 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 jangan think itu adalah case.” — John Mueller, sama session. Baca 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 satu dari Anda pesaing memiliki moved dari satu kerangka kerja untuk lainnya, dan memiliki seen sebuah improvement di penelusuran, itu kerangka kerja perubahan dari my poin dari view tidak akan menjadi responsible untuk itu.” — John Mueller, sama session. Baca coverage

Google — apa 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.” — web.dev. Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “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.” — Google Search Central. Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh sembilan, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “Enable search engine discovery through unique URLs, descriptive titles, meta descriptions, and structured data.” — web.dev PWA checklist, “Discoverable in search.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh sembilan, bagian kecil tiga: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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 seseorang clicking pada Anda halaman dari sebuah SERP adalah sebuah pertama-time pengunjung, berjalan sebuah service worker adalah biasanya tidak going untuk melakukan banyak baik.” — Martin Splitt, Google. Baca 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 tidak supporting itu karena pengguna clicking onto Anda halaman dari penelusuran hasil mungkin tidak pernah memiliki telah di sana beforehand.” — Martin Splitt, Google (Google I/O 2019). Baca 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 tidak akan expect ini untuk perubahan — ini adalah computationally expensive untuk jalankan service-workers di background like ini untuk pengindeksan.” — John Mueller, Google (reported July 2023). Baca 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.” — MDN, Service Worker API. Jump to 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.” — Google, “HTTPS as a ranking signal” (2014). Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Installability varies oleh browser/OS

• “This is not supported on iOS.” (terjemahan) “ini adalah tidak 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 tidak akan tunggu forever untuk sebuah halaman untuk finish memuat.” — Hamlet Batista, mesin pencari Land. Baca artikel

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

sebuah quick walk melalui pertanyaan orang sebenarnya 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?”

• Tidak inherent peringkat benefit — Google says PWAs mendapatkan Tidak advantage di Penelusuran. → bangun PWA untuk pengguna benefits (installable, offline, fast repeat memuat), tidak untuk rankings. → ini tidak akan hurt SEO either, sebagai panjang sebagai Anda rendering dan service worker adalah siapkan correctly (continue di bawah).

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

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

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

• HTML documents → network-pertama (atau stale-sementara-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. Di mana melakukan I look?”

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

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

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

PWA SEO checklist

Scannable lulus untuk mempertahankan sebuah Progressive Web App dapat di-crawl dan dapat diindeks:

• nyata konten adalah server-dirender atau prerendered — tidak sebuah empty app shell filled oleh JavaScript setelah muat.
• setiap route memiliki sebuah nyata, unique URL melalui History API (Tidak hash/#! routing).
• setiap route mengembalikan -nya own canonical, judul, dan deskripsi meta di dirender DOM.
• Service worker menyajikan HTML network-pertama (atau stale-sementara-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 apa sebuah fresh crawl indeks.
• pemeriksaan URL (pengujian langsung) menampilkan Google nyata, saat ini halaman — compared terhadap langsung halaman.
• manifest adalah valid untuk installability, tetapi Anda’re tidak treating ini sebagai sebuah SEO lever.
• Installability adalah tested per browser/OS, tidak assumed universal (iOS Safari memiliki Tidak 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 tidak dragging LCP/INP down.
• Ecommerce: product halaman setiap kembalikan nyata unique HTML; faceted-nav/client routing tidak spawning shell-hanya atau infinite parameter URLs.

PWA SEO — cheat sheet

melakukan ini memengaruhi SEO?

Service-worker caching oleh resource jenis

Fast facts

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

Incident playbook: penelusuran traffic dropped setelah sebuah PWA rilis

1. Freeze rilis path. Berhenti further service-worker dan routing deployments sementara Anda pertahankan failing production state dan rilis identifiers.
2. Konfirmasi cakupan. Segment drop oleh template, directory, device, dan deployment time. sebuah PWA-wide failure seharusnya tidak menjadi assumed dari satu rusak route.
3. Bandingkan three respons. Save mentah respons HTTP, sebuah fresh dirender halaman dengan storage cleared, dan sebuah returning-pengguna halaman controlled oleh service worker. periksa judul, canonical, robots directives, utama copy, tautan, dan status perilaku.
4. Inspect registration dan cache policy. di DevTools Application, identify active worker, -nya cakupan, menunggu versi, cache names, dan navigation handler. Konfirmasi HTML navigations adalah tidak 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 tetap, 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 jelas offline fallback. melakukan tidak delete semua caches blindly jika pengguna bergantung pada offline data.
7. Validate dan monitor. Test sebuah bersih browser, sebuah updating browser, dan sebuah offline browser. lalu inspect representative URLs dan watch penelusuran performa melalui wajar recrawl window.

Treating manifest sebagai sebuah SEO file

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

Caching HTML forever

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

Returning offline shell sebagai sebuah successful halaman

Serving yang sama offline app shell untuk setiap tidak tersedia URL dapat look like banyak berbeda URLs returning identical thin konten. pertahankan offline experience dengan jelas terpisah dari wajar navigation dan melakukan tidak pretend sebuah missing document adalah requested halaman.

Hiding navigation behind non-tautan controls

sebuah button itu perubahan client state dapat berfungsi di app sementara providing Tidak 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 rusak pertama visit. Test bersih storage, sebuah upgrade dari sebelumnya worker, dan sebuah returning visit. itu adalah distinct PWA status.

contoh: asset caching dan document caching perlu berbeda aturan

berikut 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))
    );
  }
});

tepat production policy bergantung pada perbarui dan offline requirements, tetapi SEO lesson adalah stable: HTML adalah tidak 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 sumber dan sebuah route inventory. melakukan tidak sertakan secrets atau privat 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 rilis 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 kerangka kerja 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, tidak controls itu exist hanya sebagai client-side state.
• E: Yang diharapkan metadata. judul, canonicals, robots directives, dan data terstruktur tetap correct di mentah dan dirender status.
• L: Langsung documents. Navigation permintaan memiliki sebuah freshness policy appropriate untuk HTML; stale cached documents melakukan tidak silently outlive releases.
• L: Lifecycle tests. QA covers install, activate, perbarui, menunggu-worker, offline, dan bypass status alih-alih satu warm developer session.

kerangka kerja mempertahankan PWA-spesifik review sempit. jika semua five lulus, sebagian besar remaining berfungsi adalah ordinary JavaScript, performa, dan indexability QA.

DevTools Console: inspect active worker dan caches

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

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: bandingkan 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 ada di sebuah cache; ini melakukan tidak prove yang fetch handler akan win untuk setiap navigation. Konfirmasi routing di worker sumber dan Network panel.

Regex: temukan risky cache-pertama navigation handlers

gunakan ini sebagai sebuah review aid, tidak 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 rilis

Uji pemahaman Anda: PWA SEO

Five quick pertanyaan pada bagaimana Progressive Web Apps interact dengan penelusuran. 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 apa Google’s renderer melakukan dan tidak melakukan.
• Beginner’s Guide untuk SEO teknis — di mana rendering dan crawlability fit di bigger picture.

My speaking

• Bagaimana Penelusuran berfungsi (SlideShare) — my walkthrough dari crawling, rendering, pengindeksan, dan peringkat, pipeline sebuah PWA memiliki untuk lulus melalui. (Standing disclaimer: “Ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.” (terjemahan) “ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.”)

dari sekitar industry

• Google: Progressive Web Apps jangan peringkat Better daripada Regular situs (mesin pencari Journal) — Mueller office-hours coverage itu anchors myth-bust.
• Google Says Progressive Web Apps (PWAs) memiliki Tidak Advantage di Penelusuran (mesin pencari Roundtable) — independent tulis-up dari yang sama session.
• Service Worker – Apa SEOs perlu untuk Know (SearchViu) — Splitt/Mueller statements pada mengapa renderer skips service workers.
• memahami JavaScript SEO Basics (Google) — app-shell failure mode, terdokumentasi di sumber.
• Apa membuat sebuah baik Progressive Web App? (PWA checklist) (web.dev) — installability dan discoverability sebagai terpisah 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 tepat pipeline (crawl → render → indeks) sebuah PWA bergantung pada, including bagaimana stateless renderer menangani JS. Channel

Log perubahan