Trik Dan Tips Meta Tags Icon Website

Meta Tags Icon Website - Apa yang dimaksud dengan meta tags icon website? meta tag icon wemsite merupakan sebuah metode atau cara menambah...

A+ A-
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 daerah lainnya, Sebelum kehadiran smartphone dan banyak-nya jenis browser modern setiap website menyerupai situs blogger umumnya memakai sebaris tag favicon.ico "<link href='/favicon.ico' rel='icon' type='image/x-icon'/>" untuk menambahkan icon situs web mereka pada tab browser. Namun kini meta tag icon menyerupai 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 aku akan membagikan meta tag icon untuk mendukung kemunculan icon atau logo situs di banyak browser modern dan di banyak daerah menyerupai pada tab browser, Beranda browser, history, recent history, favorite (situs yang sering di-kunjungi) dan lainnya menyerupai terlihat pada pola di bawah ini;
 Apa yang dimaksud dengan meta tags icon website Trik dan Tips Meta Tags Icon Website
Meta tags icon website
Jika penerapan icon pada situs blogger memakai metode lama, browser modern tidak sanggup menampilkan gambar icon secara utuh dan hanya di tandai dengan inisial "B" atau blogger, sedangkan kalau penerapan icon situs memakai metode baru, gambar icon akan ditampilkan secara utuh dengan resolusi yang tinggi sehingga situs lebih gampang dikenali menyerupai 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.
<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, kau sanggup menentukan beberapa meta tag saja untuk mewakili browser yang paling umum di gunakan di wilayah sasaran situs dan jenis file yang yang dipakai ialah file png "icon.png".

Situs web ini pola nya hanya memakai 5 meta tag icon yang paling umum dipakai untuk mendukung browser-browser utama menyerupai 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 terang nya letakkan link tag di antara isyarat <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, kau tidak perlu menciptakan 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 memakai image url blogspot biar sesuai dengan ukuran yang di memutuskan pada meta tag icon. Baru taukan bahwa image url blogspot sanggup dijadikan image size compressor ☺, perhatikan image url dibawah ini.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHrj9Ykkur9gjLrltUv467woCBQLAEwL1rvzU8IM7FnNeM8eL6s0hnDMFnQkTxIca8GyhfbqfX9gSjKTEI5RpgpxpI0V5Vl4vjK9OqSB4eblzVtEIrdyStXAYdiZVCK5EPLFZnAnaZG7Q/s470/STLB.png
Ganti s470 dengan size pada masing-masing tag icon, contohnya s192, s152, s180 dan s167, dengan demikian ukuran atau size mage "icon.png" akan di resize sesuai dengan ukuran pada tag icon. Untuk menciptakan 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 aku kalau kau 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 menyebabkan situs web lebih gampang di kenali, icon atau logo situs web juga merupakan brand atau brand 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 mempunyai nilai dan daya tarik tersendiri untuk mendatangkan visitor ke situs web.

Jika didalami lebih jauh, meningkatkan secara optimal icon atau logo pada situs web sanggup dikategorikan sebagai meningkatkan secara optimal seo off page, kau sanggup mempelajari lebih dalam ihwal tag icon.png dan pengetahuan ihwal browser modern pada laman google develover dan developer apple untuk mengindari kesalahan atau gunakan tag favicon generator untuk mendapat ukuran atau size icon situs web pada sebagian besar browser terkenal ketika ini.

Demikian saja klarifikasi dan cara menerapkan tag icon website pada situs blogger, aku harap artikel ini sanggup memperlihatkan sedikit ilmu atau sekedar pemahaman memasang tag icon website selamat mencoba dan sukses buat kamu. Tak bosan aku ingatkan Follow dan Subscribe situs ini untuk mendapat isu ter-update seputar blogging.

Related

Meta Tag 2970827918831643221

Technology

Hot in week

Recent

Comments

item