3. Template Default Markup Meta tag Head Blogger

Template Default Markup Meta tag Head Blogger

oleh Handy Eko Cahyono •   •   Update terakhir : Selasa, Juli 12, 2022.
0

Default Markup Meta tag Head

Post terkait : Menambahkan meta:og di Blogger

Default Markup - XML language Blogger

Intro

Fungsi Default markup ini adalah sebagai elemen dasar yang mengatur terbentuknya widget di halaman Blogspot. Meskipun menggunakan bahasa pemrograman XML tetapi tetap mengacu berdasarkan elemen HTML.

Entah apakah bahasa itu sudah benar atau belum ? Yang penting cukup untuk intro dan sedikit mengisi teks di paruh atas halaman supaya tag image pertama postingan ini tidak langsung muncul di awal terbukanya halaman. 😁

Default Markup Template Meta

Seperti biasa, kalau dilihat didalam rancangan template Blogger hampir sekitar 2 - 4% saja tag HTML yang murni selain dari itu berupa tag kode XML seperti screenshot diatas dan hanya akan terlihat menjadi HTML dan beberapa Script jika dilihat dengan mode inspeksi elemen / source code setelah membuka satu halaman blog.
Default Markup - XML language Blogger

Itulah sebabnya terkadang sulit sekali pada saat ingin menyematkan beberapa elemen HTML kedalam template agar terlihat di halaman.

Untuk mengatasi hal itu, kali ini akan sedikit berbagi cara membuat default markup yang ringan. Sebagai permulaan disini akan menjelaskan default markup untuk menyematkan meta tag head.

Agar pada bagian head dalam template lebih terlihat rapi dan tidak acak-acakan karena banyaknya tag meta, link ataupun script external yang terpasang. Lihat gambar berikut, nantinya semua tag head hanya terlihat dalam 1 tag name='all-head-content'

ss head content.webp

Kode Default Markup Blogger

Tag Default Markup

<b:defaultmarkups>
   <b:defaultmarkup type='Common'>
<!---- semua tag default markup harus dibuka dan ditutup oleh kedua tag ini ---->

   </b:defaultmarkup>
</b:defaultmarkup>

Metadata Open Graph

Tag Head :
  • Atau biasa diinput sebagai meta og adalah meta data yang berfungsi untuk mendefinisikan elemen-elemen khusus dalam halaman yang akan dikirimkan pada saat halaman dibagikan ke media sosial.
  • Untuk menempatkannya, letakkan didalam dua tag default markup yang sudah dijelaskan diatas. Hapus teks warna hijau yang ada lalu ganti dengan semua kode yang ada sampai bagian akhir postingan ini.
  • Pembagian kode hanya untuk memberikan penjelasan agar bisa dimengerti elemen apa saja yang akan dimasukkan dalam tag head.
Tag meta dibawah ini bisa langsung di copy paste di bagian <head> tanpa harus menggunakan tag <b:defaultmarkup> dan <b:includable id=''>.

<b:includable id='MetaDataOG'>
<!-- Metadata protokol Open Graph. Lihat di http://ogp.me/. -->
<b:if cond='data:view.isHomepage'>
<meta content='website' property='og:type'/>
</b:if>
<b:if cond='data:view.isSingleItem'>
<meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:view.isMultipleItems and not data:view.isHomepage'>
<meta content='object' property='og:type'/>
</b:if>
<meta expr:content='data:view.title.escaped' property='og:title'/>
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<meta expr:content='data:blog.title.escaped' property='og:site_name'/>
<b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' expr:content='data:widgets.Blog.first.posts[0].featuredImage resizeImage 1600' name='meta' property='og:image'/>
<b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' expr:content='data:widgets.Blog.first.posts[0].featuredImage resizeImage 1600' name='meta' property='twitter:image'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredImage resizeImage 1600' property='og:image'/>
<meta expr:content='data:view.featuredImage resizeImage 1600' name='twitter:image'/>
</b:if>

Meta Twitter card

Tag Head :
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:view.title.escaped' name='twitter:title'/>
<meta expr:content='data:blog.url.canonical' name='twitter:domain'/>
<meta expr:content='data:view.description.escaped' name='twitter:description'/>

Tag Head :
<b:if cond='data:view.isHomepage'>

<b:includable id='theme-head'>
<link href='//fonts.gstatic.com' rel='dns-prefetch'/>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//dnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//www.googletagmanager.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//c.disquscdn.com' rel='dns-prefetch'/>
<link href='//disqus.com' rel='dns-prefetch'/>

Meta viewport

Tag Head :
<meta expr:content='&quot;text/html; charset=&quot; + data:blog.encoding' http-equiv='Content-Type'/>

Meta Blogger Generator

Tag Head : Blogger Generator

Bagi yang ingin menghapus meta default atau bawaan Blogger yang ini

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

Bisa menggunakan meta dibawah ini sebagai penggantinya.

<meta content='blogger' name='generator'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<b:if cond='data:blog.adultContent'>
<meta content='adult' name='rating'/>
</b:if>
<link expr:href='data:view.url.canonical' rel='canonical'/>
<data:blog.feedLinks/><data:blog.meTag/>
<meta expr:content='data:view.description.escaped' name='description'/>
<b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' expr:href='data:widgets.Blog.first.posts[0].featuredImage resizeImage 1600' name='link' rel='image_src'/>
<b:tag cond='data:view.isSingleItem and data:view.featuredImage' expr:href='data:view.featuredImage resizeImage 1600' name='link' rel='image_src'/>
<b:include name='customOpenGraphMetaData'/>

Link Font Awesome

Tag Head :
     <!-- Font Awesome Free 5.11.2 -->
<b:tag href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' name='link' rel='stylesheet'/>

Post terkait : Memasang Bredcrumbs di Blogspot


Link Google Font

Tag Head :
     <b:tag cond='data:blog.languageDirection == &quot;rtl&quot;' href='https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&amp;display=swap' name='link' rel='stylesheet'/>
</b:includable>

Tag Head :
<script type='application/ld+json'>{
&quot;@context&quot;:&quot;http://schema.org&quot;,
&quot;@type&quot;:&quot;WebSite&quot;,
&quot;name&quot;:&quot;<data:view.title.escaped/>&quot;,
&quot;url&quot;:&quot;<data:view.url.canonical/>&quot;,
&quot;potentialAction&quot;:{
&quot;@type&quot;:&quot;SearchAction&quot;,
&quot;target&quot;:&quot;<data:view.url.canonical/>search?q={search_term_string}&quot;,
&quot;query-input&quot;:&quot;required name=search_term_string&quot;}}
</script>
</b:if>
</b:includable>

Tags:
Posting Komentar (0)
Lebih baru Lebih lama