Digital MarketingSEO & SEM

SEO dan Aksesibilitas: SEO Teknis [Series Part 3]


Pandangan penulis sepenuhnya adalah miliknya sendiri (tidak termasuk peristiwa hipnosis yang tidak mungkin terjadi) dan mungkin tidak selalu mencerminkan pandangan Moz.

Kami harap Anda menikmati seri tentang SEO dan aksesibilitas ini. Di bagian akhir, Cooper menunjukkan kepada Anda bagaimana strategi SEO teknis yang Anda terapkan di seluruh situs Anda dapat membantu membuatnya lebih mudah dipahami, dapat dioperasikan, dapat dipahami, dan kuat.

Foto papan tulis dengan catatan tulisan tangan tentang bagaimana SEO teknis dapat berfokus pada aksesibilitas.
Klik pada gambar papan tulis di atas untuk membuka versi yang lebih besar di tab baru!

Transkripsi Video

Hai, penggemar Moz. Selamat datang di Whiteboard Friday edisi terbaru. Saya Cooper Hollmaier. Saya telah melakukan SEO sejak 2016, dan hari ini saya bekerja untuk pengecer luar ruangan besar yang membantu strategi SEO teknis kami menjadi nyata. Terima kasih banyak telah menghadiri seri tentang SEO dan aksesibilitas ini.

Saya harap Anda mendapatkan perspektif yang luas serta tip dan trik baru untuk membuat konten yang tidak hanya beresonansi dengan audiens Anda, berperforma baik dalam penelusuran, tetapi juga dapat diakses oleh lebih banyak orang. Hari ini kita akan berbicara tentang SEO teknis dan aksesibilitas.

SEO teknis dan aksesibilitas

Mari selami. Terakhir kali kita membicarakannya Panduan Aksesibilitas Konten Web, dan Anda mungkin ingat bahwa empat prinsip WCAG dapat dipahami, dioperasikan, dapat dipahami, dan kuat.

Bisa dibayangkan

Sebagai SEO teknis, Anda mungkin paling peduli dengan pemahaman karena operasi sehari-hari Anda, aliran kerja sehari-hari Anda melibatkan memastikan bahwa halaman, konten, pengalaman yang Anda buat dapat diakses untuk pencarian. mesin dan dapat dilihat oleh mesin pencari.

Sering kali ketika kami memeriksa rekomendasi SEO atau audit SEO, saya mendengar banyak tema umum, seperti tag header dimasukkan ke dalam gambar sehingga mesin telusur tidak dapat melihatnya, atau konten yang saya buat adalah terlihat oleh bot tetapi tidak terlihat oleh orang-orang. Ini adalah masalah dengan persepsi tingkat dasar. Saya ingin Anda mengambil pola pikir itu dan mempertimbangkan apakah Anda menerapkannya kepada seluruh audiens Anda juga. Jadi, dapatkah semua orang Anda yang berharap untuk terlibat dengan layanan atau produk atau pengalaman Anda, apakah mereka dapat memahami semua hal yang Anda tawarkan di tingkat dasar?

1. Gaya

Gambar daftar perubahan gaya tulisan tangan termasuk teks asli, tanpa isian kata kunci, dan kontras warna.

Beberapa hal yang mungkin Anda anggap serupa dengan yang akan Anda lihat dalam audit ini, seperti: Apakah semua teks saya di halaman terlihat? Apakah ini teks aktif? Apakah ini asli halaman, jadi dapatkah saya memilih dan menyalin dan menempelnya, atau apakah itu dimasukkan ke dalam gambar dan tidak dapat dijangkau oleh teknologi pendukung atau browser atau apa yang Anda miliki? Anda mungkin juga berpikir: Apakah kontras warna dengan latar belakang dan teks saya, apakah kontras yang tepat?

Apakah ada cukup kejelasan dan ketajaman antara elemen tata letak saya? Jika hal-hal tampak agak kabur atau tidak begitu jelas bahwa sesuatu dapat diakses oleh mesin pencari dan pengguna, kembali ke papan gambar dan cari tahu bagaimana membuat kedua hal itu bekerja dengan baik.

