Panduan Mobile Usability

TL;DR — Mobile usability adalah whether Anda halaman adalah easy untuk gunakan pada sebuah phone: text Anda dapat read without pinching untuk zoom, buttons big enough untuk tap without hitting wrong one, konten itu fits screen dengan no sideways scrolling, dan no full-screen popups blocking konten. Google digunakan untuk memiliki sebuah report itu flagged ini masalah untuk Anda — ini retired ini di December 2023 — tetapi things ini diperiksa masih penting.

What mobile usability adalah

Mobile usability adalah exactly what ini sounds like: how usable Anda halaman adalah when someone opens ini pada sebuah phone. Not how fast ini memuat, not whether Google indeks ini — hanya whether sebuah nyata person pada sebuah kecil touchscreen dapat read ini, tap ini, dan get where mereka’re going without fighting layout.

ada four things itu membuat atau break ini:

1. Readable text. jika someone memiliki untuk zoom di untuk read Anda paragraphs, text adalah too kecil.
2. Tappable buttons dan tautan. Fingers aren’t sebagai precise sebagai sebuah mouse. Targets itu adalah tiny atau crammed together get mis-tapped.
3. konten itu fits screen. No horizontal scrolling — halaman seharusnya fit width dari phone.
4. No pop-ups blocking konten. sebuah full-screen ad atau newsletter overlay itu covers halaman moment Anda arrive adalah sebuah usability masalah (dan dapat hurt Anda di search).

mengapa ini penting

sebagian besar people search pada mereka phones, so sebuah halaman itu’s frustrating pada mobile adalah frustrating untuk sebagian besar dari Anda pengunjung. dan Google now reads mobile versi dari Anda halaman untuk decide how Anda peringkat (itu’s sebuah separate idea called mobile-pertama pengindeksan — more pada difference di sebuah kedua). So mobile experience isn’t sebuah side concern anymore; ini adalah main one.

”Wait, where did the Mobile Usability report go?” (terjemahan) “Wait, where melakukan Mobile Usability report go?”

jika Anda digunakan untuk periksa mobile masalah di Google Search Console, Anda’re not imagining things — itu report adalah hilang. Google retired Search Console Mobile Usability report dan -nya standalone Mobile-Friendly Test alat pada December 1, 2023. itu tidak berarti mobile usability stopped mattering; Google said opposite. ini hanya berarti dedicated report went away because better alat (like Lighthouse, dibangun ke Chrome) melakukan job now. So jika sebuah tutorial tells Anda untuk “open the Mobile Usability report,” (terjemahan) “open Mobile Usability report,” ini adalah out dari date.

cara periksa ini now

easiest option: open Anda halaman di Chrome, right-click → Inspect, dan run Lighthouse (atau gunakan PageSpeed Insights di pagespeed.web.dev). Both flag kecil fonts, cramped tap targets, dan viewport masalah. Anda dapat juga hanya resize Anda browser atau gunakan Chrome’s phone-preview mode dan look di halaman pada sebuah kecil screen — sebuah lot dari usability masalah adalah obvious moment Anda melakukan.

Don’t confuse ini dengan two similar things

• pengindeksan mobile-pertama — itu’s tentang which versi dari Anda halaman Google reads ( mobile one). berbeda topic.
• Core Web Vitals — itu mengukur speed dan stability. Related, tetapi sebuah separate set dari angka.

ingin exact thresholds (how big adalah “big enough” (terjemahan) “big enough” untuk sebuah tap target?), full retirement story, dan setiap cara untuk test mobile usability today? Switch untuk Advanced tab.

TL;DR — Mobile usability = ease dari gunakan pada sebuah touch device, driven oleh four signals: legible text (Lighthouse passes di 12px pada ≥60% dari text; 16px adalah practical body-copy baseline), tap targets (Lighthouse fails below 48×48 CSS px atau when ≥25% dari target di dalam 48px dari center overlaps sebuah neighbor; ~8px spacing adalah sebuah starting poin — WCAG 2,2’s separate 24×24 CSS px minimum adalah sebuah accessibility floor, not sebuah Google peringkat aturan), konten sized untuk viewport (perlu sebuah proper viewport meta tag, tetapi tag alone doesn’t guarantee responsive layout; no horizontal scroll), dan no intrusive interstitials. Google retired Search Console Mobile Usability report, Mobile-Friendly Test alat, dan API pada December 1, 2023 (confirmed Dec 4) — not because signals stopped mattering, tetapi because Lighthouse matured dan mobile-pertama pengindeksan adalah effectively complete. periksa ini now dengan Lighthouse, PageSpeed Insights, DevTools device emulation, Bing’s masih-live test, dan crawler. Distinct dari pengindeksan mobile-pertama (which versi adalah terindeks) dan Core Web Vitals (memuat/interactivity/stability). ini adalah one halaman-experience signal, not sebuah standalone heavily-weighted peringkat factor.

definition, precisely

