SEO បច្ចេកទេស

ឧបករណ៍ត្រួតពិនិត្យភាពងាយស្រួលលើទូរស័ព្ទ និងទំហំគោលដៅចុច

Google បានបញ្ឈប់ឧបករណ៍ Mobile-Friendly Test របស់ខ្លួននៅឆ្នាំ 2023។ បិទភ្ជាប់ HTML នៃទំព័ររបស់អ្នក (បូក CSS ប្រសិនបើមិនស្ថិតនៅក្នុងបន្ទាត់) ហើយឧបករណ៍នេះនឹងធ្វើការត្រួតពិនិត្យពិតប្រាកដចំនួនប្រាំពីរ៖ viewport meta, ប្លង់ដែលមានទទឹងកុំព្យូទ័រថេរ, ទំហំអក្សរអាចអានបាន, ទំហំគោលដៅចុចប៉ាន់ស្មាន, ស្លាកកម្មវិធីជំនួយហួសសម័យ, និងភាពផ្ទុយពណ៌តាម WCAG។

ការត្រួតពិនិត្យដែលត្រូវការ CSS (ទទឹងប្លង់, ទំហំអក្សរ, គោលដៅចុច, ភាពផ្ទុយពណ៌) នឹងត្រូវរំលង ឬសម្គាល់ថា "ទិន្នន័យមិនគ្រប់គ្រាន់" ប្រសិនបើគ្មាន CSS ត្រូវបានរកឃើញទាំងក្នុង HTML ឬក្នុងប្រអប់នេះ។

នេះជាការត្រួតពិនិត្យផ្អែកលើក្បួនស្ថិតិ — មិនបង្ហាញទំព័រដូចទូរស័ព្ទពិតប្រាកដទេ ដូច្នេះលទ្ធផលគោលដៅចុច និងប្លង់ គឺជាការប៉ាន់ស្មានស្របតាម CSS របស់អ្នក មិនមែនការវាស់ស្ទង់ត្រឹមភីកសែលពិតប្រាកដទេ។

អ្វីដែលឧបករណ៍នេះត្រួតពិនិត្យ

ការត្រួតពិនិត្យចំនួនប្រាំពីរដែលសំខាន់សម្រាប់អ្នកទស្សនាទូរស័ព្ទពិតប្រាកដ និងសន្ទស្សន៍ mobile-first របស់ Google៖ ស្លាក viewport ត្រឹមត្រូវដែលមិនរារាំងការពង្រីក, គ្មានប្លង់ទទឹងកុំព្យូទ័រដែលកំណត់ស្ថិតិ, គ្មានអក្សរតូចពេកលំបាកអាន, គោលដៅចុចមានទំហំសមរម្យលើតំណ និងប៊ូតុង, គ្មានស្លាក Flash/Java/marquee ដែលលែងដំណើរការ, និងភាពផ្ទុយពណ៌អក្សរស្របតាម WCAG។ បិទភ្ជាប់ HTML ពេញលេញនៃទំព័រ (View Source ប្រើបាន) បូក CSS របស់អ្នក ប្រសិនបើនៅក្នុង stylesheet ខាងក្រៅ។

របៀបដែលការត្រួតពិនិត្យនីមួយៗដំណើរការ

គ្មានអ្វីត្រូវបានប៉ាន់ស្មានទេនៅទីនេះ — រាល់ការរកឃើញមកពីការញែក HTML ដែលអ្នកបិទភ្ជាប់ (DOM) និង CSS ដែលអ្នកបិទភ្ជាប់ (កម្មវិធីញែកក្បួនពិតប្រាកដ ដែលពន្លាទប់ @media) បន្ទាប់មកអនុវត្តតម្រូវការដូចគ្នានឹងអ្វីដែល Google និង WCAG បានផ្សព្វផ្សាយ។

ស្លាក meta viewport

ពិនិត្យថាតើស្លាកមាន, ប្រើ width=device-width និង initial-scale=1, និងមិនរារាំងការពង្រីកដោយម្រាមដៃពីរ (user-scalable=no ឬ maximum-scale ក្រោម 2) ដែលជាការបរាជ័យ WCAG 1.4.4។

ប្លង់ដែលមានទទឹងកុំព្យូទ័រថេរ