2. Media yang kaya

Gambar daftar perbaikan multimedia yang ditulis tangan.

Kami juga ingin menambahkan gambar, teks, video, dan audio ke halaman yang kami buat untuk pelanggan kami. Sangat penting bahwa elemen kaya ini, setelah kita melewati teks dasar dan elemen gaya, elemen kaya yang kita tempatkan pada halaman dapat dilihat oleh semua pengguna Anda juga. Ada beberapa hal yang dapat kita lakukan untuk mewujudkannya. Untuk gambar, memberi mereka alternatif teks dan memberikan sesuatu selain citra itu akan membantunya dilihat oleh pembaca layar dan dipahami oleh seseorang yang memiliki disabilitas visual.

Juga memberi nama hal-hal dengan nama yang ramah manusia versus “DSC1352.JPEG” akan membantu mesin telusur serta teknologi pendukung untuk melihat gambar itu dan memahami apa itu. Konteks pada halaman, penting juga bagi Anda untuk meletakkan gambar pada halaman yang menambah nilai. Anda ingin mencerahkan pengguna dengan beberapa konten tambahan untuk memberi mereka sedikit perasaan atau memberi mereka lebih banyak konteks tentang apa yang Anda bicarakan. Tambahkan gambar untuk nilai, tidak hanya untuk muncul di pencarian gambar Google.

Bagaimana dengan video? Jadi video sedikit berbeda. Video memiliki rangkaian gambar bergerak. Jadi setiap kali saya memikirkan tentang gerakan, saya berpikir, “Bagaimana saya bisa memastikan bahwa jika pengguna ingin menghentikan gerakan ini, mereka bisa?”

Memiliki kontrol pemutaran yang jelas sangat penting ketika kita berbicara tentang aksesibilitas serta memiliki pengalaman pemutar video yang luar biasa untuk setiap pengguna. Selain itu, padanan sinkron untuk alternatif teks tersebut. Kami berbicara tentang gambar yang memiliki alternatif teks. Video perlu memiliki alternatif teks juga, tetapi mereka perlu disinkronkan dengan waktu dengan video itu. Jika tidak, mereka tidak akan masuk akal dalam konteksnya.

Kemudian, pastikan keduanya dapat dibedakan. Ini sama antara video dan audio. Kami ingin memastikan bahwa latar depan dan latar belakang mudah dibedakan satu sama lain. Jika video Anda terasa berlumpur, jika audio Anda terasa berlumpur dan saya membuat telinga saya tegang atau mata saya tegang untuk dapat melihat konten tersebut dan memahami apa yang terjadi, Anda harus sedikit lebih tajam, sedikit lebih jelas. dua perbedaan itu.

Kemudian transkrip teks. Sama seperti Anda memerlukan teks tertutup untuk video, untuk audio Anda ingin memiliki transkrip teks, jadi jika saya mungkin berada di tempat yang bising dan saya tidak dapat mendengar audionya atau saya tidak memasang headphone atau saya perlu untuk menggunakan teknologi pendukung, saya dapat mengakses audio itu.

Ini semua adalah hal-hal yang akan Anda lihat saat meninjau kode sebagai SEO teknis dan harus Anda ketahui.

Jika Anda tidak mengalami hal-hal ini, di situs web Anda, saya akan memberdayakan Anda untuk mengajukan pertanyaan-pertanyaan itu, pertanyaan sulit seperti: Hai, apakah ada teks alternatif untuk gambar ini? Bagaimana penyandang disabilitas visual, bagaimana penyandang disabilitas pendengaran mengakses hal-hal ini?

3. Struktur halaman

Foto gambar yang digambar tangan membandingkan struktur halaman yang berbeda.

Tiga dan empat tentang struktur halaman dan HTML semantik. Jadi ini sedikit kurang tentang apakah ini dapat dipahami dan apakah ini agak dapat dimengerti.

Ini seperti merumput pada apa yang bisa dimengerti, tapi itu harus sedikit tentang persepsi juga. Memiliki banyak H1 di halaman, seperti yang dapat Anda bayangkan, mesin pencari mungkin akan merasa sangat bingung, bukan? Mereka seperti, oke, ada banyak H1 di halaman ini. Saya tidak begitu yakin tentang apa halaman ini. Menambahkan tajuk struktur dan bertingkat untuk menandakan hubungan orang tua-anak akan membantu konten Anda menjadi sedikit lebih mudah dipahami. Akan lebih mudah untuk memahami apa yang terjadi.

4. HTML semantik

Sama halnya dengan HTML semantik. Kami cenderung menempatkan banyak div dan span dan elemen yang tidak dapat diidentifikasi di HTML kami. Tetapi dengan menandainya dengan cara yang lebih tepat, sehingga kami memahami apa artinya, memahami apa yang dikandung oleh tag tersebut, apakah itu navigasi atau formulir atau tabel, memberikan lapisan informasi dan pemahaman tambahan akan memungkinkan mesin telusur dan teknologi pendukung. untuk dapat mengurai melalui hal-hal itu, untuk memungkinkan mereka melihat hal-hal yang Anda letakkan di laman Anda yang berbeda satu sama lain dan memberikan pengalaman yang lebih kaya.

Dapat dioperasikan

Oke, jadi kami bisa melihat isinya. Tetapi bagaimana kita memastikan bahwa itu dapat dioperasikan?

1. Peta Situs HTML

Foto contoh peta situs HTML yang digambar tangan.

Beberapa rekomendasi SEO yang sering saya lihat orang buat adalah membuat peta situs HTML dan meletakkan remah roti di halaman Anda. Seringkali Anda mungkin mendapatkan beberapa dorongan dari itu. Peta situs HTML sangat penting yang kita ketahui untuk SEO, agar halaman-halaman tersebut dapat ditemukan jauh di dalam hierarki situs web kita.

Kami tahu bahwa remah roti juga sama pentingnya agar dapat ditemukan. Kedua elemen ini membantu pengguna dengan teknologi pendukung untuk menavigasi situs web dengan lebih baik. Peta situs HTML memungkinkan jika menu Anda tidak menyertakan semua halaman di situs web Anda atau jika membingungkan atau Anda menggunakan JavaScript atau beberapa teknologi lain yang tidak dapat diakses oleh tumpukan teknologi saya.

2. Remah roti

Foto contoh remah roti yang digambar tangan.

Kemudian remah roti memungkinkan saya untuk mengurai ke atas dan ke bawah secara khusus, katakanlah itu adalah halaman pencarian produk di situs web e-niaga tanpa harus kembali ke menu dan kemudian mengurai melalui setiap item menu lagi. Jadi keduanya sangat penting untuk navigasi tetapi juga terutama bagi orang-orang yang bernavigasi dengan keyboard dan menggunakan teknologi pendukung.

3. Kembangkan keyboard-dulu

Foto komputer dan keyboard yang digambar tangan.

Kemudian hal non-SEO tetapi tetap penting dan relevan, kembangkan situs web Anda dan keyboard pengalaman Anda terlebih dahulu. Tidak semua orang memiliki mouse atau kemampuan untuk menggunakan mouse karena ketidakmampuan gerakan atau karena gangguan atau karena kurangnya teknologi atau perangkat keras. Jadi, pastikan Anda mengembangkan keyboard terlebih dahulu, dan Anda akan merangkum lebih banyak orang yang ingin Anda rangkum dengan audiens Anda.

Bisa dimengerti

1. Bahasa

Foto kode HTML tulisan tangan menentukan LANG =

Bisa dimengerti. Jadi kita berbicara tentang SEO internasional, ketika kita berurusan dengan negara yang berbeda dan bahasa yang berbeda, betapa pentingnya menggunakan HTML di halaman kita untuk menunjukkan bahasa halaman itu. Ini membantu mesin pencari memberikan hasil yang tepat dalam konteks nasional atau internasional yang tepat. Ini juga membantu pembaca layar membaca konten Anda dengan lantang dalam bahasa yang tepat.

2. Tata letak navigasi

Foto contoh halaman web yang digambar tangan.