Mobile usability adalah whether sebuah halaman adalah easy untuk gunakan pada sebuah mobile/touch device. ini adalah sebuah pengguna-experience concept itu lives inside Google’s broader pengalaman halaman model, dan ini comes down untuk four concrete signals. rest dari ini bagian adalah setiap one dengan -nya nyata threshold dan citation — because spesifik angka adalah exactly what sebagian besar competing artikel skip.

Signal 1: legible text

jika people memiliki untuk pinch-zoom untuk read Anda body copy, font adalah too kecil. There adalah two angka worth keeping straight, dan conflating them adalah sebuah umum mistake:

• ** audit-pass bar adalah 12px.** Lighthouse’s Document menggunakan legible font sizes audit says: “Aim to have a font size of at least 12 px on at least 60% of the text on your page.” (terjemahan) “Aim untuk memiliki sebuah font size dari setidaknya 12 px pada setidaknya 60% dari text pada Anda halaman.” itu’s threshold untuk technically pass automated periksa.
• ** practical baseline adalah ~16px.** 12px passing sebuah audit tidak berarti 12px adalah comfortable untuk read pada sebuah phone. 16px adalah umumnya recommended floor untuk mobile body text, dengan heading larger. Don’t design untuk audit’s minimum.

So: 12px/60% adalah pass line; 16px adalah what Anda harus actually aim untuk pada body copy.

Signal 2: tap targets

Fingers adalah blunt instruments. Lighthouse’s Tap targets adalah not sized appropriately audit fails sebuah target pada two conditions: when “the target is smaller than 48 px by 48 px,” (terjemahan) “ target adalah smaller daripada 48 px oleh 48 px,” dan when “at least 25% the target area within 48 px of the center of the target overlaps with another target.” (terjemahan) “setidaknya 25% target area di dalam 48 px dari center dari target overlaps dengan lainnya target.” sebuah few practical notes dari sama doc:

• Targets sized 48×48 CSS px consistently pass.
• tappable area adalah what counts, not visual size — Anda dapat pertahankan sebuah kecil icon dan expand -nya hit area dengan padding untuk reach 48px. (ini kills myth itu setiap button harus look 48px.)
• ~8px antara targets adalah sebuah reasonable starting poin tetapi “is not always enough spacing to pass the audit especially for very small targets.” (terjemahan) “adalah not selalu enough spacing untuk pass audit terutama untuk very kecil targets.”

Older Google guidance framed ini sebagai roughly 7mm targets dengan ~5mm spacing; di typical mobile densities itu’s broadly consistent dengan 48px figure. Cite 48px/8px angka sebagai saat ini; mm ones adalah historical color.

There’s sebuah kedua, separate angka worth knowing so Anda tidak conflate standards: WCAG 2,2’s Success Criterion 2.5.8 (Target Size Minimum, tingkat AA) sets sebuah 24×24 CSS px minimum (dengan spacing/inline/essential exceptions) — sebuah accessibility-conformance aturan dari W3C, not sebuah Google Search peringkat threshold. ini adalah smaller daripada Lighthouse’s 48px audit bar because two come dari berbeda bodies measuring berbeda things: meeting Lighthouse’s 48px figure clears WCAG’s 24px floor too, tetapi don’t cite either angka sebagai sebuah fixed, timeless “Google requires N px” (terjemahan) “Google memerlukan N px” aturan — Lighthouse’s adalah sebuah Chrome tooling audit threshold, WCAG’s adalah sebuah accessibility conformance criterion.

Signal 3: konten sized untuk viewport

konten seharusnya fit width dari phone — no horizontal scrolling, no halaman rendered di desktop width dan shrunk untuk unreadable. mechanism adalah viewport meta tag. Without ini (atau misconfigured), mobile browser assume sebuah desktop-width canvas dan scale everything down. fix adalah one line di <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Google’s guidance: “make sure your page content fits the width of the viewport, keeping in mind that not all mobile devices are the same width.” (terjemahan) “pastikan Anda halaman konten fits width dari viewport, keeping di mind itu not semua mobile devices adalah yang sama width.” So don’t hard-code fixed pixel widths itu hanya fit one phone.

tag adalah necessary tetapi not sufficient. ini aligns layout viewport dengan device width — ini doesn’t, oleh itself, membuat fixed-width konten responsive. sebuah halaman dapat ship sebuah correct viewport meta tag dan masih fail mobile usability jika individual elements (sebuah wide table, sebuah unbreakable panjang string, sebuah fixed-pixel container) adalah hard-coded wider daripada viewport. tag sets canvas; Anda CSS masih memiliki untuk actually fit ini.

Signal 4: no intrusive interstitials

