BEGINI MEMBUAT KODE META TAG YANG SEO RESPONSIVE UNTUK BLOG

D

alam membuat sebuah blog, pastinya harus memperhatikan meta tag dari blog itu sendiri karena dinilai sangat penting untuk menaikkan traffic dalam peng-indeks an dalam mesin pencarian Google.

Hal ini yang saya maksud adalah bagimana artikel atau blog kita itu lebih responsif bila dikunjungi atau dicari dalam mesin pencarian.
Elemen HTML <meta> mewakili metadata yang tidak dapat diwakili oleh elemen terkait meta elemen HTML lainnya, seperti <script>,<base>, <link>, <style> atau <title>.Eelemen meta adalah bagian yang sangat terstruktur tentang halaman web dimana fungsinya membuat web atau halaman blog kita menjadi lebih mudah diindeks oleh mesin pencari. Juga digunakan untuk menentukan deskripsi halaman, kata kunci, dan metadata lainnya yang tidak disediakan melalui elemen dan atribut "head" lainnya. Untuk itu sangat dianjurkan untuk membuat meta tag se responsive mungkin agar blog mudah disusupi oleh sistem perayapan Google.

DAFTAR ISI

1. Pendahuluan
2. Cara Membuat SEO Artikel
3. Kesimpulan

Pendahuluan

Dalam pembahasan kalin ini saya sampaikan juga pembuatan kode meta tag yang SEO responsive menjadikan tampilan blog kita menjadin lebih rapi ketika membagi suatu artikel kita ke berbagai platform seperti Facebook dan Twitter. Yakni dengan isitilah Card Redirect Interaction. Dimana akan tampilan deskripsi Blog kita yang merujuk pada keterangan artikel kita itu sendiri.

Berikut contoh Card Redirect Interaction yang saya bagikan ke Twitter.

Cara Pemasangan Kode SEO Meta Tag Kedalam Blog

Dalam Pemasangan kode ini ada baiknya jika anda cadangkan terlebih dahulu template blog anda untuk menghindari mulfunction pada blog.

Berikut cara Pemasangannya kedalam Blog:

 Log in ke Akun Blog anda

 Pilih Tema, Sesuaikan dan Edit

 Hapus semua kode meta tag yang ada di blog anda.Ingat cuma kode meta tag nya aja. kemudian copy-paste script dibawah ini tepat diatas kode </head> di template blog anda.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

<!-- Favicon Browser Optimize Start -->

<link href='URL gambar logo icon blog anda' rel='icon' type='image/x-icon'/>

<link href='URL gambar logo icon blog anda' rel='shortcut icon' type='image/x-icon'/>

<link href='URL gambar logo icon blog anda' rel='icon' sizes='16x16' type='image/png'/>

<link href='URL gambar logo icon blog anda' rel='icon' sizes='32x32' type='image/png'/>

<link href='URL gambar logo icon blog anda' rel='icon' sizes='96x96' type='image/png'/>

<link href='URL gambar logo icon blog anda' rel='icon' sizes='192x192'/>

<link href='URL gambar logo icon blog anda' rel='apple-touch-icon'/>

<link href='URL gambar logo icon blog anda' rel='apple-touch-icon' sizes='57x57'/>

<link href='URL gambar logo icon blog anda' rel='apple-touch-icon' sizes='152x152'/>

<link href='URL gambar logo icon blog anda' rel='apple-touch-icon' sizes='167x167'/>

<link href='URL gambar logo icon blog anda' rel='apple-touch-icon' sizes='180x180'/>

<!-- End Favicon Browser Optimize -->

<!-- Headers Theme Color Start -->

<!-- Chrome, Firefox OS and Opera -->

<meta content='#0083da' name='theme-color'/>

<!-- Windows Phone -->

<meta content='#0083da' name='msapplication-navbutton-color'/>

<!-- iOS Safari -->

<meta content='#0083da' name='apple-mobile-web-app-status-bar-style'/>

<!-- End Headers Theme Color-->

<!-- SEO Meta Tag Title Start-->

<b:include data='blog' name='all-head-content'/>

<title>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<data:blog.pageTitle/>

<b:else/>

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

<data:blog.pageName/> - <data:blog.title/>

<b:else/>

ERROR 404 - <data:blog.title/>

</b:if>

</b:if>

</title>

<!-- End SEO Meta Tag Title -->

<!-- SEO Meta Tag Start-->

<meta content='blogger' name='generator'/>

<link expr:href='data:blog.url' rel='canonical'/>

<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>

<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>

<link expr:href='&quot;https://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>

<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>

<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<meta expr:content='data:blog.pageTitle' name='keywords'/>

<b:if cond='data:blog.metaDescription'>

<meta expr:content='data:blog.metaDescription' name='description'/>

</b:if>

</b:if> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<meta expr:content='data:blog.pageName' name='keywords'/>

<b:if cond='data:blog.metaDescription'>

<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>

</b:if>

</b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<b:if cond='data:blog.searchLabel'>

<meta content='noindex,nofollow' name='robots'/>

</b:if>

</b:if>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<meta content='noindex,nofollow' name='robots'/>

</b:if>

<b:if cond='data:blog.isMobile'>

