SEO (Search Engine Optimization) adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut.

Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan.

Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung.

Lalu apa pentingnya memiliki jumlah pengunjung yang banyak? tentu para pemilik halaman di website menginginkan jumlah kunjungannya banyak.

Hal itu memberikan kebahagiaan tersendiri bagi pemilik website. Mirip seperti status facebook yang memiliki banyak like.

SEO sangat erat hubungannya dengan URL, semakin baik url website anda, maka akan semakin mudah website anda untuk menjadi no.1 di mata mesin pencari seperti google dan yang lainnya.

Menurut pakar di bidang seo yang bernama Mat cut: Url yang mempunyai 3 hingga 5 suku kata sangat baik di mata mesin pencari.

Jadi url yang dibidik dengan memasukan kata kunci simpel, tidak terlalu panjang maka sebagai kata kunci url yang di bidik dan di targetkan untuk menyarankan makna url bersangkutan mempunyai keterkaitan dengan artikel ketika artikel membutuhkan penjelasan.

Oleh karena itu, perlu di buatlah url permalink yang dibidik agar artikel seo friendly, url ini di sebut juga url permalink seo friendly.

Contoh:

Source: https://medium.com/web-design-by-solodev/how-to-best-structure-your-urls-for-seo-5253ae3b0c5e

Pada contoh url diatas, anda dapat melihat perbedaan antara url yang bagus (good urls) dengan url yang tidak bagus (bad urls).

Dimana url yang bagus (good urls), menempatkan kata kunci sederhana pada url. Seperti URL website ini:

https://mfikri.com/artikel/Multiple-Upload-Image-dengan-Codeigniter.html

https://mfikri.com/artikel/11-Fungsi-mysql-yang-wajib-diketahui-programmer.html

 

Penjelasan sederhana tentang url codeigniter

Sekarang anda telah mengetahui apa itu SEO, apa tujuannya, dan apa yang harus dilakukan agar url website anda menjadi SEO friendly.

Sesuai dengan judul diatas, pada kesempatan kali ini saya akan sharing tentang bagaimana membuat blog SEO URL menggunakan framework codeigniter.

Secara default, codeigniter menganut format url seperti gambar berikut:

Pada gambar diatas dapat dilihat bahwa, pada bagian 1 terdapat protocol, protocol ini bisa berupa http ataupun https.

Pada bagian ke-2 yaitu primary domain atau domain utama, domain utama yaitu domain dari website atau blog anda. Seperti mfikri.com dan lain sebagainya.

Jika anda masih menggunakan server local (offline) biasanya primary domainnya adalah localhost.

Pada bagian ke-3 yaitu class name (nama kelas). Codeigniter memiliki sebuah direktori yang disebut controller.

Saya yakin anda tidak asing lagi dengan hal ini, itulah kenapa anda membaca artikel ini.

Class name (nama kelas) biasanya memiliki nama yang nama dengan file name (nama file) dan di letakkan dalam direktori controller.

Nama kelas (class name) biasanya menjadi url, setelah primary domain, seperti gambar diatas.

Pada bagian ke-4 yaitu nama function (function name). Function name ini adalah function yang terdapat dalam sebuah kelas pada controller.

Pada kasus diatas, function detail terdapat pada kelas blog. Dengan kata lain, kelas blog memiliki function detail didalamnya.

Pada bagian ke-5 atau bagian terakhir, terdapat URI parameter. URI parameter ini biasanya berupa id (key) dari suatu table yang ada di database.

Pada stuktur url diatas sudah cukup bagus, singkat, dan clean. Karena memang codeigniter secara default menganut konsep clean url.

Tetapi, tidak ada kata kunci singkat sehingga kurang SEO url friendly.

Bagaimana cara merubah struktur default url codeigniter menjadi SEO url friendly?

Jawabannya dengan menambahkan field slug pada struktur tabel yang ada di database.

Field slug ini berfungsi untuk menampung kata kunci singkat yang kita ambil dari judul (title) artikel kemudian dihubungkan dengan tanda minus atau strip ( - ), bila perlu tambahkan juga ekstensi .html, kemudian slug ini kita jadikan url untuk menampilkan detail artikel sebagai pengganti URI parameter.

Jika anda bingung dengan penjelasan diatas, jangan khawatir, anda akan segera mengerti setelah mencobanya sendiri.