Kemudian tata letak navigasi dan pengantara yang menurut saya cukup umum, tetapi tidak ada yang menyukai navigasi atau tata letak situs web yang membingungkan. Semakin mudah Anda membuatnya, semakin mudah bagi orang-orang untuk mengonversi atau melakukan apa yang Anda cari untuk mereka lakukan dengan situs web ini, apakah itu belajar, apakah itu membeli, apakah itu terlibat dalam layanan. Itu lebih mudah ketika navigasi dan tata letak disederhanakan dan kami tidak menggunakan kata yang berbeda di tempat yang berbeda untuk mengartikan hal yang sama. Ini bahkan lebih penting bagi orang-orang dengan teknologi pendukung.

3. Pengantara

Foto halaman yang digambar tangan dengan

Pengantara, tidak ada yang menyukai munculan di wajah kami, yang tidak memungkinkan kami untuk menjelajahi seluruh situs web. Google juga tidak menyukainya. Tetapi terutama orang-orang dengan teknologi pendukung, jika kita tidak memperlakukan pop-up tersebut dengan cara yang benar, kita akan berakhir dalam skenario di mana pengguna mungkin berada dalam perangkap keyboard dan mereka tidak dapat keluar dari interstisial. , atau mereka tidak memahami bahwa pengantara bahkan dipasang di halaman. Jadi, sangat penting untuk berhati-hati saat menggunakan pengantara.

Kuat

Last but not least adalah kuat. Bagaimana cara kami memastikan bahwa konten yang kami tempatkan di halaman kompatibel untuk berbagai macam perangkat dan skenario?

1. Validasi

Foto contoh gambar tangan dari validasi JSON + LD.

Hanya menggunakan HTML yang tepat adalah cara terbaik untuk melakukan ini. Anda dapat menggunakan validator dan Anda dapat melihat HTML, CSS, dan JSON-LD Anda. Membuat kode yang tepat dan terutama saat Anda menggunakan HTML semantik serta memberikan makna pada kode tersebut, Anda akan memiliki pengalaman yang jauh lebih baik dan semua bangunan Anda lebih mudah dicerna.

2. Responsif

Foto gambar gambar tangan dari halaman web yang diubah ukurannya untuk seluler, layar sedang, dan layar besar.

Apakah situs web Anda responsif? Anda seharusnya sudah melakukan ini. Tetapi jika tidak, pastikan itu beroperasi pada perangkat seluler dan desktop dan tablet dan tata letaknya tetap sama, hanya mungkin ukurannya diubah atau dicitrakan ulang dengan cara yang berbeda.

3. Berinteraksi

Foto halaman web yang digambar tangan dengan panah untuk menunjukkan interaksi berbeda yang tersedia.

Pastikan itu bisa berinteraksi. Jika pengguna ingin dapat memperbesar karena mereka memiliki gangguan penglihatan atau mereka ingin dapat mengubah warna, apakah teknologi Anda di situs web Anda memungkinkan mereka melakukan itu? Itu harus. Jika Anda melakukan tiga hal ini di bawah, saya pikir itu akan melakukan banyak pekerjaan berat dan Anda harus melakukan lebih sedikit pekerjaan karena Anda telah membangun kerangka kerja, fondasi agar dapat diakses. .

Itulah SEO teknis dan aksesibilitas. Jika Anda memiliki lebih banyak pertanyaan atau menginginkan beberapa alat validasi, ada beberapa di sisi kanan sini, atau Anda dapat menghubungi saya di Twitter @bayu_joo untuk beberapa saran lebih lanjut. Tapi terima kasih banyak telah mendengarkan Whiteboard Friday dan aksesibilitas bersama dengan SEO. Saya harap Anda mengambil ini dan Anda menjadi lebih dan lebih inklusif dalam cara Anda melakukan SEO di masa depan.

Transkripsi video oleh Speechpad.com


Sumber daya



Source link


Discover more from CiptaVisual

Subscribe to get the latest posts sent to your email.

CiptaNetwork

A collection of useful articles about the world of graphic design and digital marketing that you should read to add insight.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

Discover more from CiptaVisual

Subscribe now to keep reading and get access to the full archive.

Continue reading