Tips Dan Teknik SEO Yang Tidak Boleh Anda Lupakan

Untuk memperoleh peringkat terbaik di berbagai mesin pencari, seperti Google dan Yahoo, penting untuk menerapkan strategi SEO yang efektif. Anda yang tidak berlatih SEO secara terus-menerus cenderung lupa beberapa tips yang sebetulnya telah banyak dipublikasikan, padahal menerapkan tips tersebut akan memberikan keuntungan untuk blog anda sepanjang waktu:

Berikut ini Tips SEO yang tidak boleh anda lupakan:

Header dan sub-header tag

Dengan menggunakan <h1> (header) dan <h2> (sub-header) tag secara efektif, Anda bisa melakukan lebih dari sekedar meningkatkan tata letak situs web Anda. Agar tag ini bermanfaat untuk SEO, Anda perlu menggunakannya dengan cara yang baik. Hal yang penting untuk Anda ingat adalah untuk menghindari spamming website Anda dengan memborbardir header dengan kata kunci (mesin pencari benci ini, sehingga benar-benar akan menghancurkan usaha SEO anda) .

Hapus kode yang tidak perlu

SEO diimplementasikan ke dalam situs web Anda dengan tujuan menjadikannya sebagai terlihat mesin pencari dan pengunjung potensial mungkin. Gunakan validator XHTML untuk menentukan apakah semua kode Anda dapat dibaca atau tidak - pastikan untuk menghapus kode yang tidak berguna untuk tujuan SEO Anda.

Hindari menggunakan gambar sebagai link

Ketika mesin pencari mengindeks situs Anda, mereka benar-benar mengcrawl setiap aspek. Anda harus menghindari menggunakan gambar sebagai link. Semua mesin pencari mengalami kesulitan untuk membaca gambar, mereka lebih mampu untuk membaca text, sehingga link dengan menggunakan gambar menjadi kurang bermanfaat untuk strategi SEO Anda.

Gunakan kata kunci dalam URL Anda

Salah satu langkah pertama untuk menerapkan strategi SEO yang efektif untuk website Anda adalah untuk mengoptimalkan nama domain Anda dan konten situs untuk kata kunci yang relevan. Anda juga harus melakukan ini untuk semua URL di website Anda,.

Minimumkan link yang ada di footer

Ada satu jenis link yang mendapat perhatian sangat sedikit dari mesin pencari, sehingga sama sekali tidak berguna untuk SEO. Link ini dikenal sebagai link footer, meskipun bermanfaat dari sudut pandang navigasi, namun untuk tujuan SEO manfaatnya sedikit, oleh sebab itu usahakan untuk meminimalkan link pada footer.

Hendaknya anda selalu mengingat tips diatas, agar anda dapat berhasil dalam upaya meningkatkan peringkat blog anda di search engine.

Tutorial Ionic Framework (English Language) Ionic Basics : Ionic - Environment Setup

This chapter will show you how to start with Ionic framework. There are following components needed to start with Ionic:

Installing Cordova and Ionic

We will use windows command prompt for this tutorial. The same steps can be applied to OSX terminal. Open your command window to install Cordova and Ionic:

C:\Users\Username> npm install -g cordova ionic

Creating Apps

While creating your app, you can choose from 3 options to start:

1. Tabs App:
2. Blank App:
3. Side menu app

In your command window open the folder where you want to create your app and try one of the options mentioned below.

Tabs App

If you want to use Ionic tabs template your app will be built with tab menu, header and couple of useful screens and functionalities. This is default Ionic template. Open your command window and choose where you want to create your app.

C:\Users\Username> cd Desktop

This command will change working directory. Our app will be created on Desktop.

C:\Users\Username\Desktop> ionic start myApp tabs

Ionic Start command will create folder named myApp and setup Ionic files and folders.

C:\Users\Username\Desktop> cd myApp

Now we want to access myApp folder that we just created. This is our root folder.

Now let's add Cordova project for android Platform and install basic cordova plugins. This step allows us to run the app on Android emulator or device.

C:\Users\Username\Desktop\myApp> ionic platform add android

Next let's build our app. If you have building errors after running following command you probably didn't install android SDK and its dependencies. Head on to our android tutorial and follow the steps shown there.

C:\Users\Username\Desktop\myApp> ionic build android

The last step of the installation process is to run your app which will start the mobile device if connected or default emulator if there is no device connected. Android default emulator is slow so I suggest you to install Genymotion or some other popular Android emulator.

C:\Users\Username\Desktop\myApp> ionic run android

This will produce below result which is an Ionic Tabs App.

Blank App

If you want to start from scratch you can install Ionic blank template. We will use the same steps we explained above with the addition of ionic start myApp blank instead of ionic start myApp tabs.

C:\Users\Username\Desktop> ionic start myApp blank

Ionic Start command will create folder named myApp and setup Ionic files and folders.

C:\Users\Username\Desktop> cd myApp

Let's add Cordova project for android Platform and install basic cordova plugins as explained above.

C:\Users\Username\Desktop\myApp>ionic platform add android

Next let's build our app:

C:\Users\Username\Desktop\myApp> ionic build android

Finally we will start the App as follows:

C:\Users\Username\Desktop\myApp> ionic run android

This will produce below result which is an Ionic Blank App.

Side Menu App

Third template that you can use is side menu template. The steps are the same as the previous two templates, we will just add sidemenu when starting our app.

C:\Users\Username\Desktop> ionic start myApp sidemenu

Ionic Start command will create folder named myApp and setup Ionic files and folders.

C:\Users\Username\Desktop> cd myApp

Let's add Cordova project for android Platform and install basic cordova plugins as explained above.

C:\Users\Username\Desktop\myApp> ionic platform add android

Next let's build our app:

C:\Users\Username\Desktop\myApp> ionic build android

Finally we will start the App as follows:

C:\Users\Username\Desktop\myApp> ionic run android

This will produce below result which is an Ionic Side Menu App.

Test App in Browser

Since we are working with JavaScript you can serve your app on any web browser. This will speed up your building process but you should always test your app on native emulators and devices. Type the following to serve your app on web browser.

C:\Users\Username\Desktop\myApp> ionic serve