sebuah full-screen popup itu blocks Anda konten moment sebuah pengunjung arrives dari search adalah both sebuah usability masalah dan sebuah search masalah. Google: “intrusive interstitials and dialogs are page elements that obstruct users’ view of the content, usually for promotional purposes,” (terjemahan) “intrusive interstitials dan dialogs adalah halaman elements itu obstruct pengguna’ view dari konten, biasanya untuk promotional purposes,” dan ini warns itu mereka “make it hard for Google and other search engines to understand your content, which may lead to poor search performance.” (terjemahan) “membuat ini hard untuk Google dan lainnya mesin pencari untuk memahami Anda konten, which dapat lead untuk poor search performa.” guidance adalah blunt — “don’t obscure the entire page with interstitials” (terjemahan) “don’t obscure entire halaman dengan interstitials” — dan ini poin untuk kecil banners taking hanya sebuah fraction dari screen sebagai acceptable alternative. ( full treatment dari what’s penalized vs. exempt lives di intrusive interstitials deep dive.)

What happened untuk Mobile Usability report?

ini adalah where sebagian besar guides — including beberapa published di last year — adalah flatly wrong, so ini adalah worth getting timeline exactly right.

• April 2023 — announced. di * role dari pengalaman halaman di membuat helpful konten*, Google said: “Also starting December 1, 2023, we’ll be retiring Search Console’s ‘Mobile Usability’ report, the Mobile-Friendly Test tool and Mobile-Friendly Test API. This doesn’t mean that mobile usability isn’t important for success with Google Search.” (terjemahan) “juga starting December 1, 2023, kami’ll menjadi retiring Search Console’s ‘Mobile Usability’ report, Mobile-Friendly Test alat dan Mobile-Friendly Test API. ini tidak berarti itu mobile usability isn’t penting untuk success dengan Google Search.” -nya reasoning: “in the nearly ten years since we initially launched this report, many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.” (terjemahan) “di nearly ten years since kami initially launched ini report, banyak lainnya robust resources untuk evaluating mobile usability memiliki emerged, including Lighthouse dari Chrome.”
• December 1, 2023 — retired. report, Mobile-Friendly Test alat, dan API semua went away. Google dihapus corresponding mentions dari -nya search help docs yang sama day. old Mobile-Friendly Test URL (search.google.com/test/mobile-friendly) now redirects untuk Lighthouse documentation, dan trying untuk open Mobile Usability report di Search Console redirects untuk GSC overview halaman.
• December 4, 2023 — confirmed. Google’s Search Console account confirmed sunset publicly, thanking situs owners “for working with us on this journey.” (terjemahan) “untuk berfungsi dengan us pada ini journey.”

Why now? Two forces. pertama, pengindeksan mobile-pertama adalah effectively complete — Google announced “the trek to Mobile First Indexing is now complete” (terjemahan) “ trek untuk Mobile pertama pengindeksan adalah now complete” pada October 31, 2023 — so sebuah dedicated GSC report split out oleh device dibuat less sense. kedua, Lighthouse memiliki matured ke sebuah better, more actionable checker daripada old standalone alat. signals didn’t stop mattering; dedicated report melakukan.

practical correction: stop telling people untuk “check the Mobile Usability report” (terjemahan) “periksa Mobile Usability report” atau “run the Mobile-Friendly Test.” (terjemahan) “run Mobile-Friendly Test.” Both adalah hilang. (I’ll menjadi candid — my own Ahrefs guide, pengindeksan mobile-pertama Goes Mobile-hanya, last updated June 2024, masih poin readers untuk itu two now-defunct destinations di one spot; itu’s exactly jenis dari stale advice ini artikel exists untuk fix, dan ini adalah pada my list untuk correct there too.)

cara periksa mobile usability today

Since there’s no single dedicated report anymore, Anda assemble ini dari sebuah few alat:

• Chrome Lighthouse (DevTools → Lighthouse) — direct replacement. Runs legible-font, tap-target, dan viewport audits dan gives Anda spesifik failing elements.
• PageSpeed Insights (pagespeed.web.dev) — runs Lighthouse di cloud pada mobile profile; baik untuk sebuah quick shareable URL-tingkat periksa.
• Chrome DevTools device toolbar — emulate sebuah phone, eyeball horizontal scroll, tiny text, dan cramped controls di nyata dimensions.
• Bing’s Mobile Friendliness Test alat — sebuah genuine differentiator: Bing masih runs sebuah live mobile-friendliness test di Bing Webmaster alat, bahkan though Google’s adalah hilang. Bing’s own pitch: “making pages mobile-friendly increases user engagement on mobile devices. It can also help you rank better in Bing search results on mobile devices.” (terjemahan) “membuat halaman mobile-friendly increases pengguna engagement pada mobile devices. ini dapat juga help Anda peringkat better di Bing search hasil pada mobile devices.” Handy untuk sebuah kedua opinion pada rendering.
• ketiga-party crawler — Ahrefs situs Audit dan similar dapat crawl dengan sebuah mobile pengguna-agent dan surface mobile-spesifik issues di scale (connect PageSpeed Insights API untuk mobile memeriksa).
• sebuah nyata device. Nothing beats opening halaman pada sebuah actual phone.

