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.
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, tetapi Anda bisa mempersiapkannya sekarang.
Bagaimana Anda membuat situs Anda 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 menutup CSS, 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 sepenuhnya dibenarkan. Tapi itu disajikan hanya untuk tujuan informasi.
Apa pendapat Anda tentang ini? Akankah Google menganggap ini sebagai langkah balasan dengan seorang ksatria, atau telah memikirkan semuanya sebelumnya dan akan segera memeriksa dan memeriksa situs tersebut? 🙂
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. Pemeriksa Seluler 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, tapi sepertinya 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 -
Eh, sekali lagi Google "menyenangkan" kita dengan aturan dan algoritmanya, muncul dengan "migrain" baru untuk webmaster. Kali ini kami ditawari untuk mencoba algoritme ramah seluler baru, yang akan memunculkan situs yang diadaptasi dalam penelusuran seluler dan menurunkan sumber daya "non-seluler".
Bagaimana semua ini bekerja?
Ini sangat sederhana: semua situs yang tidak disesuaikan untuk perangkat seluler (menurut Google) akan diabaikan begitu saja oleh mesin pencari dan muncul di tempat terakhir dalam pencarian seluler, dan sumber daya seluler akan meningkat lebih tinggi. Misalnya, jika ada beberapa situs dengan topik serupa, maka di tablet pengguna akan menemukan situs yang memiliki desain yang disesuaikan untuk dilihat di perangkat seluler.
Kesan saya atas inovasi ini ada dua: di satu sisi, semuanya benar, jika saya menggunakan pencarian di tablet atau smartphone, maka saya ingin melihat di SERP situs-situs yang berperilaku dengan benar di layar. Di sisi lain, algoritme untuk menentukan "mobilitas" sangat aneh sehingga membuat orang berpikir tentang kelayakan "pengetahuan" semacam itu. Tentu saja, saya memeriksa situs saya untuk mencari rekomendasi dan merasa aneh, paling tidak, perilaku Google terhadap penguraian sumber daya.
Perlu dikatakan bahwa, saat membuat situs, saya selalu memeriksa tampilan di berbagai perangkat secara manual dan melalui layanan, jadi saya tenang tentang "mobilitas", tetapi ternyata tidak sesederhana itu. Jadi, Google merekomendasikan untuk menguji sumber daya Anda melalui tes ramah seluler:
Cukup masukkan alamat situs atau halaman dan klik "Analisis". Saat memeriksa halaman utama situs teman Krimeo.ru saya melalui tes, saya melihat bahwa halaman tersebut dioptimalkan untuk perangkat seluler.
Tidak mengherankan, templatnya responsif dan situs tampak hebat di berbagai perangkat. Kemudian saya memutuskan untuk memeriksa situs saya dan apa yang mengejutkan saya ketika sumber daya ini tidak lulus ujian.
Menarik ... template blog ini juga responsif, saya sudah beberapa kali mengakses baik dari tablet maupun dari smartphone ... kenapa Google tidak menyukainya?
Saya mulai menganalisis apa sebenarnya di situs yang dapat memicu hasil seperti itu. Solusinya ditemukan di tempat yang tidak saya duga: di situs saya, thumbnail untuk artikel ditampilkan dalam persegi panjang 720x350px, dan ini (menurut Google) tidak menjadikan situs tersebut dianggap seluler. Anehnya, semakin besar gambar (tombol), semakin mudah bagi pengguna dari perangkat seluler untuk menekan jari mereka ... tetapi Google berpikir sebaliknya.
Mengejutkan juga bahwa saat menjelajahi situs di ponsel cerdas, semua gambar telah disesuaikan dengan sempurna dengan ukuran layar dan tidak ada "tiang" yang diamati. Nah, saya memutuskan untuk melakukan percobaan dan membuat ukuran gambarnya adaptif, yaitu. semakin kecil ukuran layar perangkat, semakin kecil gambar di situs tersebut. Coba ambil bagian pojok browser dengan mouse dan perkecil .. 
Sekarang, beberapa webmaster mungkin memiliki masalah lain: jika Google berperilaku seperti ini dengan thumbnail besar, situasi dengan ilustrasi untuk artikel akan sama, dan ini jauh lebih penting daripada halaman utama. Untuk melakukan ini, Anda perlu membuat gambar adaptif untuk seluruh situs, menggunakan cara meluncurkan skrip-js, tetapi tidak hanya itu, folder cache dan aturan untuk menyimpan gambar harus diduplikasi dalam .htaccess
Memang, artikel yang berisi gambar berukuran besar tidak lulus uji Google, dan artikel dengan ilustrasi lebih kecil dianggap dioptimalkan untuk seluler sepenuhnya. Saya tidak akan memberikan tangkapan layar - cukup ambil URL dari publikasi terpisah dan periksa untuk "mobilitas".
Mengapa lagi Googlebot melihat blog tidak dioptimalkan untuk seluler
Karena robots.txt memiliki banyak batasan yang tidak perlu.
Hanya ada satu batasan dalam file robot.txt virtual WordPress yang dibuat secara otomatis:
Larang: / wp-admin
Dan inilah yang ditulis Google tentang mengapa pembuat WordPress membuat robots.txt seperti ini secara default:
Untuk memastikan bahwa halaman diindeks dan ditampilkan dengan benar, Anda perlu memberi Googlebot akses ke JavaScript, CSS, dan grafik di situs Anda. Googlebot akan melihat situs Anda sebagai pengguna biasa. Jika file robots.txt tidak memiliki akses ke sumber daya ini, maka Google tidak akan dapat menganalisis dan mengindeks konten dengan benar. Ini dapat menurunkan peringkat pencarian situs Anda.
Agen-pengguna: * Disallow: / wp-admin Disallow: / wp-termasuk Disallow: / wp-content / plugins Host: Your_site Sitemap: http: // Your_site / sitemap_index.xml (Sitemap by WordPress SEO by Yoast) -agent: Googlebot-Image Allow: / wp-content / uploads / User-agent: YandexImages Izinkan: / wp-content / uploads /
Saya berharap Google akan meningkatkan algoritme verifikasinya dan memberikan hasil nyata, karena dalam kehidupan nyata di tablet dan ponsel cerdas, banyak situs tampak hebat.
Kami dapat melihat kejutan tersebut dalam bentuk algoritme yang ramah seluler sejak 21 April 2015. Google "memanjakan" kita)). Hidup dalam damai? Ini Panda untukmu! Beberapa? Ini Penguin juga! Mengirimkan? Jadikan mobile-friendly!
Keluaran
Terserah Anda untuk memutuskan apa yang harus dilakukan dengan informasi ini, apakah akan beralih ke desain responsif atau tidak merupakan masalah pribadi setiap webmaster, tetapi aturan baru ini sudah mulai berlaku.
Ngomong-ngomong, “dioptimalkan untuk perangkat seluler” bukan hanya desain situs web yang responsif, versi seluler terpisah dan plugin untuk WordPress juga cocok di sini, yang utama adalah situs tersebut terlihat benar di perangkat apa pun. Pertimbangkan ini.
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 seperti itu, 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 perlu mendaftar di 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 kepada Anda 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 yang 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 bagaimana situs terlihat di perangkat seluler, tetapi juga menunjukkan kecepatan kerjanya: http://www.webpagetest.org/
kesimpulan
Menurut pendapat saya, dalam pekerjaan sehari-hari, saat membuat 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.
Di banyak negara, ponsel cerdas lebih umum digunakan untuk menjelajahi Internet daripada komputer. Oleh karena itu, sangat penting untuk membuat situs ramah seluler. Cari tahu apakah halaman Anda nyaman bagi pengguna smartphone dengan alat khusus di Search Console.
Menggunakan
Mudah untuk memeriksa apakah halaman tersebut 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 tertentu dari jendela browser. Pastikan lebar dan nilai posisi elemen CSS relatif dan gambar diskalakan. Untuk detail tentang ini, lihat bagian Ukuran Konten untuk area tampilan tutorial kami.
Font 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 muncul 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 web untuk perangkat seluler (untuk halaman di WordPress, Joomla! Dan sistem manajemen konten lainnya)