The above command will open your app in web browser. Google chrome provides device mode functionality for mobile development testing. Press F12 to access developer console.

The top left corner of the console window click has "Toggle device mode" icon. Next you need to click "Dock to right" icon in top right corner. Refresh the page and you should be ready for testing on web browser.

Project Folder Structure

Ionic creates the following directory structure for all type of apps. This is really important for Ionic developer to understand the purpose of every directory and file mentioned below:

Let's have a quick look into every folders and files available in the above mentioned project folder structure:

hooks

Hooks are scripts that can be triggered during build process. They are usualy used for Cordova commands customisation and for building automated processes. We will not use this folder during this tutorial.

platforms

This is the folder where Android and IOS projects are created. You might encounter some platform specific problems during developement that will require these files but you should leave them intact most of the time.

plugins

This folder contains Cordova plugins. When you initially create Ionic app some of the plugins will be installed. We will show you how to install Cordova plugins in some of our next chapters.

resources

This folder is used for adding resources like icon and splash screen to your project.

scss

Since Ionic core is built with Sass this is the folder where your Sass file is located. For simplicity we will not use Sass for this tutorial. Our styling will be done using CSS.

www

Www is main working folder for Ionic developers. You will spend most of your time here. Ionic gives us their default folder structure inside 'www' but you can always change it to acommodate your own needs. When you open this folder you will find:

• css folder where you will write your CSS styling.
• img for images.
• js contains apps main configuration file (app.js) and AngularJS components (controllers, services, directives). All of your Javascript code will be inside these folders.
• libs are where your libraries will be placed.
• templates for your HTML files.
• index.html as a starting point to your app.

Other files

Since this is beginners tutorial, we will just mention some of the other files and their purpose.

• .bowerrc is bower configuration file.
• .editorconfig is editor configuration file.
• .gitignore is used to instruct what part of the app should be ignored when you want to push your app to Git repository.
• bower.json will contain bower components and dependencies if you choose to use bower package manager.
• gulpfile.js is used for creating automated tasks using gulp task manager.
• config.xml is Cordova configuration file.
• package.json contains information about the app, dependencies and plugins that are installed using NPM package manager.

Tutorial Ionic Framework (English Language) Ionic Basics : Ionic - Overview

Ionic is front end HTML framework built on top of AngularJS and Cordova. As per official document following is the definition of the Ionic Framework:

Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Think of Ionic as the front-end UI framework that handles all the look and feel and UI interactions your app needs in order to be compelling. Kind of like "Bootstrap for Native," but with support for a broad range of common native mobile components, slick animations, and beautiful design.

Ionic Framework Features

Following are the most important features of Ionic:

AngularJS

Ionic is using AngularJS MVC architecture for building rich single page applications optimized for mobile devices.

CSS components

With native look and feel, these components offer almost all elements that mobile application needs. Components default styling can be easily overridden to accommodate your own design.

JavaScript components

These components are extending CSS components with JavaScript functionalities to cover all mobile elements that can't be done only with HTML and CSS.

Cordova Plugins

Apache Cordova plugins offer API needed for using native device functions with JavaScript code.

Ionic CLI

This is NodeJS utility powered with commands for starting, building, running and emulating Ionic applications.

Ionic View

Very useful platform for uploading, sharing and testing your application on native devices.

Licence

Ionic is released under MIT license. 

Ionic Framework Advantages

• Ionic is used for hybrid app development. This means that you can package your applications for IOS, Android, Windows Phone and Firefox OS which can save you a lot of working time.
• Starting your app is very easy since Ionic provides useful pre-generated app setup with simple layouts.
• The apps are built in very clean and modular way, so it's very maintainable and easy to update.
• Ionic developers team have very good relationship with google developers team and they are working together to improve the framework. The updates are coming out regularly and Ionic support group is always willing to help when needed.

Ionic Framework Limitations

• Testing can be tricky since browser doesn't always give you right information about the phone enviroment. There is so many different devices and platforms and you usually need to cover most of them.
• It can be hard to combine different native functionalities. Lot of time you will run into plugin compatibility issues, which leads to build errors hard to debug.
• Hybrid apps tend to be slower than the native ones, but since the mobile technologies are improving fast this will not be an issue in the near future.

Tutorial Ionic Framework (English Language) Ionic Basics : Hello World - Your First Ionic Framework App

In almost every case of learning a new programming language or framework, the first thing you learn to create is the “hello world” application. This app is the most basic app you can make and is your starting point for bigger and better things.

In this article we’ll create the “Hello World” Ionic App, with a couple different variations to get started towards your first Ionic App.

Let’s start with a very basic blank HTML page. We’ll also include a viewport meta tag for proper scaling and import the ionic.min.css and ionic.bundle.js files in the head tag.

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">

    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>

  </head>

  <body>

Hello World!

  </body>

</html>

If you load this up in the browser, you’ll see “Hello World!” on the screen… but, this isn’t an Ionic app yet. This is just some text.

App Module

For us to really make this an Ionic App, we need to first register it as an app using the ng-app directive on the body tag and defining the app as a module. We’ll also want to import the Ionic module.

First, let’s modify that body tag.

<body ng-app="ionicApp">

… and define the module in an app.js file.

angular.module('ionicApp', ['ionic']);

Notice the name of the module, app matches the value of the ng-app attribute. Don’t forget to include this script AFTER the Ionic script.

<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"><script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script><script src="app.js"></script>

Using Ionic Directives

Now we officially have an Ionic app, so let’s add some Ionic directives in there.

First, lets add a header bar.

<ion-header-bar class="bar-stable"> <h1 class="title">Hello World!</h1></ion-header-bar>

And then a content area.

<ion-content class="padding"> <p>Hello World, how are you?</p></ion-content>

Now, we have a very basic Ionic app up and running.

Adding a Controller

Now, lets add a controller to our app so we can start seeing some more structure. The most basic way to add a controller to our Hello World app is to use the ng-controller directive on our body tag.

<body ng-app="ionicApp" ng-controller="MainCtrl">

We’ll also need to define the controller.

angular.module('ionicApp', ['ionic'])
.controller("MainCtrl",function(){  console.log("Main Controller says: Hello World");});

And just like that, we have a controller.