No single alat proves end-untuk-end usability pada -nya own — combine sebuah automated audit (Lighthouse atau PageSpeed Insights), sebuah emulated visual periksa (DevTools device toolbar), dan setidaknya one nyata-device pass sebelum calling sebuah halaman fixed.

Mobile usability vs. pengindeksan mobile-pertama vs. Core Web Vitals

ini three get blurred together constantly. mereka’re related tetapi distinct:

sebuah situs dapat menjadi fully pada pengindeksan mobile-pertama dan masih memiliki terrible mobile usability (tiny text, cramped buttons), dan vice versa. pengindeksan mobile-pertama deep dive dan Core Web Vitals material cover itu two di full — ini artikel adalah strictly usability layer.

melakukan mobile usability affect rankings?

Yes, tetapi pertahankan ini di proportion. Mobile usability contributes untuk pengalaman halaman, which Google treats sebagai sebuah set dari signals di dalam broader peringkat sistem — not sebuah single heavily-weighted factor dengan sebuah fixed score. Google’s own caution: situs owners “should not focus on only one or two aspects of page experience,” (terjemahan) “seharusnya not focus pada hanya one atau two aspects dari pengalaman halaman,” dan “Google Search always seeks to show the most relevant content, even if the page experience is sub-par.” (terjemahan) “Google Search selalu seeks untuk tampilkan paling relevant konten, bahkan jika pengalaman halaman adalah sub-par.” So fix usability because ini helps pengguna nyata (dan ini adalah right thing untuk melakukan) — not because Anda expect sebuah magic peringkat bump. ini adalah sebuah contributor, not sebuah kingmaker.

Where ini sits di mobile-seo cluster

ini adalah one piece dari wider mobile SEO picture. pengindeksan mobile-pertama covers which versi Google reads dan konten-parity aturan; mobile SEO checklist adalah run-ini-down audit; interstitials, AMP, dan responsive-vs- dynamic-serving topics setiap get mereka own treatment. ini artikel deliberately stays di -nya lane — usability signals — so ini complements itu alih-alih repeating them.

AI summary

sebuah condensed take pada Advanced versi:

• Mobile usability = ease dari gunakan pada sebuah touch device. Four signals: legible text, tap targets, konten sized untuk viewport, no intrusive interstitials.
• Legible text: Lighthouse passes di 12px pada ≥60% dari text, tetapi 16px adalah practical body-copy baseline. Don’t design untuk audit minimum.
• Tap targets: Lighthouse fails below 48×48 CSS px atau when ≥25% dari area di dalam 48px dari center overlaps sebuah neighbor. tappable area (via padding) adalah what counts, not visual size. ~8px spacing adalah sebuah starting poin. WCAG 2,2’s Target Size Minimum (SC 2.5.8, tingkat AA) sets sebuah separate 24×24 CSS px accessibility floor — sebuah W3C conformance aturan, not sebuah Google peringkat threshold.
• Viewport: <meta name="viewport" content="width=device-width, initial-scale=1">; konten harus fit phone width dengan no horizontal scroll. tag aligns layout viewport dengan device width tetapi doesn’t oleh itself membuat fixed-width konten responsive — individual elements dapat masih overflow.
• Intrusive interstitials: full-halaman overlays pada entry obstruct konten dan hurt search performa; kecil banners adalah acceptable alternative.
• ** report adalah hilang.** Google retired Search Console Mobile Usability report, Mobile-Friendly Test alat, dan API pada Dec 1, 2023 (confirmed Dec 4) — because Lighthouse matured dan pengindeksan mobile-pertama adalah effectively complete (Oct 31, 2023), not because signals stopped mattering.
• periksa ini now dengan Lighthouse, PageSpeed Insights, DevTools device emulation, Bing’s masih-live Mobile Friendliness Test, dan ketiga-party crawler.
• Distinct dari pengindeksan mobile-pertama (which versi adalah terindeks) dan Core Web Vitals (memuat/interactivity/stability).
• peringkat: one halaman-experience signal di dalam broader sistem, not sebuah standalone heavily-weighted factor. Google akan masih surface paling relevant konten bahkan dengan sebuah sub-par experience.

Official documentation

Primary-source documentation dari mesin pencari.

Google

• role dari pengalaman halaman di membuat helpful konten (Apr 2023) — announcement itu retired Mobile Usability report, Mobile-Friendly Test alat, dan API sebagai dari Dec 1, 2023, dan pointed untuk Lighthouse.
• Understanding Google pengalaman halaman — where mobile usability sits sebagai sebuah signal, self-assessment pertanyaan, dan “don’t over-index on one signal” (terjemahan) “don’t di atas-indeks pada one signal” caution.
• hindari intrusive interstitials dan dialogs — interstitials definition dan kecil-banner alternative.
• pengindeksan mobile-pertama memiliki landed (Oct 2023) — “trek is now complete” (terjemahan) “trek adalah now complete” milestone itu dibuat sebuah dedicated device-split report unnecessary.

