Panduan Viewport Meta Tag

TL;DR — viewport meta tag adalah satu line di Anda halaman’s <head> itu tells phones dan tablets untuk render Anda halaman di screen’s nyata width alih-alih pretending ini adalah sebuah desktop monitor. Tanpa ini, Anda halaman menampilkan up tiny dan Anda memiliki untuk pinch dan scroll sideways untuk baca ini. line Anda ingin adalah <meta name="viewport" content="width=device-width, initial-scale=1">.

Apa viewport meta tag adalah

Ketika smartphones pertama mendapat web browser, sebagian besar situs web adalah dibangun untuk desktop screens. So banyak phone browser cheated: tanpa sebuah viewport tag, mereka’d fall back untuk sebuah fixed ~980 pixel wide layout — desktop-ish — lay halaman out di itu width, lalu shrink seluruh hal down untuk fit phone. hasil adalah sebuah readable-shaped halaman itu adalah cara too kecil untuk sebenarnya baca, dengan text Anda memiliki untuk pinch-zoom dan konten itu spilled off sides.

viewport meta tag turns itu off. ini adalah sebuah single line Anda put di <head> dari Anda halaman:

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

width=device-width tells browser “lay this page out at this device’s screen width, measured in CSS pixels” (terjemahan) “lay ini halaman out di ini device’s screen width, diukur di CSS pixels” (tidak niscaya yang sama sebagai -nya mentah hardware-pixel count pada sebuah tinggi-density screen), dan initial-scale=1 says “and don’t zoom in or out when the page first loads.” (terjemahan) “dan jangan zoom di atau out ketika halaman pertama memuat.” itu’s ini. Copy itu line, paste ini near top dari Anda <head>, selesai.

mengapa ini penting

Dua alasan:

• ini membuat Anda halaman readable pada sebuah phone. dengan tag, text adalah legible tanpa zooming dan konten fits screen. Tanpa ini, Anda mendapatkan shrunk-down, tiny-text, horizontal-scroll experience.
• ini adalah apa membuat “responsive design” (terjemahan) “responsive design” sebenarnya berfungsi. jika Anda situs menggunakan modern responsive CSS (layouts itu adapt untuk screen size), itu aturan adalah dimaksudkan untuk kick di berdasarkan browser’s sebenarnya screen width. viewport tag adalah apa tells ini itu width. Tanpa ini, Anda responsive breakpoints dapat tidak apply cara Anda designed them untuk mobile.

sebagian besar modern themes dan situs builders tambahkan ini tag untuk Anda secara otomatis. tetapi older templates, hand-dibangun halaman, dan beberapa halaman builders miss ini — yang adalah mengapa “viewport not set” (terjemahan) “viewport tidak set” masih menampilkan up di audits.

mistake untuk hindari

Anda mungkin see sebuah versi dari ini tag dengan user-scalable=no pada end — itu’s seseorang trying untuk berhenti pengunjung dari zooming so mereka dapat’t “break” (terjemahan) “break” layout. jangan melakukan itu. ini berhenti orang dengan rendah vision dari zooming di untuk baca Anda halaman, dan modern iPhones ignore setting anyway, so ini melakukan tidak ada apa pun except hurt accessibility. Leave zoom alone.

Bagaimana ini fits rest dari mobile SEO

viewport tag adalah satu kecil piece dari bigger mobile picture — ini adalah tentang bagaimana Anda halaman renders pada sebuah phone, yang adalah berbeda dari pengindeksan mobile-pertama (tentang yang versi dari Anda halaman Google membaca). jika Anda’re melakukan sebuah penuh mobile lulus, mobile SEO hub, mobile SEO checklist, dan pengindeksan mobile-pertama cover rest.

ingin tepat attribute reference, accessibility detail, dan cara test tag now itu Google’s old Mobile-Friendly Test adalah hilang? Switch untuk Advanced tab.

TL;DR — viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — hints browser untuk size layout viewport untuk device’s width di CSS pixels alih-alih sebuah legacy ~980px fallback beberapa mobile browser gunakan, yang adalah apa lets responsive CSS media kueri evaluate terhadap device’s nyata width pada mobile. Missing atau misconfigured, ini adalah sebuah classic mobile usability failure (tiny text, horizontal scroll). ini adalah tidak sebuah peringkat factor — Google documents -nya presence sebagai satu hal -nya mobile-friendliness evaluation memeriksa untuk, dan Tidak lebih daripada itu. tidak pernah force user-scalable=no / restrictive maximum-scale: ini fails W3C’s ACT accessibility aturan untuk zoom, though browser overrides exist (iOS 10+ ignores ini oleh default). Google dan Bing merekomendasikan identical tag. Test dengan Lighthouse / PageSpeed Insights — Search Console’s Mobile Usability report dan Mobile-Friendly Test adalah retired December 1, 2023.