Adding Routing/States

One major thing we are missing here is multiple pages. Right now we just have one page and in most apps, you most likely have a couple different pages. Ionic uses the Angular UI Router which uses the concept of states. Each state is essentially a page.

Let’s take the page we already have and convert it into a state.

First, lets take the code we currently have in the body and move it to a file templates/main.html where templates is a folder off the root of your project (Most likely “www”).

<ion-header-bar class="bar-stable"> <h1 class="title">Hello World!</h1></ion-header-bar><ion-content class="padding"> <p>Hello World, how are you?</p></ion-content>

Next, Let’s add a ion-nav-view to the body of our index page. This ion-nav-view is where your views/states will be displayed. We’ll also remove the ng-controller directive from our body tag as we will configure the state to use the main controller in our state configuration.

<body ng-app="ionicApp"> <ion-nav-view></ion-nav-view></body>

This leaves us with a very clean index page.

Next, we need to set up our first state. We’ll do this in a .config function using the $stateProvider. We’ll call this state main and make it so the URL will be /main. We’ll also point it to the controller we created before.

.config(function($stateProvider){

$stateProvider

.state('main', {

url: "/main",

templateUrl: "templates/main.html",

controller: 'MainCtrl'

});

});

Here, we are defining the state with the name main, defining the url, and telling it what template to use and what controller. We are still missing one thing, however. We need to tell our app where to go by default. We’ll use the $urlRouterProvider for this.

.config(function($stateProvider, $urlRouterProvider){
$stateProvider

.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'MainCtrl'
});

$urlRouterProvider.otherwise('/main');
});

If you load this up, we’re back where we were before visually with our Hello World screen. We’re making progress. Let’s add a second route by adding a new template at templates/page2.html. We’ll give it the same look at the main page, but we’ll change the text on it.

<ion-header-bar class="bar-stable">
<h1 class="title">Page 2!</h1>
</ion-header-bar>
<ion-content class="padding">
<p>I am Page 2!</p>
</ion-content>

Let’s modify our main view to link to this one.

<ion-header-bar class="bar-stable">
<h1 class="title">Hello World!</h1>
</ion-header-bar>
<ion-content class="padding">
<p>Hello World, how are you? <a href="#/page2">Go to Page 2</a></p>
</ion-content>

Finally, we’ll need to modify our state configuration to add this state.

