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