Di banyak negara, ponsel cerdas lebih umum digunakan untuk menjelajahi Internet daripada komputer. Oleh karena itu, sangat penting untuk mengadaptasi situs untuk perangkat seluler. Cari tahu apakah halaman Anda nyaman bagi pengguna smartphone dengan alat khusus di Search Console.
Menggunakan
Sangat mudah untuk memeriksa apakah suatu halaman nyaman untuk dilihat di smartphone: cukup tentukan URL lengkapnya. Verifikasi biasanya membutuhkan waktu kurang dari satu menit. Jika ada pengalihan di halaman tersebut, pengalihan juga akan diproses.
Berdasarkan hasil pemeriksaan, Anda akan melihat bagaimana tampilan halaman pada smartphone dan mengetahui masalah apa yang mungkin timbul saat melihatnya. Paling sering ini adalah cetakan kecil (sulit dibaca di layar kecil) dan elemen Flash (tidak didukung di sebagian besar perangkat seluler).
Nilai tag meta area pandang tidak disetel
Kode halaman tidak menentukan properti viewport, yang memberi tahu browser cara mengubah ukuran elemen halaman dengan benar agar sesuai dengan ukuran layar perangkat. Untuk membuat situs Anda ditampilkan dengan benar pada ukuran layar yang berbeda, sesuaikan area pandang menggunakan tag meta area pandang. Untuk detailnya, lihat bagian Dasar-Dasar Desain Web yang Responsif dari panduan kami.
Tag meta area pandang harus memiliki lebar perangkat
Tidak mungkin menyesuaikan halaman untuk layar dengan ukuran berbeda, karena properti viewport dengan lebar tetap ditentukan dalam kodenya. Dalam hal ini, Anda perlu menerapkan desain responsif dengan menyesuaikan penskalaan halaman agar pas dengan layar.
Konten lebih lebar dari layar
Laporan ini mengidentifikasi halaman yang membutuhkan pengguliran horizontal untuk melihat teks dan gambar. Masalah ini terjadi saat dimensi dalam gaya CSS disetel ke nilai absolut atau saat gambar yang digunakan dirancang untuk lebar jendela browser tertentu. Pastikan lebar dan nilai posisi elemen CSS relatif dan gambar diskalakan. Untuk detail tentang ini, lihat bagian Ukuran Konten untuk Area Tampilan dari tutorial kami.
Cetakan terlalu kecil
Laporan ini mencantumkan halaman dalam cetakan kecil yang harus digunakan pengguna untuk membaca gerakan zoom. Setelah mengatur viewport, Anda perlu menentukan ukuran font agar ditampilkan dengan benar di dalamnya.
Elemen interaktif terlalu dekat
Laporan ini mencantumkan halaman dengan item navigasi yang sangat berdekatan sehingga sulit bagi pengguna untuk menyentuhnya tanpa menyentuh yang lain. Jaga ukuran optimal tombol, tautan, dll., Dan jarak antar tombol, sehingga pengguna perangkat seluler nyaman berinteraksi dengannya.
Apa berikutnya?
- Cara mengetahui masalah saat melihat situs Anda di perangkat seluler yang kami temukan menggunakan laporan khusus (untuk ini, Anda perlu memverifikasi kepemilikan situs di akun Search Console Anda)
- Cara mengoptimalkan situs Anda untuk perangkat seluler (untuk halaman di WordPress, Joomla! Dan sistem manajemen konten lainnya)
Selamat siang untuk semua, teman dan tamu blog saya. Hari ini artikel saya akan menjadi agak pendek, tetapi tidak kehilangan relevansinya hari ini. Yaitu, saya ingin memberi tahu Anda tentang hal seperti google memeriksa versi seluler situs. Dan mungkin saya bahkan tidak akan menulis artikel yang begitu jelas jika cek ini tidak membuat saya bingung.
Memeriksa dengan google
Sebelumnya, orang tidak peduli dengan desain responsif atau seluler. Tetapi kemudian, ketika informasi muncul bahwa mesin pencari akan menurunkan hasil mesin pencari untuk situs yang tidak memiliki versi seluler, orang-orang itu menahan diri (seperti halnya dengan HTTPS). Orang-orang segera mulai memesan versi seluler dari freelancer, beberapa memasang plugin khusus yang dapat berfungsi secara tidak benar.
Jadi, ketika seseorang memperoleh tata letak adaptif atau versi seluler, mereka segera memeriksanya di layanan Google khusus, yang hanya melihat bagaimana tata letak Anda memenuhi persyaratan. Sekarang antarmuka telah sedikit berubah, tetapi intinya tetap sama.
Untuk memeriksa sendiri kasus ini, Anda harus pergi ke layanan ini - search.google.com/search-console/mobile-friendly... Setelah itu, di bilah URL, masukkan alamat situs ini dan tunggu. Setelah beberapa saat, Anda akan diberikan semua informasi tentang apakah situs Anda memenuhi persyaratan tata letak Google untuk seluler.
Saya tidak mengerti...
Saya tahu betul bahwa situs saya telah diadaptasi, terutama karena saya baru saja mengubah tata letaknya. Tetapi baru-baru ini, untuk bersenang-senang, saya pergi ke kebaktian ini untuk melihat apa yang akan dikatakan Gosha tua, dan sangat terkejut. Faktanya adalah bahwa layanan tersebut memberi tahu saya bahwa blog saya tidak pernah diadaptasi dan tidak dapat dibaca dengan baik untuk perangkat seluler.
Saya tidak mengerti apa masalahnya, jadi saya mulai mencari solusi di Internet. Dan saya menemukannya di satu situs. Ternyata semuanya ada di file robots.txt. Saya menuliskannya dalam hitam dan putih sehingga mesin pencari tidak akan mengindeks file tema saya, jadi dia tidak melihat versi seluler apa pun.
Setelah saya menghapus satu baris dari robot ( Larang: / wp-content / themes / my theme), kemudian layanan segera menentukan bahwa versi seluler saya normal. Jadi jangan khawatir jika Anda tiba-tiba mengalami hal yang sama. Kemungkinan besar, Anda tidak mengizinkan Google mengindeks tema Anda.
Nah, kali ini saya mungkin akan menyelesaikan artikel saya hari ini. Saya harap Anda merasa terbantu. Seperti yang dapat Anda lihat google memeriksa versi seluler situs memungkinkan Anda untuk melihat bagaimana situs tersebut sesuai dengan persyaratannya. Namun nyatanya, jarang sekali menemukan situs web yang tidak memiliki versi seluler atau daya tanggap sendiri. Sedikit lebih banyak waktu akan berlalu, dan semua situs yang baru dibuat akan secara otomatis memiliki sertifikat SSL.
Terima kasih telah membaca saya. Saya pasti akan menunggu Anda lagi di halaman blog saya. Sementara itu, saya sarankan Anda membaca artikel lainnya. Saya yakin Anda akan menemukan banyak hal menarik untuk diri Anda sendiri. Semoga beruntung untukmu. Sampai jumpa!
Salam Hormat, Dmitry Kostin.
Saat ini tidak perlu lagi meyakinkan siapa pun tentang perlunya situs versi seluler. Toh, setiap hari semakin banyak pengunjung dari smartphone dan tablet. Saat artikel ini ditulis, sekitar 20% pengunjung blog saya menggunakan perangkat seluler untuk menjelajah. Artinya, satu dari lima mengunjungi situs web saya dari ponsel atau tablet.
Beberapa tahun yang lalu, saya bahkan tidak memikirkan pengunjung seperti itu, tetapi ketika jumlah mereka melebihi 10% dari jumlah total, saya mulai menggunakan tata letak responsif. Ini memungkinkan untuk menampilkan konten dengan benar di perangkat seluler dan meningkatkan loyalitas pengunjung dan mesin telusur ke situs.
Versi seluler situs dan desain responsif bukanlah hal yang sama. Artikel ini akan berfokus pada pengujian tata letak responsif saat desain situs berubah bergantung pada resolusi layar perangkat pengunjung.
Untuk memastikan bahwa situs Anda ditampilkan dengan benar di perangkat seluler, Anda perlu memeriksanya, dan untuk ini ada beberapa layanan dan alat yang berguna.
Pemeriksaan cepat tata letak responsif
Browser Internet populer (browser) Mozilla Firefox dilengkapi dengan alat bawaan untuk memeriksa desain situs web untuk kesesuaian tampilan pada perangkat seluler. Untuk menggunakannya, buka "Menu" - "Pengembangan" - "Desain Responsif". Atau cukup tekan tiga tombol pada keyboard secara bersamaan ++ [M]
Anda akan melihat sesuatu seperti berikut:
Dengan mengubah resolusi dan orientasi layar, Anda dapat memeriksa bagaimana situs Anda akan ditampilkan kepada pengunjung seluler.
Google Browser Chrome juga memiliki dukungan bawaan untuk memeriksa daya tanggap desain situs. Untuk melakukan ini, buka menu, pilih item "Alat tambahan", lalu "alat pengembang" (atau tekan tombol ).
Setelah itu, klik ikon desain responsif (atau secara bersamaan klik pada keyboard ++ [M]):
Di tengah layar, Anda akan melihat bagaimana situs Anda akan ditampilkan di layar perangkat seluler:
Pengujian SEO untuk desain seluler
Seperti yang Anda ketahui, dua pemimpin pencarian dunia Google dan Yandex memiliki pendapat mereka sendiri yang tidak sopan tentang bagaimana seharusnya tampilan situs di layar perangkat seluler. Dan jika situs tersebut dianggap tidak nyaman bagi pengunjung seluler, maka itu akan turun di hasil penelusuran. Jadi, dari sudut pandang SEO, jika Anda tidak ingin kehilangan pengunjung seluler, maka Anda tidak hanya harus memiliki desain yang responsif, tetapi mesin pencari juga harus mempertimbangkannya sedemikian rupa, yaitu cocok untuk perangkat seluler.
Untuk memeriksa kemampuan beradaptasi menggunakan layanan Google, pergi ke alamat berikut dan ketik nama situs Anda: https://www.google.com/webmasters/tools/mobile-friendly/.
Seperti inilah hasil pengecekan blog saya:
Dengan Yandex, ini sedikit lebih rumit, untuk verifikasi, Anda harus mendaftar ke layanan Yandex.Webmaster dan menggunakan antarmuka versi beta:
Layanan online untuk menguji kemampuan beradaptasi
Tugas utama layanan ini adalah menampilkan (menunjukkan) bagaimana tampilan situs Anda di perangkat seluler. Ada banyak situs dengan fungsi seperti itu. Saya akan memberikan beberapa saja. Dalam kebanyakan kasus, mereka menduplikasi fungsi bawaan FireFox dan Chrome.
Google resizer
Saya akan mulai lagi dengan Google, yang memiliki layanan demonstrasi responsifnya sendiri: http://design.google.com/resizer/#
Screenfly Quirktools
Layanan cantik kedua adalah http://quirktools.com/screenfly/. Ini akan menunjukkan bagaimana situs Anda mungkin terlihat bahkan di TV!
Symby.ru beradaptasi
Nah, agar tidak menyinggung "produsen dalam negeri" saya akan memberikan contoh situs lain: http://symby.ru/adaptest/. Pada satu halaman, Anda akan melihat beberapa tampilan sekaligus dengan resolusi layar berbeda.
Kecepatan versi seluler situs
Setelah Anda memastikan bahwa situs Anda responsif dan ditampilkan dengan benar di layar sebagian besar perangkat, Anda harus memeriksa kecepatannya. Sekali lagi, diterapkan untuk pengunjung seluler.
PageSpeed \u200b\u200bInsights
Google, seperti biasa, adalah yang terdepan: https://developers.google.com/speed/pagespeed/insights/. Layanan ini akan menunjukkan kepada Anda bagaimana tampilan situs di layar ponsel dan memberikan rekomendasi tentang cara mengoptimalkan kode untuk meningkatkan kecepatan pemuatan di perangkat seluler.
WebPageTest
Dan sebagai kesimpulan, saya akan memberikan contoh layanan yang tidak hanya akan menunjukkan tampilan situs di perangkat seluler, tetapi juga menunjukkan kecepatan kerjanya: http://www.webpagetest.org/
kesimpulan
Menurut pendapat saya, dalam pekerjaan sehari-hari, saat melakukan perubahan pada desain situs, lebih mudah menggunakan kemampuan bawaan browser FireFox dan Chrome. Setelah itu tentunya Anda perlu mengecek loyalitas search engine terhadap desain Anda. Dan baru setelah itu, untuk menenangkan jiwa atau untuk pamer bisa menggunakan jasa online.
Mesin pencari berusaha untuk meningkatkan hasil pencarian untuk pengguna perangkat seluler (smartphone, tablet), sehingga situs yang dioptimalkan untuk berbagai ukuran layar akan ditampilkan lebih tinggi daripada situs tanpa pengoptimalan tersebut. Ini juga termasuk situs versi seluler.
Tanda-tanda situs ramah seluler:
- Konten yang mudah dibaca (dibaca tanpa pembesaran), bidang formulir besar, dan tombol.
- Kurangnya gambar "berat", Flash - elemen dan animasi yang berlebihan.
- Kekurangan applet Java dan plugin Silverlight.
- Kurangnya bilah gulir horizontal.
- Kecepatan pemuatan situs web minimum.
- Navigasi paling sederhana.
- Tag meta viewport terdaftar.
Layanan untuk memeriksa situs untuk "mobilitas"
Untuk mendemonstrasikan cara kerja layanan, mari kita ambil situs mitra baik saya - agensi terjemahan KONTEKS.
1. Ramah Google Seluler
Anda dapat memeriksa situs mana pun hanya dengan mengetikkan alamatnya di baris.
Menampilkan di layar bagaimana tampilan situs di smartphone dan memberikan penilaian keseluruhan tentang pengoptimalannya untuk perangkat seluler.
Tidak seperti layanan lain, di sini Anda tidak dapat memeriksa setiap situs, tetapi hanya situs Anda sendiri. Artinya, setelah situs ditambahkan ke antarmuka webmaster dengan konfirmasi hak atasnya.
Layanan ini menampilkan peringkat keseluruhan, memeriksa 6 poin kepatuhan dan menunjukkan bagaimana situs tersebut terlihat di smartphone.
3. Pemeriksa Bing
Optimasi keseluruhan diperiksa ditambah kepatuhan dengan 4 poin.
Ini juga menampilkan bagaimana situs terlihat di layar smartphone (tentu saja, di OS windows, sementara layanan sebelumnya menampilkan smartphone android \u003d)).
4. Mobile Checker dari W3C
Layanan "terpanjang". Begitu "lama" sehingga saya tidak menunggu akhir tes \u003d)
Saya menunggu selama 5 menit, sementara layanan lainnya selesai dalam 5-20 detik.
5. Responsinator
Tidak seperti yang lain, ini tidak memberikan peringkat apa pun, tetapi ini menampilkan bagaimana situs Anda terlihat pada 6 perangkat berbeda dalam dua orientasi untuk iOS dan Android, yang sangat keren.
UPD1: 07/20/2017:
6. Adaptivator
Layanan tersebut disarankan dalam komentar untuk artikel ini. Saya pribadi tidak menggunakannya, tetapi semuanya tampaknya cukup bagus. Kemampuannya hampir sama dengan responder, namun ada juga penilaian terhadap hasil adaptasinya.
UPD2: 3.11.2017:
7. iloveadaptive.com
Layanan baru lainnya disarankan di komentar. Bagi saya, sedikit kelebihan berat badan dan tidak praktis, tetapi ini lebih dari sekadar terbayar dengan peluang besar. Bahkan ada yang mengurutkan berdasarkan OS.
Keluaran
Tidak diragukan lagi, adaptasi situs untuk perangkat seluler bukan hanya penghargaan untuk mode dan waktu, tetapi juga atribut penting dari situs modern yang tidak hanya membantu pengguna akhir.
Oleh karena itu, saya merekomendasikan kepada semua orang yang ingin lebih dekat dengan klien dan memiliki lebih banyak kunjungan / arahan untuk menyesuaikan situs mereka secepat mungkin. Tanya saya sebuah pertanyaan -
Untuk proyek Anda, Anda mungkin sudah lama memperhatikan bahwa jumlah pengguna seluler terus bertambah. Untuk beberapa, tren ini kurang terlihat, dan pada beberapa proyek angka ini berlipat ganda atau lebih setiap tahun. Menurut data LiveInternet, lebih dari 50% lalu lintas di Runet dicatat oleh perangkat seluler. Ngomong-ngomong, banyak pembaca blog ini yang sudah lama mengeluh bahwa tidak ada versi mobile disini 🙂 yang tentunya akan diperbaiki dalam waktu dekat.
Fakta mobilisasi ini juga tidak dapat diabaikan oleh platform pencarian. Secara bertahap, mereka memberikan keuntungan dalam pencarian seluler ke situs-situs yang disesuaikan dengan perangkat pengguna.
Pada awalnya, Google memberi tanda pada situs dalam cuplikan bahwa situs tersebut akan ditampilkan dengan benar di ponsel.
Selain itu, Google telah menciptakan alat untuk membantu webmaster untuk memeriksa kebenaran tampilan situs web di perangkat seluler:
https://www.google.com/webmasters/tools/mobile-friendly/
Pada 21 April, Google meluncurkan algoritme baru yang disebut Mobilegeddon di Barat. Sekarang lulus uji Mobile Friendly adalah salah satu faktor SEO yang diperhitungkan oleh Google. Sejauh ini belum ada perubahan besar pada SERP, namun Anda bisa mempersiapkannya sekarang.
Bagaimana Anda membuat situs web responsif terhadap Google? Rahasianya sederhana - Anda perlu menetapkan tugas untuk programmer / desainer tata letak Anda. Nah, jika tidak ada waktu untuk menunggu, maka ... Anda bisa menggunakan MobileCheat 🙂
Faktanya, ini adalah teknologi yang belum teruji, tidak diketahui apa yang akan terjadi di masa depan, jadi gunakanlah hanya dengan risiko dan risiko Anda sendiri. Setidaknya serangkaian tes bisa dilakukan di sini.
Cara melewati Uji Google dengan MobileCheat
Hanya ada dua hal yang harus dilakukan:
1. Tambahkan meta tag viewport ke kode.
2. Tutup akses robot ke file CSS atau folder di mana mereka berada melalui robots.txt
Misalnya, begini cara blog saya lolos tes default:
Saat CSS ditutup, gambar berubah:
Tampaknya tidak ada yang berubah di situs, tetapi hasil tesnya sama sekali berbeda. Ngomong-ngomong, di beberapa situs saya sendiri suka menonaktifkan CSS, sehingga lebih nyaman untuk melihat dan menggunakannya 🙂 oleh karena itu, ini adalah skema yang cukup masuk akal. Tapi itu disajikan hanya untuk tujuan informasi.
Apa pendapat Anda tentang ini? Akankah Google menganggapnya sebagai langkah balasan dengan seorang ksatria atau telah memikirkan segalanya sebelumnya dan akan segera memeriksa dan memeriksa situs tersebut? 🙂