masalah ini solves: ~980px virtual viewport

untuk memahami tag Anda memiliki untuk memahami apa ini adalah overriding. Ketika mobile browser adalah baru, lack dari sebuah viewport tag dimaksudkan beberapa dari them akan fall back untuk sebuah fixed layout width dari roughly 980px dan render di itu size — sebuah deliberate accommodation so desktop-sized, pre-responsive situs tidak akan completely break pada early smartphones. browser lalu scaled hasil down untuk physical screen. MDN’s own framing: “If the site isn’t designed to work well on small viewports and this tag is omitted, some mobile browsers render the site using a fixed initial containing block width, typically 980px.” (terjemahan) “jika situs tidak designed untuk berfungsi well pada kecil viewports dan ini tag adalah omitted, beberapa mobile browser render situs menggunakan sebuah fixed awal containing block width, typically 980px.” — ini adalah sebuah browser-spesifik fallback, tidak sebuah universal spec constant.

consequence, di Google’s own kata: “Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read.” (terjemahan) “Tanpa sebuah viewport meta tag, mobile devices render halaman di typical desktop screen widths dan lalu scale halaman down, membuat them difficult untuk baca.” Anda mendapatkan unreadable text, forced pinch-zooming, dan horizontal scrolling — textbook symptoms dari sebuah halaman flagged “not mobile-friendly.” (terjemahan) “tidak mobile-friendly.”

Setting tag “lets you control the width and scaling of the viewport so that it’s sized correctly on all devices.” (terjemahan) “lets Anda control width dan scaling dari viewport so itu ini adalah sized correctly pada semua devices.”

Layout viewport vs. visual viewport (di bawah hood)

Dua “viewports” (terjemahan) “viewports” adalah di play, dan ini adalah worth mempertahankan them straight:

• layout viewport adalah area halaman lays out ke dan itu fixed-position elements attach untuk. width=device-width sets ini untuk device’s screen width di CSS pixels.
• visual viewport adalah apa pengguna adalah saat ini looking di — yang perubahan ketika mereka pinch-zoom. Zooming perubahan visual viewport tanpa mengubah layout viewport.

alasan ini penting untuk SEO dan CSS: Anda responsive media kueri (@media (max-width: 600px) dan friends) adalah evaluated terhadap layout viewport. jika layout viewport adalah stuck di sebuah legacy ~980px fallback karena ada Tidak viewport tag, sebuah phone dapat match Anda desktop breakpoints alih-alih Anda sempit ones. MDN puts ini plainly: “Tanpa it, Anda responsive design dengan breakpoints dan media queries mungkin tidak berfungsi sebagai yang dimaksud pada mobile browsers.” (terjemahan) “Tanpa ini, Anda responsive design dengan breakpoints dan media kueri dapat tidak berfungsi sebagai yang dimaksud pada mobile browser.” tag adalah apa membuat device-width layout viewport so Anda yang dimaksud breakpoints evaluate correctly.

correct tag, dan di mana ini goes

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- ...the rest of your head... -->
</head>

Put ini tinggi di <head>, near charset, sebelum konten-dependent tags. ini adalah nilai Google, Bing, dan Lighthouse semua merekomendasikan — verbatim, ini adalah perbaiki Lighthouse itself suggests. jangan overthink nilai: width=device-width, awal-scale=1 adalah jawaban untuk essentially setiap responsive situs.

Attribute reference

content attribute adalah sebuah comma-separated list dari directives. MDN adalah canonical attribute-oleh-attribute reference; di sini’s apa setiap satu melakukan:

viewport-fit dan interactive-widget adalah keduanya browser-layout edge cases — display-cutout dan virtual-keyboard menangani, respectively — tidak SEO directives; sebagian besar SEO-focused guides skip them entirely.

sebuah kecil tetapi nyata gotcha dari Lighthouse’s own docs: setting initial-scale di bawah 1 dapat trigger sebuah legacy double-tap-untuk-zoom perilaku itu menambahkan interaction delay — lainnya alasan untuk stick dengan initial-scale=1 alih-alih getting clever.

tidak pernah disable zoom: user-scalable=no adalah sebuah anti-pattern

Anda’ll masih temukan user-scalable=no (atau maximum-scale=1) copy-pasted ke old theme boilerplate, biasanya dari sebuah developer siapa tidak ingin pinch-zoom “messing up” (terjemahan) “messing up” mereka layout. ini adalah wrong pada dua counts:

