Juni 02, 2020

Mengatasi Does not have a <meta name="viewport"> tag with width or initial-scale

Memperbaiki Does not have a <meta name="viewport"> tag with width or initial-scale akan menambah skor SEO pada audit laman situsweb dengan menggunakan Lighthouse di browser Chrome. Ini adalah audit pertama atau letaknya paling atas dari 13 macam audit dalam kelompok SEO di Lighthouse.

Meski letaknya mungkin tak sepenuhnya menggambarkan tingkat atau bobot kepentingannya, namun setiap audit harus diperbaiki untuk meningkatkan 'kepatuhan' laman dalam mengadopsi prinsip SEO. Cara lain dalam melihat elemen viewport ini adalah bahwa untuk memperbaikinya tidak sulit, dan karena itu lebih baik diletakkan di posisi paling atas.

Ini yang disebut sebagai low hanging fruits, kerjakan dan selesaikan lebih dulu hal yang mudah sebelum mulai bekerja untuk menyelesaikan pekerjaan lain yang lebih sulit dan makan waktu lama untuk dikerjakan. Dengan meta tag viewport Anda bisa mengontrol lebar dan skala viewport sehingga ukurannya benar di semua perangkat.

Memperbaiki Does not have a <meta name="viewport"> tag with width or initial-scale

Banyak mesin pencari, terutama Google, memberi peringkat bagi halaman berdasarkan seberapa ramah laman itu diakses oleh smartphone atau ponsel pintar. Tanpa adanya meta tag viewport, ponsel akan merender halaman dengan lebar layar desktop biasa dan kemudian memperkecil halaman ketika dutampilkan, yang membuatnya sulit untuk dibaca oleh pengunjung.

Sebuah laman akan gagal dalam audit viewport Lighthouse, kecuali memenuhi semua persyaratan sebagi berikut:
  1. Bagian di dalam <head> berisi tag <meta name = "viewport">.
  2. Meta tag viewport berisi atribut konten.
  3. Di dalam nilai atribut konten terdapat teks width=


Walau Lighthouse tidak memeriksa apakah lebar laman sama dengan lebar ponsel, juga tidak memeriksa angka initial-scale, namun Anda masih harus memasukkan kedua elemen itu agar halaman bisa di-render dengan benar di perangkat seluler.

Untuk memperbaiki elemen meta tag ini, salin kode di bawah ini dan letakkan di bagian awal <head> pada template Anda.

<meta content='width=device-width, initial-scale=1, maximum-scale=5' name='viewport'/>

Lihat Video

Penambahan elemen maximum-scale=5 memungkinkan pengunjung untuk memperbesar laman dengan cara merenggangkan layar, jika hendak melihat lebih dekat ke satu bagian teks atau gambar. Jalankan lagi Lighthouse setelah menambahkan meta tag ini di template Anda.
Label: Lighthouse, SEO
Bagikan ke: WhatsApp, Email. Print!.

aroengbinang, seorang penyusur jalan.
Traktir BA secangkir kopi? Scan via 'Bayar' GoPay.