Chrome / Lighthouse

• Document doesn’t gunakan legible font sizes — 12px/60%-dari-text audit threshold.
• Tap targets adalah not sized appropriately — 48×48 CSS px audit dan overlap/spacing aturan.

Bing / Microsoft

• Bing Mobile Friendliness Test alat — masih live, unlike Google’s; test apa pun URL untuk mobile-friendliness di Bing Webmaster alat.

W3C

• Target Size (Minimum) — WCAG 2,2 Understanding SC 2.5.8 — 24×24 CSS px accessibility-conformance floor, distinct dari Lighthouse’s 48px audit threshold.

Quotes dari source

pada—record statements dari Google, Chrome/Lighthouse, dan Bing. setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage where source halaman mendukung ini.

Google — retiring report dan alat (Apr 2023 announcement)

• “Also starting December 1, 2023, we’ll be retiring Search Console’s ‘Mobile Usability’ report, the Mobile-Friendly Test tool and Mobile-Friendly Test API. This doesn’t mean that mobile usability isn’t important for success with Google Search.” (terjemahan) “juga starting December 1, 2023, kami’ll menjadi retiring Search Console’s ‘Mobile Usability’ report, Mobile-Friendly Test alat dan Mobile-Friendly Test API. ini tidak berarti itu mobile usability isn’t penting untuk success dengan Google Search.” — Google Search Central Blog. Read post
• “In the nearly ten years since we initially launched this report, many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.” (terjemahan) “di nearly ten years since kami initially launched ini report, banyak lainnya robust resources untuk evaluating mobile usability memiliki emerged, including Lighthouse dari Chrome.” Read post

Google — pengalaman halaman framing

• “Google Search always seeks to show the most relevant content, even if the page experience is sub-par.” (terjemahan) “Google Search selalu seeks untuk tampilkan paling relevant konten, bahkan jika pengalaman halaman adalah sub-par.” — Google Search Central docs. Jump untuk quote

Google — intrusive interstitials

• “Intrusive interstitials and dialogs are page elements that obstruct users’ view of the content, usually for promotional purposes.” (terjemahan) “Intrusive interstitials dan dialogs adalah halaman elements itu obstruct pengguna’ view dari konten, biasanya untuk promotional purposes.” — Google Search Central docs. Jump untuk quote

Google — pengindeksan mobile-pertama complete (context)

• “We’re delighted to announce that the trek to Mobile First Indexing is now complete.” (terjemahan) “kami’re delighted untuk announce itu trek untuk Mobile pertama pengindeksan adalah now complete.” — Google Search Central Blog, Oct 31, 2023. Jump untuk quote

Chrome / Lighthouse — thresholds

• “Aim to have a font size of at least 12 px on at least 60% of the text on your page.” (terjemahan) “Aim untuk memiliki sebuah font size dari setidaknya 12 px pada setidaknya 60% dari text pada Anda halaman.” — Chrome untuk Developers / Lighthouse docs. Jump untuk quote
• Tap targets fail when “48 px by 48 px” (terjemahan) “48 px oleh 48 px” isn’t met, dan when target areas overlap di dalam 48px dari center. Jump untuk quote

Bing — masih-live alat

• “Making pages mobile-friendly increases user engagement on mobile devices. It can also help you rank better in Bing search results on mobile devices.” (terjemahan) “membuat halaman mobile-friendly increases pengguna engagement pada mobile devices. ini dapat juga help Anda peringkat better di Bing hasil pencarian pada mobile devices.” — Bing Webmaster alat, Mobile Friendliness Test. Open alat

report’s hilang — how melakukan I periksa mobile usability now?

old “just open the Mobile Usability report” (terjemahan) “hanya open Mobile Usability report” jawaban no longer berfungsi. Which saat ini alat Anda reach untuk depends pada what Anda’re trying untuk melakukan. Click melalui ini.

Mobile usability checklist

sebuah pass di seluruh four signals, run terhadap mobile rendering dari halaman (DevTools device mode atau sebuah nyata phone):

• Body text adalah legible without zooming — ~16px baseline; di minimum passes Lighthouse’s 12px-pada-≥60%-dari-text audit.
• Tap targets adalah 48×48 CSS px (atau sebuah smaller icon dengan padding expanding tappable area untuk 48px).
• Tap targets aren’t crowded — adjacent targets don’t overlap di dalam 48px dari center; ~8px+ spacing, more untuk very kecil ones.
• Viewport meta tag present — <meta name="viewport" content="width=device-width, initial-scale=1">.
• No horizontal scrolling — konten fits viewport width; no fixed-pixel elements wider daripada screen.
• No intrusive interstitial pada entry dari search — full-halaman overlays adalah out; kecil banners dan legally diperlukan gates adalah fine.
• CSS/JS not blocked di robots.txt — Googlebot perlu them untuk render mobile halaman dan judge usability.
• Audited dengan Lighthouse / PageSpeed Insights — not retired Mobile-Friendly Test atau GSC Mobile Usability report.
• Spot-diperiksa pada sebuah nyata device — beberapa issues hanya tampilkan up pada actual hardware.

