Meta Tag: Pengertian, Manfaat, dan Cara Membuatnya
Salah satu kode HTML yang dibuat untuk membuat search engine lebih paham dengan konten halaman website kita. Mungkin masih banyak yang menganggap ini tidak lah terlalu berguna.
Mungkin iya, ketika kita berbicara soal Google ranking factor. Namun ini berhubungan langsung dengan search engine sekaligus user (pembaca).
Baca lebih lanjut untuk mengetahui definisi, fungsi, manfaat, dan cara membuatnya.
Apa itu Meta Tag?
<meta> Meta tag adalah suatu potongan informasi meta data tentang dokumen HTML. Pasti diletakkan dalam bagian <head> di sebuah halaman situs. Tidak terlihat langsung oleh user namun berfungsi untuk search engine memahami isi dari situs kita.
Memberitahukan ke search engine bagaimana halaman situs kita harus diindeks, dan seperti apa judul dan deskripsi akan ditampilkan di halaman hasil pencarian Google atau SERP.
Bisa dibilang cara kerjanya berada di belakang layar karena tidak dapat langsung dilihat dengan tampilan yang ada di device, kecuali kita View Page Source atau ctrl + U.
Manfaat Meta Tag
Meta tag memberi sinyal ke mesin pencari mengenai gambaran yang lebih jelas tentang isi konten halaman situs kita. Sehingga bot dari search engine tahu harus diperlakukan seperti apa suatu halaman situs itu.
Penggunaan tag ini tidak untuk memanipulasi ranking, namun sekedar untuk mempercepat proses penyampaian informasi tentang website kita ke search engine, singkatnya seperti itu.
Kemudian, dampak lainnya adalah di CTR atau peningkatan potensi klik. Loh kok bisa? Sebelumnya kita sudah membahas tentang Meta description dan Meta Title kan? Nah itu dia karena hal tersebut langsung tampil di SERP dan merupakan dari meta tag juga.
Untuk SEO sendiri meta tags juga bagus karena apa? sekali lagi, bisa memberitahu tahu search engine untuk index atau noindex suatu halaman, menampilkan judul, deskripsi, dll.
Jenis-Jenis Meta Tag
Ada beberapa meta tag yang penting dan perlu kalian ketahui, berikut jenis-jenis meta tag:
1. Meta Title (Title Tag)
Meta title digunakan sebagai judul utama website yang nantinya akan tampil di halaman hasil pencarian di mesin pencari. Kemudian juga sebagai penentu dari peningkatan klik.
Dalam membuat meta title ini harus dipikirkan dengan baik karena akan mempengaruhi user untuk mengklik atau tidak, karena relevansi judul dengan search intent juga harus selaras. Contoh meta title seperti ini:
<title>Ini adalah contoh Meta Tag Title dalam HTML</title>2. Meta Description
Meta description berguna untuk menampilkan deskripsi singkat di halaman hasil pencarian Google juga. tak kalah penting dengan meta title, meta ini juga dapat mempengaruhi tindakan orang untuk mengklik halaman situs kita ketika tampil di SERP.
Berikut contoh dalam bentuk HTML nya:
<meta name="description" content="Meta tag description dalam bentuk HTML ini untuk membuat deskripsi singkat tentang isi konten halaman website kita">3. Meta Robots
Meta robots ini adalah meta yang bisa memberi instruksi kepada robot search engine untuk memperbolehkan atau tidaknya halaman situs kita diindeks. 2 instruksi tersebut bisa ditulis dengan index dan noindex.
<!-- Jika halaman ingin diindex namun ini default -->
<meta name="robots" content="index">
<!-- Contoh jika halaman website kalian tidak ingin diindex Google -->
<meta name="robots" content="noindex">Kemudian, tag ini bisa untuk mengatur dofollow atau nofollow yang mana robot harus mengikuti atau tidak sebuah link di dalam halaman, entah itu internal link ataupun eksternal link.
<!-- Contoh untuk mengizinkan halaman diindeks (nilai default) -->
<a href="http://www.website.com" rel="dofollow">Contoh dofollow</a>
<!-- Contoh untuk mencegah halaman diindeks -->
<a href="http://www.website.com" rel="nofollow">Contoh nofollow</a>4. Meta Charset
Meta charset ini berfungsi untuk memastikan semua jenis teks, simbol dan tanda baca dapat tampil tanpa rusak di browoser. Paling umum digunakan adalah UTF-8.
<meta charset="utf-8"/>Format tersebut sudah mendukung banyak bahasa sehingga tidak membuat karakter menjadi rusak.
5. Meta Viewport
Meta tag ini memerankan peran penting dalam hal tampilan website kita di mobile. Area pandang dapat ditentukan oleh meta tag yang satu ini.
Soalnya, seperti memberitahukan ke browser bagaimana halaman kita harus menyesuaikan ukurannya. Agar fit dan proper sehingga user nyaman untuk membaca atau menjelajahi website kita. Kayak gambar di bawah ini perbedaan menggunakan dan tidaknya.
Bisa kita lihat perbedaan antara menggunakan atau tidak menggunakan meta viewport tag tersebut, bahwa tag tersebut memerintahkan browser untuk ukuran halaman harus menyesuaikan dengan mobile device.
6. Open Graph dan Twitter Card Meta Tags
Dua meta tag ini berfungsi untuk membuat tampilan tautan di platform sosial media, dengan tag ini kalian bisa menentukan judul, deskripsi dan gambar ketika link halaman situs dibagikan.
Sehingga hasilnya akan tampak lebih rapi dan profesional sehingga tidak terlihat seolah-olah tautan spam. Tautan link seperti ini lebih menarik dan lebih dipercaya orang karena tampilannya yang meyakinkan dan jelas.
Berikut adalah Open Graph yang umum digunakan:
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Judul Halaman Contoh di Share Linknya" />
<meta property="og:description" content="Deskripsi singkat halaman ini untuk preview saat dibagikan ke media sosial." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.contohwebsite.com/halaman-contoh" />
<meta property="og:image" content="https://www.contohwebsite.com/images/preview.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Nama Website Anda" />Dan berikut adalah Twitter Card meta tag yang umum digunakan:
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Judul Halaman Contoh" />
<meta name="twitter:description" content="Deskripsi singkat halaman ini untuk preview di Twitter." />
<meta name="twitter:image" content="https://www.contohwebsite.com/images/preview.jpg" />
<meta name="twitter:site" content="@usernameAnda" />Nah, sekarang sudah tahu kan bagagimana fungsi kedua tags di atas. Jangan lupa ya agar halaman website kamu lebih menarik ketika dishare, buatkan meta tag OG dan Twitter Card.
Cara Membuat Meta Tag di Website
Untuk membuat atau menambahkan meta tags dalam website ada 2 cara, secara manual atau otomatis. Berikut cara membuat meta tags pada website:
Menambahkan Meta Tag Secara Manual di HTML
Untuk menambahkan meta tags pada file HTML, bisa ditambahkan pada bagian <head> seperti pada gambar di atas. Biasanya untuk website tanpa CMS atau bahkan yang CMS pun mungkin kalian rasa kurang kemudian ingin menambahkan.
Membuat Meta Tag Menggunakan Plugin SEO di Wordpress
Menggunakan CMS yang satu ini dalam membuat meta tags gak perlu namanya koding-koding lagi. Karena dengan menggunakan plugin Yoast, Rank Math, dan lainnya kalian tinggal isi poinnya dan aktifkan fiturnya.
Untuk Yoast pada setiap halaman postingan atau halaman lainnya terdapat fitur kotak untuk mengisi meta tags tersebut, seperti meta title dan description.
Kemudian, untuk meta robots tag index dan noindex bisa scroll kebawah lagi. Berlaku untuk semua halaman termasuk halaman kategori dan tag pada Wordpress.
Nah, setelah mengetahui beberapa manfaat dan jenisnya itulah mengapa meta tag ini begitu penting terutama untuk SEO on-page.
Penutup
Jadi, fungsi meta tags di balik layar adalah untuk membuat search engine lebih paham dengan halaman wesbite kita. Sehingga, bisa mengatur robot mesin pencari harus memperlakukan halaman website kita seperti apa.
Yang terpenting, dalam pembuatan meta tags jangan asal pasang tempel, namun buat dengan ketentuan yang tepat. Agar lebih mudah untuk CMS manual kalian bisa gunakan meta tags generator.
Posting Komentar