1. ini fails web’s own accessibility conformance test untuk zoom, dan ini berfungsi terhadap WCAG’s intent. W3C’s ACT aturan “Meta viewport allows for zoom” (terjemahan) “Meta viewport memungkinkan untuk zoom” (aturan b4f0c3) applies untuk apa pun viewport tag itu sets user-scalable atau maximum-scale, dan -nya expectation adalah jelas: tag harus tidak set user-scalable=no, dan maximum-scale harus tidak menjadi set di bawah 2. ( aturan carries stated assumptions — ini tidak apply jika halaman memiliki Tidak terlihat konten, offers lainnya cara untuk resize text, atau tidak pernah perlu untuk reflow past sebuah 320×256 CSS-pixel area — tetapi sebuah typical responsive halaman tidak memenuhi itu exceptions.) Per MDN: “Disabling zooming capabilities oleh setting user-scalable untuk a value dari no mencegah orang experiencing low vision conditions dari menjadi able untuk baca dan understand halaman konten. Additionally, WCAG requires a minimum dari 2× scaling; namun, itu best practice adalah untuk enable a 5× zoom.” (terjemahan) “Disabling zooming capabilities oleh setting tidak terdefinisi untuk sebuah nilai dari tidak terdefinisi mencegah orang experiencing rendah vision conditions dari menjadi able untuk baca dan memahami halaman konten. Additionally, WCAG memerlukan sebuah minimum dari 2× scaling; namun, best practice adalah untuk enable sebuah 5× zoom.” Blocking zoom locks out tepat pengguna siapa perlu ini sebagian besar.
2. ini adalah juga browser-spesifik, tidak universal. iOS Safari 10 dan kemudian ignore user-scalable=no dan restrictive maximum-scale oleh default — itu’s sebuah iOS override, tidak sebuah perubahan untuk ACT aturan atau untuk WCAG’s intent. So pada sebuah besar share dari mobile traffic setting accomplishes tidak ada apa pun, sementara pada browser itu melakukan masih honor ini (older Android WebViews, beberapa di-app browser) ini actively fails accessibility test di atas. Zero upside, nyata downside — dan jangan treat “iOS ignores it” (terjemahan) “iOS ignores ini” sebagai proof markup adalah accessible di mana-mana.

aturan adalah sederhana: jangan touch zoom. width=device-width, initial-scale=1 dan tidak ada apa pun else.

adalah ini sebuah peringkat factor?

menjadi precise di sini, karena sebuah lot dari SEO konten overstates ini. Di sini’s persis apa Google documents, dan di mana line untuk industry inference sits.

«What Google documents: the viewport tag is not a direct ranking factor. Google’s own supported-meta-tags doc says plainly that “presence of this tag indicates to Google that the page is mobile friendly” — that’s the whole documented claim: presence signals mobile-friendliness. Google doesn’t document the tag as scored, as a rendering guarantee, or as proof a page’s responsive design is actually good.