mental models

1. Four signals, one pertanyaan. Legible text, tap targets, viewport fit, no intrusive interstitials. setiap mobile usability issue adalah one dari itu four — diagnose oleh asking which one adalah failing sebelum Anda touch anything.

2. audit bar adalah not goal. Lighthouse passes text di 12px dan tap targets di exactly 48px. itu adalah floors, not targets. Aim untuk 16px body copy dan comfortably-spaced controls — passing audit dan menjadi pleasant untuk gunakan aren’t yang sama thing.

3. Tappable area, not visual size. sebuah kecil icon dapat pass tap-target audit jika padding expands -nya hit area untuk 48px. Design hit area, not hanya pixels Anda dapat see.

4. three “not the same as.” (terjemahan) “not yang sama sebagai.”

• Mobile usability ≠ pengindeksan mobile-pertama (itu’s which versi adalah terindeks).
• Mobile usability ≠ Core Web Vitals (itu’s memuat/interactivity/stability).
• Mobile usability ≠ sebuah single heavy peringkat factor (ini adalah one halaman-experience signal among several).

5. tooling moved — update Anda muscle memory. dedicated GSC report dan Mobile-Friendly Test adalah hilang (Dec 2023). Reach untuk Lighthouse / PageSpeed Insights / DevTools / Bing’s test / sebuah crawler instead. jika sebuah process doc masih says “check the Mobile Usability report,” (terjemahan) “periksa Mobile Usability report,” process doc adalah bug.

Mobile usability — cheat sheet

** four signals + thresholds**

** viewport one-liner**

<meta name="viewport" content="width=device-width, initial-scale=1">

Dates untuk know

• Apr 2023 — Google announces retirement.
• Oct 31, 2023 — pengindeksan mobile-pertama declared complete.
• Dec 1, 2023 — Mobile Usability report + Mobile-Friendly Test alat + API retired.
• Dec 4, 2023 — sunset confirmed publicly.

Where old alat went

• Mobile-Friendly Test URL → redirects untuk Lighthouse docs.
• GSC Mobile Usability report → redirects untuk GSC overview.

periksa ini now: Lighthouse · PageSpeed Insights · DevTools device mode · Bing Mobile Friendliness Test (masih live) · ketiga-party crawler · nyata device.

Don’t confuse dengan: pengindeksan mobile-pertama (which versi adalah terindeks) · Core Web Vitals (LCP/INP/CLS).

SOP: audit sebuah halaman’s mobile usability (post-report era)

sebuah repeatable procedure now itu there’s no one-click report. ~10 minutes per halaman.

1. Open halaman di Chrome dan run Lighthouse. DevTools (⌘⌥I / Ctrl+Shift+I) → Lighthouse tab → periksa SEO dan performa → Analyze pemuatan halaman (choose Mobile device). Note apa pun legible font sizes atau tap targets failures — Lighthouse lists spesifik elements.
2. Confirm viewport tag. di DevTools Elements, search <head> untuk name="viewport". ini seharusnya read width=device-width, initial-scale=1. No tag, atau sebuah fixed width=980-style nilai, adalah fix.
3. Emulate sebuah phone dan look. Toggle device toolbar (⌘⇧M / Ctrl+Shift+M), pick sebuah kecil device (e.g. iPhone SE width). Scroll full halaman: apa pun horizontal scrollbar atau element bleeding off right edge adalah sebuah viewport-fit failure.
4. Test tap targets oleh hand. di device mode, try tapping adjacent tautan/buttons. jika Anda’d realistically mis-tap, mereka’re too kecil atau too close — target 48px hit areas dengan ~8px+ spacing.
5. periksa untuk entry interstitials. muat URL fresh (incognito) sebagai jika arriving dari search. sebuah full-halaman overlay sebelum Anda dapat read konten adalah sebuah masalah; kecil banners dan legal/consent gates adalah fine.
6. Cross-periksa dengan Bing’s live test (optional kedua opinion) di bing.com/webmaster/alat/mobile-friendliness, dan/atau PageSpeed Insights untuk sebuah shareable record.
7. Verify pada sebuah nyata device jika halaman penting. Emulation adalah close, not perfect.
8. File fixes oleh signal — font size, tap sizing/spacing, viewport, interstitial — so devs get sebuah actionable list, not “make it mobile-friendly.” (terjemahan) “membuat ini mobile-friendly.”

Mobile usability anti-patterns

recurring mistakes — several dari them baked ke stale advice itu’s masih circulating.

