Sabtu, 02 Oktober 2021

Website Yang Ramah SEO

Pendahuluan

Disini kita akan membuat suatu halaman project yang digunakan untuk memudahkan mesin pencari untuk mengindex halaman yang kita buat. Artikel ini juga sangat dibutuhkan untuk para seo marketer. Bisa dikatakan kita menggunakannya untuk SEO (Search Engine Optimization). Sebelumnya kamu mesti mengetahui dulu struktur dari sebuah halaman html yang sederhana. Seperti ini

<!DOCTYPE HTML>
<html>
    <head>
        <title>Struktur HTML Sederhana</title>
    </head>
    <body>
        Ini merupakan tag body
    </body>
</html>

TITLE

Tag title pada halaman html mesti dan seharusnya ada. Yang merupakan judul dari halaman tersebut dan juga muncul pada tab perambahan kita. Title seharusnya sesuai dengan isi halaman yang dibuat.

contohnya pada bagian tag head:

    <head>
        <title>Struktur HTML Sederhana</title>
    </head>

HEADING

Kita harus mengetahui bahwa tag yang sering diindeks lainya yakni h1, h2, h3, h4, h5, dan h6. Dimana tag tersebut memberi arti heading atau judul. Misalnya kita membuat judul untuk h1 halaman ini yakni Membuat Halaman Website Dengan SEO dan h2-nya sub judul dari itu yakni Pendahuluan, Title, Heading, Meta.

IMAGE ALT

Berdasarkan statistik artikel yang memiliki gambar memiliki 94% lebih banyak pembaca dibanding yang tidak ada gambarnya. Untuk penggunaanya bisa dilihat dibawah ini:

<img src="https://www.yusufabdulloh.my.id/image.png" alt="Contoh web responsive" />

src merupakan lokasi tempat foto itu berada. Sedangkan alt merupakan kepanjangan dari alternative yang berisi penjelasan tentang foto tersebut.

LINK

Link sangatlah berperan dalam ranking sebuah website di mata Search Engine / Perambahan. Link berpengaruh pada domain authority sebuah website. Bila kamu harus membuat link ke website yang lemah atau baru kamu bisa menggunakan rel='nofollow'. Tapi bila kamu membuat link yang tidak sesuai dengan halaman yang dibuat malah menjadikan link tersebut spam atau mungkin juga bisa dikenakan pinalti.

MEMBUAT HALAMAN RESPONSIVE

Untuk membuat sebuah halam responsive atau sesuai tampilanya pada perangkat yang digunakan oleh pengunjung. Kita bisa menggunakan tag meta name='viewport' pada tag head dimana ini akan menyesuaikan lebar dari halaman tersebut. Ini akan dipasangkan pada css media queries. Untuk penjelasannya kamu bisa lihat artikel pembuatan halaman responsive.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Semoga bermanfaat dan salam sukses selalu.

Jumat, 28 Mei 2021

Cara Membuat Responsive Website

Responsive Website adalah website yang bisa beradapatasi dengan semua perangkat dengan berbagai macam luas screen. Sebelumnya saya harap pembaca sudah mengenal html dan css, karena kita akan membuat responsive website ini dengan HTML dan CSS.

»Menggunakan viewport pada HTML

Penggunaan viewport untuk melihat luas dari halaman website. Karena terkadang dalam suatu website memiliki luas yang tetap dan tidak muat pada layar yang kecil. Layar yang kecil ini dimaksud layar pada tablet atau handphone yang mengunjungi website.

tampilan dekstop

tampilan handphone

Alangkah lebih indah dan bagus bila menyesuaikan tampilan pada tiap layar baik layar pada handphone, tablet maupun yang lebih besar dari itu.

viewport dipasang pada tag header dalam suatu tag meta. sebagai contoh yakni

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ini akan menyatakan lebar sebuah layar perangkat.

»Menggunakan @media pada CSS

Media query ini memberi kemampuan browser untuk menggunakan css yang berbeda pada tiap lebar layar atau perangkat dan spesifikasinya agar menggunakan gaya yang sesuai.Contoh penggunaan @media yakni:

@media screen and (min-width: 800px) and (max-width: 1024px) {
   body {
     background-color: green;
 }
}

pada kode css diatas menjelaskan tentang minimal lebar layar 800 piksel dan maksimal lebar layar 1024 piksel menggunakan warna background hijau.

Saya akan memberikan sebuah landing page yang menggunakan responsive desain ini.Kamu tinggal menyalin dan menempelnya pada suatu file baru dan menyimpanya dalam nama file responsive.html.


<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ini contoh halaman responsive</title>
  <style>
   header {
    color: #FFFFFF;
    background-color: #284b63;
    padding: 80px 0;
    text-align: right;
    width: 100%;
   }
   section {
    padding: 40px 0;
    text-align: center;
   }
.main {
    background: #FFFFFF;
    color: #000000;
    width: 75%;
    float: left;
   }
   .navigasi {
    background: #549da0;
    color: #FFFFFF;
    width: 25%;
    float: right;
   }
   footer {
    background: #353535;
    padding: 32px 0;
    text-align: center;
    color: #868686;
   }
@media screen and (max-width:600px){
    .main {
     width:100%;
     float:none;
    }
    .navigasi {
     width:100%;
     float:none;
    }
   }
</style>
 </head>
 <body>

  <header>
   Header
</header>

  <section class="main">
   Main
  </section>

  <section class="navigasi">
   Navigasi
  </section>

  <footer>
    footer
  </footer>
 </body>
</html>

Kode diatas akan berubah sesuai tampilan layar. Bila pengunjung menggunakan laptop atau komputer maka navigasi akan sejajar posisinya dengan main, bila dengan handphone maka navigasi akan ad adi bawah main.Untuk mendesain tampilan layar handphone atau biasanya tidak lebih dari 600piksel kita bisa menyetingya pada blok media kueri yang ada di bagian @media. Mudah bukan?Sekarang tampilan apapun pada perangkat apapun bisa kita perindah sesuai dengan ukuran layar perangkat yang mengunjungi website kita.

YoeManTech