Cara Merancang Konten Untuk Di Indeks Mobile-First

Halaman mobile Anda akan segera menjadi versi default yang dipakai dalam peringkat pencarian Google. Bagaimana Anda memastikan konten manis yang gampang dibaca di layar yang lebih kecil?

Anda bukan seorang penulis sastra, dan orang tidak bergantung pada setiap kata yang Anda tulis. Jangan salah sangka, manis untuk mempunyai informasi komprehensif di halaman web, namun pengguna juga tidak ingin menggulir selamanya - terutama di ponsel.

Konten di seluler perlu memudahkan pengguna mencapai poin utama tanpa mengurangi konten, alasannya pengguna mungkin ingin segera menggali detailnya. Lebih dari sebelumnya, struktur konten Anda penting, dan konten Anda perlu dinavigasi, sanggup diadaptasi dan gampang dicerna.

1. Daftar Isi

Daftar isi ialah cara manis untuk memberikan bagaimana Anda mengatur konten Anda, dan dikombinasikan dengan bookmark HTML, ini memungkinkan pengguna untuk cepat melompat ke bab halaman yang mungkin menarik minat mereka.

Salah satu implementasi favorit saya ialah dokumentasi Pengembang Google, di mana Anda mempunyai hak navigasi di bawah judul dan dengan cepat sanggup mendapat bab apa pun yang Anda butuhkan. Mereka bahkan membuatnya sanggup diperluas sehingga tidak membanjiri pengguna dengan segera.

2. Judul HTML

Judul HTML, atau tag pos, membantu mengatur konten Anda menjadi beberapa bagian, menyusun halaman Anda secara logis dengan h1 - h6. Subpos utama artikel ini dibungkus dalam tag h2, sedangkan judul artikel itu sendiri terbungkus dalam tag h1. Tag judul menciptakan konten gampang skimmable dan merupakan sasaran yang baik untuk tautan anchor dalam daftar isi.

3. Konten yang sanggup diperluas

Area konten yang sanggup diperluas (juga dikenal sebagai "akordeon") biasanya dipakai untuk detail lebih lanjut atau bab FAQ. Mereka ialah cara yang manis untuk menjaga halaman lebih pendek dan gampang dinavigasi, sambil tetap memungkinkan terusan ke informasi penting. Google Webmaster Trends Analyst Gary Illyes telah menyatakan bahwa konten yang tersembunyi alasannya alasan UX akan diberikan bobot penuh di indeks mobile-first, sedangkan indeks desktop sedikit diskon konten tersembunyi ini.

4. Konten Tab yang Dapat Diperluas

Konten tab kurang dipakai di ponsel alasannya keterbatasan ruang, namun ini ialah alternatif konten yang sanggup diperluas. Ini melayani tujuan yang sama, yaitu menyembunyikan konten yang mungkin tidak diharapkan segera. Lihat bagaimana Staples memungkinkan Anda melihat deskripsi, spesifikasi, dan ulasan sekaligus menjaga konten semuanya pada satu halaman.

5. Konten Tab Filter

Filter ialah cara gampang untuk memotong sebagian besar konten yang mungkin tidak diminati oleh pengguna. Dengan memberi mereka pilihan untuk hanya melihat apa yang ingin mereka lihat, Anda mempermudah pencarian informasi yang mereka cari tanpa Pergi melalui semua cruft untuk hingga ke sana. Salah satu implementasi favorit saya secara visual ini ialah Faktor Peringkat Google Northcutt.

6. Filter untuk konten Ringkasan, sorotan, TL; DR

Tidak punya waktu untuk membaca cerita? Bagaimana jikalau hanya mengambil poin utama artikel ini dengan cepat? Ini membantu pembaca mobile yang sedang berjalan dengan cepat mencerna konten Anda dan memilih apakah mereka ingin membaca lebih dalam secara mendalam. Saya biasanya melihat ini dilakukan di situs berita, keuangan dan olahraga, di mana informasi terpenting sanggup diringkas dalam beberapa poin. Berikut ini satu dari CNBC:

7. Poin atau Menu Dropdown

Poin dan daftar peluru ialah cara yang manis untuk memberikan sejumlah besar informasi dengan cepat.

8. Teks tebal atau miring

Teks tebal menangkap mata - dan begitu juga teks miring. Teks tebal juga sanggup menjadi pelengkap yang manis untuk menciptakan item atau poin utama lebih menonjol.

90 persen orang yang membuatnya sejauh ini kemungkinan akan membaca pullquote ini.

Bagaimana dengan desktop?

Saya berfokus pada perancangan untuk mobile, namun banyak praktik yang sama juga manis untuk desktop. Salah satu pola terbaiknya adalah, sekali lagi, Google Developers, kawasan daftar isi benar-benar menjadi bilah sisi lengket yang mengikuti Anda dan memungkinkan Anda menavigasi di antara bab dengan cepat.

Konten desktop

Saya akan menambahkan satu peringatan, terutama untuk konten yang mungkin disembunyikan secara default dengan CSS atau JS. Pastikan semua konten dimuat ke DOM. Jika Anda harus mengambil tindakan sebelum konten dimuat ke DOM, Google tidak akan melihatnya. Loaded secara default dan kemudian disembunyikan tidak apa-apa.

Sekarang saatnya memikirkan pembaca ponsel Anda dan bagaimana mereka akan mengkonsumsi konten Anda. Buatlah semudah yang Anda sanggup untuk menemukan informasi yang mereka cari, dan mereka akan berterima kasih dengan terus tiba ke situs Anda dan berbisnis dengan Anda.