Ok mari kita mulai!

 

Persiapan

Sebelumnya proses pembuatan, ada tahap yang tidak boleh anda lewatkan begitu saja. Yaitu tahap persiapan.

Apa saja yang perlu anda persiapkan?

Berikut listnya:

Codeiginter, jika anda belum memilikinya silahkan download di situs resminya www.codeigniter.com

Jquery, Jika anda belum memilikinya, silahkan download di situs resminya www.jquery.com

Bootstrap, bootstrap ini berfungsi untuk mempercantik tampilan. Jika anda belum memilikinya, silahkan download di situs resminya www.getbootstrap.com

ckeditor, ckeditor ini berfungsi sebagai text editor untuk menuliskan isi artikel atau blog. Jika anda belum memilikinya, silahkan download di situs resminya www.ckeditor.com

Selain beberapa hal diatas, ada lagi yang perlu anda persiapkan. Yaitu, secangkir kopi.

Ya kopi, agar lebih rileks.!

 

#1. Pembuatan Struktur Database dan Table

Berikutnya, yang perlu anda lakukan adalah pembuatan database dan struktur table.

Table yang perlu anda buat tidak perlu banyak-banyak, cukup satu table saja. Yaitu, table post.

Database, buat database dengan mengeksekusi query berikut:

CREATE DATABASE db_mybog;

Pada query diatas, anda akan mendapatkan sebuah database dengan nama db_myblog.

Table, buat table dengan mengeksekusi query berikut:

CREATE TABLE tbl_post(
post_id INT PRIMARY KEY AUTO_INCREMENT,
post_judul VARCHAR(150),
post_isi TEXT,
post_tanggal TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
post_slug VARCHAR(150),
post_image VARCHAR(40)
)ENGINE=INNODB;

Pada struktur tabel diatas, terdapat field post_slug. Field ini berfungsi untuk menampung kata kunci singkat yang kita ambil dari judul (title) artikel kemudian dihubungkan dengan tanda minus atau strip ( - ) dan ditambahkan ekstensi .html, kemudian field post_slug ini kita jadikan url untuk menampilkan detail artikel sebagai pengganti URI parameter.

 

#2. Installasi Codeigniter

Untuk menginstall codeigniter, silahkan extract codeigniter yang sudah di download sebelumnya ke folder www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP).

Kemudian rename (ganti nama) project codeigniter anda sesuai dengan project Anda. Disini saya memberi nama ci_blog.

Setelah di extract, buat folder assets, kemudian buat folder images di dalam folder assets.

kemudian sertakan file bootstrap dan jquery didalam folder assets. Sehingga terlihat struktur project kita seperti berikut:

Pada gambar diatas dapat dilihat, bahwa didalam folder assets terdapat folder ckeditor, css, images, jquery, dan js.

Didalam folder ckeditor terdapat file ckeditor, didalam folder css, terdapat file bootstrap.css, didalam file jquery terdapat file jquery-2.2.3.min.js, dan didalam folder js, terdapat file bootstrap.js dan bootstrap.min.js.

Sedangkan folder images, digunakan untuk menampung file image dari artikel yang di post.

 

#3. Menghilangkan index.php pada url

Secara default codeigniter menggunakan index.php pada url. Oleh sebab itu, agar url terlihat lebih bagus. Ada baiknya index.php dihilangkan dari url.

Untuk menghilangkan index.php pada url, anda dapat membuat file .htaccess

Adapun kode untuk file .htaccess adalah sebagai berikut:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]

Ketikan kode diatas, kemudian simpan dengan nama .htaccess sejajar dengan folder application, assets, dan system.

 

#4. Konfigurasi Codeigniter

Buka application/config/autoload.php atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/ci_blog/';
$config['index_page'] = ''; //hilangkan index.php pada index_page

Atur default controllernya pada application/config/routes.php dan atur menjadi seperti berikut:

$route['default_controller'] = 'blog';

Terakhir buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'db_myblog', //sesuaikan dengan database anda!
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

 

#5. Buat model dengan nama Blog_model.php

Kemudian ketikan kode berikut:

<?php
class Blog_model extends CI_Model{

