Cara Kompres HTML Pada Template Blog

Kompres HTML agar template blog fast loading dan SEO Friendly
Kompres HTML Template Blog

Cara Kompres HTML BlogHTML merupakan unsur utama pada template web/blog. Karena HTML, merupakan bahasa pemerograman yang digunakan untuk menyusun tampilan halaman, fitur, dan berbagai widget pada sebuah web/blog.

Unsur HTML pada template sangat berpengaruh terhadap loading sebuah blog atau website. Artinya semakin banyak kode yang digunakan maka semakin berat beban loading blog atau website bersangkutan. Hal itu jelas mempengaruhi tingkat SEO (Search Enggine Optimization).

Ada banyak cara sebenarnya untuk meningkatkan unsur SEO Friendly pada sebuah blog. Salah satunya dengan melakukan modifikasi template itu sendiri. Caranya dapat dibaca di; Cara Modifikasi Template Blog Menjadi Lebih SEO Friendly.

Namun kali ini, materi yang akan kita bahas adalah cara mengurangi beban loading sebuah blog. Yakni dengan cara mengKompres HTML Pada Template Blog sehingga template blog dapat dikatakan fast loading dan tentunya meningkatkan unsur SEO.

Karena, Loading blog/website sangat berpengaruh pada banyaknya visitor. Dan, tidak usah diperdebatkan lagi, he… he… Visitor lebih menyukai web/blog yang ringan, itu pasti. Apalagi di Indonesia akses internetnya boleh dikatakan cukup lemot….

Langsung saja kita menuju langkah-langkah untuk meng-Kompres HTML Pada Template Blog.

  • Seperti biasa…. Loggin Blogger
  • Ke Rancangan
  • Edit HTML
  • Klik Download template/Backup template agar jika terjadi kesalahan dapat dikembalikan
  • Copy kan semua kode HTML ( agar cepat tekan Ctrl + A )
  • Buka TextFixer  
  • Gampang Ikuti langkah-langkah berikut:
Langkah-langkah kompres HTML Blog/website
Langkah-langkah Kompres HTML Template Blog


Cara Modifikasi Template Blog Menjadi Lebih SEO Friendly

http://redaksiexpo2012.blogspot.com/2013/08/cara-modifikasi-template-blog-menjadi.html
Modifikasi Template Blog

Berkutat dengan template blogspot memang asik jika tidak mau dikatakan ‘candu’. Apalagi memodifikasi templates agar lebih SEO Friendly.

Ada beberapa hal utama yang harus terkandung dalam sebuah template agar dapat dikatakan cukup SEO Friendly.

Pertama Buat META Tag yang lebih dinamis

Seberapa pentingkah Meta Tag? Menurut saya, Meta Tag merupakan bagian yang sangat penting. Mungkin pendapat ini keliru. Tapi dengan banyaknya situs Meta Checker atau sejenisnya, membuktikan bahwa komponen Meta Tag yang tersusun dengan baik sangat diperlukan.

Menurut saya, meta tag merupakan langkah awal search enggine mengenali berbagai komponen didalam blog untuk di indeks. Dan merupakan unsur utama tema apa yang diusung sebuah blog atau situs. Sehingga diterjemah dan ditempatkan pada kategori apa nantinya dimata search enggine.

Apa Arti Meta Tag Dinamis?

Secara default, ketika kita akses Halaman Utama Blog ataupun halaman posting pada umumnya memiliki Title, Descripsi dan Keyword yang sama. Dengan membuat Meta Tag yang lebih dinamis artinya, setiap posting mempunya Title, Deskripsi dan Keyword yang berbeda-beda.

Hal ini berguna agar setiap konten atau artikel yang kita posting terlihat spesifik dimata Search enggine. Jelas hal ini lebih SEO Friendly. Lebih jelasnya dapat dilihat pada:
Cara Membuat Meta Tag Dinamis pada blogspot  pada postingan sebelumnya.

Struktur Tag Header : H1, H2, H3, H4, H5, H6

Struktur H1, H2, H3, dst juga mempunyai peran sangat penting dalam membantu sebuah blog menjadi SEO friendly.  Sehingga bisa bersaing di posisi SERP google. Bagaimana susunan Tag H1, H2, H3 dst yang bagus ? – Master SEO dari referensi yang saya baca berpendapat Tag Header harus berurutan dan rapi. Berikut saran dalam Cara Mengatur Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot

Buat Navigasi Breadcrumb