.config(function($stateProvider, $urlRouterProvider){
  $stateProvider
  .state('main', {
    url: "/main",
    templateUrl: "templates/main.html",
    controller: 'MainCtrl'
  })

  .state('page2', {
    url: "/page2",
    templateUrl: "templates/page2.html",
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/main');
});

In this case, we aren’t giving our state a controller. Our final javascript for our app is as follows:

angular.module('ionicApp', ['ionic'])
.controller("MainCtrl",function(){
  console.log("Main Controller says: Hello World");
})
.config(function($stateProvider, $urlRouterProvider){
  $stateProvider
  .state('main', {
    url: "/main",
    templateUrl: "templates/main.html",
    controller: 'MainCtrl'
  })

  .state('page2', {
    url: "/page2",
    templateUrl: "templates/page2.html",
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/main');
});

And you can find a demo of the final code on the Ionic Playground. (NOTE: This uses text/ng-template script tags to hold template markup and the app.js file in automatically included from the JS tab.)

Mengenal Tipe Data dan Operator Angka (Number) JavaScript

Tipe data Angka dalam JavaScript

Tidak seperti bahasa pemograman lain pada umumnya, JavaScript tidak membedakan tipe data angka (number) antara angka bulat dengan angka desimal, atau tidak membedakan antara bilangan integer dengan float. Seluruh tipe data angka di dalam JavaScript disimpan dalam bentuk desimal (float).

Jangkauan tipe data angka di dalam JavaScript merujuk kepada aturan standar IEEE 754 yang mencakup angka paling kecil ±5 × 10^-324 dan angka paling tinggi ±1.7976931348623157 × 10^308.

Angka di dalam JavaScript bisa dengan tepat merepresentasikan nilai antara −2^53 sampai dengan 2^53, atau dari −9007199254740992 sampai 9007199254740992. Jika anda menggunakan nilai yang lebih besar dari jangkauan ini, maka akan mengorbankan tingkat ketelitian.

Cara Membuat Tipe Data Angka

Karena di dalam JavaScript sebuah variabel tidak perlu di deklarasikan akan bertipe apa, maka jika sebuah variabel diberikan nilai angka, maka variabel tersebut telah menjadi variabel dengan tipe angka. Berikut adalah contohnya:

<script>
var a=12; // deklarasi dengan var
b=6; // deklarasi tanpa keyword var
</script>

Operator Aritmatika di dalam JavaScript
Operasi yang sering digunakan untuk tipe data angka adalah operasi artimatika seperti penambahan (+), pengurangan (-), pembagian (/), perkalian (*), dan modulus atau sisa hasil bagi (%).

Urutan Prioritas Operator Aritmatika
Sama seperti pelajaran matematika yang kita pelajari, di dalam JavaScript operator perkalian dan pembagian lebih kuat dari pada operator penambahan dan pengurangan. Perintah operasi 1 + 3 * 5 akan proses oleh JavaScript menjadi 1 + (3 * 5). Operasi modulus (sisa hasil bagi) juga sama kuat dengan operasi perkalian dan pembagian.

Jika operasi matematika yang akan diproses memiliki lebih dari 1 operator yang sama kuat dalam sebuah perhitungan, JavaScript akan memprioritaskan urutan perhitungan dari kiri ke kanan. Operasi 3 * 4 / 5 *5 akan dikerjakan menjadi: (((3 * 4) / 5) * 5).

Untuk membuat prioritas suatu operasi menjadi lebih tinggi, kita bisa menambahkan tanda kurung didalam program. Penggunaan tanda kurung juga akan mempermudah pembacaan program. Walaupun kita bisa menebak bagaimana operasi 5 + 3 * 2 akan diproses, namun akan lebih mudah di baca jika operasi tersebut tetap dibuat dengan menambahkan tanda kurung menjadi 5 + (3 * 2).

Berikut adalah contoh kode program cara penggunaan tipe data angka dan operasi matematis dalam JavaScript:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Belajar JavaScript</title>
 
<script>
   var a = 12;
   var b = 4;
   var c = 2;
   console.log(a);       // hasil: 12
   console.log(b);       // hasil: 4
   console.log(c);       // hasil: 2
 
   var d = a + b;
   console.log(d);       // hasil: 16
   var e = b * 5;
   console.log(e);       // hasil: 20
   var f = a % 5;
   console.log(f);       // hasil: 2
   var g = 3 + 6 * 2;
   console.log(g);       // hasil: 15
   var h = c + b * a % 3;
   console.log(h);       // hasil: 2
   var i = 3 * 4 / 5 * 5;
   console.log(i);       // hasil: 12
   var j = (((3 * 4) / 5) * 5);
   console.log(j);       // hasil: 12
</script>
 
</head>
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar Tipe Data Angka JavaScript </p>
</body>
</html>

Pada awal kode JavaScript diatas (yang dimulai dari baris ke-8), saya membuat 3 buah variabel, yakni variabel a, b dan c. Pada saat pendefenisian variabel ini, saya juga langsung memberikan nilai awal. Perintah console.log selanjutnya akan menampilkan isi dari ketiga variabel ini.

Karena variabel di dalam JavaScript tidak memiliki tipe dasar, dengan memberikan nilai awal berupa angka (number), maka variabel tersebut akan bertipe data number.

Setelah mendefenisikan beberapa variabel, selanjutnya saya melakukan operasi-operasi sederhana seperti penambahan, pengurangan, dan juga modulus. Dalam 3 contoh operasi terakhir, kita bisa melihat bagaimana JavaScript menangani perintah matematis berdasarkan urutan ‘kekuatan’ operator.

On-Page SEO : Mengoptimasi Halaman dan Konten Website untuk mesin pencari

On-page SEO adalah faktor-faktor yang menentukan teroptimasi atau tidaknya website anda terhadap mesin pencari dilihat dari dalam websitenya sendiri.

Artinya, anda akan melakukan optimasi di dalam website anda sendiri.

Optimasi on-page bertujuan agar mesin pencari mengetahui apakah website anda memang relevan/sesuai dengan apa yang dicari oleh user. Dan benar-benar yang memiliki kualitas terbaik.

Oleh karena itu, kuncinya 2 hal: relevan, kualitas.

Tanpa memenuhi keduanya, mustahil bisa mendapatkan peringkat 1 di mesin pencari.

Dalam artikel ini, kita akan mempelajari di bagian-bagian mana saja dalam website anda harus menerapkan optimasi on-page serta bagaimana melakukan optimasinya.

Konsep on-page SEO

Dalam SEO, konsep optimasi on-page adalah hal UTAMA yang harus anda pahami.

Inti dari on-page SEO sederhana…

…anda akan mengoptimasi website supaya:

Bermanfaat tinggi bagi pengunjung

Memudahkan pengunjung dalam melakukan eksplorasi

Pengunjung merasa betah di dalamnya

Mesin pencari mengerti struktur website anda

Setelah membaca 4 poin tersebut, anda mungkin akan bertanya,

“Saya kan optimasi untuk mesin pencari, kenapa malah fokus ke pengunjung?”

Jawabannya, ini…

Mesin pencari bisa mengetahui apakah pengunjung puas atau tidak dengan halaman yang mereka kunjungi.

Bayangkan kalau anda mencari sesuatu di Google, kemudian masuk ke salah satu website. Ternyata isinya tidak memuaskan. Kemungkinan besar setelah sekian detik anda akan klik tombol ‘back’ untuk mencari website lain. Ya kan?

Karena Google tentunya ingin menampilkan website-website yang memuaskan pengguna, maka website anda harus memuaskan pengunjung.

Inilah caranya:

Komponen Halaman Website yang Optimal

Ada beberapa faktor yang mempengaruhi kepuasan pengguna website. Kita akan bahas satu per satu dari setiap kategori berikut:

1. Konten
2. Keyword
3. Judul
4. URL
5. Meta description
6. Media gambar
7. Outbound link
8. Internal link
9. Social sharing
10. Kecepatan website

1. Konten dengan kualitas terbaik

Kalau anda perhatikan, konten adalah komponen utama dalam halaman website. Artinya, konten memegang peranan terbesar dalam optimasi on-page. Mustahil mendapatkan peringkat 1 tanpa punya konten berkualitas.

…tapi, apa itu konten berkualitas?

Inilah ciri-cirinya:

• Memberikan manfaat maksimum bagi pengunjung
• Lebih menonjol dibandingkan konten lain yang sejenis
• Disimak dalam waktu panjang oleh pengunjung
• Membangkitkan perasaan (kagum, terhibur, bahagia, dll.)
• Menyelesaikan permasalahan pengunjung
• Itulah 5 kriteria konten berkualitas.

Kalau anda ingin mendapatkan peringkat 1 di mesin pencari dalam durasi yang lama, maka konten anda sebaiknya memenuhi kelima hal itu.

Tanpa terkecuali.

Perlu anda ketahui juga kalau Google secara terang-terangan menyatakan bahwa mereka menentang konten yang:

• Kurus (thin), dengan kata lain tidak berbobot
• Tidak memberikan nilai tambah bagi pembaca
• Tidak original
• Membuat pembaca frustrasi (karena kualitasnya rendah)

Kalau konten anda masuk ke dalam salah satu kategori di atas, maka akan sangat sulit mendapatkan peringkat yang tinggi.

Parahnya, konten seperti itu beresiko penalti!

Google dan mesin pencari lain secara aktif memperbaharui algoritma-nya. Semakin ke depan, mereka akan semakin memahami kualitas dari sebuah konten.

Maka, berhati-hatilah dalam menerbitkan konten bagi website anda.

2. Keyword yang populer dan tepat sasaran

Coba ingat kembali terakhir kali ketika anda menggunakan Google…anda menulis beberapa kata sebagai keyword-nya. Kemudian Google menampilkan hasil yang berkaitan dengan keyword tadi.

Semakin relevan dengan keyword, semakin tinggi peringkatnya. Jadi, mengoptimasi halaman berarti mengoptimasi keyword. Setiap halaman di website anda harus dioptimasi paling tidak untuk 1 kata kunci.

Caranya?

Dengan menyertakan keyword dalam halaman website anda. Tepatnya di dalam konten, di judul, dan di URL.

Dengan demikian, mesin pencari dan pengunjung akan langsung memahami apa isi dari halaman website anda.

Satu hal lagi…

Anda harus memahami apa maksud di balik sebuah keyword.

Misalnya seseorang melakukan pencarian di Google dengan kata kunci “beli iphone”.

Kira-kira apa maksudnya?

Apakah dia ingin membeli iPhone ataukah dia ingin membaca artikel tentang cara membeli iPhone? Hmm…sepertinya yang pertama lebih masuk akal.

Google juga paham dengan hal ini.

Sehingga Google akan menampilkan halaman yang menjual iPhone.

Maka dari itu, mustahil bisa mendapatkan peringkat tinggi apabila anda menyediakan artikel tentang cara membeli iPhone.

3. Judul halaman yang mengundang klik

Cara termudah untuk mengoptimasi judul yaitu dengan menyertakan keyword utama yang anda incar.

Misalnya keyword “belajar SEO”, maka judulnya mengandung kata “belajar SEO”.

Tapi itu saja belum cukup…

…yang terpenting dalam judul bukan optimasi keyword, tapi optimasi terhadap ketertarikan manusia.

Apabila judul yang anda buat mampu menarik banyak pengunjung, maka peringkatnya akan naik.

Logikanya begini:

Misalkan ada 2 website yang bersaing, di peringkat 1 dan 2.

Ternyata peringkat 2 lebih banyak mendapatkan pengunjung daripada peringkat 1…karena judul yang dia buat lebih menarik, sehingga banyak yang klik.

Google ingin mengutamakan hasil terbaik, maka website di peringkat 2 akan dinaikkan ke peringkat pertama.

Masuk akal?

Karena judul adalah elemen halaman yang paling pertama dibaca di hasil pencarian, maka dengan mengoptimasi judul jumlah klik bisa bertambah.

4. URL yang singkat dan deskriptif

Meskipun pengaruhnya tidak besar, tapi URL yang mengandung keyword dapat mempengaruhi peringkat website anda di hasil pencarian.

Berikut ini contoh URL yang tidak baik. Hindari penggunaan URL seperti ini.

cungukitem.com/?p=94

URL yang bagus selalu relevan dengan apa isi dari halaman tersebut.

Contohnya:

Halaman tentang ‘resep bakso’ > domain.com/resep-bakso/

Halaman produk ‘macbook pro’ > domain.com/laptop/macbook-pro/

Buatlah URL yang mendeskripsikan konten, lebih baik lagi kalau mengandung keyword utama.

5. Meta description yang deskriptif dan mengundang klik

Meta description adalah 1-2 kalimat yang muncul dalam hasil pencarian. Meta description sebetulnya tidak mempengaruhi rangking halaman anda.

Selain itu, juga tidak selalu muncul di hasil pencarian. Karena Google sekarang lebih sering menggunakan kalimat di dalam konten sebagai deskripsi halaman.

Meskipun demikian, tidak ada salahnya bagian ini dioptimasi.

(Lagipula tidak memakan waktu lama)

Dengan meta description yang menarik, maka kemungkinan orang lain untuk mengunjungi website anda akan semakin tinggi.

Seperti logika tadi, semakin banyak klik dari manusia = semakin baik peringkatnya.

6. Gambar berkualitas tinggi dan berukuran optimal

Bayangkan sebuah halaman website yang 100% isinya teks, pasti sangat membosankan. Maka dari itu, gambar dan/atau video merupakan nilai tambah.

Anehnya, banyak yang beranggapan gambar justru merugikan…

…tidak benar.

Tidak ada kerugian dalam menggunakan multimedia dalam konten.

Kecuali, apabila jumlahnya sangat banyak sehingga membuat komputer pengunjung website anda macet. Atau apabila tidak ada kaitannya dengan konten.

Beberapa tips:

1. Gunakan gambar yang berhubungan dan menjelaskan konten
2. Gunakan tipe ekstensi yang tepat agar ukuran file tidak membengkak
3. Pastikan resolusi gambar sesuai dengan yang ditampilkan
4. Kompres gambar supaya optimal
5. Tambahkan atribut alt ketika meletakkan gambar

7. Referensi berupa link ke website lain

Poin ini sangat penting terutama bagi website baru.

Google, sebagai pusat informasi tentunya ingin menyediakan konten-konten yang terpercaya. Agar informasinya tidak menyesatkan banyak orang.

Inilah mengapa website besar lebih mudah masuk halaman pertama…

…karena reputasinya sudah terbangun sejak lama.

Nah, karena website anda masih baru, Google menganggap isinya belum bisa dipercaya. Karena belum dipercaya, maka akan lebih sulit mendapatkan peringkat tinggi.

Disini lah link referensi bisa membantu.

Link ke website lain yang reputasinya bagus dan relevan akan membuat reputasi konten anda jadi lebih baik. .

Analoginya seperti ini:

Coba ambil salah satu buku non-fiksi.

Di dalam buku tersebut pasti ada daftar pustaka atau catatan kaki. Isinya informasi kutipan dari sumber lain.

Buku tanpa kutipan sumber lain akan dianggap tidak terpercaya.

8. Internal link untuk mempermudah navigasi

Ada istilah yang namanya bounce.

Bounce artinya ketika seseorang masuk ke website anda, kemudian dia langsung keluar tanpa melakukan apapun.

Kalau bounce rate dari website anda tinggi, bisa jadi karena:

Kualitasnya mengecewakan

Navigasinya sulit

Ingat lagi, website yang mengecewakan pengunjung tidak akan bisa mendapatkan peringkat  tinggi.

Sehingga bounce rate bisa jadi faktor yang menunjukkan kepuasan pengunjung.

Salah satu upaya untuk menurunkan bounce rate adalah dengan memasang internal link (link antar halaman), supaya pengunjung dengan mudah berkunjung ke halaman lain dalam website anda.

9. Bisa di-share ke social media

Saat ini Google tidak menganggap jumlah share sebagai faktor penentu peringkat di Google, tapi bukan berarti social sharing tidak penting.

Justru sebaliknya.

Social share punya dampak tidak langsung terhadap peringkat website.

Ini manfaat dari social share:

Tambahan pengunjung

Branding, website anda akan dikenal

Faktor kepuasan bertambah tinggi (kalau website anda bisa memuaskan pengunjung yang datang)

Beberapa dari pengunjung akan memberikan backlink (dibahas lebih lanjut dalam bab selanjutnya)

Dibandingkan SEO, social media akan membangun brand website anda dengan lebih cepat.

Inilah yang punya efek terhadap SEO.

Ketika website anda sudah dikenal, maka orang-orang akan mencari website anda lewat Google…

…karena banyak yang mencari lewat Google, artinya reputasi website anda akan dianggap bagus oleh Google.

Oleh karena itu, pasang tombol share di website anda.

10. Kecepatan respon dan hambatan kecepatan

Website yang lebih cepat akan mendapatkan peringkat yang lebih baik.

Dalam artikel yang ditulis oleh Billy Hoffman di MOZ, terlihat bahwa website yang berada dalam peringkat atas memiliki waktu respon yang lebih singkat.

Peningkatan kecepatan bukan hanya untuk mesin pencari. Pengunjung juga akan jadi lebih nyaman berada dalam website yang waktu loadingnya singkat.

Ada beberapa hal yang mempengaruhi kecepatan:

Kualitas hosting yang digunakan

Jumlah file .js dan .css di <head>

Ukuran halaman yang terlalu besar sehingga mengganggu pengunjung

Perlu diingat: keberadaan gambar dan video tidak akan dianggap mengurangi kecepatan website. Kecuali apabila jumlahnya berlebihan dan tidak diperlukan

Kosep Dasar SEO (Search Engine Optimization) : Pengertian SEO, Fungsi SEO dan apa yang harus dipelajari untuk menguasai SEO

Kalau anda pernah melakukan pencarian website di Google, Yahoo!, Bing, atau mesin pencari lainnya, anda akan melihat daftar website yang relevan dengan pencarian anda.

Mesin pencari mengurutkan hasil pencarian tersebut bukan secara acak, tetapi berdasarkan tingkat relevansi dan kualitas website.

Ada banyak faktor yang digunakan oleh mesin pencari untuk menentukan kedua faktor tersebut.Inilah yang melatarbelakangi SEO.

SEO atau Search Engine Optimization adalah usaha-usaha mengoptimasi website untuk mesin pencari agar mendapatkan peringkat yang lebih baik di hasil pencarian.

Mesin pencari menggunakan algoritma tertentu untuk mengurutkan website-website berdasarkan rangking.

Dengan mempraktekkan SEO, berarti kita menyesuaikan website kita agar bersahabat dengan algoritma tersebut.

Mengapa SEO penting untuk website?

Sejak adanya mesin pencari seperti Google, hampir semua orang mencari informasi secara online melalui search engine.

Dari data yang dipublikasikan oleh Google, website yang menempati peringkat pertama sampai ketiga mendapatkan total klik kumulatif sebesar lebih dari 50%.

Peringkat pertama sendiri mendapatkan lebih dari 20%.

Ini menunjukkan betapa pentingnya SEO untuk website anda, dengan bantuan SEO anda bisa mendapatkan ribuan hingga puluhan ribu pengunjung per hari.

Lebih dari itu, pengunjung dari mesin pencari merupakan orang-orang yang haus akan informasi dan ingin membeli produk. Kalau anda memiliki sebuah bisnis online, pengunjung dari mesin pencari akan memiliki tingkat konversi (conversion rate) terbesar.

SEO merupakan bagian dari inbound marketing yang merupakan teknik marketing modern di era digital.

Pemasaran inbound, termasuk SEO merupakan metode marketing yang memakan biaya terkecil dibandingkan teknik pemasaran tradisional.

Konsep dasar SEO

Google (dan mesin pencari lain) adalah sebuah produk. Mereka ingin supaya orang lain puas menggunakan layanan mereka.

Pengguna menginginkan supaya website terbaik yang relevan dengan pencarian muncul di halaman pertama. Karena itulah mesin pencari selalu ingin menampilkan hasil terbaik untuk setiap kata kunci yang dimasukkan pengguna.

Jadi inti dari SEO adalah jadikan website anda yang terbaik untuk kata kunci yang anda inginkan.

Oke..jadi yang terbaik. Tapi dalam segi apa?

• Konten yang disajikan
• Struktur dan navigasi
• Kepuasan pengguna (User Experience/UX)
• Popularitas

Dalam seri panduan SEO ini kita akan mempelajari bagaimana anda bisa menjadi yang terbaik daripada saingan anda.

Bisakah website saya sukses tanpa SEO?

Bisa!

Dengan memperhatikan konsep dasar SEO di atas, anda sebenarnya tidak perlu pusing memikirkan SEO. Tidak jarang orang yang memiliki website yang populer tanpa mengerti SEO.

Ini karena mesin pencari saat ini sudah pintar dalam mengasumsikan struktur halaman dan kualitas website.

SEO saat ini dalam prakteknya lebih dominan sebagai usaha marketing daripada teknikal.

Tapi..

Ada kemungkinan website anda masih butuh sedikit usaha lagi dari anda untuk bisa berhasil. Selain itu dengan mengetahui teknik SEO anda mengerti bagaimana membuat website yang sukses.

Apakah SEO bisa saya lakukan sendiri?

Ada banyak orang atau perusahaan yang menawarkan jasa SEO, tapi sesungguhnya SEO juga bisa anda lakukan sendiri tanpa menggunakan jasa.

Dengan adanya berbagai panduan SEO yang disediakan secara gratis di internet (termasuk panduan ini), anda bisa belajar otodidak dan mengaplikasikannya sendiri.

Anda bisa menghemat jutaan rupiah dengan melakukan optimasi sendiri.

Untuk website bersifat informasi yang strukturnya sederhana, anda kemungkinan besar tidak perlu menggunakan jasa SEO dan cukup mengandalkan panduan ini.

Tetapi kalau website anda punya struktur yang rumit misalkan toko online atau web-app, ada kemungkinan anda membutuhkan jasa SEO untuk menyederhanakan struktur agar ramah terhadap mesin pencari.

Apa saja yang harus saya pelajari?

Ada beberapa komponen utama dalam SEO, komponen-komponen ini yang akan menentukan seberapa baik website anda secara SEO. Komponen ini pula lah yang menentukan urutan rangking di hasil pencarian search engine.

Secara singkat, inilah yang perlu anda pelajari untuk menguasai SEO.

1. Mengoptimasi halaman website
2. Riset kata kunci (Keyword research)
3. Menganalisa kompetisi
4. Membuat konten yang teroptimasi
5. Membangun popularitas, link, dan reputasi
6. Melakukan audit terhadap performa SEO

Pengertian dan Cara Pembuatan Variabel dalam Pemograman JavaScript

Dalam bahasa pemograman, variabel adalah ‘penampung’ sebuah nilai. Tergantung dengan ‘nilai’ dari variabel tersebut, sebuah variabel di dalam JavaScript dapat bertipe Angka (Number), String, Boolean, atau yang lainnya.

Tidak seperti bahasa pemograman desktop seperti C++ dan Visual Basic, di dalam JavaScript kita tidak perlu mendeklarasikan jenis tipe data. Seluruh variabel di dalam JavaScript dapat berisi nilai apapun (tipe data apapun), dan dapat diubah menjadi tipe lain sepanjang program. Jenis pemograman seperti ini dikenal juga dengan Typeless Programming Language. Salah satu bahasa pemograman yang juga berjenis Typeless Programming Language adalah PHP.

Cara Membuat Variabel JavaScript

Walaupun kita tidak perlu menyebutkan jenis tipe data dari suatu variabel, namun kita tetap harus mendeklarasikan variabel di dalam JavaScript. Cara membuat variabel di dalam JavaScript di bedakan menjadi 2, yakni dengan menggunakan keyword var, dan tanpa var. Jika menggunakan kata kunci var, berikut adalah contoh penulisannya:

<script>
   var a;
    var b, c, d;
    var e; var f;
    var g=12;
    var h="Saya Sedang Belajar JavaScript di CungukBlogger"
</script>

Pada 2 baris terakhir saya membuat variabel, sekaligus memberikan nilai ke dalam variabel tersebut.

Cara kedua untuk membuat variabel adalah tanpa menggunakan keyword var, seperti berikut ini:

<script>
  a;
  b=12;
  c=" Saya Sedang Belajar JavaScript di cungukblogger";
</script>

Pembuatan variabel tanpa menggunakan keyword var memang lebih cepat, akan tetapi tidak disarankan. Walaupun variabel yang dideklarasikan tanpa keyword var akan tetap berfungsi sebagaimana mestinya seperti variabel dengan var, namun JavaScript ‘menyimpan’ variabel tersebut dengan cara yang berbeda. Salah satu perbedaannya adalah tentang variabel scope (yang akan kita bahas setelah ini). Sedapat mungkin kita selalu membuat variabel menggunakan keyword var.

Jangkauan Variabel (Variabel Scope) dalam JavaScript

Jangkauan Variabel (atau Variabel Scope) adalah konsep tentang pembatasan akses dari sebuah variabel. Yaitu pada bagian mana sebuah variabel masih bisa diakses.

Sebuah variabel jika dideklarasikan (baik dengan keyword var ataupun tanpa var), akan bersifat global, atau dikenal dengan istilah global variable. Sebuah variabel akan menjadi global variabel sepanjang variabel tersebut di deklarasikan di luar fungsi.

Jika sebuah variabel di deklarasikan di dalam fungsi, maka variabel tersebut hanya akan bisa diakses di dalam fungsi tersebut, atau bersifat lokal (dikenal juga dengan local variable).

Apabila kita membuat 2 variabel dengan nama yang sama sebagai global variabel, dan juga local variable di dalam sebuah fungsi, maka local variable akan memiliki prioritas yang lebih tinggi dibandingkan global variabel. Berikut adalah contoh efek konsep global variable dan local variable dalam JavaScript:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Belajar JavaScript</title>

<script>
var nilai = "global";
function test() {
   var nilai = "lokal";
   var nilai_lokal = "cungukitem";
   tanpa_var = "no_scope"; //akan menjadi global variabel!!
   console.log(nilai);
   }
test(); // print: lokal
console.log(nilai); // print: global
console.log(tanpa_var); //print: no_scope (bisa diakses)
console.log(nilai_lokal); //error, karena nilai_lokal adalah lokal variabel
</script>

</head>
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript di cungukblogger</p>
</body>
</html>

Dalam contoh kode diatas, saya membuat dan mendeklarasikan beberapa variabel secara global maupun lokal.

Pada baris ke-8, saya membuat sebuah variabel global, dengan nama nilai, dan memberikan nilai string “global” ke dalam variabel ini.

Selanjutnya, saya membuat fungsi test() dan mendeklarasikan kembali variabel nilai, namun kali ini memberikan nilai string “lokal”. Di dalam fungsi ini saya juga membuat variabel baru, yakni nilai_lokal dan tanpa_var.

Khusus untuk variabel tanpa_var, sesuai dengan namanya, saya mendeklarisakannya tanpa keyword var. sehingga efeknya, variabel tanpa_var akan menjadi variabel global.

Dengan membuat beberapa perintah console.log, kita dapat mencari tahu apa yang terjadi dari contoh kode diatas.

Variabel nilai apabila diakses dari luar fungsi akan bernilai “global”, sedangkan jika diakses dari dalam fungsi akan bernilai “lokal”. Variabel tanpa_var juga sukses ditampilkan, karena variabel ini telah menjadi variabel global.

Saat mencoba mengakses variabel nilai_lokal, web browser akan menampilkan error. Hal ini terjadi karen variabel nilai_lokal bersifat lokal di dalam fungsi test, sehingga apabila diakses dari luar fungsi, JavaScript ‘tidak melihat’ variabel ini, dan menampilkan error.

Aturan Dasar dalam Penulisan Kode Pemograman JavaScript

Perbedaan Penulisan Huruf (Case Sensitivity)

Di dalam JavaScript, penulisan huruf besar dan huruf kecil dibedakan, atau dalam istilah pemograman bersifat Case Sensitif. Hal ini berarti penulisan variabel , keyword, maupun nama fungsi di dalam JavaScript harus konsisten. Variabel nama, Nama, dan NAMA merupakan 3 variabel berbeda. Sedangkan untuk penulisan keyword while, harus ditulis dengan ‘while’, bukan ‘While’ atau ‘WHILE’.

Namun karena HTML sendiri tidak bersifat case-sensitif, kadang hal ini bisa mendatangkan permasalahan. Contohnya, jika menggunakan event handler, di dalam HTML kadang bisa ditulis: onclick, onClick, atau OnClick. Ketiga penulisan ini dibolehkan di dalam HTML. Akan tetapi untuk menghindari permasalahan, sebaiknya kita membuat kesepakatan untuk menggunakan huruf kecil untuk semua penulisan keyword dan variabel di dalam JavaScript.

Penggunaan Karakter Spasi, Enter, dan Tab (Whitespace)

Karakter-karakter spasi, enter, tab dan karakter lain yang ‘tidak kelihatan’ (sering dikenal dengan istilah whitespace) akan diabaikan pada saat pemrosesan JavaScript. Karakter-karakter ini bisa digunakan untuk ‘menjorokkan’ (indent) kode program agar lebih mudah dibaca.

Cara Penulisan Komentar dalam JavaScript

JavaScript mendukung 2 jenis cara penulisan komentar, yakni menggunakan karakater // untuk komentar dalam 1 baris, dan karakter pembuka komentar /* dan penutup */ untuk komentar yang mencakup beberapa baris.

Berikut adalah contoh penulisan komentar di dalam JavaScript:

<script>
   // ini adalah komentar dalam 1 baris
   /* Baris ini juga merupakan komentar */ //ini juga komentar
 
   /* Komentar ini
     mencakup beberapa
     baris
   */
 
   /*
   * Beberapa programmer
   * menambahkan tanda bintang
   * agar penulisan komentar
   * lebih rapi
   */
</script>

Aturan Penulisan Identifier (Variabel dan Nama Fungsi) JavaScript

Di dalam JavaScript, identifier adalah sebutan untuk nama. Nama ini bisa terdiri dari nama variabel, atau nama dari fungsi. Aturan penulisan identifier dalam JavaScript adalah :

1. Karakter pertama harus diawali dengan huruf, underscore (_) atau tanda dollar ($)
2. Karakter kedua dan seterusnya bisa ditambahkan dengan huruf, angka, underscore (_) atau tanda dollar ($).

Dari aturan tersebut dapat dilihat bahwa kita tidak bisa menggunakan angka sebagai karakter pertama dari sebuah variabel atau nama fungsi. Berikut adalah contoh penulisan nama variabel yang dibolehkan:

<script>
    cungukblogger
    $cunguk
    v12
    _karakter
    b3l4j4r
</script>

Namun karakter berikut tidak bisa digunakan sebagai identifier :

<script>
    %cungukblogger //terdapat karakter %
    cunguk blogger //terdapat karakter spasi
    4ngka //diawali dengan angka
    suka#suka //terdapat karakter #
</script>

Kata Kunci (Reserved Keyword) JavaScript

Seperti bahasa pemograman lain, JavaScript juga memiliki beberapa kata kunci atau keyword yang tidak bisa digunakan sebagai nama variabel atau nama dari sebuah fungsi. Istilah ini sering disebut sebagai reserved keyword.

Reserved keyword merupakan kata kunci yang digunakan JavaScript dalam menjalankan fungsinya. Keyword di dalam JavaScript adalah sebagai berikut:

Sebagian dari nama keyword diatas bisa digunakan dalam situasi khusus (seperti nama dari method untuk objek), namun sedapat mungkin kita tidak menggunakannya agar tidak menimbulkan masalah di kemudian hari.

Aturan Penulisan Tanda Semicolon pada Akhir Baris

Berbeda dari kebanyakan bahasa pemograman, di dalam JavaScript karakter titik-koma (bahasa inggris: semicolon) sifatnya opsional untuk digunakan sebagai penanda akhir dari baris program, dan boleh tidak ditulis.

JavaScript ‘mendeteksi’ baris baru (karakter ‘break’) sebagai penanda akhir baris program. Kode perintah berikut berjalan sebagaimana mestinya di dalam JavaScript:

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Belajar JavaScript di CungukBlogger</title>

<script>
    a=13
    b=a+2
    console.log(b)
    alert(b)
</script>
</head>

<body>
    <h1>Belajar JavaScript</h1>
    <p>Saya sedang belajar JavaScript di CungukBlogger</p>
   
</body>
</html>

Perhatikan bahwa di dalam tag <script> saya tidak menggunakan tanda semicolon untuk menutup baris perintah JavaScript, dan kode tersebut berjalan sukses tanpa menghasilkan error.

Namun javascript tidak akan ‘mendeteksi’ setiap baris baru sebagai penanda akhir baris program, perhatikan kode berikut ini:

<script>
   var a
   a
   =
   15
   console.log(a)
</script>

Kode tersebut akan diproses oleh JavaScript menjadi:

<script>
   var a; a = 15; console.log(a)
</script>

Akan tetapi, penulisan berikut ini:

<script>
   a = 5
   b = 3 + a
   (b + 10).toString()
</script>

Akan diproses menjadi:

<script>
   a = 5 ; b = 3 + a(b + 10).toString();
</script>

Hal ini terjadi karena JavaScript akan menganggap baris baru sebagai tanda semicolon (pemisah baris program) apabila pada saat memproses baris berikutnya sudah tidak mungkin ‘bersambung’. Penggunaan karakter pembuka kurung “(“ di awal baris baru, akan dianggap sebagai bagian sambungan dari baris sebelumnya.

Penggunaan tanda semicolon “;” walau bersifat opsional, namun sangat dianjurkan digunakan. Tanda semicolon akan membuat program lebih mudah dibaca dan tidak membuat ambigu seperti contoh kita diatas. Di dalam tutorial JavaScript di duniailkom ini, saya juga akan menggunakan tanda “;” pada setiap akhir baris.