» (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh lima, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Di mana practitioners connect dots (industry inference, tidak sebuah Google citation): sebuah missing atau misconfigured viewport tag adalah sebuah umum root penyebab dari mobile-usability failures (tiny text, horizontal scroll, unusable tap targets) itu SEOs umumnya memahami untuk degrade mobile pengalaman halaman. itu connection adalah reasonable dan widely held di industry, tetapi ini adalah sebuah practitioner inference tentang mengapa tag penting — tidak sesuatu Google’s docs state sebagai sebuah peringkat chain.

So honest framing: tag itself tidak scored, dan perbaiki ini karena sebuah halaman tanpa ini renders badly pada phones — tidak karena Google documents ini sebagai sebuah peringkat lever, direct atau indirect. pertahankan ini terpisah dari pengindeksan mobile-pertama too: itu’s sebuah distinct Google Search concept tentang yang versi dari Anda halaman Google primarily menggunakan untuk pengindeksan dan peringkat; viewport tag adalah tentang bagaimana itu mobile HTML renders di sebuah browser, penuh berhenti.

cara test ini — tooling changed di 2023

ini adalah di mana sebagian besar older guides adalah stale. pada December 1, 2023, Google retired Search Console’s Mobile Usability report, Mobile-Friendly Test alat, dan Mobile-Friendly Test API (announced April 2023, confirmed menyelesaikan itu December). Google’s reasoning adalah itu lainnya alat memiliki matured — “banyak other robust resources untuk evaluating mobile usability memiliki emerged, including Lighthouse dari Chrome.” (terjemahan) “banyak lainnya robust resources untuk evaluating mobile usability memiliki emerged, including Lighthouse dari Chrome.” So jika sebuah tutorial tells Anda untuk open Search Console → Mobile Usability untuk periksa Anda viewport, itu report Tidak lebih lama ada.

Layer ini memeriksa alih-alih relying pada satu alat: konfirmasi tag ada di mentah disajikan HTML (tidak hanya setelah JavaScript berjalan), konfirmasi Anda responsive breakpoints sebenarnya apply di phone widths, test zooming untuk 200% tanpa layout breaking ( resize perilaku WCAG’s intent adalah dibangun sekitar), dan spot-periksa di lebih daripada satu browser — sebuah iOS Safari-hanya periksa dapat hide sebuah zoom-restriction bug itu Android atau di-app browser masih enforce.

Anda saat ini toolkit:

• Lighthouse (di Chrome DevTools). relevant audit secara historis baca “Melakukan tidak memiliki a <meta name="viewport"> tag dengan width atau initial-scale” (terjemahan) “melakukan tidak memiliki sebuah tidak terdefinisi tag dengan tidak terdefinisi atau tidak terdefinisi” — ini fails unless <head> memiliki sebuah meta name="viewport" milik siapa content mencakup width=. sebagai dari Lighthouse 13 ini adalah folded ke “Optimize viewport untuk mobile” (terjemahan) “mengoptimalkan viewport untuk mobile” insight.
• PageSpeed Insights — berjalan Lighthouse plus field Core Web Vitals data.
• Chrome DevTools device toolbar — emulate phone dimensions dan eyeball ini.
• Bing’s Mobile Friendliness Test alat — Bing memeriksa viewport dan zoom-control configuration too, dan recommends yang sama tag Google melakukan.
• View sumber / nyata-device periksa — sometimes fastest test adalah untuk hanya look di <head> pada Anda phone.

umum mistakes

• Tidak tag di semua (“viewport tidak set” (terjemahan) “viewport tidak set”) — halaman renders di legacy desktop-ish width dan shrinks.
• sebuah hardcoded pixel width like width=1024 alih-alih device-width — sebuah tag ada, tetapi ini masih tidak match halaman untuk device. Lighthouse dan nyata mobile-friendliness keduanya ingin sebuah usable width= nilai, tidak hanya apa pun tag.
• initial-scale di bawah 1 — dapat trigger legacy double-tap-zoom delay.
• user-scalable=no / restrictive maximum-scale — copy-pasted dari old boilerplate; accessibility anti-pattern, ignored pada iOS anyway.

untuk di mana ini sits di lebih luas mobile berfungsi — configuration, konten parity, speed — see mobile SEO hub, mobile SEO checklist, dan mobile-pertama pengindeksan. untuk tag itself sebagai bagian dari wider pada-halaman tag family, meta tags cluster adalah map.

AI summary

sebuah condensed take pada Advanced versi:

«- The viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — hints browsers to size the layout viewport to the device’s width in CSS pixels instead of a legacy ~980px fallback some mobile browsers use. It’s what lets responsive CSS media queries evaluate against the device’s real width on mobile.

• Without it: some mobile browsers render the page at that wider fallback and shrink it — tiny text, horizontal scroll, breakpoints that may not apply as intended. Google: “Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down.”
• Layout viewport vs. visual viewport: width=device-width sets the layout viewport (what media queries evaluate against) and acts as a minimum width; pinch-zoom changes the visual viewport only.
• Attributes: width, initial-scale, minimum-scale, maximum-scale, user-scalable, and the newer interactive-widget and viewport-fit (both browser-layout edge cases, not SEO directives). Use width=device-width, initial-scale=1 and nothing else.
• Never disable zoom: user-scalable=no / a maximum-scale below 2 fails the W3C’s ACT rule for zoom (b4f0c3) and works against WCAG’s resize intent — and iOS 10+ overrides it by default, so it’s an accessibility downside with zero upside anywhere.
• Ranking: Google documents only that presence “indicates to Google that the » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam puluh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) « page is mobile friendly” — not that the tag is scored, and not a stated ranking chain through usability signals (that link is industry inference, not a Google citation). Distinct from mobile-first indexing (which version is indexed, not how it renders).
• Testing changed: Search Console’s Mobile Usability report, the Mobile-Friendly Test tool, and its API were retired Dec 1, 2023 — use Lighthouse, PageSpeed Insights, DevTools device toolbar, or Bing’s Mobile Friendliness Test; layer in a 200%-zoom check and more than one browser.
• Common mistakes: no tag, hardcoded width=1024, initial-scale < 1, copy-pasted user-scalable=no. Google and Bing recommend the identical value. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam puluh, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Dokumentasi resmi