Lalu apa pula Navigasi Breadcrumb tersebut?? Untuk menjelaskan apa itu Navigasi Breadcrumb, silahkan lihat ilustrasi di bawah ini :

Cara modifikasi template blogspot agar SEO Friendly
Navigasi Breadcrumb Dalam Kotak Warna Kuning

Lalu di cek dulu, apakah blog sobat sudah ada navigasi seperti yang di tandai warna kuning di atas ? – Jika sudah ada, maka Step ini bisa di lewati. Jika belum ada, ada baiknya mengikuti pembahasan ini sampai tuntas. Apa efek dari penambahan Navigasi Breadcrumb ini?, silahkan lihat capture salah satu blog di hasil pencarian google di bawah ini :

Cara memasang meta tag dinamis
Tampilan Hasil Pencarian di Google setelah blog di tambah navigasi breadcrumb

Seberapa penting navigasi breadcrumb di blogspot. Menurut saya sangat di anjurkan. Selain untuk lebih mempercantik penampilan blog, juga di sarankan karena blog lebih SEO Friendly dimata google.

Bagaimana menambahkan  navigasi breadcrumb di blog kita, silahkan masuk ke sini :Cara Membuat Navigasi Breadcrumb di blogspot

Demikian  Cara Modifikasi Template Blog Menjadi Lebih SEO Friendly. Mungin masih banyak cara metode lain yang lebih sempurna, atau  itu saran dan masukannya ditunggu di kotak komentar. Terimakasih atas kunjunganya…

Cara Membuat Meta Tag Dinamis pada blogspot

http://redaksiexpo2012.blogspot.com/2013/08/cara-membuat-meta-tag-dinamis-pada.html
Meta Tag Dinamis

Pada template blogspot agar lebih SEO Friendly ada beberapa komponen yang harus diperhatikan. Yakni META TAG. Meta tag bisa dibilang sebagai pintu gerbang atau jalur inti sebuah blog untuk dikenali oleh mesin pencari/search enggine. Dalam meta tag, terdapat unsur Keyword dan Description sebuah blog.

Ada banyak saran dalam membangun meta tag. Namun menurut saya Meta Tag Dinamis diperkirakan akan memperkuat konten dan artikel didalam sebuah blog lebih akrab dengan search enggine (SEO Friendly).

