နည်းပညာ SEO

မိုဘိုင်းအသုံးဝင်မှုနှင့် တို့ထိရာနေရာအရွယ်အစား စစ်ဆေးကိရိယာ

Google သည် ၎င်း၏ကိုယ်ပိုင် Mobile-Friendly Test ကို 2023 ခုနှစ်တွင် ရပ်ဆိုင်းခဲ့သည်။ သင့်စာမျက်နှာ HTML (inline မဟုတ်ပါက CSS ပါ) ကို ကူးထည့်ပါ — ဤကိရိယာက viewport meta၊ တည်ငြိမ်သော desktop အကျယ် layout၊ ဖတ်ရှုနိုင်သော font အရွယ်အစား၊ ခန့်မှန်း tap-target အရွယ်အစား၊ ခေတ်နောက်ကျသော plugin tag များနှင့် WCAG အရောင် contrast တို့ကို အစစ်ခုနစ်ခု လုပ်ဆောင်ပေးသည်။

CSS လိုအပ်သော စစ်ဆေးမှုများ (layout အကျယ်၊ font အရွယ်အစား၊ tap target၊ contrast) များကို HTML ထဲတွင်သော်လည်းကောင်း၊ ဤဘောက်စ်တွင်သော်လည်းကောင်း CSS မတွေ့ပါက ကျော်သွားမည် (သို့) "အချက်အလက်မလုံလောက်ပါ" ဟု ဖော်ပြသွားမည်။

ဤသည်မှာ static rule-based စစ်ဆေးမှုတစ်ခုဖြစ်ပြီး ဖုန်းအစစ်တစ်လုံးလို စာမျက်နှာကို render မလုပ်ပါ — ထို့ကြောင့် tap-target နှင့် layout ရလဒ်များသည် သင့် CSS ပေါ်အခြေခံသည့် နီးစပ်သော ခန့်မှန်းချက်များသာဖြစ်ပြီး pixel တိကျမှုမရှိပါ။

ဤကိရိယာ၏ စစ်ဆေးချက်များ

မိုဘိုင်းအသုံးပြုသူအစစ်များနှင့် Google ၏ mobile-first index အတွက် အရေးကြီးသော စစ်ဆေးမှုခုနစ်ခု — zoom ကို မပိတ်ဆို့သော မှန်ကန်သည့် viewport tag၊ hard-code လုပ်ထားသော desktop အကျယ် layout မရှိခြင်း၊ ဖတ်ရန်ခက်နေအောင် သေးငယ်သော စာလုံးမရှိခြင်း၊ link နှင့် button များတွင် သက်တောင့်သက်သာ tap target အရွယ်အစားရှိခြင်း၊ အလုပ်မလုပ်တော့သော Flash/Java/marquee markup မရှိခြင်းနှင့် WCAG နှင့်ကိုက်ညီသော စာသား contrast တို့ဖြစ်သည်။ စာမျက်နှာ HTML အပြည့်အစုံ (View Source ဖြင့်ရနိုင်) ကို external stylesheet ရှိလျှင် CSS နှင့်အတူ ကူးထည့်ပါ။

စစ်ဆေးမှုတစ်ခုစီ အလုပ်လုပ်ပုံ

ဤနေရာတွင် ခန့်မှန်းခြင်းမရှိပါ — တွေ့ရှိချက်တိုင်းသည် သင်ကူးထည့်သော HTML (DOM) နှင့် CSS (@media block များကို ဖြေရှင်းပေးသော rule parser အစစ်) ကို parse လုပ်ခြင်းမှ ရရှိပြီး Google နှင့် WCAG ထုတ်ပြန်ထားသော standard အတိုင်း အကဲဖြတ်သည်။

Viewport meta tag

tag ရှိမရှိ၊ width=device-width နှင့် initial-scale=1 သုံးမသုံး၊ pinch-to-zoom ကို ပိတ်ဆို့ခြင်းရှိမရှိ (user-scalable=no သို့မဟုတ် maximum-scale 2 အောက်) — WCAG 1.4.4 ကျရှုံးမှုတစ်ခု ဖြစ်ပါက စစ်ဆေးသည်။

တည်ငြိမ်သော desktop အကျယ် layout

