4 Cara Meningkatkan Performa Website/Blog

Dipublikasikan oleh admin pada

4 Cara Meningkatkan Performa Website/Blog

Dexpertsseo – Dengan banyak hal dan aturan baru yang di update oleh mesin pencari Google ,seperti Algoritma dan aturan SEO suatu website/blog yang harus lebih ditingkatkan dari yang sudah lalu. Saya akan membahas beberapa diantaranya yang sangat berpengaruh besar terhadap peringkat suatu website/blog yang mungkin selama ini tidak menjadi penentu .

Apa sajakah … diantaranya itu ,mari kita coba urai satu persatu :

   1. Canonical URL

   2. Google AMP

   3. Meta Viewport

   4. Atribut Hreflang

Sekarang mari kita simak cara memasang di website/blog kita :

1a.Canonical URL

Cara Memasang Canonical URL Blogspot & WordPress

 Kita akan belajar cara memasang Canonical URL Pada Blogspot dan WordPress. Dengan memasang canonical url, maka artikel anda tidak akan tersingkir dari hasil pencarian Google karena website/blog anda sudah terdaftar/memiliki kode spesifik yang menjadi milik anda. Jika terjadi kopi paste oleh orang lain, blog anda akan tetap dianggap sebagai yang orisinil dan menjadi versi alamat web resmi dan benar. Canonical url akan menghindari pembelokan atau pembiasan.

Cara Memasang canonical url pada blogspot:

~ Di dashbord blogger,pilih Template, pilih edit html

~ Lanjut dengan cari kode  <head>

~ Kopi paste kode dibawah ini bawah kode diatas

<link expr:href=’data:blog.url’ rel=’canonical’/>

~ Simpan template.

Cara Memasang Rel Canonical Url di WordPress:

~ Masuk ke dashboard anda.

~ Masuk ke Appearance, pilih editor, pilih header.php

~ Sekarang cari kode  </head>  dan <?php wp_head(); ?>
Secara umum, sebelum kode </head>  akan terdapat kode seperti ini: <?php wp_head(); ?>

~ Sekarang copy paste kode dibawah ini sebelum kode </head>  atau kode  <?php wp_head(); ?>

Kodenya adalah sbb:

<?php if(is_home() || is_single() || is_page()) : ?>

<link rel=”canonical” href=”<?php the_permalink() ?>”>

<?php endif; ?>

~ Setelah anda pasang akan menjadi seperti berikut ini

<?php if(is_home() || is_single() || is_page()) : ?>

<link rel=”canonical” href=”<?php the_permalink() ?>”>

<?php endif; ?>

<?php wp_head(); ?>

</head>
 ~ Selanjutnya pilih Simpan atau update file.

Untuk mengecek apakah canonical url anda sudah berhasil terpasang dengan benar, kunjungi homepage atau salah satu url halaman, kemudian ketik ctrl+U dari keyboard untuk melihat sumber lamannya. 

2a.Google AMP

Apakah Anda ingin Tambah / setup Google AMP di situs Blogger / Blogspot? Blogger halaman seluler yang dipercepat atau AMP untuk blogger adalah cara untuk membuat situs Blogger Anda memuat lebih cepat pada perangkat seluler. Situs web pemuatan cepat menawarkan pengalaman pengguna yang lebih baik dan dapat meningkatkan lalu lintas Anda. Pada artikel ini, kami akan menunjukkan kepada Anda cara mengatur Google AMP di situs Blogger.

AMP Akan Meningkatkan kecepatan situs Anda.

Panduan bertahap untuk Tambah / Pengaturan Google AMP di Situs Blogger

  • Login ke Blog Blogger Anda.
  • Arahkan ke Desain dan Klik Edit Template.
  • Ubah tag yang ada untuk disinkronkan dengan tag berformat AMP. Ganti kode yang ada dengan kode yang dimodifikasi.
  • Simpan template.
  • AMP Anda dikonfigurasi di Blogger sekarang. Anda dapat memvalidasi situs web Anda.

Kode yang Dimodifikasi untuk Menambahkan / Mengatur AMP di Blogger / Blogspot

Ganti contoh kode di bawah ini dan Anda akan siap dengan AMP di Blogger. Ini benar-benar gratis. Catatan untuk membuat cadangan blog Anda sebelum Anda melanjutkan.

  • Langkah 1: Buat AMP HTML

