23 Okt 2011

Merubah tag H1 di Artikel Post

Ahli seo mengatakan kalau search engine mengutamakan susunan header (h1, h2) dari blog kita.Jika anda ingin merubah judul post menjadi h1 tentunya akan ada dua h1 dalam template blog kamu, nah untuk mensiasatinya kita harus memastikan jika sedang berada di single post (artikel) judul post menjadi H1 dan judul blog menjadi p. title (tidak ada H) dan jika berada di homepage maka susunannya kembali semula (judul blog H1 dan judul post h2 atau h3).

Untuk membuat judul post blog kita menjadi H1 maka ikuti tahapan berikut ini:
  1. Saat klik -> rancangan dan pilih edit -> html lalu centang expand template
  2. Cari kode berikut di template blog kamu :
    <h1 class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
    </h1>
    Jika sudah ketemu, ganti dengan dibawah ini:
    <h1 class='title' style='background: transparent; border-width: 0px'>
    <a expr:href='data:blog.homepageUrl'>
    <b:include name='title'/></a>
    </h1>
  3. Cari kode berikut di template kamu
    <!--No header image -->
    <div id='header-inner'>
    <div class='titlewrapper'>
    <h1 class='title'>
    <b:include name='title'/>
    </h1>
    </div>
    <b:include name='description'/>
    </div>
    jika sudah ketemu, ganti dengan kode dibawah ini:
    <!--No header image -->
    <div id='header-inner'>
    <div class='titlewrapper'>
    <b:if cond='data:blog.pageType != "item"'>
    <H1 class='title'>
    <b:include name='title'/>
    </H1>
    <b:else/>
    <p class='title'>
    <b:include name='title'/>
    </p>
    </b:if>
    </div>
    <b:include name='description'/>
    </div>
  4. Kemudian cari kode berikut di template kamu:
    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <b:if cond='data:blog.url != data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h3>
    </b:if>
    Jika sudah ketemu, ganti dengan kode dibawah ini:
    <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.title'>
    <H3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </H3>
    </b:if>
    <b:else/>
    <H1 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </H1>
    </b:if>
  5. Jika anda memakai gambar/image untuk header blogspot kamu, maka tahapannya sudah selesai sampai disini. Tapi jika kamu tidak memakai gambar maka tulisan judul blog kamu akan berubah-ubah (besar kecil), jika dihomepage judul blog tetap normal (sesuai css) tapi jika di single post (permalink artikel) maka judul blog kamu menjadi kecil seperti huruf artikel. Hal ini karena kita belum menambahkan css untuk kode p.title (css alternatif judul blog ketika berada di artikel).

    Oleh sebab itu kita harus menambahkan kode css yang sama ukuran dan elemennya dengan kode title/header (judul blog kita)

    Contoh:
    #header h1{elemen/ukuran css title blog kamu}
    #header h1 a{Disini elemen/ukuran css title blog kamu}

    Maka tambahkan css seperti berikut ini:
    P.title {Nah Disini harus sama dengan elemen/ukuran css title blog kamu}
    P.title a{Nah Disini harus sama dengan elemen/ukuran css title blog kamu}

    Untuk makin jelasnya kita coba dengan css berikut ini:
    Jika css header kamu seperti ini:
    #header h1{font-size:23px;font-weight:700;float:left;width:40%;text-shadow:1px 0 #2B4462;letter-spacing:-1px}
    #header h1 a{color:#fff;text-decoration:none}
    Maka tambahkan dibawahnya dengan kode css:
    P.title {font-size:23px;font-weight:700;float:left;width:40%;text-shadow:1px 0 #2B4462;letter-spacing:-1px}
    P.title a{color:#fff;text-decoration:none}
  6. Setelah itu jangan lupa save template.

Catatan:

Ingat syarat bagi search engine dan browser membaca sebuah weblog adalah adanya unsur H1, H2 dan H3 (minimal itu saja cukup). Hati-hati karena ketika berada disingle post/artikel yang sudah menjadi H1 sedangkan jika di homepage artikel post (permalink post) kita H3, berarti kamu harus menyiapkan H3 tambahan, agar syarat H1, H2, dan H3 di blog kamu tetap ada baik itu ketika di homepage ataupun ketika di artikel postingan kita.
Dapatkan Update Artikel RSS feed yang bermanfaat dari Saya, atau ikuti Saya di Twitter.
Email address:

0 komentar:

Posting Komentar