Meta Tags Icon Website - Apa yang dimaksud dengan meta tags icon website? meta tag icon wemsite merupakan sebuah metode atau cara menambahkan icon website pada tab browser dan tempat lainnya, Sebelum kehadiran smartphone dan banyak-nya jenis browser modern setiap website seperti situs blogger umumnya menggunakan sebaris tag favicon.ico "<link href='/favicon.ico' rel='icon' type='image/x-icon'/>" untuk menambahkan icon situs web mereka pada tab browser. Namun sekarang meta tag icon seperti itu kurang maksimum bahkan tidak support di sebagian browser. Agar icon situs web khususnya icon situs blogger muncul di banyak jenis browser dan kita perlu menambahkan beberapa jenis meta tag icon dengan size atau ukuran icon website yang berbeda.
Di kesempatan kali ini saya akan membagikan meta tag icon untuk mendukung kemunculan icon atau logo situs di banyak browser modern dan di banyak tempat seperti pada tab browser, Beranda browser, history, recent history, favorite (situs yang sering di-kunjungi) dan lainnya seperti terlihat pada contoh di bawah ini;
Jika penerapan icon pada situs blogger menggunakan metode lama, browser modern tidak dapat menampilkan gambar icon secara utuh dan hanya di tandai dengan inisial "B" atau blogger, sedangkan jika penerapan icon situs menggunakan metode baru, gambar icon akan ditampilkan secara utuh dengan resolusi yang tinggi sehingga situs lebih mudah dikenali seperti terihat pada gambar sebelah kanan.
Untuk menampilkan icon website secara maksimal di banyak jenis browser kita perlu menambahkan beberapa versi meta tag icon di bawah ini pada tag <head> situs web lengkap dengan size atau ukuran icon untuk mencegah perubahan skala otomatis.
Catatan: Tidak semua meta tag icon harus di tambahkan ke dalam situs web, kamu dapat memilih beberapa meta tag saja untuk mewakili browser yang paling umum di gunakan di wilayah target situs dan jenis file yang yang digunakan adalah file png "icon.png".
Situs web ini contoh nya hanya menggunakan 5 meta tag icon yang paling umum digunakan untuk mendukung browser-browser utama seperti Chrome, Firefox OS, Safari dan Opera.
Setelah tag icon di terapkan silahkan lihat atau tinjau situs anda melalui smartphone (android atau apple) dengan browser chrome, opera dan safari, sekalian juga tinjaukan situs saya jika kamu pengguna iphone.
Seberapa Penting Tag Icon Untuk Situs Blogger?
Icon atau logo situs akan menambah nilai / tingkat propesional terhadap situs web itu sendiri, Selain itu icon/logo situs juga cenderung menambah seni (kerapian) situs sehingga menjadikan situs web lebih mudah di kenali, icon atau logo situs web juga merupakan brand atau merk yang menggambarkan produk atau isi situs web. Orang-orang umumnya lebih cenderung mengenali atau menghafal brand di bandingkan url situs. Dalam SEO (Serch Engine Optimation) Checker, situs web yang memiliki nilai dan daya tarik tersendiri untuk mendatangkan visitor ke situs web.
Jika didalami lebih jauh, optimasi icon atau logo pada situs web dapat dikategorikan sebagai optimasi seo off page, kamu dapat mempelajari lebih dalam tentang tag icon.png dan pengetahuan tentang browser modern pada laman google develover dan developer apple untuk mengindari kesalahan atau gunakan tag favicon generator untuk mendapatkan ukuran atau size icon situs web pada sebagian besar browser populer saat ini.
Demikian saja penjelasan dan cara menerapkan tag icon website pada situs blogger, saya harap artikel ini dapat memberikan sedikit ilmu atau sekedar pemahaman memasang tag icon website selamat mencoba dan sukses buat kamu. Tak bosan saya ingatkan Follow dan Subscribe situs ini untuk mendapatkan informasi ter-update seputar blogging.
Di kesempatan kali ini saya akan membagikan meta tag icon untuk mendukung kemunculan icon atau logo situs di banyak browser modern dan di banyak tempat seperti pada tab browser, Beranda browser, history, recent history, favorite (situs yang sering di-kunjungi) dan lainnya seperti terlihat pada contoh di bawah ini;
 |