Cadangkan Template Blogger Anda agar aman dari segala jenis masalah. Sekarang Pergi ke Dasbor Blogger Anda -> Templat -> Edit Templat.

Ganti kode <html> dengan kode berikut:

<html amp = ‘amp’> 

  • Langkah 2: Tambahkan Tag Meta Charset dan Viewport:

Cari dan Periksa tag meta dan viewport viewport. Jika tidak ada, salin dan tempel kode berikut setelah tag <head>:

<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

  • Langkah 3: Tambahkan Tag Canonical:

Buat blog Anda dapat ditemukan menggunakan tag kanonik. Periksa tag tautan kanonik. Jika tidak ada, tambahkan tautan kanonik seperti ini  <link rel = ”canonical” href = ”http://example.blogspot.in/article-metadata.html” />  yang hanya akan menunjuk ke dirinya sendiri.

Salin dan tempel kode berikut setelah tag viewport:

<link expr:href=’data:blog.url’ rel=’canonical’/>

  • Langkah 4: Atur AMP CDN:

Rekatkan kode ini tepat di atas tag </head>:

<style amp-boilerplate=’amp-boilerplate’>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate=’amp-boilerplate’>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async=’async’ src=’https://cdn.ampproject.org/v0.js’></script>

  • Langkah 5: Atur Gambar AMP:

Ubah tag gambar menjadi tag amp-gambar seperti kode contoh berikut:

<amp-img src=”AmpImage.jpg” alt=”amp-img” height=”500″ width=”500″></amp-img>

Sekarang semuanya sudah selesai.

Apa itu AMP?

AMP atau Google AMP adalah Laman Seluler yang Dipercepat . Seperti namanya, ini membantu mempercepat pemuatan situs di perangkat internet yang lebih lambat. Ini adalah inisiatif sumber terbuka yang didukung oleh perusahaan teknologi seperti Google dan Twitter. Meskipun itu mengurangi pengalaman pengguna situs. Ini memfilter data skrip berat yang membuat situs memuat lebih cepat. Jika Anda OK untuk berkompromi dengan pengalaman pengguna, Anda dapat mencoba Google AMP. Anda dapat dengan mudah menambahkan Google AMP di Blogger. Dengan cara ini Anda dapat mengatur Google AMP di Blogger.

Memvalidasi Google AMP di Blogger

Untuk Memvalidasi Halaman Google AMP Anda di Blogger, Anda dapat mengunjungi situs web resmi Google AMP. JIKA ada kesalahan, validator akan melempar kesalahan.

Berikut adalah URL untuk memvalidasi halaman AMP Blogger / Google Blogspot

https://validator.ampproject.org/

Selamat menikmati, Anda akan menyukai kinerja situs Anda sekarang.

 

3a. Meta Viewport

Membahas responsive memang agak panjang lebar, dan perlu di pelajari satu persatu. untuk itu kali ini saya akan berbagi tentang kegunaan menggunakan meta tag viewport dalam responsive.
Dalam Responsive Meta Tag Viewport sangat penting karena meta tag ini berguna untuk menentukan tata letak tampilan Mobile. ketika blog kita di akses lewat Browser Desktop Meta Tag ini tidak memiliki fungsi, namun ketika blog kita di akses atau di buka via Mobile Browser barulah si viewport ini bekerja. 
Dibawah ini merupakan meta tag viewport yang paling sering digunakan oleh para blogger.

<meta content=’width=device-width, initial-scale=1, maximum-scale=1′ name=’viewport’/>

Tampilan dari blog yang tidak memiliki atau memasang skala yang perlu ditentukan akan terlihat berantakan jika diakses pada versi mobile, untuk itulah meta ini berguna dan pemecahan masalahnya. 
Untuk lebih jelas pada bahasan Meta Tag viewport kita bisa lihat contoh di bawah ini perbedaan menggunakan meta tag viewport dan tidaknya ,berikut ini cara sederhana menerapkan meta tag viewport dan media queries. 
contoh ini adalah tampilan menggunakan pengodean versi HTML5.

<!DOCTYPE html>

<HTML>

<head>

 

/* pemasangan meta viewport */

<meta content=’width=device-width, initial-scale=1, maximum-scale=1′ name=’viewport’/>

 

<style type=’text/css’>

/* CSS Template */

body {

 

…nilai css page body…

 

}

/* CSS MEDIA QUERy */