        //fungsi untuk menyimpan data artikel kedalam database
        function simpan_post($judul,$isi,$slug,$gambar){ 
                $hsl=$this->db->query("INSERT INTO tbl_post (post_judul,post_isi,post_slug,post_image) VALUES ('$judul','$isi','$slug','$gambar')");
                return $hsl;
        }
        //fungsi untuk menampilkan data post berdasarkan slug
        function get_post_by_slug($slug){ 
                $hsl=$this->db->query("SELECT * FROM tbl_post WHERE post_slug='$slug'");
                return $hsl;
        }
        //funsgi untuk menampilkan semua post pada list
        function get_all_post(){ 
                $hsl=$this->db->query("SELECT * FROM tbl_post ORDER BY post_id DESC");
                return $hsl;
        }
}

 

#6. Buat controller dengan nama Blog.php

Kemudian ketikan kode berikut:

<?php
class Blog extends CI_Controller{
        function __construct(){
                parent::__construct();
                $this->load->model('blog_model');
        $this->load->library('upload');
        }
        function index(){
                $this->load->view('v_blog_post');
        }

        function simpan_post(){
                $config['upload_path'] = './assets/images/'; //path folder
            $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan
            $config['encrypt_name'] = TRUE; //enkripsi nama file ketika di upload

            $this->upload->initialize($config);
            if(!empty($_FILES['filefoto']['name'])){
                if ($this->upload->do_upload('filefoto')){
                        $gbr = $this->upload->data();
                    //Compress Image
                    $config['image_library']='gd2';
                    $config['source_image']='./assets/images/'.$gbr['file_name'];
                    $config['create_thumb']= FALSE;
                    $config['maintain_ratio']= FALSE;
                    $config['quality']= '60%';
                    $config['width']= 710;
                    $config['height']= 420;
                    $config['new_image']= './assets/images/'.$gbr['file_name'];
                    $this->load->library('image_lib', $config);
                    $this->image_lib->resize();

                    $gambar=$gbr['file_name']; //ambil nama file yang terupload enkripsi
                $judul=$this->input->post('judul');
                $isi=$this->input->post('isi');

                //Buat slug
                                $string=preg_replace('/[^a-zA-Z0-9 &%|{.}=,?!*()"-_+$@;<>']/', '', $judul); //filter karakter unik dan replace dengan kosong ('')
                                $trim=trim($string); // hilangkan spasi berlebihan dengan fungsi trim
                                $pre_slug=strtolower(str_replace(" ", "-", $trim)); // hilangkan spasi, kemudian ganti spasi dengan tanda strip (-)
                                $slug=$pre_slug.'.html'; // tambahkan ektensi .html pada slug

                                $this->blog_model->simpan_post($judul,$isi,$slug,$gambar); //simpan artikel ke database
                                redirect('blog/lists');
                        }else{
                                //redirect ke blog jika gambar gagal upload
                                redirect('blog');
                    }
                         
            }else{
                //redirect ke blog jika gambar kosong
                        redirect('blog');
                }               
        }

        function lists(){ //fungsi untuk menampilkan list artikel
                $x['data']=$this->blog_model->get_all_post();
                $this->load->view('v_blog_list',$x);
        }

        function detail($slug){ //fungsi untuk menampilkan detail artikel
                $data=$this->blog_model->get_post_by_slug($slug);
                if($data->num_rows() > 0){ // validasi jika data ditemukan
                        $x['data']= $data;
                        $this->load->view('v_blog_detail',$x);
                }else{
                        //jika data tidak ditemukan, maka kembali ke blog
                        redirect('blog');
                }
                
        }

}

 

#7. Buat view dengan nama v_blog_post.php

View ini berfungsi untuk menampilkan form post artikel.

Adapun kode berikut:

<!DOCTYPE html>
<html>
<head>
        <title>Post Artikel</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
        <div class="container">
                <div class="col-md-8 col-md-offset-2">
                        <h2>MY BLOG</h2><hr/>
                        <form action="<?php echo base_url().'blog/simpan_post'?>" method="post" enctype="multipart/form-data">
                    <input type="text" name="judul" class="form-control" placeholder="Judul" required/><br/>
                    <textarea  id="editor1" name="isi" class="form-control" required></textarea><br/>
                    <input type="file" name="filefoto" required><br>
                    <button class="btn btn-success" type="submit">POST</button>
            </form>
                </div>
                
        </div>
        
        <script src="<?php echo base_url().'assets/jquery/jquery-2.2.3.min.js'?>"></script>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
        <script type="text/javascript" src="<?php echo base_url().'assets/ckeditor/ckeditor.js'?>"></script>
        <script type="text/javascript">
          $(function () {
                // Fungsi untuk mengganti textarea dengan ckeditor style
              CKEDITOR.replace( 'editor1' ,{
              extraPlugins : 'syntaxhighlight',        
              toolbar: [
                     ['Source'] ,
                     ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','Image'] ,
                   ]              
            });

          });
        </script>