ဖွဲ့စည်းပုံဆိုင်ရာ selector များ (body, .wrapper, .container, #page, ...) တွင် 601px သို့မဟုတ် ထို့ထက်ကျယ်သော hard-code လုပ်ထားသည့် width သို့မဟုတ် min-width ရှိမရှိ CSS ကို scan လုပ်သည် — layout ကို responsive အဖြစ် တစ်ခါမှ မပြောင်းလဲခဲ့ကြောင်း ဓလေ့ကျ လက္ခဏာတစ်ခုဖြစ်သည်။

ဖတ်ရှုနိုင်သော font အရွယ်အစား

pinch-zoom မလုပ်ဘဲ ဖုန်းစခရင်ပေါ်တွင် သက်တောင့်သက်သာ ဖတ်ရှုနိုင်ရန် ယေဘုယျအသုံးပြုသော အနည်းဆုံးအရွယ်အစားဖြစ်သည့် 12px အောက်ရှိ font-size declaration များကို အမှတ်ခြစ်သည်။

Tap-target အရွယ်အစား

font-size၊ line-height နှင့် padding (သို့မဟုတ် တိကျသော width/height) မှ link၊ button နှင့် role="button" element များ၏ render အမြင့်ကို ခန့်မှန်းပြီး Google Lighthouse နှင့် WCAG 2.5.5 မှ ~44-48px standard နှင့် နှိုင်းယှဉ်သည်။

ခေတ်နောက်ကျသော Plugin အကြောင်းအရာ

<applet>, <marquee>, <blink> နှင့် Flash (.swf) ကို ညွှန်းသော <embed>/<object> မည်သည့်ခုကိုမဆို အမှတ်ခြစ်သည် — ၎င်းတို့သည် လက်ရှိမိုဘိုင်း browser မည်သည့်ခုတွင်မှ အလုပ်မလုပ်ပါ။

အရောင် Contrast (WCAG)

စာသားအရောင်နှင့် နောက်ခံအရောင်ကို အတူတကွသတ်မှတ်ထားသည့် CSS rule မည်သည့်ခုအတွက်မဆို WCAG relative-luminance contrast ratio အစစ်ကို တွက်ချက်ပြီး AA အနည်းဆုံး 4.5:1 (သို့မဟုတ် စာလုံးကြီး/စာလုံးထူအတွက် 3:1) နှင့် စစ်ဆေးသည်။

Responsive Breakpoint များ

layout သည် စခရင်သေးငယ်မှုနှင့် လိုက်လျောညီထွေဖြစ်မှုကို ညွှန်ပြသော လက္ခဏာအဖြစ် သင့် CSS ထဲရှိ @media rule အရေအတွက်ကို ရေတွက်သည် — fluid layout သည် media query လုံးဝမပါဘဲ responsive ဖြစ်နိုင်သောကြောင့် သတင်းအချက်အလက်အတွက်သာဖြစ်သည်။

မေးလေ့ရှိသော မေးခွန်းများ

Google သည် Mobile-Friendly Test ကို အဘယ်ကြောင့် ရပ်ဆိုင်းခဲ့သနည်း။

Google သည် 2023 ဒီဇင်ဘာလတွင် သီးခြား Mobile-Friendly Test ကိရိယာကို ပိတ်သိမ်းခဲ့ပြီး၊ မိုဘိုင်းအသုံးဝင်မှု စစ်ဆေးခြင်းကို Search Console ၏ ပိုကျယ်ပြန့်သော report များထဲသို့ ပေါင်းစည်းခဲ့ပြီး လျင်မြန်သော စာမျက်နှာတစ်ခုတည်း စစ်ဆေးကိရိယာ မရှိတော့ပါ။ ဤကိရိယာသည် login မလိုအပ်ဘဲ rule-based စစ်ဆေးမှုကို ကူးထည့်လိုက်သော HTML မည်သည့်ခုပေါ်တွင်မဆို လျင်မြန်စွာ လုပ်ဆောင်ပေးခြင်းဖြင့် ထိုကွက်လပ်ကို ဖြည့်ဆည်းပေးသည်။

CSS ကို ဘာကြောင့် သီးခြား ကူးထည့်ရန် လိုအပ်သနည်း။

စာမျက်နှာအစစ်များစွာသည် ၎င်းတို့၏ CSS ကို external stylesheet (<link rel="stylesheet">) မှ load လုပ်ကြပြီး၊ ကူးထည့်ထားသော HTML တစ်ခုတည်းမှ ဤကိရိယာက ၎င်းကို ရယူနိုင်မည်မဟုတ်ပါ။ ထို stylesheet ၏ အကြောင်းအရာကို CSS ဘောက်စ်ထဲသို့ ကူးထည့်ပါက layout၊ font-size၊ tap-target နှင့် contrast စစ်ဆေးမှုများ အားလုံး ၎င်းအပေါ် အခြေခံ၍ လုပ်ဆောင်သွားမည်ဖြစ်သည်။

ကောင်းမွန်သော tap-target အရွယ်အစားသည် မည်သို့ရှိသနည်း။

Google Lighthouse နှင့် WCAG 2.5.5 (Target Size) အရ CSS pixel ခန့် 44-48 အမြင့်နှင့် အကျယ်ခန့် ဖြစ်သည်။ ထိုထက်နည်းပါက အစစ်လက်မသည် စခရင်အစစ်ပေါ်တွင် အနီးအနားရှိ link များကို မှားယွင်းစွာ ထိတွေ့မှု ပိုများလာနိုင်သည်။

tap-target ခန့်မှန်းချက်သည် တိကျသလား။

မတိကျပါ — သင်ကြေညာထားသော font-size၊ line-height နှင့် padding (သို့မဟုတ် တိကျသော width/height) မှ ခိုင်မာသော ခန့်မှန်းချက်တစ်ခုဖြစ်ပြီး၊ browser အစစ် render တစ်ခုမဟုတ်ပါ။ 44-48px မျဉ်းအနီးရှိ ရလဒ်များကို "စက်ပစ္စည်းအစစ်ပေါ်တွင် အတည်ပြုရန်လိုသည်" ဟုသတ်မှတ်ပြီး ၎င်းထက် အများကြီး နည်းသော ရလဒ်များကို ရှင်းလင်းစွာ ကျရှုံးသည်ဟု သတ်မှတ်ပါ။

ဤကိရိယာသည် ကျွန်ုပ်၏ HTML သို့မဟုတ် CSS ကို တစ်နေရာရာသို့ ပို့ပါသလား။

သင်ကူးထည့်သော HTML/CSS ကို parser အလုပ်လုပ်ရန်အတွက် HTTPS မှတစ်ဆင့် ကျွန်ုပ်တို့၏ server သို့ တစ်ကြိမ်တည်း ပို့ပါသည် (လူတိုင်းအတွက် rule engine တူညီစွာ အလုပ်လုပ်ရန် လိုအပ်သောကြောင့်)၊ တောင်းဆိုမှုအပြီးတွင် သိမ်းဆည်းမည်မဟုတ်ပါ။