| Meta tags icon website |
Untuk menampilkan icon website secara maksimal di banyak jenis browser kita perlu menambahkan beberapa versi meta tag icon di bawah ini pada tag <head> situs web lengkap dengan size atau ukuran icon untuk mencegah perubahan skala otomatis.
<link rel="apple-touch-icon" sizes="72x72" href="url-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="url-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="url-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="url-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="url-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="url-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="url-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="url-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="url-icon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="url-icon-96x96.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="url-icon-144x144.png">
Catatan: Tidak semua meta tag icon harus di tambahkan ke dalam situs web, kamu dapat memilih beberapa meta tag saja untuk mewakili browser yang paling umum di gunakan di wilayah target situs dan jenis file yang yang digunakan adalah file png "icon.png".
Situs web ini contoh nya hanya menggunakan 5 meta tag icon yang paling umum digunakan untuk mendukung browser-browser utama seperti Chrome, Firefox OS, Safari dan Opera.
Penerapan Meta Tag Icon Pada Situs Blogger
Tambahkan meta tag icon di bawah ini pada area <head> situs blogger, lebih jelas nya letakkan link tag di antara kode <head> dan </head> html situs blogger anda, kemudian ganti tanda pagar "#" dengan url_icon atau logo situs.<link href='#' rel='icon' sizes='192x192'/>
<link href='#' rel='apple-touch-icon'/>
<link href='#' rel='apple-touch-icon' sizes='152x152'/>
<link href='#' rel='apple-touch-icon' sizes='180x180'/>
<link href='#' rel='apple-touch-icon' sizes='167x167'/>
Pengaturan size image data icon
Untuk menyesuaikan ukuran atau size icon.png dengan size yang ditetapkan pada meta (link) tag icon, kamu tidak perlu membuat dan menggunggah banyak gambar dengan ukuran (size) yang berbeda. Cukup unggah satu (1) icon.png persegi misal: 5cm x 5cm dengan data size dibawah 350kb, kemudian icon.png akan kita compress menggunakan image url blogspot agar sesuai dengan ukuran yang di tetapkan pada meta tag icon. Baru taukan bahwa image url blogspot dapat dijadikan image size compressor ☺, perhatikan image url dibawah ini.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ydQJOpf9vZHNeUW7tFcs3XzHv34fd43JE3kGL9Iewayj3acqao95ZnEFP0Sh7H7SFHvR1w3JQ03xkGdRiJFnaTX9ejr9wx5VypH9Vc44L8uEzo4xaPwpMWlzsAvW8pfCRThytpaNrTg/s470/STLB.png
Ganti s470 dengan size pada masing-masing tag icon, misalnya s192, s152, s180 dan s167, dengan demikian ukuran atau size mage "icon.png" akan di resize sesuai dengan ukuran pada tag icon. Untuk membuat ukuran normal icon.png silahkan hapus /s470 dari image url, Agar lebih jelas-nya silahkan kunjungi "Beranda" situs ini kemudian tekan Ctrl+U untuk melihat cara penerapan tag icon pada situs blogger.
Setelah tag icon di terapkan silahkan lihat atau tinjau situs anda melalui smartphone (android atau apple) dengan browser chrome, opera dan safari, sekalian juga tinjaukan situs saya jika kamu pengguna iphone.
Seberapa Penting Tag Icon Untuk Situs Blogger?
Icon atau logo situs akan menambah nilai / tingkat propesional terhadap situs web itu sendiri, Selain itu icon/logo situs juga cenderung menambah seni (kerapian) situs sehingga menjadikan situs web lebih mudah di kenali, icon atau logo situs web juga merupakan brand atau merk yang menggambarkan produk atau isi situs web. Orang-orang umumnya lebih cenderung mengenali atau menghafal brand di bandingkan url situs. Dalam SEO (Serch Engine Optimation) Checker, situs web yang memiliki nilai dan daya tarik tersendiri untuk mendatangkan visitor ke situs web.
Jika didalami lebih jauh, optimasi icon atau logo pada situs web dapat dikategorikan sebagai optimasi seo off page, kamu dapat mempelajari lebih dalam tentang tag icon.png dan pengetahuan tentang browser modern pada laman google develover dan developer apple untuk mengindari kesalahan atau gunakan tag favicon generator untuk mendapatkan ukuran atau size icon situs web pada sebagian besar browser populer saat ini.
Demikian saja penjelasan dan cara menerapkan tag icon website pada situs blogger, saya harap artikel ini dapat memberikan sedikit ilmu atau sekedar pemahaman memasang tag icon website selamat mencoba dan sukses buat kamu. Tak bosan saya ingatkan Follow dan Subscribe situs ini untuk mendapatkan informasi ter-update seputar blogging.
Tags:
Seo Blogger