Berikut Cara Membuat Meta Tag Dinamis pada blogspot:

    • Login ke akun blogger sobat
    • Pilih edit HTML
    • Jangan lupa backup terlebih dahulu template
    • Cari kode <b:include data=’blog’ name=’all-head-content’/> (Gunakan CTRL+F agar lebih mudah)
    • Hapus semua Meta Tag, mulai dari <b:include data=’blog’ name=’all-head-content’/> sampai sebelum <b:skin><![CDATA[/
    • Selanjutnya masukkan META TAG dinamis di bawah ini :

      <b:if cond=’data:blog.pageType == &quot;index&quot;’>
      <title><data:blog.pageTitle/></title>
      <b:else/>
      <title><data:blog.pageName/></title>
      </b:if>

      <meta content=’true’ name=’MSSmartTagsPreventParsing’/>
      <meta content=’text/html; charset=UTF-8′ http-equiv=’Content-Type’/>
      <link expr:href=’data:blog.url’ rel=’canonical’/>

      <link href=’http://www.blogger.com/profile/066378140930646XXXX‘ rel=’me’/>
      <link href=’http://www.blogger.com/openid-server.g’ rel=’openid.server’/>
      <link href=’http://www.blogger.com/rsd.g?blogID=667204186762062XXXX‘ rel=’EditURI’ title=’RSD’ type=’application/rsd xml’/>

      <link href=’http://domainanda.com/feeds/posts/default’ rel=’service.post’ title=’Desc Singkat – Atom’ type=’application/atom+xml’/>

      <link href=’http://domainanda.com/feeds/posts/default?alt=rss’ rel=’alternate’ title=’Desc Singkat – RSS’ type=’application/rss+xml’/>

      <b:if cond=’data:blog.url == &quot;http://DOMAIN>COM&quot;’>
      <meta content=’Isi Dengan Deskripsi Blog Anda‘ name=’description’/>
      <meta content=’Isi Dengan Keyword Blog Anda‘ name=’keywords’/> </b:if>

      <b:if cond=’data:blog.pageType == &quot;item&quot;’>
      <title><data:blog.pageName/> | <data:blog.title/> | Blog Tutorial </title>
      <meta expr:content=’data:blog.pageTitle + &quot; – Blog Tutorial dan Tip SEO&quot;’ name=’description’/>

      <meta expr:content=’data:blog.pageTitle + &quot;,.. Tutorial Blog, Tip SEO, Template Gratis&quot;’ name=’keywords’/>
      <b:else/>
      <meta expr:content=’data:blog.pageName + &quot; – Blog Tutorial dan Tip SEO&quot;’ name=’description’/>
      <meta expr:content=’data:blog.pageName + &quot;,.. Tutorial Blog, Tip SEO, Template Gratis&quot;’ name=’keywords’/>
      </b:if>

      <meta content=’Blogger Coepoe‘ name=’author’/>
      <meta content=’© 2012 Blogger Coepoe‘ name=’copyright’/>
      <meta content=’index, follow’ name=’robots’/>
      <meta content=’index, follow’ name=’googlebot’/>
      <meta content=’index, follow’ name=’googlebot-image’/>
      <meta content=’index, follow’ name=’msn-bot’/>
      <meta content=’index, follow’ name=’yahoo-slurp’/>
      <meta content=’all’ name=’spiders’/>
      <meta content=’all’ name=’webcrawlers’/>
      <meta content=’id’ name=’geo.country’/>
      <meta content=’Indonesia’ name=’geo.placename’/>
      <meta content=’0′ http-equiv=’expires’/>
      <meta content=’never’ name=’expires’/>
      <meta content=’global’ name=’distribution’/>
      <meta content=’noindex,follow’ name=’labels’/>
      <meta content=’never’ http-equiv=’expires’/>
      <meta content=’1 days’ name=’revisit-after’/>
      <meta content=’2 days’ name=’revisit’/>
      <meta content=’10’ name=’pagerank’/>
      <meta content=’100′ name=’alexa’/>
      <meta content=’no’ http-equiv=’imagetoolbar’/>
      <meta content=’true’ name=’MSSmartTagsPreventParsing’/>
      <meta content=’general’ name=’rating’/>
      <meta content=’aeiwi, alexa, alltheweb, altavista, aol netfind, anzwers, canada, directhit, euroseek, excite, overture, go, google, hotbot, infomax, kanoodle, lycos, mastersite, national directory, northern light, searchit, simplesearch, websmostlinked, webtop, what-u-seek, aol, yahoo, webcrawler, infoseek, excite, magellan, looksmart, cnet, baidu’ name=’search engines’/>

      Jangan lupa ganti text yang berwarna merah, sesuai dengan blog anda. META Tag diatas dinamis karena memiliki tittle, deskripsi, keyword yang berbeda-beda sesuai postingan atau artikel pada blog.

      Biar makin mantab, sekali-sekali coba tools yang satu ini untuk cek Meta Tag : MetaChecker

      Oh.. ya.. tips ini saya dapat dari http://blogger-coepoe.blogspot.com yang telah saya coba. Dan telah di test pada MetaChecker dan SEOquake Diagnosis 


      Selamat mencoba semoga Cara Membuat Meta Tag Dinamis pada blogspot ini bermanfaat..

        

      Cara membuat Sitemap XML pada Blogspot

      XML Sitemap pada blog cukup penting untuk mengekpos struktur situs lengkap pada mesin pencari atau optimasi SEO. Sedangkan cara memasang XML Sitemap tersebut sebenarnya tidak terlalu rumit. 

      Langkah awal, kita dapat memanfaatkan Sitemap Generator dan tinggal memasukkan alamat lengkap blog pada kolom xml sitemap for blogger yang telah disediakan lalu langsung click Generate Sitemap.

      http://redaksiexpo2012.blogspot.com/2013/08/cara-membuat-sitemap-xml-pada-blogspot.html
      SITEMAP GENERATOR FOR BLOG

      Hampir selesai!!. 

      Langkah selanjutnya, seperti biasa kita masuk ke dashboard Blogger, lalu pilih Pengaturan – Preferensi Pencarian–>>, Robots.txt pada bagian Perayap dan pengindeksan (Crawling and Indexing). Lalu Tempel teks clipboard yang didapat dari Sitemap Generator tadi. 

      Bentuk Contoh Teks Clipboard Sitemap Blog

      # Blogger Sitemap generated on 2013.08.20
      User-agent: *
      Disallow: /search
      Allow: /
      Sitemap: http://redaksiexpo2012.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

       Selesai sudah!!!…

      Demikianlah cara mudah  memasang Sitemap XML pada Blogspot. Semoga bermanfaat…

      Cara merubah ukuran, jenis font dan warna pada judul post

      http://redaksiexpo2012.blogspot.com/2013/08/cara-mengatur-tag-h1-h2-h3-h4-h5-h6.html
      Artikel tersebut sebenarnya berkaitan erat dengan postingan sebelumnya yakni;  Cara Mengatur Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot. Karena dalam pengaturan tersebut berpengaruh terhadap ukuran, jenis font dan warna pada judul post. 

      Cara merubah font, ukuran, dan warna pada Judul Postingan,  sebenarnya tidak terlalu rumit, namun perlu ketelitian dalam memelototi kode-kode HTML pada template blog.

      Seperti biasa; 

      • Login di Blogger
      • Di menu drop down, klik template – Edit HTML
      • Backup template kalian dahulu (Takut terjadi sesuatu yang tidak dinginkan)
      • Cari kode yang seperti ini :
      .post h3 {text-shadow: 1px 1px 3px #fff;
      margin:.25em 0 15px;border-bottom:1px dashed $bordercolor;
      padding:1px 0px 4px;
      font:normal normal 24px Oswald;
      font-weight:normal;
      line-height:1.4em;
      color:#333;
      font:$titlefont;
      }
      .post h3 a, .post h3 a:visited, .post h3 strong {
      display:block;
      text-decoration:none;
      font:normal normal 24px Oswald;color:#333;
      }
      .post h3 strong, .post h3 a:hover {
      color:#c22400;
      }

      Jika sudah menemukan kode tersebut, hapus kode itu dan ganti dengan kode berikut :

      .post h3 { margin: .25em 0 0; padding: 0 0 4px; color: $titlecolor; font: $posttitlefont; }.post h3 a, .post h3 a:visited, .post h3 strong { text-decoration: none; color: $titlecolor; }.post h3 strong, .post h3 a:hover { color: $titlehovercolor; }

      Lalu Cari lagi kode /* Variable definitions dan letakan kode berikut tepat dibawah kode /* Variable definitions

      <Variable name=”titlecolor” description=”Post Title Color”type=”color” default=”#c60″ value=”#cc6600″><Variable name=”titlehovercolor” description=”Post Title Hover Color”type=”color” default=”#c60″ value=”#cc6600″><Variable name=”posttitlefont” description=”Post Title Font”type=”font” default=”normal normal 18px ‘Trebuchet MS’,Trebuchet,Arial,Verdana,Sans-serif” value=”normal normal 18px ‘Trebuchet MS’,Trebuchet,Arial,Verdana,Sans-serif”>

       Setelah itu, maka dapat diatur sendiri ukuran dan warna font sesuai dengan keinginan. Lalu save template. 

      Cara Mengubah Ukuran Teks Header pada Blogspot

      Cari bagian  <Group description=”Blog Title” selector=”.header h1″> atau yang mirip dengan itu.  Ganti ukuran jenis font yang ada. Seperti yang telah diberi tanda warna merah dibawah ini.

      <Variable name=”header.font” description=”Font” type=”font”
      default=”normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif” value=”normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif”/> 

      Cara Mengubah Ukuran Font Deskripsi pada Blog

      Cari kode:

      <Variable name=”description.text.size” description=”Description Text Size” type=”string” default=”140%” value=”140%”/>   

      Lalu ubah nilai persentase yang telah diberi tanda warna merah seperti tersebut diatas.

      Cara Mengatur Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot

      http://redaksiexpo2012.blogspot.com/2013/08/cara-mengatur-tag-h1-h2-h3-h4-h5-h6.html

      Tag H1, H2, H3, H4, H5, H6 adalah salah satu faktor penting untuk optimasi SEO pada blog. Karena sistem indek blog oleh search enggine, baik template maupun konten yang ada dalam blog dimulai dari tag H1 dan diteruskan sampai tag terakhir H6.

      Untuk itu, penataan yang baik tag H1-H2-H3-H4-H5-H6 akan sangat membantu meningkatkan page rank dan jumlah visitor.

      Sebelum melangkah dalam cara mengatur Tag H dalam template blog ada baiknya kita mengetahui fungsi dan posisi TAG tersebut.

      Selector H1

      • Heading (Judul Blog)
      • Judul Postingan atau artikel pada posisi Single Post

      Selector H2

      • Sub Heading atau Deskripsi Blog (Jika mengandung keyword)
      • Sub Sub Heading atau Judul Postingan

      Selector H3

      • Pada Judul Artikel Postingan 
      • Heading pada posisi Single Post (posisi bertukar dengan judul postingan yang menjadi tag H1)

      Selector H4

      • Pada menu Sidebar seperti Categoy, Blogroll, Recent Post, Related Post, Label, Following List dll.
      • Pada tulisan ”16 Respons to Bla…bla….bla….” pada bagian Komentar 

      Selector H5

      • Nama pengomentar yang berupa link (pada kolom komentar)

      Selector H6

      • Pada Footer seperti ”Powered by : Science And Education”

      Berkaitan dengan hal tersebut, langkah dalam pengaturan TAG H pada template blog yakni;

      Cara merubah tag Judul Blog menjadi h1 pada homepage dan h3 pada halaman posting.

      Cari kode:
      <div class=’titlewrapper’
      dst..
      dst..
      dst..
      </div>
       

      Ganti semua kode di atas dengan kode ini :

      <div class=’titlewrapper’ style=’background: transparent’>
      <b:if cond=’data:blog.pageType != &quot;item&quot;’>
      <h1 class=’title’ style=’background: transparent; border-width: 0px’>
      <b:include name=’title’/></h1>
      <b:else/>
      <h3 class=’title’ style=’background: transparent; border-width: 0px’>
      <b:include name=’title’/></h3>
      </b:if>
      </div>
       

      Jika pada beberapa terdapat lebih dari 1 kode <div class=’titlewrapper’,  ganti semuanya dengan kode di atas!

      Cara merubah tag Deskripsi Blog menjadi h2 :

      Cari kode : 

      <div class=’descriptionwrapper’>
      dst…
      dst..
      dst…
      </div>

      Ganti menjadi :

      <div class=’descriptionwrapper’>
      <h2 class=’description’><span><data:description/></span></h2>
      </div>

      Jika terdapat lebih dari 1 kode <div class=’descriptionwrapper’> ganti semuanya dengan kode di atas!

      Cara merubah tag posting menjadi h3 pada homepage, dan menjadi h1 pada halaman posisi single post

      a. Merubah tag heading posting menjadi h3 pada homepage :
      Cari kode :
      <div class=’post hentry uncustomized-post-template’ , pada 4 atau 5 baris di bawah kode ini akan anda temukan kode seperti ini:

      <h? class=’post-title entry-title’ itemprop=’name’>
      dst…dst…dst…
      dst…dst…
      dst…
      </h?>

      Ganti tag headnya menjadi h3, kalau sudah h3 tidak perlu dirubah.

      b. Merubah tag head posting menjadi h1 pada halaman posting (single post)
      Cari kode merah tebal yang beberapa baris di atasnya ada kode berwarna hijau seperti di bawah ini:

      <b:includable id=’post’ var=’post’>
      kode bla…bla…bla…
      kode bla…bla…bla… 
      <a expr:name=’data:post.id’/>
      <b:if cond=’data:post.title’>
      <h3 class=’post-title entry-title’>
      kode bla…bla…bla…
      kode bla…bla…bla…
      </h3>
      </b:if>
      <div class=’post-header’>

      Lalu ganti semua kode yang berwarna merah dengan kode di bawah ini : 

      <a expr:name=’data:post.id’/>
      <b:if cond=’data:blog.pageType != &quot;item&quot;’>
      <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’><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>
      </h1>
      </b:if>

      Langkah terakhir save template. 

      Biasanya  dengan melakukan perubahan Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot tersebut maka secara otomatis ukuran font, judul, deskripsi dan titel blog akan berubah sesuai dengan pengaturan kode CSS.

      Adapun cara untuk merubah  kembali ukuran dan jenis font tersebut dapat dibaca pada: Cara merubah ukuran, jenis font dan warna pada judul post

      How to install a Blogger Template

      Follow this simple guide to install your Favorite Blogger Template:

      How to install a Blogger Template
      How to install a Blogger Template
        • Click on the Download button and save file to PC (.xml format).
        • Log in Blogger dashboard.
        • Go to Template section → Backup/Restore.
        • Click on Download Full Template to Backup your previous template.
        • Upload a template from a file on your hard drive by click Browse option button.
        • Click Upload button, a confirmation message will appear. Click on Keep Widgets.
        • Now you’re done.

          Or watch the clip below if you’re still confused: