HTML Meta Tag SEO: Kode Buat Merayu Mbah Google

kumiskiri August 13, 2023 August 13, 2023 11 min read

html meta tag seo kumiskiri

Jadi begini, HTML Meta Tag SEO itu kayak paspor buat halaman web ente di dunia maya. Kalo ente pake tag ini, ente bisa kasih tahu Mbah Google, tentang hebohnya isi konten di web.

Inget, kode tag ini tuh jangan diremehin loh, ya! Soalnya, HTML Meta Tag SEO tuh kayak detektif yang bantu buat nentuin seberapa penting web ente dimata Mbah Google. Biar nggak penasaran, yuk cekidot aja langsung!

Cara Mbah Google Index Web Pake HTML Meta Tag SEO?

Mbah Google ini punya semacam robot rahasia, namanya “spider” atau “crawler. Robot ini tuh suka jalan-jalan di web, baca-baca kode, sama ngecek isinya. Nah, pas bot ini ngecek, yang pertama kali diperhatiin tuh HTML Meta Tag SEO ini, deh.

Jadi, HTML meta Tag SEO ini tuh tugasnya bantuin bot-bot tadi buat tafsirin isi halaman sekaligus tentuin posisi web ente di hasil pencariannya. Jadi gimana, keren apa keren banget, hayoo ngaku?

Baca Juga: Pentingnya Meta Description SEO, Cara Optimasi dan Kesalahanya

HTML Meta Tag SEO yang Umum di Temui

Mending, langsung ente intip kode HTML Meta Tag SEO yang sering muncul dan digunain web buat merayu Mbah Google. Jadi, inilah daftar kode yang perlu ente-ente semua pahami:

Meta Title (Judul Halaman)

Ini kayak judul film di bioskop, cuma bedanya judul ini muncul di tab browser dan hasil pencarian Google. Pokoknya, kasih judul yang asyik dan nggak kepanjangan, maksimal 60 karakter aja.

Meta Description (Deskripsi Halaman)

Deskripsi ini kayak teaser film, pendek tapi bikin penasaran. Meskipun nggak langsung pengaruhi peringkat, tapi deskripsi yang bikin mata pengguna berbinar-binar bisa bikin klik-through-rate (CTR) naik!

Meta Robots (Robot Pencari)

Nah, ini kayak aturan main buat robot pencari. Ada “index” buat masukin ke katalog Google dan “noindex” buat nggak dimasukin. Jadi, ente yang punya web, ente yang punya kuasa!

Meta Charset (Set Karakter)

Ini macem perangko di surat. Charset ini nentuin karakter apa aja yang boleh muncul di web ente. Mau ada huruf, angka, simbol, semuanya bisa!

Meta Author (Penulis)

Sering disepelein, padahal penting banget. Apalagi kalo web ente punya banyak penulis keren. Ini bikin Google tahu siapa kontributor hebat di website ente!

Viewport Tag

Bukan cuma buat seneng-seneng di web, ini penting buat tampilan di perangkat mobile juga. Biar pas dijelajahin di ponsel atau tablet, tampilannya tetap oke tanpa nyobain nge-zoom terus.

Canonical Tag

Ini si penengah kalo ada bingung-bingungan soal konten duplikat. Bikin mbah Google tahu halaman utama mana yang harus jadi rujukan.

Baca Juga: 16 Cara Optimasi SEO On Page Website Otod idak

Kumpulan Kode HTML Meta Tag SEO

Selain yang tadi, masih ada beberapa teman HTML Meta Tag SEO yang seru juga. Ane kasih tau, baca terus makanya, biar ente makin jadi maestro kode-kode gitu!

Basic HTML Meta Tag

HTML meta tag SEO juga ada yang basic, kayak bocil FF yang suka ngebacot buat nutupi permainan kocaknya. Terus, lanjut aja langsung yuk buat ngecek kode HTML meta tag SEO yang sering di pake buat di terapin ke plugin-plugin SEO ternama.

