Pentingnya Well Design bagi Branding

Arham Haryadi January 29, 2010 31

Prove your branding are exist
Dua minggu terakhir ini saya disibukan kegiatan SEO dari calon client. Hasil negosiasi yang ditetapkan yakni saya akan mengoptimalkan webnya agar dapat muncul dihalaman pertama google berdasarkan keyword yang berkaitan dengan corporate branding. Memang, jaman sekarang ini suatu perusahaan baru bisa dikatakan memiliki kinerja yang patut diandalkan dan dapat dikatakan berpengalaman jika mampu muncul dihalaman pertama sampai -setidaknya- ketiga di google.

Durasi trail memang belum selesai sehingga masih bisa di utak utik, namun persoalan design rupanya jadi kendala tersulit.  Secara tampilan mata memang web itu tampil khas layaknya perusahaan mumpuni, namun ketika saya beralih ke analisis, ternyata struktur design tidak tertata rapih. Struktur yang saya maksud disini adalah susunan HTML yang sesuai dengan tatanan standard w3school.

Google dipastikan mengindex web kita berdasarkan aturan standard layaknya web service bekerja, kepingan demi kepingan code akan dibaca dari kiri ke kanan dan mulai dari atas ke bawah. Karena itu, pentingnya menyadari “bagaimana membuat website agar crawler friendly + SEO friendly“. Pada akhirnya sebuah brand harus menyadari kebutuhan untuk tidak lagi ‘sekadar’ eksis.

Nah, apa saja yang perlu diperhatikan ketika merancang web dengan struktur design yang optimal?

  • Tag <Title>, keberadaanya bukan saja fundamental tapi jika ingin terlihat di google maka jawabannya adalah wajib berisikan keyword yang sesuai dengan isi/konten pada website.
  • Site title wajib dimiliki, dan judul situs tersebut harus diletakan pada tag heading <H1>.
  • Judul artikel yang menjadi judul web pada halaman tersebut harus memakai tag heading <H2>.
  • Sidebar. Saat ini jarang ditemukan web tanpa sidebar, tatanan struktur html perlu disesuaikan dimana konten artikel utama harus berada sebelum sidebar. Sebagai referensi anda bisa meninjau struktur wordpress. ps: Bersyukur lah anda yang memakai wordpress :-) .
  • Footer, pada bagian ini pastikan anda menempatkan backlink menuju halaman utama ( homepage) dengan anchor yang relevant, misalnya : judul website atau brand name anda.
  • Navigasi, Jika terpaksa menggunakan image sebagi navigasi, maka pastikan memakai kode ‘Alt’ dan ‘Title’.  Contoh dalam bentuk HTML: <a href=”http://inventco.net” title=”Barometer Online reputation”><img src=http://inventco.net/image1.jpg” title=”Barometer Online reputation” ></a>.

[Kesimpulannya]

Kebutuhan branding web corporate agar bisa sepenuhnya eksis, bukan saja pada tampilan mata namun juga susunan code didalamnya. Pada akhirnya untuk bertarung mendapatkan awareness netizen diperlukan media yang benar benar optimal, seperti yang biasa kita temukan pada wordpress.

-

Apakah Anda, sudah memakai wordpress hari ini?

ps: Esok sabtu akan diselenggarakan event Wordcamp Indonesia, kabarnya pakar seo seperti Cosa Aranda juga akan hadir disana, saya pun akan hadir. Apa kita juga akan bertemu disana?

