Mohon Aktifkan Javascript!Enable JavaScript
Cara Membuat Template Blog Seo 100% ( Seo On Page ) - Rafly Droid

Rabu, 27 Mei 2015

Cara Membuat Template Blog Seo 100% ( Seo On Page )

Pernahkan Anda  Mengecek Template Blog Yang Anda Pakai Sudah SEO Atau Belum?Sudah Berkali-Kali Gonta-Ganti Template Yang Katanya SEO, Dan Parahnya Lagi, Template Tersebut Dijual Kepada Publik Padahal Kualitas SEO Templaate Tersebut Rendah.
Seo

Sudah Susah Payah Menulis Artikel, Namun Traffik Pengunjung Belom Mengalami Peningkatan. :(
Untuk Mengatasi Hal Tersebut, Tentunya Anda Perlu Melakukan Optimasi SEO. SEO Sendiri Terbagi Dua, Yaitu; SEO On Page ( Optimasi Yang Dilakukan Dalam Web Tersebut ) Dan SEO Of Page ( Optimasi Yang Dilakukan Di Luar Web Blog).

Tutorial Kali Ini, Cara Memodifikasi Template Blogger ( SEO On Page ) Untuk Mendapatkan Skor 100% Dengan 2 Langkah, Yaitu; Mengatur SEO Meta Tag Dan Tag Heading Dinamis.

Cara Membuat Blog SEO 100% ( SEO On Page ) :

SEO Meta Tag :


  • SEO Meta Tag Yang Dipakai Blogger Seni :
<!-- SEO Meta Tag by Blogger Seni -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
</b:if>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title> <data:blog.title/> ~  Blogger Seni</title>
<meta content='Tutorial Blogger, Film, Antivirus, Software, Islam, Kata-Kata, Facebook, Bitcoin' name='description'/>
<meta content='Tutorial Blogger, Film, Antivirus, Software, Islam, Kata-Kata, Facebook, Bitcoin' name='keywords'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Tutorial Blogger, Film, Antivirus, Software, Islam, Kata-Kata, Facebook, Bitcoin' name='description'/>
<meta content='Tutorial Blogger, Film, Antivirus, Software, Islam, Kata-Kata, Facebook, Bitcoin ' name='keywords'/>
<meta content='IQlJARQvQQYV4Lt5dCR548n60mk' name='alexaVerifyID'/>
<meta content='rZw3-q6BrLk9UGcINImvwEq1I_lXsF6LrSyhq_jUMPM' name='google-site-verification'/>
<meta content='kode verifikasi bing' name='msvalidate.01'/>
<meta content='https://plus.google.com/101673980103826608604' name='author'/>
</b:if>

  • Copy Kode SEO Meta Tag Di Atas Dan Paste Di Bawah Kode <head>.
  • Yang Berwarna Sesuaikan Dengan Title Blog ANda, Deskripsi Dan Kata Kunci Yang Ada Pada Blog, Beserta Authornya.


Tag Heading Dinamis.

Sebenarnya Langkah Di Atas Sudah Cukup Untuk Membuat Blog Menjadi SEO, Namun Perlu Menyempurnakan Bagian Heading. Buat Heading Blog Menjadi H1, H2, H3, Caranya Adalah Sebagai Berikut :
Cari Kode Berikut Ini ( Yang Berwarna Menyesuaikan Dengan Nama Bllog Anda ).

<b:widget id='Header1' locked='true' title='Blogger Seni(Header)' type='Header'>
          <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
          <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
          <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>
        </b:widget> 


  • Kemudian Ganti Dengan Kode Berikut Ini :

<b:widget id='Header1' locked='true' title='Blogger Seni(Header)' type='Header'>
        <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
          </b:if>
  </b:if>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
      </b:if>
    </b:if>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <p class='title'><b:include name='title'/></p>
     <b:else/>
       <h1 class='title'><b:include name='title'/></h1>
     </b:if>
  <b:else/>
          <p class='title'><b:include name='title'/></p>
  </b:if>
     <b:include name='description'/>
      </div>
 </div>
  </b:if>
</b:includable>
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
<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>
      </b:widget>  

  • Tahap Selanjutnya Mengedit Pada Judul Postingan. Cari Kode Seperti Ini :


<b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <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> 


  • Ganti Kode Di Atas Denga Kode Berikut :


 <b:if cond='data:post.title'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <h1 class='post-title entry-title' itemprop='name'>
            <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>
          </h1>
     <b:else/>
          <h2 class='post-title entry-title' itemprop='name'>
            <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>
          </h2>
  </b:if>
   <b:else/>
        <h1 class='post-title entry-title' itemprop='name'>
          <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>
        </h1>
   </b:if>
    </b:if> 
Jika Sudah, Silahkan Cek Seo Untuk Mengetahui Perubahannya :D

Untuk Cek Seo Silahkan Kunjungi Chkme

Terbukti, Blogger Seni Mendapat Nilai 100%. Pada Home Page
Hasil Seo1
Dan, Blogger Seni Mendapat Nilai 100% Pada Postingan Blog.
Hasil Seo2

NB : Untuk Mendapat Nilai 100% Pada Postingan Blog, Sobat Harus Mengisi Deskripsi Penelusuran Pada Posting Yang Sobat Buat. :D

Terima Kasih Bagi Yang Sudah Membaca Artikel Tentang Cara Membuat Template Blog Seo 100% ( Seo On Page ). Semoga Artikel Ini Bermanfaat. :D

5 komentar:

  1. ohhh, jadi seperti itu ya gan, wahh saya coba dulu deh, makasih bnyak

    BalasHapus
  2. ternyata simple sekali ya mas cara mendapatkan angka 100 di chkme, mau coba dulu mas kebetulan nilai saya masih di bawah 80 :(

    BalasHapus
  3. Masih belum paham nih gan, 100% SEO itu kayak gimana ? Diatas tutorialnya ane liat hehe

    BalasHapus