<meta charset='UTF-8'>
<meta name="keywords" content="isi kata kunci"/>
<meta name="description" content="150-160 words"/>
<meta name="subject" content="Subject Web Ente">
<meta name="copyright"content="name Web">
<meta name="language" content="id">
<meta name="robots" content="index,follow" />
<meta name="revised" content="jumat, Agustus 13th, 2023, 12:00 pm" />
<meta name="abstract" content="">
<meta name="topic" content="">
<meta name="summary" content="">
<meta name="Classification" content="artikel">
<meta name="author" content="name, email(at)gmail(dot)com">
<meta name="designer" content="">
<meta name="copyright" content="">
<meta name="reply-to" content="email(at)gmail(dot)com">
<meta name="owner" content="">
<meta name="url" content="http://www(dot)nama web ente(dot)com">
<meta name="identifier-URL" content="http://www(dot)nama web ente(dot)com">
<meta name="directory" content="submit">
<meta name="category" content="">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global, atau kode tiap negara">
<meta name="rating" content="General">
<meta name="revisit-after" content="7 days">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

OpenGraph Meta Tags

Ini khusus buat sosial media, biar mereka ngerti halaman ente. Jadi, kalo ente share di Facebook atau Instagram, tampilannya bakal oke dan bikin orang-orang penasaran.

<meta name="og:title" content="Nama Web Ente"/>
<meta name="og:type" content="Niche Web Ente"/>
<meta name="og:url" content="https://www(dot)nama web ente(dot)com/blog/"/>
<meta name="og:image" content="https://(dot)nama web ente(dot)/gambar-jos.webp"/>
<meta name="og:site_name" content="Nama Web Ente"/>
<meta name="og:description" content="belok kanan jalan terus, zimbabwe"/>

<meta name="fb:page_id" content="id facebook" />

<meta name="og:email" content="ente(at)example(dot)com"/>
<meta name="og:phone_number" content="+123456"/>
<meta name="og:fax_number" content="+6212345"/>

<meta name="og:latitude" content="37.416343"/>
<meta name="og:longitude" content="-122.153013"/>
<meta name="og:street-address" content="jalan raya 1945"/>
<meta name="og:locale" content="simpang raya"/>
<meta name="og:region" content="id_ID"/>
<meta name="og:postal-code" content="1945"/>
<meta name="og:country-name" content="IDN"/>

<meta property="og:type" content="article(dot)achievement"/>
<meta property="og:points" content="point_Articele_achievement"/>

<meta property="og:video" content="https://example(dot)com/awesome(dot)swf" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="https://(dot)nama web ente(dot)/lagu-joss.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="https://(dot)nama web ente(dot)/fallback.vid" />
<meta property="og:video:type" content="text/html" />

<meta property="og:audio" content="https://example(dot)com/amazing.mp3" />
<meta property="og:audio:title" content="lagu joss" />
<meta property="og:audio:artist" content="Band joss" />
<meta property="og:audio:album" content="Album joss" />
<meta property="og:audio:type" content="application/mp3" />

Baca Juga: 7 Teknik SEO Off Page: Definisi, Manfaat serta Optimasinya

Custom Meta Tags

Ini kaya rubik koding. ente bisa atur-atur kode biar Google ngerti keinginan ente. Misalnya, ente mau konekin situs web ente ke Google Analytics, Disqus atau Google Search Concole.

<meta name="google-analytics" content="masukin kode"/>
<meta name="disqus" content="masukin kode"/>
<meta name="google-site-verification" content="kode"/>

Apple Meta Tags

<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="yes" name="apple-touch-fullscreen" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no">

Internet Explorer Meta Tags

<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" />
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" />
<meta name="mssmarttagspreventparsing" content="true">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="msapplication-starturl" content="https://www(dot)nama web ente(dot)com/blog/"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="red"/>
<meta name="application-name" content="Nama Web atau aplikasi ente"/>
<meta name="msapplication-tooltip" content="Web atau aplikasi ente"/>
<meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico" />
<meta name="msapplication-task" content="name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico" />
<meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico" />
<meta name="msapplication-task" content="name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico" />
<link rel="shortcut icon" href="/images/favicon.ico" />

Apple Tags

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name= "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">
<meta name= "viewport" content = "width = device-width">
<meta name = "viewport" content = "initial-scale = 1.0">
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-startup-image" href="/startup.png">

<link rel="apple-touch-icon" type="image/png" href="/gambar-icon-joss.webp" />

Tweet Meme Meta Tags

<meta name="tweetmeme-title" content="Retweet Button Explained" />

Blog Catalog Meta Tags

<meta name="blogCatalog" />

Rails Meta Tags

<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="/kode token"/>

HTML Link Tags

Ini kayak jembatan buat nyambungin link satu sama lain. Gampangnya, kayak menuju ke jalan-jalan berbeda di dunia maya.

<link rel="alternate" type="application/rss+xml" title="RSS" href="https://feeds(dot)feedburner(dot)com/koemis" />
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<link rel="fluid-icon" type="image/png" href="/fluid-icon.png" />
<link rel="me" type="text/html" href="https://google(dot)com/profiles/thenextweb"/>
<link rel='shortlink' href='https://www(dot)nama web ente(dot)com/?p=353' />
<link rel='archives' title='May 2003' href='https://www(dot)nama web ente(dot)com/2003/05/' />
<link rel='index' title='DeWitt Clinton' href='https://www(dot)nama web ente(dot)com/' />
<link rel='start' title='Pattern Recognition 1' href='https://www(dot)nama web ente(dot)com/about/' />
<link rel='prev' title='OpenSearch and OpenID? A sure way to get my attention.' href='https://www(dot)nama web ente(dot)com/blog/keyword-joss-gandos/' />
<link rel='next' title='Not blog' href='https://www(dot)nama web ente(dot)com/blog/meta/not-blog/' />
<link rel="search" href="/search.xml" type="application/opensearchdescription+xml" title="Viatropos" />

<link rel="self" type="application/atom+xml" href="https://www(dot)nama web ente(dot)com/atomFeed.php?page=3"/>
<link rel="first" href="https://www(dot)nama web ente(dot)com/blog/atomFeed.php"/>
<link rel="next" href="https://www(dot)nama web ente(dot)com/blog/atomFeed.php?page=4"/>
<link rel="previous" href="https://www(dot)nama web ente(dot)com/blog/atomFeed.php?page=2"/>
<link rel="last" href="https://www(dot)nama web ente(dot)com/blog/atomFeed.php?page=147"/>

<link rel='shortlink' href='https://www(dot)nama web ente(dot)com/?p=43625' />
<link rel="canonical" href="https://www(dot)nama web ente(dot)com/2010/06/kata-kunci-joss-gandos.html" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www(dot)nama web ente(dot)com/xmlrpc.php?rsd" />
<link rel="pingback" href="https://www(dot)nama web ente(dot)com/xmlrpc.php" />
<link media="only screen and (max-device-width: 480px)" href="http://wordpress(dot)org/style/iphone.css" type="text/css" rel="stylesheet" />

Catatan: Inget ya ini cuma contoh aja, tujuanya biar ente makin paham sama logikanya robot mbah google pas mau index dan ngecrawler web ente, jangan langsung diterapin ke web, soalnya beda web beda cara penerapanya juga.

Contoh Penerapan HTML Meta Tag SEO di Plugin

Nah, kali ini ane bakal coba liatin contoh nyata penggunaan HTML Meta Tag SEO di web besar berbasis WordPress. Biar ente makin paham gimana prakteknya di lapangan. Siap? Cus ke contoh kasus langsung!

Rankmath

Penerapan HTML Meta Tag SEO yang paling umum digunain di plugin Rankmath. Nah, biar ente makin jelas liat contoh gambar dibawah.

Yoast

Contoh penerapan HTML Meta Tag SEO yang digunain di plugin Yoast beda dari Rankmath. Soalnya, beda plugin, beda juga cara penerapanya. Gini contoh gambarnya biar ente makin jelas.

Aioseo

Kalo di plugin Aioseo cara penerapan HTML Meta Tag SEO beda lagi nih. Nah, biar ente makin paham bedannya antar plugin, liat gambar.

Nggak Pake Plugin

Ada juga yang nggak pake plugin, kalo ente web develeper beneran butuh juga pake HTML Meta Tag SEO biar makin oke dan makan di cintai mbah google web yang lagi ente kembangin. gini contohnya.

Baca Juga: 50+ Tips SEO Mendominasi Persaingan Halaman Pertama

Kesimpulan

Intinya HTML Meta Tag SEO itu gampang banget dipake. Jangan ragu buat kreasikan halaman webmu pake kode tag yang udah dibahas. Mumpung sekarang udah tahu, yuk langsung dicoba.

Semoga pembahasan ane soal HTML Meta Tags SEO ini bisa kasih manfaat buat ente-ente semua yang lagi ngejar buat jadi juara di mata Mbah Google. Selamat mencoba dan Thingkiu

Sumber:

Complete List of HTML Meta Tags

SEO