Cara Membuat dan Menambahkan Meta Tags Icon di Blog AMP dan Non - AMP

Meta tags icon merupakan sebuah tool html yang digunakan untuk menambahkan icon situs blog agar icon tersebut support terhadap ragam jenis browser
Gambar Meta Tags Icon - Nurul Huda

Masih sharing seputaran blog dan pengalaman saya mengkonfigurasi meta tags icon di blog www.nurulhuda.id.
Meta tags icon merupakan sebuah tool html yang digunakan untuk menambahkan logo atau icon situs blog agar logo atau icon tersebut mendukung / support terhadap ragam jenis browser yang ada.

Dahulu mungkin sudah cukup dengan melakukan konfigurasi pada favicon.ico blog. Namun, cara itu sekarang sudah tidak relevan lagi maksudnya sudah tidak maksimal seperti dahulu lagi karena perkembangan teknologi dan ragam jenis web browser.

Agar logo atau icon situs blog tetap mendukung atau support terhadap ragam jenis web browser maka diperlukan konfigurasi meta tags icon dengan size / ukuran logo atau icon yang berbeda. Dengan melakukan konfigurasi meta tag icon ini logo atau icon blog akan terlihat dibeberapa tempat web browser seperti pada tab browser, beranda browser, history, recent history, favorite dan lainnya:

Gambar Screenshot Google - Nurul Huda

Apakah penting melakukan meta tag icon pada situs blog?
Relatif, karena ini tidak ada kitannya langsung dengan SEO. Namun, menurut pendapat pribadi saya perlu untuk dilakukan karena melalui logo atau icon sebuah blog akan mendapatkan brand dan menambah nilai / tingkat profesional blog itu sendiri.

Pada panduan kali ini akan saya buatkan secara lengkap, mulai dari pembuatan logo atau icon, pemberian nama icon sampai pada cara menghostingkannya ke akun github. Agar supaya nanti tetap dapat digunakan ketika melakukan konfigurasi lainnya seperti pembuatan PWA dll.

Membuat Logo / Icon Meta Tags

Pertama: Silahkan anda siapkan logo atau icon blog anda dengan ukuran 512 x 512 px (pixel) dan rename menjadi 512x512.

Kedua: Silahkan anda melakukan generate logo atau icon disini: Favicon.ico & App Icon Generator

Ketiga: Silahkan anda upload logo / icon yang telah anda buat sebelumnya dengan klik Choose File kemudian cari logo 512x512 dan klik Create Favicon dan tunggu proses pembuatannya.

Keempat: Setelah proses pembuatan logo / icon selesai sekarang silahkan anda mendownloadnya *(silahkan download file yang berekstensi .zip bukan png)

Gambar Screenshot Favicon.ico & App Icon Generator - Nurul Huda

Kelima: setelah selesai mendownload silahkan anda ekstrak file .zip nanti anda akan mendapatkan logo / icon dengan berbagai size / ukuran.

Keenam: Silahkan anda rubah nama logo / icon 512x512 yang yang telah buat sebelumnya menjadi android-icon-512x512 dan silahkan anda pindahkan menjadi satu folder dengan logo / icon yang telah anda ekstrak tadi.

Sampai disini anda telah selesai membuat berbagai size atau ukuran logo / ico blog selanjutnya silahkan anda hostingkan ke akun github anda.

Cara Menghostingkan Logo / Icon ke dalam Repository Github

Sebelum anda menghostingkan logo atau icon blog anda ke reposity github pastikan anda telah memiliki akun dan log in pada github jika belum silahkan anda membuat akun terlebih dahulu gratis disini: Github

Pertama: Silahkan anda membuat repository baru terlebih dahulu pada akun github anda dengan nama icon-namablog, silahkan centang public dan README file contohnya kurang lebih seperti gambar dibawah ini:

Gambar Cara Buat Repository Github - Nurul Huda

Kedua: Selanjutnya silahkan anda masuk ke repository yang baru anda buat tadi, jika sudah silahkan klik Add file.

Gambar Add File di Repository Github - Nurul Huda

Ketiga: Silahkan anda upload semua file logo atau icon yang telah anda ekstrak sebelumnya dengan meng - klik pada chose your file, jika semua logo atau icon sudah anda tandai (CTRL + A) kemudian silahkan klik Ok dan selanjutnya silahkan anda tunggu proses upload - nya seselai, jika sudah silahkan klik commit changes.

Sampai disini anda telah berhasil menghostingkan semua logo atau icon blog anda ke repositoty github selanjutnya masuk pada panduan cara menambahkan meta tags icon kedalam blog anda.

Cara Menambahkan Meta Icon ke dalam Blog

Petama: silahkan anda masuk ke dashboard blog anda dengan klik pengaturan lalu pilih tema dan pilih edit html.

Kedua: Selanjutnya silahkan copy dan tempelkan kode HTML di bawah ini diantara kode <head> atau &lt;head&gt; dan </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; kemudian jangan lupa anda mengganti url gambar berwarna orange dengan url gambar yang telah anda hostingkan di repository github anda tadi.

<!-- Meta Tags Icon -->
<link expr:href='data:blog.homepageUrl + &quot;/favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link href='/main/apple-icon-57x57.png' rel='apple-touch-icon' sizes='57x57' />
<link href='/main/apple-icon-60x60.png' rel='apple-touch-icon' sizes='60x60' />
<link href='/main/apple-icon-72x72.png' rel='apple-touch-icon' sizes='72x72' />
<link href='/main/apple-icon-76x76.png' rel='apple-touch-icon' sizes='76x76' />
<link href='/main/apple-icon-114x114.png' rel='apple-touch-icon' sizes='114x114' />
<link href='/main/apple-icon-120x120.png' rel='apple-touch-icon' sizes='120x120' />
<link href='/main/apple-icon-114x114.png' rel='apple-touch-icon' sizes='144x144' />
<link href='/main/apple-icon-152x152.png' rel='apple-touch-icon' sizes='152x152' />
<link href='/main/apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180' />
<link href='/main/android-icon-192x192.png' rel='icon' sizes='192x192' type='image/png' />
<link href='/main/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png' />
<link href='/main/favicon-96x96.png' rel='icon' sizes='96x96' type='image/png' />
<link href='/main/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png' />
<meta content='#ffffff' name='msapplication-TileColor' />
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage' />
<meta content='#ffffff' name='theme-color' />
<link href='/manifest.json' rel='manifest' />

Ketiga: Terakhir klik save / simpan tema

Demikanlah panduan membuat dan menambahkan meta tags icon ke dalam blog AMP dan Non - AMP semoga dapat membantu anda.

Diperbolehkan bagi anda yang ingin menyalin artikel yang ada diblog ini dengan syarat menyertakan sumbernya. Blog anda tidak akan dihapus, deindex dan adsense anda tidak akan menerima keluhan hak cipta dari saya. Dan silahkan anda share artikel ini jika menurut anda bermanfaat. Terima kasih