</body>
</html>

Sampai disini, Anda dapat menjalankannya untuk melihat apakah form berjalan dengan baik.

Kunjungi url http://localhost/ci_blog/

Maka akan terlihat hasilnya seperti gambar berikut:

 

#8. Buat sebuah view dengan nama v_blog_list.php

View ini berfungsi untuk menampilkan  list dari semua artikel yang di post.

Adapun kode berikut:

<!DOCTYPE html>
<html>
<head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
        <div class="container">
                <?php
                        function limit_words($string, $word_limit){
                $words = explode(" ",$string);
                return implode(" ",array_splice($words,0,$word_limit));
            }
                        foreach ($data->result() as $row) :
                ?>
                <div class="col-md-8 col-md-offset-2">
                        <h2><?php echo $row->post_judul;?></h2><hr/>
                        <img src="<?php echo base_url().'assets/images/'.$row->post_image;?>">
                        <?php echo limit_words($row->post_isi,100);?><a href="<?php echo base_url().'artikel/'.$row->post_slug;?>"> <strong>Selengkapnya ></strong></a>
                </div>
                <?php endforeach;?>
        </div>

        <script src="<?php echo base_url().'assets/jquery/jquery-2.2.3.min.js'?>"></script>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
</body>
</html>

 

#9. Buat lagi sebuah view dengan nama v_blog_detail.php

View ini berfungsi untuk menampilkan  detail artikel yang di post.

Adapun kode berikut:

<?php 
        $b=$data->row_array();
?>
<!DOCTYPE html>
<html>
<head>
        <title><?php echo $b['post_judul'];?></title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
        
</head>
<body>
        <div class="container">
                <div class="col-md-8 col-md-offset-2">
                        <h2><?php echo $b['post_judul'];?></h2><hr/>
                        <img src="<?php echo base_url().'assets/images/'.$b['post_image'];?>">
                        <?php echo $b['post_isi'];?>
                </div>
                
        </div>

        <script src="<?php echo base_url().'assets/jquery/jquery-2.2.3.min.js'?>"></script>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
        
</body>
</html>

 

#10. Atur routing untuk permalink url.

Untuk mengatur url agar lebih SEO friendly, buka application/config/routes.php

Kemudian rubah menjadi seperti berikut:

$route['artikel/(:any)'] = 'blog/detail/$1'; //route blog/detail/ disingkat menjadi artikel
$route['default_controller'] = 'blog';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

 

#11. Testing Project

Untuk menguji apakah project berjalan dengan baik silahkan jalankan kembali project dengan mengunjungi url http://localhost/ci_blog/

Kemudian post sebuah artikel seperti gambar berikut:

Klik tombol POST maka akan tampil post listnya, seperti gambar berikut:

Kemudian klik Selengkapnya> untuk melihat detail artikel, maka akan terlihat hasilnya seperti gambar berikut:

Nah, sekarang coba perhatikan url pada detail artikel. Akan terlihat seperti berikut:

http://localhost/ci_blog/artikel/steve-jobs-dan-atari.html

 

Kesimpulan:

Pembahasan kali ini adalah tentang membuat blog SEO url dengan codeigniter.

SEO (Search Engine Optimization) adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut.

Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan.

Situs web di posisi teratas akan mendatangkan lebih banyak pengunjung.

Situs web yang memiliki banyak pengunjung, akan mendatangkan kebahagiaan tersendiri bagi sang pemilik website.

SEO sangat erat hubungannya dengan URL. Oleh sebab itu, penting untuk membuat url yang baik agar lebih SEO friendly.

URL yang SEO friendly adalah url dengan menempatkan kata kunci singkat pada url.

Untuk menempatkan kata kunci singkat pada url, perlu dilakukan url permalink.  

Dowload Source