Senin, 20 Januari 2014

Mengubah tag judul posting menjadi H1 Dynamic Heading


Cara Mengubah judul posting blogger menjadi H1
Pernahkah anda melihat blog yang dibuat dari Wordpress Self Hosted ( wordpress.org bukan wordpress.com ). Jika blog tersebut menggunakan framework Genesis atau Thesis pasti saat anda membuka artikel/pos di blog tersebut, judul posnya berubah menjadi H1 sedangkan saat di Homepage, judul posnya adalah H2. Ini merupakan SEO On Page karena Google dapat mengetahui mana yang lebih penting, judul blog atau judul pos/artikel blog itu. Trik ini dimakan dynamic heading.
Selain membuat blog anda menjadi dynamic heading, kode yang saya share di artikel ini dapat membuat pemasangan rel="title" otomatis di judul pos baik saat di homepage maupun saat di pos itu sendiri

Cara memasang Dynamic Heading di Blogger

1. Buka Blogger > Template > Edit HTML
2. Cari kode seperti ini
<!--No header image -->
<div id='header-inner'>
  <div class='titlewrapper'>
    <h1 class='title'>
      <b:include name='title'/>
    </h1>
  </div>
  <b:include name='description'/>
</div>
3. Ubah Kode tersebut menjadi seperti berikut
<!--No header image -->
<div id='header-inner'>
  <div class='titlewrapper'>
    <b:include name='title'/>
  </div>
  <b:include name='description'/>
</div>
4. Lalu coba scroll ke bawah, nanti anda akan menemukan kode seperti di bawah ini
 <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>
      <data:title/>
    </a>
  </b:if>
</b:includable>
5. Ganti dengan kode dibawah ini :
<b:includable id='title'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <h1 class='title'>
        <a expr:href='data:blog.homepageUrl'>
          <data:title/>
        </a>
      </h1>
      <b:else/>
      <h2 class='title'>
        <a expr:href='data:blog.homepageUrl'>
          <data:title/>
        </a>
      </h2>
    </b:if>
    <b:else/>
    <h2 class='title'>
      <a expr:href='data:blog.homepageUrl'>
        <data:title/>
      </a>
    </h2>
  </b:if>
</b:includable> 
6. Lalu Cari kode ini : 
<b:if cond='data:post.title'>
  <h3 class='post-title entry-title' itemprop='name'>
       Puluhan - ratusan kode
</h3>
</b:if>

Tapi beberpa template menggunakan tag H2, jadi cari juga yang seperti ini
<b:if cond='data:post.title'>
  <h2 class='post-title entry-title' itemprop='name'>
       Puluhan - ratusan kode
</h2>
</b:if>

Untuk mencarinya, anda bisa menggunakan Ctrl+F dan Cari <h3 class='post-title entry-title' itemprop='name'> atau   <h2 class='post-title entry-title' itemprop='name'>

Ganti kode tersebut menjadi kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <b:if cond='data:post.title'>
      <h1 class='post-title entry-title' itemprop='name'>
        <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>
</b:if>
    <b:if cond='data:post.title'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <h2 class='post-title entry-title' itemprop='name'>
        <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>
      </h2>
  </b:if>
    </b:if>
    <b:else/>
    <b:if cond='data:post.title'>
      <h1 class='post-title entry-title' itemprop='name'>
        <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>
    </b:if> 
Setelah itu jangan lupa simpan perubahan di template anda 

Tidak ada komentar:

Posting Komentar