ស្កេន CSS របស់អ្នកសម្រាប់ selector រចនាសម្ព័ន្ធ (body, .wrapper, .container, #page, ...) ដែលមាន width ឬ min-width ថេរ 601px ឬច្រើនជាងនេះ — សញ្ញាបុរាណនៃប្លង់ដែលមិនដែលបានធ្វើឲ្យឆ្លើយតប។

ទំហំអក្សរអាចអានបាន

សម្គាល់ការប្រកាស font-size ណាមួយក្រោម 12px ដែលជាទំហំអប្បបរមាទូទៅសម្រាប់ការអានស្រួលនៅលើអេក្រង់ទូរស័ព្ទដោយមិនចាំបាច់ពង្រីកដោយម្រាមដៃពីរ។

ទំហំគោលដៅចុច

ប៉ាន់ស្មានកម្ពស់បង្ហាញនៃតំណ ប៊ូតុង និងធាតុ role="button" ពី font-size, line-height និង padding (ឬ width/height ច្បាស់លាស់) រួចប្រៀបធៀបជាមួយគោលការណ៍ណែនាំប្រហែល 44-48px ពី Google Lighthouse និង WCAG 2.5.5។

មាតិកាកម្មវិធីជំនួយហួសសម័យ

សម្គាល់ <applet>, <marquee>, <blink>, និង <embed>/<object> ណាមួយដែលចង្អុលទៅ Flash (.swf) — គ្មានមួយណាដំណើរការនៅក្នុង browser ទូរស័ព្ទបច្ចុប្បន្នទេ។

ភាពផ្ទុយពណ៌ (WCAG)

សម្រាប់ក្បួន CSS ណាមួយដែលកំណត់ទាំងពណ៌អក្សរ និងពណ៌ផ្ទៃខាងក្រោយជាមួយគ្នា គណនាសមាមាត្រភាពផ្ទុយពណ៌ WCAG ជាក់ស្តែង ហើយពិនិត្យធៀបនឹងអប្បបរមា AA 4.5:1 (ឬ 3:1 សម្រាប់អក្សរធំ/ដិត)។

ចំណុចផ្លាស់ប្តូរឆ្លើយតប

រាប់ក្បួន @media នៅក្នុង CSS របស់អ្នកជាសញ្ញាណបញ្ជាក់ថាប្លង់សម្របទៅនឹងអេក្រង់តូចជាង — សម្រាប់ជាព័ត៌មានប៉ុណ្ណោះ ព្រោះប្លង់ liquid អាចនៅតែឆ្លើយតបបានទោះបីគ្មាន media query ក៏ដោយ។

សំណួរដែលសួរញឹកញាប់

ហេតុអ្វី Google បានបញ្ឈប់ Mobile-Friendly Test?

Google បានបិទឧបករណ៍ Mobile-Friendly Test ដាច់ដោយឡែកនៅខែធ្នូ ឆ្នាំ 2023 ដោយបញ្ចូលការត្រួតពិនិត្យភាពងាយស្រួលលើទូរស័ព្ទចូលទៅក្នុងរបាយការណ៍ធំជាងនៃ Search Console ដោយគ្មានឧបករណ៍ត្រួតពិនិត្យទំព័រតែមួយដ៏លឿនទៀត។ ឧបករណ៍នេះបំពេញចន្លោះនោះជាមួយការត្រួតពិនិត្យផ្អែកលើក្បួនដ៏លឿន គ្មានតម្រូវឲ្យចូលគណនី លើ HTML ណាមួយដែលអ្នកបិទភ្ជាប់។

ហេតុអ្វីខ្ញុំត្រូវបិទភ្ជាប់ CSS ដាច់ដោយឡែក?

ទំព័រពិតប្រាកដភាគច្រើនផ្ទុក CSS ពី stylesheet ខាងក្រៅ (<link rel="stylesheet">) ដែលឧបករណ៍នេះមិនអាចទាញយកជំនួសអ្នកបានពី HTML ដែលបិទភ្ជាប់តែឯង។ បិទភ្ជាប់មាតិកា stylesheet នោះទៅប្រអប់ CSS ហើយការត្រួតពិនិត្យប្លង់ ទំហំអក្សរ គោលដៅចុច និងភាពផ្ទុយពណ៌ទាំងអស់នឹងដំណើរការលើវា។

តើទំហំគោលដៅចុចល្អគឺជាអ្វី?

ប្រហែល 44-48 ភីកសែល CSS កម្ពស់ និងទទឹង តាមស្តង់ដារ Google Lighthouse និង WCAG 2.5.5 (Target Size)។ ក្រោមនេះ មេដៃពិតប្រាកដលើអេក្រង់ពិតប្រាកដនឹងចុចខុសទៅតំណនៅជិតៗញឹកញាប់ជាងមុនយ៉ាងច្បាស់។

តើការប៉ាន់ស្មានគោលដៅចុចនេះត្រឹមត្រូវឬទេ?

ទេ — វាជាការប៉ាន់ស្មានដ៏រឹងមាំពី font-size, line-height និង padding (ឬ width/height ច្បាស់លាស់) ដែលអ្នកបានប្រកាស មិនមែនការបង្ហាញ browser ពិតប្រាកដទេ។ ចាត់ទុកលទ្ធផលនៅជិតបន្ទាត់ 44-48px ថាត្រូវ "ផ្ទៀងផ្ទាត់នៅលើឧបករណ៍ពិតប្រាកដ" និងលទ្ធផលទាបជាងនេះច្រើនថាជាការបរាជ័យច្បាស់លាស់។

តើឧបករណ៍នេះផ្ញើ HTML ឬ CSS របស់ខ្ញុំទៅកន្លែងណាមួយដែរឬទេ?

HTML/CSS ដែលអ្នកបិទភ្ជាប់ត្រូវបានផ្ញើម្តងតាម HTTPS ទៅម៉ាស៊ីនមេរបស់យើងដើម្បីដំណើរការកម្មវិធីញែក (ចាំបាច់ដើម្បីឲ្យក្បួនច្បាប់ដូចគ្នាដំណើរការសម្រាប់មនុស្សគ្រប់គ្នា) ហើយមិនត្រូវបានរក្សាទុកក្រោយសំណើនោះទេ។