?    Tag <Title> Wajib berisikan keyword yang sesuai dengan isi / konten pada website.
  • http://arrohwany.multiply.com/ Arrohwany

    WordPress memang mantap mas :)

    • http://www.road-entrepreneur.com Arham Blogpreneur

      Sejauh ini, WordPress memang paling SEO friendly meskipun begitu tetap pastikan design yang standard SEO seperti di atas.

      Oia, kapan beralih ke WordPress mas :)

  • http://di-ta.com dita.gigi

    sudah pake wordpress…. *ndak penting ya* :( (

    seru gak wordcamp nyaa?

    • http://hotspoters.com Arham blogpreneur

      Seru dong.. saking serunya panitia ngak ikutan photo :(

  • http://daniiswara.net/ dani

    Sependek yang saya tahu, konsorsium WWW (W3C) tidak terkait hubungan formal dengan W3School. Standardisasi WWW tetap diproses di W3C, bukan W3School.

    Apakah semua post-title sebaiknya memang memakai h2? Saat bukan di laman/homepage, berarti h2 adalah yang teratas (seperti di halaman blog ini, missing h1)? Bukankah semantik dan aksesibilitas Web menganjurkan h1 sebagai yang tertinggi di tiap dokumen/halaman Web?

    Di Arab mungkin alurnya kanan ke kiri. :)

    Menurut saya, footer bisa dipertimbangkan menyajikan informasi penting saat halaman itu dicetak/print. Lebih usable. Menurut saya, bukan zamannya lagi memberi self-linking di footer.

    Atribut title adalah atribut–fitur tambahan. Tidak sepenuhnya akesibel bagi screen reader dan yang tidak mampu memakai tetikus/mouse.

    Dianjurkan oleh WCAG 2 untuk tidak meletakkan konten yang penting di atribut title. Kecuali itu informasi tambahan. Jangan juga jika hanya berisi duplikasi informasi/sama persis seperti teks anchor. Terdengar mengganggu di telinga pengguna screen reader/voice browser.

    Apakah atribut title memang crawable-indexable? Saya pernah menulisnya dulu. Setidaknya, saya tidak bisa menemukan ini: "follow on twitter" site:road-entrepreneur.com. :)

    Konten teks dan teks alternatif masih dibutuhkan. Flash dan AJAX pun mulai bisa dibaca Google karena konsep konten alternatif. Jika tidak tersedia teks alternatif untuk konten non-teks, maka akan berisiko kehilangan informasi bagi sebagian pengguna=tidak aksesibel.

    Lho, kok saya malah ngeblog di sini? :) Maaf Mas Arham, makasi ruangannya. Saya tidak paham untuk unsur SEO-nya.

    • http://www.road-entrepreneur.com Arham Blogpreneur

      1. yang say maksud dengan W3School adalah seperti yang ada di W3School. karena dari sana pengotimalan design website tuk branding dan pemasaran sama dengan yg google terapkan.

      [post-title sebaiknya memang memakai h2?] betul, sebaiknya post title memang memakai tag heading H2.

      Tuk semantik dan aksesibilitas Web yang menganjurkan h1 sebagai tertinggi, saya sendiri baru dengar ( thanx mas dani), namun pada halaman homepage kita bisa menemukan H1. H1 disini seperti dijelaskan maksudnya untuk judul blog/web, untuk web ini h1 nya : Blogpreneur

      Didaerah Di Arab jelas memakai tatanan dari kanan ke kiri, namun robot tetap membacanya secara latin. Yang artinya mengutamakan phrase di kiri.

      Saat ini penyajian informasi pada bagian footer memang jadi tren. misalnya di Hotspoters.com atau beberapa web lainnya. Sementara self-linking di footer tujuannya untuk robots Google. Jadi kenapa tidak keduanya saja disajikan ( self-linking + extended Information di footer)

      Atribut title Nah untuk yang satu ini sekali lagi memang bertujuan tuk robots google. Misalnya dengan Atribut title: “Mesin pencari terpopuler” dengan anchor: Google maka search engine akan merujuk Google sebagai mesin pencari terpopuler Lagi lagi berhubungan dengan algorithem google tuk sebuah backlink.

      Kenapa tidak menemukan “follow on twitter” wajar kan :) . soalnya saya memang tidak memakai anchor “follow on twitter”

      Baik konten Flash dan AJAX pun mulai bisa dibaca Google, ngak salah :) , namun masa indexing akan lebih lama. Sementara gambar saja memakan waktu yang panjang. Apalagi sebuah Flash dan AJAX.

      • Name (required)

        apakah kata “mesin pencari terpopuler” terbaca oleh google?

        • Name (required)

          saya sengaja tidak mengedit kolom input :)

  • http://daniiswara.net/ dani

    Diskusi yang menarik, Mas Arham. :)
    Saya juga jadi tahu sisi SEO-nya.

    Terkait contoh pemakaian atribit alt dan title di posting di atas, mungkin ada typo (cetak tebal):

    <a href="http://inventco.net" title="Barometer Online reputation"><img src=http://inventco.net/image1.jpg" title="Barometer Online reputation" ></a>

    Pertanyaannya: di kondisi nyatanya, apakah kata Barometer Online reputation pada atribut title tersebut crawable/indexable (kasusnya=”follow on twitter”)?

    Di contoh saya itu, memang tidak membahas “follow on twitter” sebagai teks anchor, tapi sebagai atribut title. Jika kata tersebut ada sebagai atribut alt, mungkin memang terbaca oleh algoritma mesin telusur Internet. :)

    Lalu terkait:

    …Misalnya dengan Atribut title: “Mesin pencari terpopuler” dengan anchor: Google maka search engine akan merujuk Google sebagai mesin pencari terpopuler Lagi lagi berhubungan dengan algorithem google tuk sebuah backlink.

    kita membahas atribut title di suatu pranala kan?
    <a href="http://example.com/" title="atribut ini tidak wajib karena tidak aksesibel">teks anchor</a>
    Saya pernah menulisnya dulu. Mungkin di Google masih ada jejaknya.
    Kalau terkait gambar, baru-baru ini saya juga menulis tentang atribut alt yang menyertai tag img.

    Tambahan, agak lepas dari diskusi di atas.
    Dari sisi semantik, tag <strong> (visualnya serupa seperti bold) dan <em> (=italic) memang terdengar berbeda suara/pitch-nya bagi pengguna screen reader. Sedangkan bold dan italic hanya presentasional. Apakah algoritma Google memiliki bobot tertentu untuk elemen teks spesial tersebut?

    Mengapa hanya memakai yang presentasional saja (pengguna dengan penglihatan normal), kan mending sekalian yang semantik (bisa dipahami oleh difabel juga/universal access for wider users)? :)

  • http://inventco.net Arham Blogpreneur

    satu satu nih :D
    Apa ter crawable/indexable dengan kasus Follow on twitter. Jawabannya absolutely 100% ter crawable/indexable. Seperti yg saya share di atas, ‘Title=’ berguna bagi pengoptimalan backlink namun tidak ditampilkan pada Search engine.

    Yap kita membahas “atribut title”. Memang tidak aksesibel kok bagi kita. hanya bagi sang robots dipastikan aksesible

    Menurut ebook yang dijelaskan Google sendiri, Bold, italic ataupun Strong memiliki kesamaan level/bobot.

    Wah, kalau pertanyaan yang terakhir, coba tanyakan ke matt cuts saja, toh SEOer’s hanya pengamat+scientist & Artist yang menerapkan optimalisasi pada search engine (terutama Google)

    • http://daniiswara.net/ dani

      Lalu, gemana ya caranya ngetes kemanjuran atribut title itu? :)

      • http://inventco.net Arham

        Sama halnya dengan ngetes keyword ranking di SERP :)

        • http://daniiswara.net/ dani

          Mumpung bisa nanya di sini, :) saya masih bingung, lalu kata kunci apa yang dipakai? Barometer online reputation? Follow on twitter? Jika tanpa memanfaatkan anchor text yang sama, apakah mungkin ‘pengoptimalan’ atribut title itu terbukti?

          Apakah situs SEO di luar sana masih banyak yang memakai pengoptimalan via atribut title?

          • http://www.road-entrepreneur.com Arham Blogpreneur

            Alhamdullilah terbukti :)
            dengan sample yang mas dani sebutkan ancornya: “online reputation” sedangkan attribute titlenya “Barometer online reputation”.

            conclusion: Dengan keyword dan attribute title yang nyaris sama.

            Yang baru saja saya optimasi, untuk keyword: “pelatihan migas”. Indocita.com berhasil menembus page pertama :)

          • http://daniiswara.net/ dani

            Jangan-jangan itu hanya karena anchor text-nya saja?

            Apakah ada pembandingnya? [anchor text + title attribute] vs [title attribute only]? :)

          • http://www.road-entrepreneur.com Arham Blogpreneur

            [Jangan-jangan itu hanya karena anchor text-nya saja?}
            Syukurlah, bukan karena anchornya saja.

            dulu saya hanya memanfaatkan bantuan anchor, namun kini dengan attribute title terasa lebih mudah..

            oia, saya juga memberikan variasi keyword dengan main keyword berporsi 50% sedangkan sisanya variant tanpa title.

  • http://raiderhost.info raiderhost

    wach tips yg mantab neich..

    sayang saya ndak bisa custom themes :) pa lagi desain

    kmarin di wordcamp spetinya blogger matre sedikt yg datang :D

    xxiix

    • http://inventco.net Arham blogpreneur

      Dicoba coba saja mas.. otodidak kan ngak masalah :)

  • http://sarimingeek.com/ Sarimin

    sip ndan…

    • http://inventco.net Arham Blogpreneur

      Sundul sundul ndan :)

  • http://bed-boy.com hanif IM

    soal SEO emang kudu harus ngerti banget biar di indeks di google, dan soal theme, harus eye cathing biar sip… hehe

    • http://www.road-entrepreneur.com Arham Blogpreneur

      Yup.. tampilan bisa membuat pengunjung betah… keduanya harus seimbang

  • http://wijna.web.id mawi wijna

    hohoho SEO … eh kok tampilannya mirip dengan tutorial di Grafpedia yah? :)

  • http://liudin.com liudin

    kebetulan saat ini saya disibukan dengan seo theme milik saya. yang penting susunannya sesuai semantic h1, h2, h3 dll

    untuk semantic selengkapnya saya merujuk pada w3c
    saya pemula yang ingin tahu seo lewat kode2 mas, tapi susah nyarinya! kalaupun ada hanya sebagian saja yang jalan di weblog saya.

  • http://bed-boy.com hanif IM

    mampir lagi disini,, hehe,, soal blogrol sebelumnya (artikel di blog saya) trims udah beri masukan. :D

  • http://www.grahanurdian.web.id Graha Nurdian

    Yap setuju, WordPress memang sudah cukup bagus namun perlu dicek juga koding dari tema itu sendiri sehingga lebih valid di w3 validator. Nice info btw

    • http://inventco.net Arham

      WordPress themes tidak semuanya SEO friendly, jadi tetap perlu cheking ulang atau optimasi code, after all Thanks yah sudah mampir :)

  • Pingback: Price To Pay : Web Bukan Hanya Pemuas Mata | Blogpreneur

  • Pingback: I’m Back… | Blogpreneur

  • Pingback: Indocita Enlightenment Training “Pelatihan Migas” | Arham

  • http://www.irwan.web.id irwan

    artikelnya membuka pengetahuan saya tentang SEO….
    trima kasih banyak….