Technical SEO
Mobile-Friendliness & Tap-Target Auditor
Inalis na ng Google ang sarili nitong Mobile-Friendly Test noong 2023. I-paste ang HTML ng iyong page (kasama ang CSS kung hindi ito inline) at magpapatakbo ito ng pitong tunay na pagsusuri: viewport meta, fixed desktop-width na layout, madaling basahing font size, tinatayang sukat ng tap target, lumang plugin tags, at WCAG color contrast.
Ang mga pagsusuring nangangailangan ng CSS (lapad ng layout, sukat ng font, tap targets, contrast) ay lalaktawan o mamarkahan bilang "kulang ang datos" kung walang mahanap na CSS sa HTML o sa kahon na ito.
Ito ay static na audit na batay sa mga panuntunan — hindi nito ini-render ang page tulad ng totoong telepono, kaya ang mga resulta ng tap-target at layout ay malapit na tantiya batay sa iyong CSS, hindi eksaktong sukat sa pixel.
Ano ang sinusuri ng tool na ito
Pitong pagsusuri na mahalaga para sa tunay na mobile visitors at sa mobile-first index ng Google: tamang viewport tag na hindi humaharang sa zoom; walang hard-coded na desktop-width na layout; walang teksto na masyadong maliit para mabasa; komportableng sukat ng tap target sa mga link at button; walang patay na Flash/Java/marquee markup; at WCAG-compliant na text contrast. I-paste ang buong HTML ng page (gumagana ang View Source) kasama ang iyong CSS kung nasa external stylesheet ito.
Paano gumagana ang bawat pagsusuri
Walang hulaan dito — bawat natuklasan ay galing sa pag-parse ng HTML na iyong ipinaste (DOM) at CSS na iyong ipinaste (tunay na rule parser, binubuksan ang mga @media block), pagkatapos ay inilalapat ang parehong mga threshold na inilalathala ng Google at WCAG.
Viewport meta tag
Sinusuri kung umiiral ang tag, gumagamit ng width=device-width at initial-scale=1, at hindi humaharang sa pinch-to-zoom (user-scalable=no o maximum-scale na mas mababa sa 2), na isang kabiguan sa WCAG 1.4.4.
Fixed desktop-width na layout
Sinusuri ang iyong CSS para sa structural selectors (body, .wrapper, .container, #page, ...) na may hard-coded na width o min-width na 601px o higit pa — klasikong senyales na hindi kailanman ginawang responsive ang layout.
Madaling basahing font size
Ipinapakita ang anumang font-size declaration na mas mababa sa 12px, ang karaniwang ginagamit na pinakamababang sukat para sa komportableng pagbabasa sa screen ng telepono nang walang pinch-zoom.
Sukat ng tap target
Tinatantiya ang ini-render na taas ng mga link, button, at role="button" na elemento mula sa font-size, line-height, at padding (o tahasang width/height), at inihahambing ito sa ~44-48px na patnubay mula sa Google Lighthouse at WCAG 2.5.5.
Lumang plugin content
Ipinapakita ang <applet>, <marquee>, <blink>, at anumang <embed>/<object> na tumuturo sa Flash (.swf) — wala sa mga ito ang gumagana sa anumang kasalukuyang mobile browser.
Color contrast (WCAG)
Para sa anumang CSS rule na nagtatakda ng parehong text color at background color, kinakalkula ang tunay na WCAG relative-luminance contrast ratio at sinusuri ito laban sa 4.5:1 (o 3:1 para sa malaki/bold na teksto) na AA minimum.
Responsive breakpoints
Binibilang ang mga @media rule sa iyong CSS bilang senyales kung ang layout ay umaangkop sa mas maliliit na screen — para lamang sa impormasyon, dahil ang fluid na layout ay maaaring responsive kahit walang media query.
Mga madalas itanong
Bakit inalis ng Google ang Mobile-Friendly Test?
Isinara ng Google ang standalone na Mobile-Friendly Test tool nito noong Disyembre 2023, isinama ang pagsusuri ng mobile-friendliness sa mas malawak na mga ulat ng Search Console nang wala nang mabilis na single-page na checker. Pinupunan ng tool na ito ang puwang na iyon gamit ang mabilis, walang-login, rule-based na audit na maaari mong patakbuhin sa anumang ipinasteng HTML.
Bakit kailangan kong i-paste ang CSS nang hiwalay?
Karamihan sa mga tunay na page ay nagla-load ng CSS mula sa external stylesheet (<link rel="stylesheet">), na hindi makukuha ng tool na ito para sa iyo mula lamang sa ipinasteng HTML. I-paste ang laman ng stylesheet na iyon sa kahon ng CSS at ang mga pagsusuri sa layout, font size, tap target, at contrast ay tatakbo laban dito.
Ano ang itinuturing na magandang sukat ng tap target?
Humigit-kumulang 44-48 CSS pixels ang taas at lapad, ayon sa Google Lighthouse at WCAG 2.5.5 (Target Size). Sa ibaba nito, mas madalas mapindot ng tunay na hinlalaki sa tunay na screen ang mga kalapit na link.
Eksakto ba ang pagtantiya ng tap target?
Hindi — isa itong solidong pagtantiya mula sa iyong idineklarang font-size, line-height, at padding (o tahasang width/height), hindi live na render ng browser. Ituring ang mga resulta na malapit sa 44-48px na linya bilang "kailangang beripikahin sa tunay na device", at ang mga resultang malayo sa ibaba nito bilang malinaw na kabiguan.
Nagpapadala ba ang tool na ito ng aking HTML o CSS kahit saan?
Ang iyong ipinasteng HTML/CSS ay ipinapadala nang minsan, sa pamamagitan ng HTTPS, sa aming server para patakbuhin ang parser (kinakailangan para pare-pareho ang parehong rule engine para sa lahat), at hindi ito iniimbak lagpas sa hiling na iyon.