Utama-sumber documentation dan standards references.

Google

• Meta tags dan attributes itu Google mendukung — lists viewport tag dan status -nya presence “indicates to Google that the page is mobile friendly.” (terjemahan) “indicates untuk Google itu halaman adalah mobile friendly.” saat ini, langsung sumber (Google’s dedicated older configure-viewport doc memiliki telah retired).
• melakukan tidak memiliki sebuah <meta name="viewport"> tag dengan width atau awal-scale (Lighthouse) — audit definition, desktop-width-fallback explanation, dan recommended perbaiki code.
• Apa Viewport? — Chrome untuk Developers / web.dev pada legacy ~980px default dan layout vs. visual viewport.
• role dari pengalaman halaman di membuat helpful konten (Apr 2023) — di mana Google announced Dec 1, 2023 retirement dari Mobile Usability report dan Mobile-Friendly Test alat/API, pointing untuk Lighthouse.

«Standards / technical reference

• <meta name="viewport"> (MDN Web Docs) — the primary attribute-by-attribute reference: width, initial-scale, minimum-scale, maximum-scale, user-scalable, interactive-widget, viewport-fit, the iOS 10+ override behavior, and the WCAG accessibility warning.
• MDN: Responsive design — the viewport meta tag — the plain statement that breakpoints and media queries “may not work as intended” without the tag.
• MDN: CSS viewport concepts — qualifies the ~980px fallback to “some mobile browsers,” not a universal default.
• W3C WAI: ACT rule “Meta viewport allows for zoom” (b4f0c3) — the precise accessibility conformance test: user-scalable=no and maximum-scale under 2 fail, with the rule’s own applicability and assumptions spelled out. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam puluh enam, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Bing / Microsoft

• Bing’s Mobile Friendliness Test alat (di Bing Webmaster alat) evaluates viewport dan zoom-control configuration, konten width, text readability, tap-target spacing, dan incompatible plug-ins, dan recommends yang sama width=device-width, initial-scale=1 nilai Google melakukan. (Bing help-doc URLs move periodically; periksa saat ini Bing Webmaster alat help center untuk langsung halaman.)

Quotes dari sumber

pada—record statements dari Google’s documentation dan MDN. setiap tautan jumps untuk quoted passage pada sumber halaman di mana sebuah deep tautan adalah tersedia.

Google — apa tag melakukan dan mengapa

• “Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it’s sized correctly on all devices.” (terjemahan) “Tanpa sebuah viewport meta tag, mobile devices render halaman di typical desktop screen widths dan lalu scale halaman down, membuat them difficult untuk baca. Setting viewport meta tag lets Anda control width dan scaling dari viewport so itu ini adalah sized correctly pada semua devices.” — Lighthouse / Chrome untuk Developers (Google). Jump untuk quote
• “Presence of this tag indicates to Google that the page is mobile friendly.” (terjemahan) “Presence dari ini tag indicates untuk Google itu halaman adalah mobile friendly.” — Meta tags dan attributes itu Google mendukung, Google Search Central docs. Baca doc

MDN — accessibility warning

• “Disabling zooming capabilities oleh setting user-scalable untuk a value dari no mencegah orang experiencing low vision conditions dari menjadi able untuk baca dan understand halaman konten.” (terjemahan) “Disabling zooming capabilities oleh setting tidak terdefinisi untuk sebuah nilai dari tidak terdefinisi mencegah orang experiencing rendah vision conditions dari menjadi able untuk baca dan memahami halaman konten.” — MDN Web Docs. Baca reference
• pada user-scalable, minimum-scale, dan maximum-scale: “Browser settings can ignore this rule, and iOS10+ ignores it by default.” (terjemahan) “browser settings dapat ignore ini aturan, dan iOS10+ ignores ini oleh default.” Baca reference

W3C — accessibility conformance test untuk zoom

• Applicability: “Ini rule applies untuk setiap content attribute pada a meta element dengan a name attribute value dari viewport untuk yang di least satu dari itu berikut adalah benar: itu content attribute value memiliki itu user-scalable property; atau itu content attribute value memiliki itu maximum-scale property.” (terjemahan) “ini aturan applies untuk setiap tidak terdefinisi attribute pada sebuah tidak terdefinisi element dengan sebuah tidak terdefinisi attribute nilai dari tidak terdefinisi untuk yang setidaknya satu dari berikut adalah benar: tidak terdefinisi attribute nilai memiliki tidak terdefinisi property; atau tidak terdefinisi attribute nilai memiliki tidak terdefinisi property.” Expectation: attribute nilai harus tidak set user-scalable untuk no, dan harus tidak set maximum-scale di bawah 2. — W3C WAI, ACT aturan “Meta viewport allows for zoom” (terjemahan) “Meta viewport memungkinkan untuk zoom” (b4f0c3). Baca aturan

