Cara Membuat

Ketika Anda mulai mempelajari SEO, Anda akan sering mendengar istilah meta tag description. Lalu apa itu meta tag description? Meta tag description adalah tag html yang bertujuan untuk membantu search engine, utamanya Google, dalam mengetahui ulasan singkat tentang isi dari website Anda. Jadi tujuan sebenarnya meta tag adalah untuk memudahkan search engine mengindeks suatu halaman.

Seberapa pentingkah meta description ini untuk SEO? Beberapa tahun lalu, search engine memang memakai meta description untuk menentukan relevansi suatu keyword. Tetapi beberapa saat kemudian banyak orang yang memanipulasi search engine dengan memasukkan keyword yang tidak relevan dengan isi artikel tersebut dalam meta description untuk mendongkrak peringkat di hasil penelusuran. Oleh karena itu search engine, khususnya Google, pada tahun 2009, Google mengeluarkan statement bahwa Google tidak lagi memakai meta description dalam menentukan hasil penelusuran dan meta tag tidak akan berpengaruh apapun terhadap peringkat.

Lalu Kenapa praktisi SEO banyak yang menyarankan untuk memasang meta tag description? Walaupun meta tag description tidak berperan secara langsung dalam menentukan ranking atau peringkat di search engine, tetapi karena Google akan menampilkan meta description ini di hasil pencarian, maka meta description ini tetap dipakai untuk memberikan penjelasan singkat suatu halaman kepada calon pengunjung saat halaman tersebut Muncul di pencarian organik. Meta description ini bisa digunakan untuk mempengaruhi keputusan pengunjung untuk mengunjungi halaman blog Anda atau tidak.

Panjang meta tag description yang Muncul di hasil pencarian ini bervariasi, berkisar antara 135 karakter sampai 160 karakter. Tetapi rata-rata tidak lebih dari 155 karakter. Google sendiri juga menyarankan agar meta tag description terlihat bagus, panjang meta tag description yang digunakan sebaiknya tidak lebih dari 150 karakter. Oleh karena meta tag description ini begitu penting karena akan dilihat pertama kali oleh pengunjung di hasil penelusuran sebelum pengunjung membuka halaman, maka agar meta tag description bisa memberikan performa yang maksimal untuk traffic pengunjung, dengan panjang kalimat meta tag description yang sebaiknya tidak lebih dari 150 karakter, ketika membuat meta tag description tentu sebaiknya membuang kata-kata yang tidak diperlukan dan hanya menggunakan kalimat yang bisa mengundang pengunjung saja. Dengan adanya meta tag description di blog, itu artinya Anda menyediakan rangkuman untuk memberikan penjelasan kepada calon pengunjung dan blog Anda akan lebih disukai oleh search engine.

Cara Mengaktifkan Meta Tag Description di Blogspot.

1. Buka blogger.com dan login.
2. Klik sub menu "Search preferences".
3. Jika pada "Meta Tags Description" pengaturannya masih [Disabled], klik Edit, kemudian centang pada pilihan kotak checkbox "Yes".
4. Pada kotak edit, ketikkan meta deskripsi blog yang dikehendaki lalu simpan perubahan.

Cara Menambahkan Meta Tag Description di Postingan Blogspot

Untuk menambahkan meta tag description pada masing-masing postingan:

1. Edit postingan yang ingin diberi meta tag description.
2. Klik "Search Description", pada kotak edit ketikkan meta tag description yang dikehendaki, lalu klik "Done".
3. Setelah itu update postingan dan selesai.

Selamat mencoba, semoga bermanfaat.

Menciptakan pengalaman terbaik untuk berselancar di dunia internet bagi banyak perangkat tidaklah sesulit yang dibayangkan. Dalam kesempatan kali ini, kita akan mencoba menggunakan font family yang bisa tampil dengan baik di semua perangkat. Baik itu ponsel, smart phone, android, windows phone, iphone, laptop maupun pc. Ide dasarnya adalah mengembangkan pemikiran untuk mendukung kecepatan respons suatu halaman ketika dimuat dengan memanfaatkan font yang telah ada dalam setiap perangkat tersebut. Jika sebuah halaman menggunakan font family yang didukung oleh sistem dalam perangkat, tentu tidak perlu memuat font lainnya lagi. Dengan begitu kecepatan loading halaman bisa dipercepat yang berimbas pada performa pemuatan halaman. Bagi beberapa desainer web, ini bisa jadi masalah baru pastinya. Karena menggunakan font external, misalnya saja Google fonts, tentu sangat tidak direkomendasikan.