@media screen and (max-width: 1024px){

/* CSS styles */

}

@media screen and (max-width:768px){

/* CSS styles */

}

@media screen and (max-width:600px){

/* CSS styles */

}

@media screen and (max-width:480px){

/* CSS styles */

}

@media screen and (max-width:320px){

/* CSS styles */

}

@media screen and (max-width:240px){

/* CSS styles */

}

</style>

</head>

</body>

 

…isi blog…

 

</body>

</HTML>

Jika ingin desain template blognya bisa tampil sempurna bisa memasang semua resolusi dalam media queries di contoh di atas, resolusi yang paling baik yang akan di tentukan dalam resolusi responsive Web Desain pada perangkat Mobile adalah pada resolusi 768px.
setiap penerapan media queries akan terlihat jelas jika anda mengecilkan ukuran browser anda ketika halaman sudah di muat untuk melihat apakah sudah sesuai atau belum.

4a. Atribut Hreflang

Cara Memasang Tag Atribut Hreflang Blog Bahasa Indonesia yang Benar

Atribut hreflang berguna saat kita membuat konten yang spesifik untuk pengunjung lokal. Atribut hreflang menambahkan sinyal ke mesin pencari yang diminta pengguna dalam bahasa “x”, bukan halaman dengan konten serupa dalam bahasa “y”.

Sebenarnya untuk cara pemasangan hreflang sangat mudah dilakukan jika kalian pernah memasang meta tag verifikasi webmaster. Letaknya sama, sama-sama diantara <head> … </head>.

Namun yang sering dibingungkan para blogger Indonesia adalah kode tepatnya. Jika dalam postingan google yang membahas hal ini tidak dijelaskan secara detail untuk tiap negara sehingga merasa bingung, maka dengan demikian saya putuskan membuat artikel ini.

Google mencontohkan <link rel=”alternate” hreflang=”x” href=”http://domainkalian.com”/>

Sedangkan untuk situs berbahasa Indonesia <link rel=”alternate” hreflang=”id” href=”http://domainkalian.com”/>

Kalian hanya mengganti kode bahasa negara “x” dengan “id” (indonesia).

Jangan lupa memasang “x-default” untuk memberikan sinyal kepada bot google dan yandex bahwa konten kita tidak untuk menargetkan halaman tertentu. Biasanya bahasa konten akan berubah sendiri (otomatis) sesuai dengan IP dan mesin pencari negara pengunjung, Contoh: ada pengunjung dari rusia menggunakan google.ru (ketika membuka google.com di negara Rusia), jika orang tersebut masuk ke blog kita yang berbahasa Indonesia maka bahasa blog kita akan berubah menjadi bahasa Rusia secara otomatis.

Untuk memudahkan saja, copy paste seluruh kode atribut hreflang berikut ke bagian <head> … </head> HTML template:

Platform Blogger:

<link rel=”alternate” hreflang=”id” expr:href=”data:blog.url”/>

<link rel=”alternate” hreflang=”x-default” expr:href=”data:blog.url”/>

Untuk penggunaan template AMP blogger, kode tag ini juga valid digunakan.

Platform WordPress:

<link href=”<?php the_permalink() ?>” hreflang=”id” rel=”alternate”/>

<link href=”<?php the_permalink() ?>” hreflang=”x-default” rel=”alternate”/>

Apakah menggunakan atribut hreflang yang benar dapat berpengaruh SEO sehingga membuat peringkat artikel menjadi naik di SERP?

Atribut hreflang mungkin tidak membantu dalam meningkatkan lalu lintas. Sebagai gantinya, tujuan penggunaannya adalah untuk menyajikan konten yang tepat kepada pengguna yang tepat. Atribut ini membantu mesin pencari menukar versi halaman yang benar ke dalam SERP berdasarkan lokasi pengguna dan preferensi bahasa.

Kalian bisa menyimpulkannya sendiri, apakah berpengaruh SEO tidak?

Dan dengan memanfaatkan hreflang yang benar juga, maka kita tidak akan menemukan error International Targeting pada webmaster google dan yandex!

Namun perlu diingat bahwa setelah menambah atribut ini maka perubahan dalam webmaster tidak akan langsung berubah begitu saja, perlu waktu robot mesin webmaster untuk merayap ulang situs kita.
 

Demikian artikel 4 Cara Meningkatkan Performa Website/Blog semoga bermanfaat.