• “Check the GSC Mobile Usability report.” (terjemahan) “periksa GSC Mobile Usability report.” ini adalah retired December 1, 2023 dan URL now redirects untuk overview halaman. jika sebuah doc atau tutorial says ini, ini adalah out dari date — including, until ini adalah corrected, sebuah passage di my own Ahrefs guide.
• “Run Google’s Mobile-Friendly Test.” (terjemahan) “Run Google’s Mobile-Friendly Test.” juga retired Dec 1, 2023; old URL redirects untuk Lighthouse docs. Multiple currently-live artikel masih describe ini alat sebagai berfungsi — ini isn’t.
• Designing untuk 12px audit floor. Passing Lighthouse’s font-size audit di 12px doesn’t membuat text comfortable untuk read pada sebuah phone. gunakan ~16px untuk body copy.
• Measuring terlihat icon, not tappable area. sebuah 24px icon dapat masih pass tap-target audit jika padding expands -nya hit area untuk 48px. Shrinking hit area untuk match graphic adalah mistake.
• Omitting atau misconfiguring viewport meta tag. No tag (atau sebuah fixed-width one) membuat mobile browser render di desktop width dan shrink everything. ini adalah sebuah one-line fix itu’s easy untuk forget.
• Full-screen interstitials pada entry dari search. Newsletter/app-install/ad overlays itu block konten moment sebuah pengunjung arrives obstruct konten dan dapat hurt search performa. gunakan kecil banner instead.
• Blocking CSS/JS di robots.txt. jika Googlebot dapat’t fetch assets, ini dapat’t render mobile halaman properly atau judge -nya usability.
• Treating mobile usability sebagai sebuah big standalone peringkat lever. ini adalah one halaman-experience signal, dan Google akan masih surface paling relevant konten bahkan dengan sebuah sub-par experience. Fix ini untuk pengguna, not untuk sebuah imagined peringkat jump.
• Conflating ini dengan pengindeksan mobile-pertama atau Core Web Vitals. berbeda masalah, berbeda fixes, berbeda alat. pertahankan them separate.

Quick memeriksa Anda dapat run yourself

Anda tidak perlu retired alat untuk spot umum failures. sebuah few practical snippets.

periksa viewport meta tag dari command line

# Does the page ship a proper viewport meta tag?
curl -s https://example.com/ | grep -i 'name="viewport"'
# Expected: <meta name="viewport" content="width=device-width, initial-scale=1">
# No output = no viewport tag (a mobile-usability failure).

temukan elements causing horizontal scroll (DevTools console)

Paste ke Chrome DevTools console while emulating sebuah phone — ini lists apa pun element wider daripada viewport, usual cause dari horizontal scrolling:

// Flag elements wider than the viewport
const vw = document.documentElement.clientWidth;
[...document.querySelectorAll('*')]
  .filter(el => el.getBoundingClientRect().right > vw + 1)
  .forEach(el => console.log(Math.round(el.getBoundingClientRect().right), el));

temukan text smaller daripada 16px (DevTools console)

// List text-bearing elements rendered below the 16px baseline
[...document.querySelectorAll('body *')]
  .filter(el => el.childNodes.length && [...el.childNodes].some(n => n.nodeType === 3 && n.textContent.trim()))
  .map(el => ({ px: parseFloat(getComputedStyle(el).fontSize), el }))
  .filter(x => x.px < 16)
  .forEach(x => console.log(x.px + 'px', x.el));

Bookmarklet: highlight kecil tap targets

Save sebagai sebuah bookmark, run pada apa pun halaman di mobile emulation — ini outlines interactive elements whose rendered box adalah di bawah 48×48 CSS px:

javascript:(()=>{document.querySelectorAll('a,button,input,select,textarea,[role=button]').forEach(el=>{const r=el.getBoundingClientRect();if(r.width<48||r.height<48){el.style.outline='2px solid red';}});})();

Remember caveat: tappable area (padding disertakan) adalah what audit measures — sebuah element flagged here dapat masih menjadi fine jika padding expands -nya hit area untuk 48px.

alat untuk memeriksa mobile usability

• Chrome Lighthouse (DevTools → Lighthouse) — direct replacement untuk retired Mobile-Friendly Test. Runs legible-font, tap-target, dan viewport audits dan names failing elements.
• PageSpeed Insights (pagespeed.web.dev) — Lighthouse di cloud pada mobile profile; shareable URL-tingkat hasil.
• Chrome DevTools device toolbar — phone emulation untuk eyeballing horizontal scroll, tiny text, dan cramped controls di nyata dimensions.
• Bing Mobile Friendliness Test alat — masih live di Bing Webmaster alat; sebuah nyata kedua opinion now itu Google’s dedicated alat adalah hilang.
• Search Console pemeriksaan URL — see rendered mobile HTML dan screenshot Googlebot smartphone saw (doesn’t grade usability, tetapi confirms what renders).
• Ahrefs situs Audit — crawl dengan sebuah mobile pengguna-agent dan surface mobile-spesifik issues di seluruh setiap halaman (connect PageSpeed Insights API untuk mobile memeriksa).
• sebuah nyata phone — ground truth emulation approximates.

Mobile halaman looks fine di emulation tetapi fails pada sebuah phone