Mencari font family yang berfungsi baik di berbagai tipe perangkat ternyata cukup membingungkan. Ini karena semua perangkat telah mengembangkan font family bawaan yang berbeda antara satu dengan yang lainnya. Setiap perangkat memiliki ukuran layar yang sangat berbeda dan kemampuan yang berbeda pula. Jadi pastilah kita tidak bisa hanya menggunakan 1 type font family saja. Kalau kita menggunakan semua font default di masing-masing perangkat tersebut, tentu kita harus melakukan beberapa penyesuaian desain pada perangkat ponsel dan smart phone.

Dalam praktiknya, jika sebuah font telah dideklarasikan, dan perangkat pengguna memiliki font yang ada dalam daftar font family tersebut, maka sisa daftar font family harus diabaikan. Ini berarti jika beberapa font tersebut dinyatakan sebagai font yang dapat diunduh dengan secara langsung atau pun tidak langsung dengan menggunakan kode yang disediakan oleh Google, maka tidak boleh ada unduhan yang dilakukan. Tetapi jika ada karakter yang tidak ada dalam font itu, maka daftar harus diproses lebih lanjut dan ini akan menghasilkan unduhan font jika tidak ada font sebelumnya dalam daftar. Browser dapat menerapkan perilaku ini secara berbeda, misalnya mungkin selalu memuat font yang dapat diunduh, atau mungkin gagal mengunduhnya jika font dalam daftar sebelumnya ada dalam sistem.

Di bawah ini adalah beberapa font family yang mengacu pada font default dalam sistem, pada kebanyakan platform iOS, Windows, Windows Phone, Android dan Ubuntu yang bisa digunakan pada proyek selanjutnya. Tentunya jika pengembang tertarik untuk menggunakan font yang didukung oleh semua perangkat dan bisa tampil baik di multi-perangkat.

Daftar Font Family Default System

• -apple-system- San Francisco di Safari (di Mac OS X dan iOS); Neue Helvetica dan Lucida Grande pada versi Mac OS X.
• system-ui - Font UI default pada platform yang diberikan.
• BlinkMacSystemFont- setara dengan -apple-system, untuk Chrome di Mac OS X.
• "Segoe UI" - Windows (Vista +) dan Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) dan Chrome OS.
• Ubuntu - semua versi Ubuntu.

Pada panduan kali ini, font untuk OS lain atau versi yang lebih lama tidak dicantumkan.

Menggunakan Font-Family Default System

Untuk menggunakan font tersebut, silakan tambahkan baris property berikut pada pengaturan css proyek yang sedang dikerjakan.

font-family:system, -apple-system, system-ui, "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Lucida Grande", Roboto, Arial, Helvetica, sans-serif, Ubuntu;

Contohnya jika ingin menggunakan font tersebut pada suatu elemen, maka tambahkan saja property tersebut pada elemen yang ingin menggunakan font tersebut.

Cara Mengganti Font Template Dengan Font Family Default System

1. Buka blogger.com kemudian login.
2. Pada menu “Tema”, klik “Edit HTML”
3. Lalu salin CSS di bawah ini dan letakkan di atas tag </head>

<style type="text/css">
  body{
     font-family:system, -apple-system, system-ui, "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Lucida Grande", Roboto, Arial, Helvetica, sans-serif, Ubuntu;
     font-size:16px;
  }
</style>

4. Setelah itu simpan tema dan lihat hasilnya.

