Hướng dẫn về PWA SEO
Progressive Web App SEO — vì sao "going PWA" không improve thứ hạng, vì sao đó manifest.json là SEO-irrelevant, cách một misconfigured service worker có thể serve Googlebot một stale bộ nhớ đệm, và nơi Core Web Vitals và HTTPS thực ra (và không) overlap với SEO.
Ngôn ngữ
MỘT PWA là một website enhanced với một manifest và một service worker — đây là vẫn một thông thường (thường JavaScript/SPA) site để Google, với không inherent xếp hạng advantage. Đó manifest.json là SEO-irrelevant (điều này controls installability, không lập chỉ mục). Đó một real PWA-cụ thể risk là đó service worker: Google renderer không chạy service workers khi lập chỉ mục, so một bộ nhớ đệm-đầu tiên HTML strategy có thể hand Googlebot một stale hoặc offline trang. Cách sửa đó với network-đầu tiên cho HTML, và đó rest là ordinary JS/SPA SEO.
Evidence for this claim A progressive web app is still a web application; installability features do not replace indexable HTML and URLs. Scope: Current official or standards documentation. Confidence: high · Verified: web.dev: Progressive web apps Evidence for this claim JavaScript applications must expose crawlable links, meaningful content, metadata, and status behavior to Google. Scope: Current official or standards documentation. Confidence: high · Verified: Google: JavaScript SEO basicsTóm tắt — PWA (Progressive Web App) là thông thường trang web với hai extras bolted on: manifest đó lets mọi người install nó để của họ home screen, và service worker đó có thể làm nó hoạt động offline. để Google nó vẫn chỉ trang web — going PWA làm không boost của bạn thứ hạng. một điều đó có thể thực ra hurt bạn là badly đặt-lên service worker đó hiển thị Google old, được lưu đệm trang thay vì của bạn trực tiếp một.
Điều gì PWA thực ra là
Progressive Web App là trang web đó là enhanced để feel nhiều hơn như native app. Hai pieces làm nó PWA:
- MỘT web app manifest (
manifest.json) — một nhỏ file đó tells đó trình duyệt của bạn app name, icons, và colors, so một khách truy cập có thể tap “Add to Home Screen” (bản dịch) «Thêm để Home Screen» và nhận an app-style icon và splash screen. - MỘT service worker — một bit of JavaScript đó chạy trong đó background và có thể bộ nhớ đệm files so đó site loads fast on repeat visits và ngay cả hoạt động offline.
đó nó. Underneath, PWA là gần như luôn regular JavaScript trang web (React, Vue, Angular, và so on). nó thông thường trang web wearing app costume.
big myth để bust
Đó hầu hết phổ biến điều mọi người believe là: “If we turn our site into a PWA, we’ll rank better.” (bản dịch) «Nếu we turn của chúng ta site vào một PWA, we’ll xếp hạng tốt hơn.» Google có đã nói plainly đó này không đúng. Google John Mueller put điều này trực tiếp: PWAs “currently don’t have any advantage in Google Search.” (bản dịch) «hiện tại không có bất kỳ advantage trong Google Search.» Ở đó là không “PWA bonus” trong đó xếp hạng các hệ thống.
manifest file không help SEO either. nó controls Cách app installs — icon, name, splash screen — none của mà Google đọc Khi deciding Cách xếp hạng bạn.
một điều đó có thể thực ra hurt
Đó service worker là đó part để hãy cẩn thận với. Vì điều này có thể serve một được lưu đệm (saved) copy of của bạn các trang, một bad setup có thể end lên cho thấy Google một stale hoặc ngay cả blank “you’re offline” (bản dịch) «bạn là offline» version of một trang thay vì đó real, lên-để-date một. đó là cách một PWA loses traffic sau launch — không vì điều này “became a PWA,” (bản dịch) «trở thành một PWA,» nhưng vì đó bộ nhớ đệm đã là pointed đó sai way.
Điều gì để thực ra làm
- hãy đảm bảo của bạn thực nội dung trang loads Đối với tìm kiếm engines, không chỉ rỗng shell đó fills trong với JavaScript afterward.
- đặt của bạn service worker so nó fetches fresh HTML từ network đầu tiên, và chỉ falls lại để bộ nhớ đệm cho speed on điều như images và stylesheets.
- giữ basics right: thực, unique các URL; good tiêu đề và mô tả meta on mỗi trang; fast, reliable experience.
là PWA là great cho của bạn người dùng — installable, fast, offline-friendly. chỉ không expect nó để move bạn lên trong Google, và không let service worker feed Google sai trang. Nâng cao tab có mechanics, bộ nhớ đệm strategies, và quotes.
Evidence for this claim A progressive web app is still a web application; installability features do not replace indexable HTML and URLs. Scope: Current official or standards documentation. Confidence: high · Verified: web.dev: Progressive web apps Evidence for this claim JavaScript applications must expose crawlable links, meaningful content, metadata, and status behavior to Google. Scope: Current official or standards documentation. Confidence: high · Verified: Google: JavaScript SEO basicsTL;DR — MỘT PWA là một manifest + một service worker layered on top of điều gì là gần như luôn một JS/SPA site — so đó kết xuất rules từ JavaScript/SPA SEO apply unchanged, plus hai PWA-cụ thể concerns. Google cho PWAs không xếp hạng advantage (Mueller). Đó
manifest.jsongoverns installability, không lập chỉ mục, và có không evidence đó xếp hạng các hệ thống đọc điều này. Đó service worker là đó real risk: Google renderer không chạy service workers khi lập chỉ mục, so một bộ nhớ đệm-đầu tiên HTML strategy có thể chỉ mục một stale hoặc offline shell — dùng network-đầu tiên cho HTML, bộ nhớ đệm-đầu tiên cho static assets. HTTPS là một hard requirement cho service workers và riêng một tiny tín hiệu xếp hạng; không chain những vào “PWAs rank better.” (bản dịch) «PWAs xếp hạng tốt hơn.» Cốt lõi Web Chỉ số quan trọng là đó chỉ legitimate overlap, và đây là đó engineering, không đó PWA label.
PWA là trang web đầu tiên
Đó single hầu hết hữu ích frame: một Progressive Web App là một thông thường website với hai điều đã thêm on top. Theo Google 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.” (bản dịch) «là web apps được xây dựng và enhanced với modern APIs để cung cấp enhanced capabilities trong khi vẫn reaching bất kỳ web người dùng on bất kỳ device với một single codebase.» Đó three pillars Google names là Capable, Reliable, và Installable — note đó none of đó three là “rankable.”
Architecturally, đó codebase là gần như luôn một JavaScript framework đang chạy một
single-trang-application pattern. Mà có nghĩa là: mọi thứ đó governs JS/SPA
indexability governs PWA indexability, với không modification. Real <a href> links
và History-API routing (không hash fragments) cho addressability; máy chủ-side kết xuất
hoặc prerendering cho nội dung availability; theo-route canonical, tiêu đề, và meta trong đó
được kết xuất DOM. Nếu bạn đã đọc đó JavaScript SEO và SPA SEO material, bạn đã know
90% of PWA SEO — đó app-shell chế độ lỗi, trong particular, là một 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.” (bản dịch) «Some JavaScript các trang có thể dùng đó app shell model nơi đó ban đầu HTML không contain đó thực tế nội dung và Google cần để execute JavaScript trước đang able để see đó thực tế trang nội dung đó JavaScript generates.» MỘT PWA đó
ships an empty shell với không SSR/prerender inherits đó vấn đề trực tiếp.
So honest phạm vi của PWA-cụ thể SEO bài viết là nhỏ: manifest, và service worker. Mọi thứ khác là JS/SPA SEO wearing manifest.
cốt lõi myth: “going PWA” không improve thứ hạng
Này là đó headline. Google đã được unusually trực tiếp về điều này. John Mueller, trong một Tìm kiếm Central office-hours session, đã nói PWAs “currently don’t have any advantage in Google Search, and as far as I know, there are no plans to change this,” (bản dịch) «hiện tại không có bất kỳ advantage trong Google Search, và as far as I know, có không plans để thay đổi này,» và — asked liệu converting để một PWA sẽ help — “By default, saying going to a PWA will make your rankings better — I don’t think that is the case.” (bản dịch) «Theo mặc định, saying going để một PWA sẽ làm của bạn thứ hạng tốt hơn — I không think đó là đó case.»
He cũng pre-empted đó thông thường counter-argument, đó “our competitor went PWA and their rankings jumped.” (bản dịch) «của chúng ta đối thủ went PWA và của họ thứ hạng jumped.» His câu trả lời: “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.” (bản dịch) «So chỉ đó fact đó một of của bạn các đối thủ có moved từ một framework để một sản phẩm khác, và có seen an improvement trong tìm kiếm, đó framework thay đổi từ my point of view sẽ không là responsible cho đó.» Và on vì sao: “These are essentially different ways of making a website… for the most part, we see these as normal HTML pages.” (bản dịch) «Những là essentially khác nhau ways of đang làm một website… cho đó hầu hết part, we see những as thông thường HTML các trang.»
nơi PWA relaunches làm correlate với xếp hạng lifts, nó confounds đó come với bất kỳ big rebuild: modernized liên kết nội bộ, refreshed và expanded nội dung, genuine speed improvements, và thường marketing push tied để relaunch. None của đó requires PWA label. nếu bạn rebuild 10-để-15-năm-old organically-grown trang web, bạn thay đổi dozen điều tại sau khi — attributing kết quả để “PWA” là correlation lỗi.
Mueller office-hours statements trên là relayed by công cụ tìm kiếm Journal và independently by công cụ tìm kiếm Roundtable covering giống nhau Nov 2021 session; I có không replayed gốc video, so treat them as reported-chính thức.Manifest.json: installability ≠ indexability
manifest.json file tồn tại để làm của bạn app installable. Của nó các trường —
name, short_name, icons, start_url, display, theme_color — drive
install prompt, home-screen icon, splash screen, và liệu app opens
standalone hoặc trong trình duyệt tab. đó đểàn bộ job.
có không evidence Google xếp hạng hoặc lập chỉ mục các hệ thống đọc đó manifest as một tín hiệu. Đó sạch nhất external xác nhận là Google own PWA checklist, mà lists “Is installable” (bản dịch) «Là installable» và “Discoverable in search” (bản dịch) «Discoverable trong tìm kiếm» as hai tách biệt, independent checklist categories — nơi discoverability là được định nghĩa as ordinary SEO fundamentals: “Enable search engine discovery through unique URLs, descriptive titles, meta descriptions, and structured data.” (bản dịch) «Enable công cụ tìm kiếm phát hiện qua unique URLs, descriptive các tiêu đề, meta các mô tả, và dữ liệu có cấu trúc.» Installability (manifest-driven) và discoverability (classic SEO) là treated as parallel concerns, không một feeding đó other. So: giữ một hợp lệ manifest vì đây là điều gì làm đó app installable — chỉ không file điều này dưới SEO.
Google không publish một trang stating trong chính xác words đó manifest.json là excluded từ xếp hạng; này là một well-supported inference từ đó “no advantage” (bản dịch) «không advantage» statement, đó checklist separation of đó hai categories, và đó manifest total absence từ Google xếp hạng-factor tài liệu — phrase điều này as “no evidence it’s read,” (bản dịch) «không evidence đây là đọc,» không “confirmed ignored.” (bản dịch) «confirmed đã bỏ qua.»Service workers: một thực PWA-cụ thể SEO risk
Ở đây đó fact đó matters hầu hết, và đây là PWA-cụ thể: Google kết xuất service không chạy của bạn service worker khi điều này renders một trang cho lập chỉ mục. Đó reasoning, từ 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.” (bản dịch) «As we có để assume đó ai đó clicking on trang của bạn từ một SERP là một đầu tiên-time khách truy cập, đang chạy một service worker là thường không going để làm nhiều good.» MỘT service worker toàn bộ point là speeding lên repeat visits từ một bộ nhớ đệm — và Googlebot là, by design, luôn treated as một đầu tiên-time khách truy cập, so có không có gì cho điều này để speed lên. Splitt again: “We’re not supporting that because users clicking onto your page from the search result might never have been there beforehand.” (bản dịch) «chúng ta là không supporting đó vì người dùng clicking onto trang của bạn từ đó tìm kiếm kết quả có thể không bao giờ đã được ở đó beforehand.» Mueller có confirmed này là ổn định policy, không một tạm thời state: “I wouldn’t expect it to change — it’s computationally expensive to run service-workers in the background like this for indexing.” (bản dịch) «I sẽ không expect điều này để thay đổi — đây là computationally expensive để chạy service-workers trong đó background như này cho lập chỉ mục.»
Những three rep statements là relayed by SearchViu (Splitt tại Google I/O 2019/2020; Mueller reported July 2023); I’ve confirmed đó Splitt và Mueller quotes as chính xác substrings on đó trang nhưng họ là một bên thứ ba relay, không một Google-owned URL. Note cũng đó “không bao giờ chạy” là slightly cũng absolute — Google Splitt có indicated web workers có thể sometimes execute; đó safe cách diễn đạt là “the rendering service doesn’t run service workers by design,” (bản dịch) «đó kết xuất service không chạy service workers by design,» không “under no circumstance.” (bản dịch) «dưới không circumstance.»So Vì sao là đó risk? vì của bạn service worker làm chạy trong thực người dùng’ các trình duyệt, và nếu bạn told nó để phục vụ HTML bộ nhớ đệm-đầu tiên — trả về bản sao đã lưu, skip network — sau đó thực repeat khách truy cập sees fast được lưu đệm trang, nhưng đó strategy Googlebot không bao giờ executes. danger là reverse case: bộ nhớ đệm pattern đó, dưới bất kỳ lỗi hoặc fallback condition, hands lại stale document hoặc offline-fallback trang. vì kết xuất là stateless và WRS xử lý mỗi fetch as fresh, misconfigured bộ nhớ đệm strategy là Cách PWA ends lên với Googlebot lập chỉ mục outdated hoặc rỗng offline shell thay vì trực tiếp nội dung.
** bộ nhớ đệm-strategy rule của thumb:**
- HTML documents → network-đầu tiên (hoặc stale-trong khi-revalidate với ngắn TTL). Nhận trực tiếp trang; sử dụng bộ nhớ đệm chỉ as offline fallback, và hãy đảm bảo đó fallback là không bao giờ Điều gì fresh crawl sẽ chỉ mục.
- Static assets (JS, CSS, images, fonts) → bộ nhớ đệm-đầu tiên là fine và desirable — họ không thay đổi theo yêu cầu và không phải indexable document.
Cách audit điều này: so sánh điều gì Googlebot sees so với điều gì một repeat khách truy cập trình duyệt serves từ bộ nhớ đệm. Dùng URL Inspection trong Search Console (trực tiếp kiểm thử) để see đó được kết xuất HTML Google thực ra nhận, và kiểm tra điều này so với đó trực tiếp trang. Nếu they diverge, của bạn service worker hoặc SSR setup là đó đầu tiên suspect. Và watch kết xuất timeouts on hybrid setups — as Hamlet Batista noted từ đó dynamic-kết xuất era, “Rendering services won’t wait forever for a page to finish loading.” (bản dịch) «Kết xuất services sẽ không chờ forever cho một trang để finish loading.» (Đó cụ thể bài viết là về dynamic kết xuất, mà Google hiện tại discourages trong favor of SSR — cite đó timeout principle, không đó pattern.)
HTTPS: service-worker requirement, và riêng tiny tín hiệu xếp hạng
Bạn’ll see PWA SEO posts imply “PWAs need HTTPS, and HTTPS boosts rankings, therefore PWAs are more SEO-friendly.” (bản dịch) «PWAs cần HTTPS, và HTTPS boosts thứ hạng, do đó PWAs là hơn SEO-friendly.» Hai đúng facts, wrongly chained.
Fact một: service workers chỉ chạy trong một secure context. Theo 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.” (bản dịch) «Service workers là chỉ khả dụng trong secure contexts: này có nghĩa là đó của họ document là phân phối over HTTPS, although các trình duyệt cũng treat http://localhost as một secure context, để facilitate local development. » đó là một trình duyệt nền tảng rule, không an SEO tactic — không HTTPS, không service worker, đầy đủ dừng.
Fact hai: HTTPS là một real Google tín hiệu xếp hạng, nhưng một minuscule một. Google 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.” (bản dịch) «chúng ta là starting để dùng HTTPS as một tín hiệu xếp hạng. Cho hiện tại đây là chỉ một very lightweight tín hiệu — affecting ít hơn 1% of global các truy vấn, và carrying ít hơn weight hơn other các tín hiệu such as cao-quality nội dung.»
point: bất kỳ HTTPS trang web nhận đó giống nhau tiny tín hiệu — PWA hoặc không. PWA không nhận extra SEO credit cho HTTPS; nó chỉ có thể’t function không có nó. không sell HTTPS as PWA SEO benefit.
Core Web Vitals: một legitimate overlap
Nếu có một real place nơi “good PWA” và “good SEO” đáp ứng, đây là performance. Google PWA hướng dẫn leads với reliability — “A reliable Progressive Web App feels fast and dependable regardless of the network” (bản dịch) «MỘT reliable Progressive Web App feels fast và dependable regardless of đó network» — và Core Web Vitals là một confirmed (nếu modest) xếp hạng factor. MỘT well-engineered PWA đó loads fast và vẫn giữ responsive sẽ tend để score well on Chỉ số quan trọng.
nhưng đọc causation cẩn thận: nó engineering, không PWA-ness. bloated PWA — huge JS bundle, render-blocking hydration, over-eager service worker — có thể easily post tệ hơn Core Web Vitals hơn đơn giản máy chủ-được kết xuất trang. Chỉ số quan trọng win xuất hiện từ đang làm performance hoạt động well, mà bạn có thể làm với hoặc không có manifest. là PWA neither bảo đảm good Chỉ số quan trọng nor grants shortcut để them.
App-như features là UX, không xếp hạng factors
Thêm-để-home-screen, offline chế độ, push notifications, app-như navigation — all genuine, valuable PWA benefits, và all engagement/retention features, không lập chỉ mục hoặc xếp hạng inputs. Google PWA checklist làm đó split rõ ràng by putting “installable” và “discoverable in search” (bản dịch) «discoverable trong tìm kiếm» trong tách biệt buckets.
không treat “installable” as một single, universal khả năng either — điều này varies by
trình duyệt và OS, mà là một hơn reason điều này không thể là an SEO tín hiệu (Google sẽ có
không consistent, cross-trình duyệt behavior để reward). Đó beforeinstallprompt event đó
lets một PWA cho thấy của nó own custom install UI là một Chromium-chỉ mechanism; theo MDN’s PWA
installability hướng dẫn, đây là “not supported on iOS.” (bản dịch) «không supported on iOS.» On iOS Safari, installation happens
chỉ qua đó manual Share → Thêm để Home Screen flow (extended để Chrome, Edge,
Firefox, và Orion on iOS 16.4+, all of mà dùng Apple bắt buộc WebKit engine on iOS
và so share đó limitation), không an tự động prompt. None of đó thay đổi đó SEO
picture — điều này chỉ có nghĩa là “is my PWA installable” (bản dịch) «là my PWA installable» không một có/không fact independent of mà
trình duyệt và OS một khách truy cập là on.
Twitter Lite là đó case nghiên cứu mọi người reaches cho as “proof PWAs help SEO” (bản dịch) «proof PWAs help SEO» — và của nó được ghi lại kết quả là real (một 65% increase trong các trang theo session, 75% increase trong Tweets đã gửi, 20% decrease trong bounce rate) — nhưng mỗi một of những là an engagement chỉ số. Google own case nghiên cứu of điều này không bao giờ mentions SEO, organic tìm kiếm, hoặc thứ hạng tại all. Great kết quả; sai cột.
Ecommerce PWA storefronts: ngắn callout
PWA storefronts thêm một vài wrinkles worth naming, vì họ compound SPA risks. Client-side routing plus faceted navigation có thể generate crawlable-looking các URL đó all resolve để giống nhau shell, hoặc explosion của parameter các URL. Cart và checkout state lives client-side và nên không bao giờ gate indexable sản phẩm nội dung. và mỗi sản phẩm trang phải independently trả về thực, unique HTML — app-shell trap là phần lớn expensive chính xác nơi bạn có phần lớn các trang. các cách sửa là giống nhau ones từ ecommerce và faceted-navigation SEO; PWA layer không thay đổi them, nó chỉ làm SSR/prerender discipline nhiều hơn quan trọng.
Bing và PWAs
Worth line: Bing có published không PWA-cụ thể xếp hạng hoặc lập chỉ mục hướng dẫn. Của nó quản trị viên web guidelines là PWA-agnostic (chung crawlability, sitemaps, robots.txt, IndexNow), và Microsoft extensive PWA tài liệu là hoàn toàn về Edge install prompts, PWABuilder, và Microsoft Store packaging — distribution và installation, tách biệt track từ web-tìm kiếm lập chỉ mục. So cho Bing, default để ordinary JS-kết xuất crawlability hướng dẫn; có không PWA exception để learn.
bottom line
PWA SEO là JavaScript/SPA SEO plus chính xác hai additions: bỏ qua manifest as SEO input (nó cho installability), và configure service worker so nó không bao giờ traps Googlebot trong stale hoặc offline bộ nhớ đệm. Nhận những điều đó right và PWA indexes chính xác như bất kỳ khác well-được xây dựng trang web — không bonus, không hình phạt, chỉ giống nhau rules.
AI summary
condensed take on Nâng cao version:
- MỘT PWA là một website đầu tiên. đây là một
manifest.json(installability) + một service worker (offline/bộ nhớ đệm) layered on điều gì là gần như luôn một JS/SPA site. All đó JavaScript/SPA SEO rules apply unchanged. - Không xếp hạng advantage. Google John Mueller: PWAs “currently don’t have any advantage in Google Search.” (bản dịch) «hiện tại không có bất kỳ advantage trong Google Search.» “Going PWA” không improve thứ hạng.
- Manifest.json là SEO-irrelevant. Điều này controls install prompts, icons,
start_url,display— có không evidence đó xếp hạng các hệ thống đọc điều này. Google PWA checklist lists “installable” và “discoverable in search” (bản dịch) «discoverable trong tìm kiếm» as tách biệt categories. - Đó một real risk là đó service worker. Google renderer không chạy service workers khi lập chỉ mục (điều này xử lý mỗi crawl as một đầu tiên-time visit), so một bộ nhớ đệm-đầu tiên HTML strategy có thể chỉ mục một stale hoặc offline shell. Dùng network-đầu tiên cho HTML, bộ nhớ đệm-đầu tiên cho static assets.
- HTTPS ≠ một PWA SEO perk. đây là một hard requirement cho service workers (secure context) và riêng một “very lightweight” (bản dịch) «very lightweight» tín hiệu xếp hạng mỗi HTTPS site nhận. không chain đó hai.
- Core Web Vitals là đó chỉ legit overlap — và đây là đó performance engineering, không đó PWA label. MỘT bloated PWA có thể score tệ hơn.
- App-như features (install, offline, push) là engagement, không xếp hạng. Twitter
Lite famous gains là engagement các chỉ số; đó case nghiên cứu không bao giờ mentions SEO.
Installability itself varies by trình duyệt/OS (iOS Safari có không
beforeinstallprompt, chỉ manual Thêm để Home Screen) — một hơn reason điều này không thể là một tín hiệu xếp hạng. - Bing có không PWA-cụ thể hướng dẫn; default để ordinary JS crawlability.
Tài liệu chính thức
Chính-nguồn material on PWAs, kết xuất, và facts điều này bài viết rests on.
Google / web.dev
- Điều gì là Progressive Web Apps? — Google definition và đó three pillars (Capable, Reliable, Installable).
- Điều gì làm một good Progressive Web App? (PWA checklist) — separates “Is installable” (bản dịch) «Là installable» từ “Discoverable in search” (bản dịch) «Discoverable trong tìm kiếm» as distinct categories.
- Service workers (Learn PWA) — bộ nhớ đệm strategies và đó service-worker lifecycle.
- Understand JavaScript SEO Basics — đó app-shell chế độ lỗi Google documents.
- Building Indexable Progressive Web Apps (2016) — Google original PWA-indexability post.
- Twitter Lite case nghiên cứu — đó engagement các chỉ số (note: không SEO/organic claims anywhere trong điều này).
- HTTPS as một tín hiệu xếp hạng (2014) — đó “very lightweight signal” (bản dịch) «very lightweight tín hiệu» statement.
MDN / nền tảng
- Service Worker API — secure-context (HTTPS) requirement.
- Đang làm PWAs installable — trình duyệt/OS installability differences, including Vì sao
beforeinstallpromptkhông phải supported on iOS.
Bing / Microsoft (không PWA-cụ thể xếp hạng hướng dẫn tồn tại — những điều này là install/distribution tài liệu)
- Bing Quản trị viên web Guidelines — chung crawlability; PWA-agnostic.
- Overview của Progressive Web Apps (PWAs) — Edge install và distribution focus.
Quotes từ nguồn
On—record statements. nơi quote là relayed by thứ ba party thay vì Google-owned URL, caveat nói so.
Google — không PWA xếp hạng advantage
- “PWAs currently don’t have any advantage in Google Search, and as far as I know, there are no plans to change this.” (bản dịch) «PWAs hiện tại không có bất kỳ advantage trong Google Search, và as far as I know, có không plans để thay đổi này.» — John Mueller, Google, Tìm kiếm Central office-hours (Nov 2021). Đọc bài đưa tin
- “By default, saying going to a PWA will make your rankings better — I don’t think that is the case.” (bản dịch) «Theo mặc định, saying going để một PWA sẽ làm của bạn thứ hạng tốt hơn — I không think đó là đó case.» — John Mueller, giống nhau session. Đọc bài đưa tin
- “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.” (bản dịch) «So chỉ đó fact đó một of của bạn các đối thủ có moved từ một framework để một sản phẩm khác, và có seen an improvement trong tìm kiếm, đó framework thay đổi từ my point of view sẽ không là responsible cho đó.» — John Mueller, giống nhau session. Đọc bài đưa tin
Google — Điều gì PWA là, và 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.” (bản dịch) «Progressive Web Apps (PWA) là web apps được xây dựng và enhanced với modern APIs để cung cấp enhanced capabilities trong khi vẫn reaching bất kỳ web người dùng on bất kỳ device với một single codebase.» — web.dev. Nhảy đến trích dẫn
- “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.” (bản dịch) «Some JavaScript các trang có thể dùng đó app shell model nơi đó ban đầu HTML không contain đó thực tế nội dung và Google cần để execute JavaScript trước đang able để see đó thực tế trang nội dung đó JavaScript generates.» — Google Search Central. Nhảy đến trích dẫn
- “Enable search engine discovery through unique URLs, descriptive titles, meta descriptions, and structured data.” (bản dịch) «Enable công cụ tìm kiếm phát hiện qua unique URLs, descriptive các tiêu đề, meta các mô tả, và dữ liệu có cấu trúc.» — web.dev PWA checklist, “Discoverable in search.” (bản dịch) «Discoverable trong tìm kiếm.» Nhảy đến trích dẫn
Google — service workers và lập chỉ mục (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.” (bản dịch) «As we có để assume đó ai đó clicking on trang của bạn từ một SERP là một đầu tiên-time khách truy cập, đang chạy một service worker là thường không going để làm nhiều good.» — Martin Splitt, Google. Đọc bài đưa tin
- “We’re not supporting that because users clicking onto your page from the search result might never have been there beforehand.” (bản dịch) «chúng ta là không supporting đó vì người dùng clicking onto trang của bạn từ đó tìm kiếm kết quả có thể không bao giờ đã được ở đó beforehand.» — Martin Splitt, Google (Google I/O 2019). Đọc bài đưa tin
- “I wouldn’t expect it to change — it’s computationally expensive to run service-workers in the background like this for indexing.” (bản dịch) «I sẽ không expect điều này để thay đổi — đây là computationally expensive để chạy service-workers trong đó background như này cho lập chỉ mục.» — John Mueller, Google (reported July 2023). Đọc bài đưa tin
HTTPS: nền tảng requirement so với. tín hiệu xếp hạng
- “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.” (bản dịch) «Service workers là chỉ khả dụng trong secure contexts: này có nghĩa là đó của họ document là phân phối over HTTPS, although các trình duyệt cũng treat http://localhost as một secure context, để facilitate local development. » — MDN, Service Worker API. Nhảy đến trích dẫn
- “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.” (bản dịch) «chúng ta là starting để dùng HTTPS as một tín hiệu xếp hạng. Cho hiện tại đây là chỉ một very lightweight tín hiệu — affecting ít hơn 1% of global các truy vấn, và carrying ít hơn weight hơn other các tín hiệu such as cao-quality nội dung.» — Google, “HTTPS as a ranking signal” (bản dịch) «HTTPS as một tín hiệu xếp hạng» (2014). Nhảy đến trích dẫn
Installability varies by trình duyệt/OS
- “This is not supported on iOS.” (bản dịch) «Này không phải supported on iOS.»
— MDN, on đó
beforeinstallpromptcustom-install-prompt event. Nhảy đến trích dẫn
beforeinstallprompt cho custom install UI.On kết xuất timeouts (dated context)
- “Rendering services won’t wait forever for a page to finish loading.” (bản dịch) «Kết xuất services sẽ không chờ forever cho một trang để finish loading.» — Hamlet Batista, Search Engine Land. Đọc đó bài viết
nên I go PWA — và Điều gì sẽ nó làm Đối với SEO?
nhanh walk qua các câu hỏi mọi người thực ra bring để điều này topic.
“We’re considering a PWA. Will it help our SEO?” (bản dịch) «chúng ta là considering một PWA. Sẽ điều này help của chúng ta SEO?»
- Không inherent xếp hạng benefit — Google says PWAs nhận không advantage trong Tìm kiếm. → Xây dựng một PWA cho đó người dùng benefits (installable, offline, fast repeat loads), không cho thứ hạng. → Điều này sẽ không hurt SEO either, miễn là của bạn kết xuất và service worker là set lên correctly (continue dưới).
“We’re building/have a PWA. Is my content actually indexable?” (bản dịch) «chúng ta là building/có một PWA. Là my nội dung thực ra indexable?»
- Làm đó ban đầu HTML contain đó real nội dung (SSR/prerender), hoặc là điều này an empty
app shell filled by JS?
- Empty shell, không SSR → này là đó app-shell trap. Thêm SSR hoặc prerendering trước worrying về bất cứ điều gì PWA-cụ thể. (Giống nhau cách sửa as bất kỳ SPA.)
- SSR/prerender trong place → good; move để đó service worker.
“How should my service worker cache pages?” (bản dịch) «Cách nên my service worker bộ nhớ đệm các trang?»
- HTML documents → network-đầu tiên (hoặc stale-trong khi-revalidate, ngắn TTL). Không bao giờ bộ nhớ đệm-đầu tiên cho HTML.
- Static assets (JS/CSS/images/fonts) → bộ nhớ đệm-đầu tiên là fine và good.
- Offline fallback trang → hãy bảo đảm điều này có thể không bao giờ là đó version một fresh crawl indexes.
“My PWA lost rankings/traffic after launch. Where do I look?” (bản dịch) «My PWA lost thứ hạng/traffic sau launch. Nơi làm I look?»
- Chạy URL Inspection (trực tiếp kiểm thử) trong Search Console — là Google seeing đó real trang hoặc một stale/offline/empty một?
- Nếu stale hoặc empty → suspect đó service-worker bộ nhớ đệm strategy (bộ nhớ đệm-đầu tiên HTML) hoặc một bị thiếu SSR step.
- Nếu đó nội dung ở đó nhưng thứ hạng vẫn dropped → xem điều gì khác đó rebuild changed: liên kết nội bộ, nội dung, các chuyển hướng, speed. Đó PWA label là rarely đó nguyên nhân.
“Do I need to do anything special with the manifest for SEO?” (bản dịch) «Làm I cần để làm bất cứ điều gì special với đó manifest cho SEO?»
- Không. Giữ điều này hợp lệ cho installability; điều này có không SEO role. Spend đó effort on URLs, các tiêu đề, meta, dữ liệu có cấu trúc, và Core Web Vitals thay vì.
PWA SEO checklist
Scannable truyền cho giữ Progressive Web App crawlable và indexable:
- nội dung thực là máy chủ-được kết xuất hoặc prerendered — không rỗng app shell filled by JavaScript sau khi load.
- mỗi route có thực, unique URL qua History API (không hash/
#!routing). - mỗi route trả về của nó own canonical, tiêu đề, và mô tả meta trong được kết xuất DOM.
- Service worker phục vụ HTML network-đầu tiên (hoặc stale-trong khi-revalidate, ngắn TTL) — không bao giờ bộ nhớ đệm-đầu tiên cho HTML documents.
- Static assets (JS/CSS/images/fonts) có thể là bộ nhớ đệm-đầu tiên; đó fine.
- offline-fallback trang có thể không bao giờ là Điều gì fresh crawl indexes.
- URL Inspection (trực tiếp kiểm thử) hiển thị Google thực, hiện tại trang — compared so với trực tiếp trang.
- manifest là hợp lệ cho installability, nhưng bạn’re không treating nó as SEO lever.
- Installability là tested theo trình duyệt/OS, không assumed universal (iOS Safari có không
beforeinstallprompt; nó manual Thêm để Home Screen) — và none của đó variance là được xem như SEO vấn đề. - Phân phối over HTTPS (bắt buộc cho service workers anyway).
- Core Web Vitals là healthy — verify JS bundle và hydration không phải dragging LCP/INP xuống.
- Ecommerce: sản phẩm các trang mỗi trả về thực unique HTML; faceted-nav/client routing không phải spawning shell-chỉ hoặc infinite parameter các URL.
PWA SEO — bảng tra nhanh
Làm nó ảnh hưởng SEO?
| PWA component | Điều gì nó làm | SEO effect |
|---|---|---|
manifest.json | Install prompt, icons, start_url, display | None — không đọc by xếp hạng các hệ thống |
| Service worker | Offline, background bộ nhớ đệm, push | Risk chỉ — có thể phục vụ Googlebot stale/offline HTML nếu misconfigured |
| HTTPS | Bắt buộc cho service workers (secure context) | Tiny tín hiệu xếp hạng — mỗi HTTPS trang web nhận nó, PWA hoặc không |
| Thêm-để-home-screen / push / offline | App-như UX | None — engagement, không xếp hạng |
| Core Web Vitals | Load/interactivity/stability | thực (modest) xếp hạng factor — nó engineering, không PWA label |
| Underlying JS/SPA kết xuất | Cách trang là được xây dựng | thực tế battleground — SSR/prerender, thực các URL, theo-route metadata |
Service-worker bộ nhớ đệm by tài nguyên loại
| tài nguyên | Strategy | Vì sao |
|---|---|---|
| HTML documents | Network-đầu tiên / stale-trong khi-revalidate | Google không bao giờ chạy của bạn SW; nó phải see trực tiếp HTML |
| JS / CSS | bộ nhớ đệm-đầu tiên | Static, versioned, không indexable doc |
| Images / fonts | bộ nhớ đệm-đầu tiên | Static, safe để bộ nhớ đệm aggressively |
| Offline fallback | phục vụ chỉ truly offline | phải không bao giờ là được lập chỉ mục version |
Fast facts
- Google cho PWAs không xếp hạng advantage (Mueller).
- Google renderer không chạy service workers khi lập chỉ mục.
- HTTPS tín hiệu xếp hạng: “fewer than 1% of global queries” (bản dịch) «ít hơn 1% of global các truy vấn» (Google, 2014).
- Bing: không PWA-cụ thể hướng dẫn — treat as bất kỳ JS site.
Incident playbook: tìm kiếm traffic dropped sau khi PWA phát hành
- Freeze phát hành path. Dừng further service-worker và routing deployments trong khi bạn bảo toàn failing production state và phát hành identifiers.
- xác nhận phạm vi. Segment drop by template, directory, device, và deployment time. PWA-wide thất bại nên không là assumed từ một hỏng route.
- So sánh three các phản hồi. Save thô HTTP phản hồi, fresh được kết xuất trang với storage cleared, và returning-người dùng trang controlled by service worker. kiểm tra tiêu đề, canonical, robots directives, chính copy, links, và status behavior.
- Inspect registration và bộ nhớ đệm policy. Trong DevTools Application, identify active worker, của nó phạm vi, đang chờ versions, bộ nhớ đệm names, và navigation handler. xác nhận HTML navigations không phải trapped behind old bộ nhớ đệm-đầu tiên phản hồi.
- Bypass worker. Unregister nó hoặc sử dụng DevTools’ bypass option, reload, và repeat affected route. nếu defect disappears, worker hoặc của nó bộ nhớ đệm là có khả năng boundary; nếu nó vẫn, continue as ordinary JavaScript SEO incident.
- Restore safe navigation path. Roll lại worker hoặc chuyển document các yêu cầu để network-đầu tiên với rõ ràng offline fallback. không delete all caches blindly nếu người dùng phụ thuộc on offline dữ liệu.
- Validate và monitor. Kiểm thử sạch trình duyệt, updating trình duyệt, và offline trình duyệt. sau đó inspect representative các URL và watch tìm kiếm performance qua thông thường recrawl window.
Treating manifest as SEO file
Stuffing từ khóa vào name, short_name, hoặc icon metadata không làm các trang nhiều hơn
indexable. sử dụng manifest cho installation behavior và put tìm kiếm-relevant nội dung
trong crawlable HTML với ordinary các tiêu đề, links, và canonicals.
bộ nhớ đệm HTML forever
bộ nhớ đệm-đầu tiên rule đó xử lý navigations như immutable assets có thể giữ old copy, canonicals, hoặc robots directives alive sau khi phát hành. bộ nhớ đệm versioned JS, CSS, và images aggressively; cho HTML network-aware cập nhật strategy.
Returning offline shell as thành công trang
Serving giống nhau offline app shell cho mỗi không khả dụng URL có thể trông giống nhiều khác các URL returning giống hệt thin nội dung. giữ offline experience rõ ràng tách biệt từ thông thường navigation và không pretend bị thiếu document là requested trang.
Hiding navigation behind non-link controls
button đó thay đổi client state có thể hoạt động trong app trong khi providing không crawlable
<a href> path để đích. sử dụng thực links cho routes các công cụ tìm kiếm và người dùng
cần để follow, sau đó enhance transition với JavaScript.
Kiểm thử chỉ as warm returning người dùng
nhà phát triển trình duyệt với installed worker và populated bộ nhớ đệm có thể mask hỏng đầu tiên visit. Kiểm thử sạch storage, upgrade từ trước đó worker, và returning visit. những điều đó là distinct PWA trạng thái.
Ví dụ: asset bộ nhớ đệm và document bộ nhớ đệm cần khác rules
sau simplified service-worker logic hiển thị boundary. Hashed assets có thể là bộ nhớ đệm-đầu tiên; document navigations nên try network trước khi falling lại.
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))
);
}
});chính xác production policy phụ thuộc vào cập nhật và offline requirements, nhưng SEO lesson là ổn định: HTML không phải giống nhau kind của immutable asset as fingerprinted bundle.
Ví dụ: crawlable route versus app-chỉ 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>PWA có thể intercept link cho app-như transition không có removing của nó crawlable URL.
Prompt: review service-worker bộ nhớ đệm strategy
Paste worker nguồn và route inventory. không bao gồm secrets hoặc riêng tư API các phản hồi.
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: xây dựng PWA phát hành 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 cho PWA SEO reviews
- S: máy chủ phản hồi. usable đầu tiên phản hồi, hoặc deliberate kết xuất strategy, phải expose trang thay vì chỉ rỗng app shell.
- H: Hrefs. quan trọng routes sử dụng crawlable links với ổn định các URL, không controls đó exist chỉ as client-side state.
- E: Dự kiến metadata. Các tiêu đề, canonicals, robots directives, và dữ liệu có cấu trúc vẫn đúng trong thô và được kết xuất trạng thái.
- L: Trực tiếp documents. Navigation các yêu cầu có freshness policy appropriate cho HTML; stale được lưu đệm documents không silently outlive releases.
- L: Lifecycle các kiểm thử. QA covers install, activate, cập nhật, đang chờ-worker, offline, và bypass trạng thái thay vì một warm nhà phát triển session.
framework giữ PWA-cụ thể review hẹp. nếu all five truyền, phần lớn remaining hoạt động là ordinary JavaScript, performance, và indexability QA.
DevTools Console: inspect active worker và caches
Chạy điều này trong trình duyệt DevTools Console on PWA. nó các báo cáo registrations và bộ nhớ đệm names không có thay đổi either một.
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: so sánh network fetch với được lưu đệm phản hồi
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 ?? '' }
});kết quả proves đó phản hồi tồn tại trong bộ nhớ đệm; nó không prove mà fetch handler sẽ win cho mỗi navigation. xác nhận routing trong worker nguồn và Network panel.
Regex: tìm risky bộ nhớ đệm-đầu tiên navigation handlers
sử dụng điều này as review aid, không parser. nó looks cho navigation condition followed nearby by bộ nhớ đệm lookup.
request\.mode\s*===?\s*['"]navigate['"][\s\S]{0,500}caches\.(?:match|open)\s*\( Validate PWA SEO phát hành
| Kiểm thử để chạy | Dự kiến kết quả | thất bại interpretation | Monitoring window | Rollback trigger |
|---|---|---|---|---|
| Fetch representative routes với rỗng trình duyệt profile | mỗi route loads của nó dự kiến nội dung và metadata on đầu tiên visit | app phụ thuộc vào pre-existing worker hoặc bộ nhớ đệm | mỗi phát hành | Roll lại nếu cốt yếu routes fail cho new người dùng |
| Upgrade từ trước đó production worker không có clearing storage | new worker activates predictably và documents refresh để đã phát hành version | Lifecycle hoặc bộ nhớ đệm-version logic strands người dùng on old HTML | Phát hành rehearsal và deployment day | Roll lại nếu prior version không thể cập nhật safely |
| So sánh thô HTML, được kết xuất DOM, và worker-bypassed kết xuất | Các tiêu đề, canonicals, robots directives, chính copy, và links vẫn tương đương trong meaning | Client kết xuất hoặc worker interception thay đổi tìm kiếm-cốt yếu output | trước khi deployment và sau khi deployment | Roll lại nếu các trang become non-indexable hoặc lose chính nội dung |
| Navigate online, sau đó repeat offline | Online các yêu cầu nhận trực tiếp documents; offline behavior là rõ ràng và limited để của nó designed phạm vi | offline shell hoặc stale bộ nhớ đệm là masking thực routes | mỗi worker thay đổi | Roll lại nếu online người dùng nhận offline hoặc obsolete nội dung |
| yêu cầu nonexistent URL online | phản hồi không masquerade as hợp lệ nội dung trang với generic app shell | Catch-all routing tạo soft-404 behavior | mỗi routing thay đổi | Roll lại nếu arbitrary các URL trả về indexable shell nội dung |
Tự kiểm tra: PWA SEO
Five nhanh các câu hỏi on Cách Progressive Web Apps interact với tìm kiếm. Pick câu trả lời cho mỗi, sau đó kiểm tra.
các tài nguyên worth của bạn time
My related writing
- JavaScript SEO Các vấn đề & Thực hành tốt nhất — kết xuất foundation mỗi PWA sits on; app-shell, SSR, và Điều gì Google renderer làm và không làm.
- Người mới bắt đầu Hướng dẫn để kỹ thuật SEO — nơi kết xuất và crawlability fit trong bigger picture.
My speaking
- Cách Tìm kiếm Hoạt động (SlideShare) — my walkthrough of crawling, kết xuất, lập chỉ mục, và xếp hạng, đó pipeline một PWA có để truyền qua. (Standing disclaimer: “This is my understanding of systems… not going to be 100% complete or accurate.” (bản dịch) «Này là my understanding of các hệ thống… không going để là 100% hoàn tất hoặc chính xác.»)
từ khoảng ngành
- Google: Progressive Web Apps không Xếp hạng Tốt hơn Regular Các trang (công cụ tìm kiếm Journal) — Mueller office-hours coverage đó anchors myth-bust.
- Google nói Progressive Web Apps (PWAs) có Không Advantage Trong Tìm kiếm (công cụ tìm kiếm Roundtable) — independent ghi-lên của giống nhau session.
- Service Worker – Điều gì SEOs Cần để Know (SearchViu) — Splitt/Mueller statements on Vì sao renderer skips service workers.
- Understand JavaScript SEO Basics (Google) — app-shell thất bại chế độ, được ghi lại tại nguồn.
- Điều gì làm good Progressive Web App? (PWA checklist) (web.dev) — installability và discoverability as tách biệt categories.
- Twitter Lite case nghiên cứu (web.dev) — thực engagement numbers, và proof họ là không bao giờ về SEO.
Videos
- Google Search Central (YouTube) — Martin Splitt JavaScript SEO và kết xuất explainers cover chính xác pipeline (crawl → render → chỉ mục) PWA phụ thuộc on, including Cách stateless renderer xử lý JS. Channel
Nhật ký thay đổi
Đã cập nhật 8 thg 8, 2026.
Tóm tắt biên tập và chi tiết thay đổi đã ghi nhận.Chi tiết thay đổi
-
Ghi chú thay đổi chi tiết hiện chỉ có bằng tiếng Anh.
Không thể so sánh đầy đủ — không có bản lưu trước đó cho lần sửa đổi này.
Đã cập nhật 18 thg 7, 2026.
Tóm tắt biên tập và chi tiết thay đổi đã ghi nhận.Chi tiết thay đổi
-
Ghi chú thay đổi chi tiết hiện chỉ có bằng tiếng Anh.
Không thể so sánh đầy đủ — không có bản lưu trước đó cho lần sửa đổi này.