MDN — qualifying legacy fallback dan breakpoint perilaku

• “If the site isn’t designed to work well on small viewports and this tag is omitted, some mobile browsers render the site using a fixed initial containing block width, typically 980px.” (terjemahan) “jika situs tidak designed untuk berfungsi well pada kecil viewports dan ini tag adalah omitted, beberapa mobile browser render situs menggunakan sebuah fixed awal containing block width, typically 980px.” — MDN, CSS viewport concepts. Baca reference
• “Without it, your responsive design with breakpoints and media queries may not work as intended on mobile browsers.” (terjemahan) “Tanpa ini, Anda responsive design dengan breakpoints dan media kueri dapat tidak berfungsi sebagai yang dimaksud pada mobile browser.” — MDN, Responsive design guide. Baca reference

Google — retiring mobile alat (Dec 2023) (melalui mesin pencari Land’s verbatim coverage)

• “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 tahun since kami initially launched ini report, banyak lainnya robust resources untuk evaluating mobile usability memiliki emerged, including Lighthouse dari Chrome.” Baca coverage

Yang viewport configuration seharusnya I gunakan?

untuk hampir setiap situs jawaban adalah yang sama satu line — tetapi orang talk themselves ke “clever” (terjemahan) “clever” variants itu penyebab masalah. Click melalui untuk land pada right nilai (dan untuk aturan out anti-patterns).

Viewport tag checklist

sebuah quick lulus untuk konfirmasi tag adalah present dan sane:

• sebuah <meta name="viewport"> tag ada di <head> (view sumber atau periksa Anda template/theme head sebagian).
• ini adalah placed tinggi di <head>, near charset, sebelum konten-dependent tags.
• content nilai adalah width=device-width, initial-scale=1.
• width adalah device-width — tidak sebuah hardcoded pixel angka like 1024.
• initial-scale adalah 1 — tidak di bawah 1 (menghindari double-tap-zoom delay).
• Tidak user-scalable=no dan Tidak restrictive maximum-scale (zoom tetap enabled — accessibility).
• Verified dengan Lighthouse atau PageSpeed Insights (tidak retired Mobile-Friendly Test / Mobile Usability report).
• Spot-diperiksa pada sebuah nyata phone atau di Chrome DevTools device toolbar — text adalah readable, Tidak horizontal scroll.
• Anda responsive CSS breakpoints sebenarnya apply di phone widths (mereka dapat tidak tanpa sebuah correct viewport tag).
• Zoomed untuk 200% dan layout masih berfungsi tanpa konten getting clipped.
• Spot-diperiksa di lebih daripada satu browser/mesin, tidak hanya Anda default — sebuah iOS-hanya periksa dapat hide sebuah zoom restriction itu lainnya browser masih enforce.

«## Viewport meta tag — cheat sheet » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh lima, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

** satu line Anda ingin**

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

Google, Bing, dan Lighthouse semua merekomendasikan ini tepat nilai.

Attribute reference

Symptoms dari sebuah missing/rusak tag

• Tiny, unreadable text pada mobile.
• Horizontal scrolling / pinch-untuk-zoom needed.
• Responsive breakpoints tidak applying sebagai yang dimaksud pada phones.
• “Viewport not set” (terjemahan) “Viewport tidak set” di sebuah audit.

melakukan / jangan

• ✅ width=device-width, initial-scale=1, tinggi di <head>.
• ❌ Hardcoded width=1024.
• ❌ initial-scale di bawah 1.
• ❌ user-scalable=no / maximum-scale=1.

peringkat reality: tidak sebuah direct peringkat factor. Google documents hanya itu -nya presence indicates mobile-friendliness — usability→halaman-experience chain adalah industry inference, tidak sebuah Google-terdokumentasi peringkat mechanism.

Test dengan: Lighthouse · PageSpeed Insights · Chrome DevTools device toolbar · Bing Mobile Friendliness Test. Tidak Mobile-Friendly Test atau Search Console Mobile Usability report — keduanya retired Dec 1, 2023.

Viewport anti-patterns

four cara orang mendapatkan ini tag wrong, dan apa untuk melakukan alih-alih.