<meta content='noindex,nofollow' name='robots'/>

</b:if>

<meta content='global' name='distribution'/>

<meta content='follow, all' name='msnbot'/>

<meta content='follow, all' name='alexabot'/>

<meta content='follow, all' name='slurp'/>

<meta content='follow, all' name='zyborg'/>

<meta content='follow, all' name='scooter'/>

<meta content='all' name='spiders'/>

<meta content='all' name='webcrawlers'/>

<meta content='Nama Akun Blog Anda' name='Author'/>

<meta content='Public' name='rating'/>

<meta content='ID' name='geo.country'/>

<meta content='Indonesia' name='geo.placename'/>

<meta content='general' name='rating'/>

<meta content='English' name='language'/>

<!-- SEO Meta Tag End -->

<!-- Social Media meta tag need customer customization -->

<meta content='Kode App Facebook Number' property='fb:app_id'/>

<meta content='Kode Admin Number' property='fb:admins'/>

<meta content='Nama Akun Twitter' name='twitter:site'/>

<meta content='Nama Akun Twitter' name='twitter:creator'/>

<!-- Social Media meta tag need customer customization -->

<!-- Facebook Open Graph Start-->

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<b:if cond='data:blog.url'>

<meta expr:content='data:blog.url' property='og:url'/>

</b:if>

<meta expr:content='data:blog.title' property='og:site_name'/>

<b:if cond='data:blog.pageName'>

<meta expr:content='data:blog.pageName' property='og:title'/>

</b:if></b:if></b:if></b:if>

<meta expr:content='data:blog.pageName' property='og:title'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<meta content='article' property='og:type'/>

<b:else/>

<meta content='website' property='og:type'/>

</b:if>

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

<b:if cond='data:blog.metaDescription'>

<meta expr:content='data:blog.metaDescription' name='og:description'/>

<b:else/>

<meta expr:content='&quot;Silahkan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' name='og:description'/>

</b:if>

<b:if cond='data:blog.postImageUrl'>

<meta expr:content='data:blog.postImageUrl' property='og:image'/>

<b:else/>

<b:if cond='data:blog.postImageThumbnailUrl'>

<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>

<b:else/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>

<b:else/>

<meta content='URL gambar logo blog anda size 192px' property='og:image'/>

</b:if></b:if></b:if>

<meta expr:content='data:blog.title' property='og:site_name'/>

<meta content='URL Akun Facebook Anda' property='article:author'/>

<meta content='URL Akun Facebook Anda' property='article:publisher'/>

<meta content='en_US' property='og:locale'/>

<meta content='en_GB' property='og:locale:alternate'/>

<meta content='hi_IN' property='og:locale:alternate'/>

<!-- Facebook Open Graph End-->

<!-- Pinteres Rich Pins Start-->

<meta expr:content='data:post.timestampISO8601' property='article:published_time'/>

<meta expr:content='data:blog.pageName' property='article:author'/>

<!-- Pinteres Rich Pins End-->

<!-- Twitter Snipet Card Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<meta content='summary_large_image' name='twitter:card'/>

<meta expr:content='data:blog.pageTitle' name='twitter:title'/>

<meta content='435' name='twitter:image:width'/>

<meta content='375' name='twitter:image:height'/>

<b:else/>

<meta content='summary' name='twitter:card'/>

<meta expr:content='data:blog.title' name='twitter:title'/>

</b:if>

<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>

<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>

<b:if cond='data:blog.metaDescription'>

<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

<b:else/>

<meta expr:content='&quot;Silahkan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' name='twitter:description'/>

</b:if>

<b:if cond='data:blog.postImageUrl'>

<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>

<b:else/>

<b:if cond='data:blog.postImageThumbnailUrl'>

<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>

<b:else/>

<meta content='URL gambar logo blog anda size 192px' name='twitter:image:src'/>

</b:if>

</b:if>

<!-- Twitter Snipet Card End-->

<!-- SEO IE Browser Start-->

<!--[if lt IE 9]> <script src="https://raw.githubusercontent.com/aFarkas/html5shiv/master/dist/html5shiv.min.js" type="text/javascript"></script> <![endif]-->

<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

<!--[if lt IE 9]>

<script src="https://raw.githubusercontent.com/heathcliff/css3-mediaqueries-js/master/css3-mediaqueries.js" type="text/javascript"></script>

<![endif]-->

<!-- SEO IE Browser End-->

KETERANGAN:
 Harap ganti URL, theme-color, dan size,nama blog anda yang berwarna biru sesuai dengan keinginan anda.Ingat Size(ukuran gambar) harus sesuai.Apabila sudah disesuaikan, maka simpan dan lihat hasil Card Redirect Interaction dengan mengklik link dibawah ini.

Facebook Verification Card

Twitter Verification Card

Akhir Kata

Sekian pembahasan tentang Begini Cara Membuat Kode Meta Tag yang SEO Responsive. Semoga bermanfaat. Selamat berjumpa kembali di artikel berikutnya. Terimakasih telah berkunjung.

Keyword

META,TAG,SEO,BLOG,Responsive,HTML,JS,CSS,JavaScript,Blogspost, Blogger, Mesin Pencari