Beranda » SEO » Cara Memanipulasi Title Blog Dengan Gambar Agar Terdetek H1

Cara Memanipulasi Title Blog Dengan Gambar Agar Terdetek H1

T Diposting oleh pada 8 Juli 2013
F Kategori , ,
b 1 komentar
@ Dilihat 531 kali
Cara Memanipulasi Title BlogInilah cara memanipulasi title blog dengan gambar agar terdetek H1. Tag h1 adalah title tag untuk sebuah blog dan keberadaannya menurut saya sangat diperlukan 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 masalah karena otomatis tag h1 akan terdetek mesin crawl search engine.
Namun ini akan menjadi masalah ketika kita merubah title blog dengan image atau gambar. Demi memperindah tampilan blog, maka banyak orang merubah title blog yang tadinya hanya huruf 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 bagian gadget Header kita bisa mengupload gambar atau logo blog kita dengan memilih option “Instead of title and description” agar titile dan deskripsi blog tidak menghalangi gambar atau logo blog. Dengan melakukan hal tersebut tadi, maka tag h1 blog Anda pasti tidak akan terdetek.

Ada cara termudah untuk mengatasi hal tersebut di atas, yaitu menambahkan langsung tag h1 pada image atau logo blog pada edit HTML. Silahkan cari kode 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 kode di atas, sehingga penampakannya akan seperti 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>

Cara diatas adalah bila template milik Anda belum menggunakan kode manipulasi title blog dengan gambar.
Dan bagi anda yang templatenya sudah menggunakan kode manipulasi title blog dengan gambar,berikut ini caranya:

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 agar nantinya sesuai dengan template Anda. Kemudian tambahkan gambar dan kode “overflow:hidden” tersebut pada CSS header-wrapper sebagai backround pada edit HTML, dan penampakannya akan seperti di bawah ini:

#header-wrapper{background:url(http://3.bp.blogspot.com/-fSb0Ff5MGw0/UUcdKx6ApUI/AAAAAAAAXsA/qjZ63XQ3hF4/s1600/header+kompidotcom.png)no-repeat;width:980px;margin:0 auto;overflow:hidden}

Kira-kira kode CSS header-wrapper-nya akan seperti itu. Kebetulan luas header-wrapper blog Kompi Ajaib adalah 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 agar 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 kode “visibility:hidden” tanpa tanda kutip pada kode CSS header. Sehingga penampakannya akan seperti di bawah ini:

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

Nah sampai 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.
Sumber

Diposting oleh

Darmanto adalah owner CV. Studio Web, sebuah perusahaan jasa pembuatan web SEO friendly, jasa desain blog, google adwords, jasa SEO profesional. Follow Channel telegramnya di https://t.me/darmantoseo

1 Komentar untuk Cara Memanipulasi Title Blog Dengan Gambar Agar Terdetek H1

Silahkan tulis komentar Anda

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

*

a Artikel Terkait Cara Memanipulasi Title Blog Dengan Gambar Agar Terdetek H1

Cara kirim sitemap web wordpress ke Google webmaster tools

Cara Kirim Sitemap Web WordPress ke Google webmaster tools

T 12 Februari 2018 F , A Darmanto SEO

Cara kirim sitemap web wordpress ke Google webmaster tools tidak jauh berbeda dengan cara kirim sitemap web blogspot. Sitemap web membantu search engine untuk membantu mempercepat menemukan konten -konten website Anda. Setelah menelusuri konten, search engine akan menilai dan meranking... Selengkapnya

Cara Membuat Status YM Online TERUS

T 16 Oktober 2012 F A Darmanto SEO

Cara Membuat Status YM Online TERUS – Setelah sobat mengetahui trik cara membuat satus facebook online terus,sekarang saya akan memberikan satu trik lagi yaitu Cara membuat status YM online terus walaupun sebenarnya kita sudah ofline.Ada tiga trik yang bisa sobat... Selengkapnya

Cara Seting Custom Domain Blogspot Terbaru

T 28 September 2012 F , A Darmanto SEO

Mengganti Custom domain blogspot saat ini harus memasukan SATU kode verifikasi terlebih dahulu lagi ke dalam CNAME di editor DNS kita.Setelah blogspot melakukan maintenance  beberpa hari dari tanggal 9-18 september 2012 dan inilah keputusannya yaitu bila kita hendak custom domain... Selengkapnya

+ SIDEBAR

Ada Pertanyaan? Silahkan hubungi customer service kami untuk mendapatkan informasi lebih lengkap mengenai jasa/produk kami.

Legalitas Usaha

CV. STUDIO WEB
SIUP: 503.9/192/KPPT/PMK/11-22/II/2015
TDP: 112236321645
Akta Notaris no. 01
Detail Legalitas Kami Klik disini

Alamat

Office:
Jl. Raya Gili Tugel – Kreo KM 1, Rt. 039 Rw. 005

Desa Cibuyur, Kec. Warungpring

Kab. Pemalang, Jawa Tengah,52358