1. Disabling zoom (user-scalable=no / maximum-scale=1). intent adalah biasanya “stop pinch-zoom from breaking my layout.” (terjemahan) “berhenti pinch-zoom dari breaking my layout.” reality: ini fails W3C’s accessibility conformance aturan untuk zoom dan locks rendah-vision pengguna out dari scaling text, dan iOS 10+ overrides ini oleh default — so ini melakukan tidak ada apa pun pada sebuah huge share dari traffic sementara masih failing itu accessibility test pada browser itu melakukan honor ini. Perbaiki: hapus ini entirely; pertahankan hanya width=device-width, awal-scale=1.

2. Hardcoding sebuah pixel width (width=1024). sebuah viewport tag ada, so audits sometimes half-lulus, tetapi halaman adalah masih pinned untuk sebuah fixed width itu tidak match nyata devices. Perbaiki: gunakan width=device-width.

3. initial-scale di bawah 1 untuk “fit more on screen.” (terjemahan) “fit lebih pada screen.” Shrinking awal zoom dapat trigger legacy double-tap-untuk-zoom perilaku itu menambahkan interaction delay, dan ini membuat text lebih kecil untuk everyone. Perbaiki: initial-scale=1 dan let Anda responsive CSS tangani layout.

4. Relying pada retired GSC Mobile Usability report untuk catch masalah. itu report, Mobile-Friendly Test alat, dan -nya API adalah retired December 1, 2023. jika Anda QA proses masih says “check Mobile Usability,” (terjemahan) “periksa Mobile Usability,” ini adalah silently melakukan tidak ada apa pun. Perbaiki: audit dengan Lighthouse / PageSpeed Insights alih-alih.

Bonus — treating tag sebagai sebuah peringkat lever. ini adalah tidak satu. menambahkan ini tidak akan lift rankings; ini hanya membuat halaman render correctly so ini dapat lulus mobile-friendliness memeriksa itu melakukan feed pengalaman halaman. Set ini setelah, correctly, dan move pada.

periksa dan audit Anda viewport tag

cara untuk verify tag di seluruh sebuah halaman atau sebuah seluruh situs, dari sebuah quick console snippet untuk sebuah crawl.

DevTools console — inspect saat ini halaman’s viewport tag

// Paste into the Chrome DevTools console on the page you're checking.
const vp = document.querySelector('meta[name="viewport"]');
if (!vp) {
  console.warn('❌ No viewport meta tag — "viewport not set".');
} else {
  const c = vp.getAttribute('content') || '';
  console.log('viewport content:', c);
  console.log(/width\s*=\s*device-width/i.test(c) ? '✅ width=device-width' : '⚠️ width is not device-width');
  console.log(/user-scalable\s*=\s*no/i.test(c) || /maximum-scale\s*=\s*[01](\.0)?\b/i.test(c)
    ? '⚠️ zoom is restricted — accessibility anti-pattern' : '✅ zoom not restricted');
}

Bookmarklet — satu-click periksa

javascript:(function(){var v=document.querySelector('meta[name=viewport]');alert(v?('viewport: '+v.content):'NO VIEWPORT TAG (viewport not set)');})();

Shell — fetch sebuah URL dan grep mentah HTML head

# Prints the viewport tag from a page's server-rendered HTML (or nothing if absent).
curl -s https://example.com | grep -io '<meta[^>]*name=["'\'']*viewport[^>]*>'

Shell — flag halaman itu restrict zoom di seluruh sebuah list dari URLs

# urls.txt = one URL per line. Prints any page whose viewport disables/limits zoom.
while read -r u; do
  html=$(curl -s "$u")
  echo "$html" | grep -iq 'name=["'\'']*viewport' || { echo "MISSING  $u"; continue; }
  echo "$html" | grep -io '<meta[^>]*viewport[^>]*>' | grep -Eiq 'user-scalable=no|maximum-scale=[01]' \
    && echo "ZOOM-OFF $u"
done < urls.txt

Regex — match tag di sumber (untuk sebuah code penelusuran / linter aturan)

