Memanipulasi Title Blog Dengan Gambar Agar Terdetek H1

Tag h1 ialah title tag untuk sebuah blog dan keberadaannya menurut saya sangat dibutuhkan untuk kelangsungan nilai seo sebuah blog. Artinya tag h1 akan menambah nilai seo blog Anda.

Rata-rata template sebuah blog tentunya sudah memasang tag h1 ini. Bagi yang memakai title blog dengan huruf, ini tidak akan jadi problem alasannya ialah otomatis tag h1 akan terdetek mesin crawl search engine. 

Namun ini akan menjadi problem dikala kita merubah title blog dengan image atau gambar. Demi memperindah tampilan blog, maka banyak orang merubah title blog yang tadinya hanya abjad sekarang diganti dengan gambar atau image sesuai dengan selera kita. Biasanya berupa logo atau apapun yang ingin kita jadikan sebagai ciri atau identitas blog kita. 

Ini biasanya dilakukan dengan cara mengupload gambar pada tata letak atau layout, kemudian pada bab gadget Header kita mampu mengupload gambar atau logo blog kita dengan memilih option "Instead of title and description" biar titile dan deskripsi blog tidak menghalangi gambar atau logo blog. Dengan melaksanakan hal tersebut tadi, maka tag h1 blog Anda pasti tidak akan terdetek. 

Ada cara termudah untuk mengatasi hal tersebut di atas, yaitu menambahkan pribadi tag h1 pada image atau logo blog pada edit HTML. Silahkan cari arahan di bawah berikut ini:

<div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' style='display: block'/>
        </a>

Kemudian tambahkan <h1> dan </h1> pada arahan di atas, sehingga penampakannya akan menyerupai di bawah ini:

<div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <h1><img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' style='display: block'/></h1>
        </a>

Namun hal di atas akan menjadi problem dikala Anda menggunakan template dari Maskolis (Creating Website), khususnya template-template baru. Karena Maskolis menggunakan manipulasi tag h1 pada setiap templatenya. Manipulasi tag h1 ini kegunaannya atau fungsinya biar menambah nilai template blog Anda lebih SEO Friendly. Dengan menggunakan manipulasi tag h1 ini, dikala berada di homepage maka yang menjadi tag h1 ialah title blog Anda, namun kerika berada di postpage maka otomatis yang menjadi tag h1 ialah title postingan sehingga postingan Anda akan lebih SEO Friendly. 

Untuk lebih jelasnya silahkan baca postingan Maskolis wacana manipulasi tag h1 ini DI SINI.

Nah dikala Anda menggunakan template dari Maskolis atau memakai trik manipulasi tag h1 menyerupai pada postingan Maskolis tadi, maka dikala Anda menggunakan trik menambahkan tag h1 pribadi ke image atau gambar pada edit HTML, maka dikala berada di postingan akan terjadi multi tag h1 atau tag h1 menjadi 2 yaitu title atau logo blog dan title postingan. Tentunya ini bukannya menambah nilai SEO onpage Anda malah menurunkannya.

Untuk mengatasi hal tersebut di atas, maka kita perlu juga untuk memanipulasi title blog dengan gambar biar terdetek h1. Caranya menyerupai berikut ini:

1. Buatlah gambar yang sesuai dengan kehendak Anda untuk menggantikan logo pada header untuk background header-wrapper. Gambar tersebut harus sesuai dengan luas header-wrapper biar nantinya sesuai dengan template Anda. Kemudian tambahkan gambar dan arahan "overflow:hidden" tersebut pada CSS header-wrapper sebagai backround pada edit HTML, dan penampakannya akan menyerupai di bawah ini:

#header-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMO4xzx_6YBEuCIUnoBRS_sblCceSv0k7PQOdM_YywfWJ0H2RoEntR_5u6ORSB3jkWOSo30m4-oozJAr4n7hNF20bEgtLlNge2M7FM4rM_cpnn7ORjIUSWSWApuOKT9qm7f8n2LgS_fPU/s1600/header+kompidotcom.png)no-repeat;width:980px;margin:0 auto;overflow:hidden}

Kira-kira arahan CSS header-wrapper-nya akan menyerupai itu. Kebetulan luas header-wrapper blog Kompi Ajaib ialah 980px X 90px.

2. Hilangkan atau remove image pada header blog. Masuk ke layout atau tata letak, klik edit pada gadget header dan remove image. Hal ini dilakukan biar logo blog tidak menjadi 2 dan saling bertindih dan tentunya title blog akan menjadi teks sehingga akan terdetak h1 pada homepage dan tidak akan terjadi multi tag h1 pada postpage.

3. Agar title blog yang sekarang menjadi teks tidak muncul dan menghalangi gambar dari header-wrapper (point 1), maka headernya harus disembunyikan. Sekarang masuk lagi pada Edit HTML, tambahkan arahan "visibility:hidden" tanpa tanda kutip pada arahan CSS header. Sehingga penampakannya akan menyerupai di bawah ini:

#header{float:left;width:500px;text-align:left;color:#333;margin:0;visibility:hidden}

Nah hingga di sini saja yang harus Anda lakukan untuk memanipulasi title blog dengan gambar sehingga blog Anda tetap mempunyai gambar sebagai logo blog namun tetap terdetek tag h1 dan tidak terjadi multi tag h1 pada postingan.