Template yang saya gunakan ini sudah menggunakan font-family default dari masing-masing system. Untuk melihat perbedaannya, silakan buka blog ini di beberapa perangkat yang berbeda. Jika tertarik menerapkan font-family default system ini di blog atau web Anda, silakan ikuti langkah-langkah cara mengganti font template blogspot dengan font-family default dari system di atas pada desain web atau blog yang Anda miliki.

Selamat mencoba!

Cara Membuat Tag Title yang SEO Friendly, Cara Membuat Title yang SEO Friendly, Panduan Optimasi Title Agar SEO Friendly, Cara Membuat Title Blog yang SEO Friendly. Tag title pada halaman blog merupakan elemen yang pertama kali dilihat oleh search engine Google. Title merupakan salah satu elemen paling penting dari SEO on-page karena title merupakan faktor terpenting kedua dari SEO on-page setelah konten. Jika ingin meningkatkan peringkat blog di hasil penelusuran search engine, utamanya Google, maka tentunya harus mengetahui bagaimana cara membuat title blog yang SEO friendly agar lebih optimal. Oleh karena itu penting sekali untuk melakukan optimasi title agar halaman blog lebih mudah ditemukan lewat search engine, khususnya Google. Karena title selalu akan ditampilkan di hasil pencarian Google, supaya blog lebih maksimal di hasil pencarian, artinya penulisan dan format title wajib diperhatikan dalam optimasi SEO.

Karena secara default Blogspot tidak hadir dengan SEO yang telah dioptimalkan, struktur title tag bawaan dari Blogspot itu justru meletakkan judul blog di awal title baru kemudian judul artikel. Ini tentunya tidak sesuai dengan kaidah optimasi SEO yang diharapkan oleh search engine, khususnya Google, karena search engine akan membaca title dari kiri ke kanan, dan bukan sebaliknya. Agar sesuai dengan format SEO yang diinginkan, jadi perlu mengganti title tersebut secara manual agar lebih SEO friendly.

Secara default, syntax untuk <title /> adalah sebagai berikut:

    <title><data:blog.pageTitle/></title>

atau

<title><data:view.title.escaped/></title>

Susunan title bawaan dari Blogspot biasanya judul blog berada di awal dan judul postingan malah berada di belakangnya. Bahkan untuk template default Blogger yang terbaru hanya terdiri dari judul artikelnya saja. Supaya format title tersebut SEO friendly, maka harus diganti dengan susunan title tag yang SEO friendly, yaitu judul postingan berada di awal dan judul blog ada di belakangnya.

Untuk itu, tag title default tersebut sebaiknya diganti dengan susunan tag title yang SEO friendly. Cara mengganti tag title default dengan format tag title yang SEO friendly adalah sebagai berikut:

1. Buka blogger.com
2. Kemudian klik Tema => Edit HTML, cari tag title di bawah ini dan hapus.

    <title><data:blog.pageTitle/></title>

atau

<title><data:view.title.escaped/></title>

3. Ganti dengan syntax berikut ini:

  <title>
<b:if cond='data:blog.pageName != ""'><data:blog.pageName/> | </b:if><data:blog.title/>
</title>

4. Simpan Template dan lihat hasilnya.

Susunan tag title di atas adalah susunan sederhana dari tag title yang SEO friendly. Kalau mau yang lebih lengkapnya bisa gunakan susunan tag title di bawah ini:

<title>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:blog.title/>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>Page Not Found! - <data:blog.title/><b:else/>
<b:if cond='data:blog.pageType == "item"'><data:blog.pageName/> | <data:blog.title/><b:else/>
<b:if cond='data:blog.pageType == "static_page"'><data:blog.pageName/>~ <data:blog.title/><b:else/>
<b:if cond='data:blog.pageName == ""'><data:blog.title/><b:else/>
<b:if cond='data:blog.searchQuery'>Search results for <data:blog.searchQuery/> : <data:blog.title/><b:else/>
<b:if cond='data:blog.searchLabel'><data:blog.pageName/> - <data:blog.title/><b:else/>
<b:if cond='data:blog.pageType == "archive"'><data:blog.pageName/> | <data:blog.title/><b:else/><data:blog.title/></b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if></title>

Selamat mencoba.