Symptom: Chrome’s device toolbar looks clean, tetapi pengguna report clipped konten, overlapping controls, atau unusable dialogs. mungkin cause: emulation melakukan not reproduce phone’s browser chrome, safe-area insets, text scaling, atau operating-sistem keyboard. Fix: reproduce task pada setidaknya one physical iOS device dan one physical Android device. Test orientation perubahan, increased text size, dan pada-screen keyboard, not hanya landing state.

halaman scrolls sideways

Symptom: sebuah narrow strip dari konten extends past right edge. mungkin cause: sebuah fixed-width element, unbroken string, table, image, atau 100vw container adalah wider daripada layout viewport. Fix: gunakan DevTools untuk inspect widest element, membuat media responsive, allow panjang text untuk wrap, dan prefer width: 100% inside padded containers. melakukan not hide evidence dengan overflow-x: hidden until Anda memiliki fixed source.

Tap targets masih fail setelah increasing icon

Symptom: Lighthouse masih flags sebuah control setelah -nya terlihat icon got larger. mungkin cause: interactive box remains kecil atau neighboring tautan overlap -nya usable space. Fix: tambahkan padding untuk clickable element itself, space adjacent targets, dan verify rendered hit box di DevTools. Enlarging hanya sebuah SVG inside sebuah tiny anchor melakukan not enlarge anchor.

Text becomes unreadable setelah muat

Symptom: initial HTML looks usable, lalu client-side code replaces ini dengan tiny text atau sebuah desktop layout. mungkin cause: responsive styles atau components muat late, fail di sebuah breakpoint, atau differ antara server dan client rendering. Fix: test rendered state dengan JavaScript enabled, inspect failing breakpoint, dan pertahankan mobile layout di initial critical CSS where practical.

Prove sebuah mobile-usability fix worked

Test yourself: Mobile Usability

Five quick pertanyaan pada mobile usability. Pick sebuah jawaban untuk setiap, lalu periksa.

Resources worth Anda time

My writing

• pengindeksan mobile-pertama Goes Mobile-hanya (Ahrefs) — my deep dive pada pengindeksan mobile-pertama dan mobile design best practices. Fair warning: sebagai dari -nya June 2024 update ini masih poin readers untuk retired GSC Mobile Usability report dan Mobile-Friendly Test — stale advice ini artikel corrects, dan something I plan untuk fix there.
• Beginner’s Guide untuk SEO teknis (Ahrefs) — where mobile usability fits inside broader technical-SEO picture.
• Core Web Vitals: What mereka adalah & cara meningkatkan Yours (Ahrefs) — performa side dari mobile experience, which people routinely conflate dengan usability.

My speaking

• How Search berfungsi (SlideShare) — my walkthrough dari crawling, rendering, pengindeksan, dan peringkat, including how Googlebot melakukan crawl sebagai sebuah smartphone. (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

• role dari pengalaman halaman di membuat helpful konten (Google) — April 2023 post itu announced report/alat retirement dan pointed untuk Lighthouse.
• Google Officially Drops Mobile Usability Report, Mobile-Friendly Test alat dan API (mesin pencari Land, Barry Schwartz) — retirement, di plain language.
• Google Search Console’s Mobile Usability Report & Mobile-Friendly Tests adalah hilang (mesin pencari Roundtable, Barry Schwartz) — Dec 4, 2023 sunset confirmation dan where old URLs now redirect.
• Document doesn’t gunakan legible font sizes (Chrome / Lighthouse) — 12px/60%-dari-text audit threshold.
• Tap targets adalah not sized appropriately (Chrome / Lighthouse) — 48×48 CSS px audit dan spacing aturan.
• hindari intrusive interstitials dan dialogs (Google) — interstitials definition dan acceptable-banner alternative.
• Bing Mobile Friendliness Test alat (Bing Webmaster alat) — masih live; test apa pun URL untuk mobile-friendliness.

Stats worth citing

• Legible-font audit pass bar: 12px pada ≥60% dari text — Lighthouse’s documented threshold. Note ini adalah sebuah pass floor, not recommended ~16px body-copy baseline. Source
• Tap-target audit fails below 48×48 CSS px (dan pada ≥25% overlap di dalam 48px dari center) — Lighthouse. tappable area, not visual size, adalah what’s diukur. Source
• WCAG 2,2 Target Size Minimum (SC 2.5.8, tingkat AA): 24×24 CSS px — sebuah separate accessibility-conformance aturan dari W3C, not sebuah Google Search peringkat threshold; smaller daripada Lighthouse’s 48px audit bar because ini measures sebuah berbeda thing. Source
• Retirement date: December 1, 2023 — Google retired Search Console Mobile Usability report, Mobile-Friendly Test alat, dan API pada ini date (confirmed publicly Dec 4, 2023). Source
• pengindeksan mobile-pertama declared complete October 31, 2023 — milestone itu dibuat sebuah dedicated device-split usability report unnecessary. Source

Log perubahan