<meta[^>]+name=["']?viewport["']?[^>]*>

untuk flag anti-pattern secara khusus, penelusuran untuk:

viewport[^>]*(user-scalable\s*=\s*no|maximum-scale\s*=\s*[01])

untuk sebuah seluruh-situs sweep, sebuah crawler (Screaming Frog, Ahrefs situs Audit) adalah lebih cepat daripada scripting — see alat tab.

alat untuk memeriksa viewport tag

• Lighthouse (Chrome DevTools → Lighthouse, atau CLI) — direct replacement untuk retired Mobile-Friendly Test; berjalan viewport audit (“Optimize viewport untuk mobile” (terjemahan) “mengoptimalkan viewport untuk mobile” di Lighthouse 13+) plus rest dari mobile usability dan performa.
• PageSpeed Insights — Lighthouse di browser, dengan field Core Web Vitals data alongside lab audit.
• Chrome DevTools device toolbar — toggle device emulation dan eyeball halaman di phone dimensions; fastest cara untuk see sebuah rusak viewport.
• Bing Mobile Friendliness Test alat (Bing Webmaster alat) — memeriksa viewport dan zoom-control configuration dan recommends yang sama tag.
• Screaming Frog SEO Spider / Ahrefs situs Audit — crawl seluruh situs dan surface halaman missing viewport tag (atau restricting zoom) di scale, alih-alih memeriksa URLs satu di sebuah time.
• View sumber pada Anda phone — lowest-tech periksa: adalah tag sebenarnya di <head> dari disajikan HTML?

Note retirements: Search Console’s Mobile Usability report, Mobile-Friendly Test alat, dan Mobile-Friendly Test API adalah semua retired pada December 1, 2023 — jangan reach untuk them.

viewport tag adalah present tetapi halaman masih looks desktop-sized

Symptom: sumber berisi sebuah viewport tag, namun phones tampilkan tiny text atau sebuah wide layout. mungkin penyebab: ada duplicate viewport tags, tag adalah injected too late, atau responsive CSS tidak pernah memuat. Perbaiki: pertahankan satu tag di server-dirender <head>, hapus conflicting copies, dan verify itu yang diharapkan media kueri adalah applied di dirender halaman.

Mobile layout berfungsi di pertama dan lalu jumps wider

Symptom: awal layout fits, lalu horizontal scrolling muncul setelah muat. mungkin penyebab: JavaScript menambahkan sebuah fixed-width widget, table, banner, atau iframe setelah viewport adalah established. Perbaiki: inspect dirender DOM di moment overflow dimulai dan constrain injected element. Mengubah viewport nilai cannot repair sebuah element itu adalah intrinsically wider daripada screen.

Pinch zoom adalah blocked

Symptom: pengguna cannot zoom, bahkan though halaman jika tidak fits. mungkin penyebab: user-scalable=no atau sebuah restrictive maximum-scale tetap di viewport konten. Perbaiki: hapus itu restrictions dan retest dengan browser zoom dan OS text scaling. melakukan tidak treat sebuah iOS override sebagai proof itu markup adalah accessible di mana-mana.

sebuah crawler reports tag missing tetapi browser menampilkan ini

Symptom: sebuah dirender browser sees tag, sementara sebuah mentah-HTML crawler melakukan tidak. mungkin penyebab: client-side JavaScript inserts ini. Perbaiki: emit tag di awal document head. sebuah foundational rendering instruction seharusnya tidak bergantung pada sebuah script berjalan successfully.

Validate sebuah viewport-tag perubahan

Resources worth Anda time

My related writing

• Beginner’s Guide untuk SEO teknis — di mana mobile rendering dan pengalaman halaman fit bigger teknis picture.
• Core Web Vitals: Apa mereka adalah & cara meningkatkan Yours — performa side dari mobile experience itu sits berikutnya untuk viewport tag.

My speaking

• Bagaimana Penelusuran berfungsi (SlideShare) — my walkthrough dari crawling, rendering, pengindeksan, dan peringkat, including bagaimana Googlebot melakukan crawl dan renders sebagai sebuah smartphone. (Standing disclaimer: “Ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.” (terjemahan) “ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.”)

«From around the industry

• <meta name="viewport"> (MDN Web Docs) — the precise attribute-by-attribute reference, iOS override behavior, and the WCAG accessibility warning.
• Does not have a <meta name="viewport"> tag with width or initial-scale (Lighthouse) (Chrome for Developers) — the audit definition, the desktop-width-fallback explanation, and the recommended fix.
• What the Viewport? (Chrome for Developers) — the legacy ~980px default and layout vs. visual viewport, explained by Google.
• Meta tags and attributes that Google supports (Google Search Central) — the current doc that names the viewport tag as a mobile-friendliness signal.
• Google Officially Drops Mobile Usability Report, Mobile-Friendly Test Tool and API (Search Engine Land) — the December 2023 retirements and the Lighthouse recommendation. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus empat puluh delapan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- You can stop using user-scalable=no and maximum-scale=1 in viewport meta tags now (Luke Plant) — background on why the restrictive zoom attributes existed and why they’re obsolete and overridden on iOS.
• A Beginner’s Guide to Viewport Meta Tags (Semrush) — a well-rounded competitor explainer covering interactive-widget, the iOS 10 override, and the WCAG warning. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus empat puluh delapan, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Uji pemahaman Anda: Viewport Meta Tag

Five quick pertanyaan pada viewport meta tag. Pick sebuah jawaban untuk setiap, lalu periksa.

Log perubahan