Schema Markup Minimal untuk SEO Blog: Webpage, Blogposting, Breadcrumb List
March 15, 2020
Schema Markup Minimal untuk SEO Blog: Webpage, Blogposting, Breadcrumb List.
Schema adalah seperangkat 'tipe' (type) masing-masing terkait dengan serangkaian properti. Skema merupakan kode yang memudahkan mesin pencari mengidentifikasi konten sebuah website atau blog.
Bagi blog di Blogger, schema markup minimal dan terpenting untuk SEO adalah Schema Webpage (halaman web), Schema Blogposting (atau Schema NewsArticle untuk blog berita), dan Breadcrumb.
Schema Webpage adalah skema untuk menunjukkan bahwa blog kita adalah sebuah halaman website, bukan aplikasi (app).
Setiap halaman web secara implisit diasumsikan dideklarasikan sebagai tipe WebPage, sehingga berbagai properti tentang halaman web tersebut, seperti breadcrumb, dapat digunakan.
Schema BlogPosting adalah skema untuk menunjukkan bahwa konten blog berupa artikel yang biasanya dilengkapi gambar atau format posting lain.
Menambahkan markup skema blogposting ke posting blog Anda membantu mesin pencari dengan cepat mengetahui tentang apa postingan itu dan meningkatkan peluang mendapatkan peringkat lebih tinggi di SERP.
Schema BreadcrumbsList adalah ItemList yang terdiri dari rangkaian halaman Web tertaut, biasanya digambarkan menggunakan setidaknya URL dan nama mereka, dan biasanya diakhiri dengan halaman saat ini.
Menurut Google, breadcrumbs menunjukkan posisi halaman dalam hierarki situs. Seorang pengguna dapat menavigasi sepenuhnya dalam hierarki situs, satu tingkat pada satu waktu, dengan memulai dari breadcrumbs terakhir dalam breadcrumb.
Kode Webapage Alternatif:
Tambahan: Schema Website
Ada juga Schema Website untuk memunculkan kotak pencarian di Google. Simpan di bawah kode <head>
Jika kodenya berbeda, maka samakan dengan kode tersebut dengan menghapus kode setelahnya
Catatan:
- Error Blogposting pada template Simple Blogger bisa diatasi dengan memasang kode di atas, setelah kode yang ada dihapus dulu.
- Untuk blog berita, silakan Pasang Schema ArticleNews.
Simpan di atas ]]></b:skin>
HTML
Simpan di bawah kode <b:includable id='main' var='top'>
JS:
Simpan di atas kode <b:includable id='comment-form' var='post'>
Demikian Schema Markup Minimal untuk SEO Blog: Webpage, Blogposting, Breadcrumb List, dan cara memasangnya.
Happy Blogging! (www.contohblog.com).*
Schema adalah seperangkat 'tipe' (type) masing-masing terkait dengan serangkaian properti. Skema merupakan kode yang memudahkan mesin pencari mengidentifikasi konten sebuah website atau blog.
Bagi blog di Blogger, schema markup minimal dan terpenting untuk SEO adalah Schema Webpage (halaman web), Schema Blogposting (atau Schema NewsArticle untuk blog berita), dan Breadcrumb.
Schema Webpage adalah skema untuk menunjukkan bahwa blog kita adalah sebuah halaman website, bukan aplikasi (app).
Setiap halaman web secara implisit diasumsikan dideklarasikan sebagai tipe WebPage, sehingga berbagai properti tentang halaman web tersebut, seperti breadcrumb, dapat digunakan.
Schema BlogPosting adalah skema untuk menunjukkan bahwa konten blog berupa artikel yang biasanya dilengkapi gambar atau format posting lain.
Menambahkan markup skema blogposting ke posting blog Anda membantu mesin pencari dengan cepat mengetahui tentang apa postingan itu dan meningkatkan peluang mendapatkan peringkat lebih tinggi di SERP.
Schema BreadcrumbsList adalah ItemList yang terdiri dari rangkaian halaman Web tertaut, biasanya digambarkan menggunakan setidaknya URL dan nama mereka, dan biasanya diakhiri dengan halaman saat ini.
Menurut Google, breadcrumbs menunjukkan posisi halaman dalam hierarki situs. Seorang pengguna dapat menavigasi sepenuhnya dalam hierarki situs, satu tingkat pada satu waktu, dengan memulai dari breadcrumbs terakhir dalam breadcrumb.
Cara Memasang Schema Markup Minimal di Blog
Tips pemasangana skema markup berikut ini untuk blog yang masih belum dipasangi skema, atau untuk template bawaan Blogger.
Untuk template bawaan Blogger, hapus dulu sekema yang ada, khususnya Schema BlogPosting, hingga hanya menyisakan kode <div class='post'> saja.
1. Schema Webpage
Simpan di bawah kode <body><b:if cond='data:blog.pageType == "index"'>
<div itemscope='itemscope' itemtype='http://schema.org/Webpage' style='display: none;'>
<meta expr:content='data:blog.title' itemprop='name'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
</div>
</b:if>
Kode Webapage Alternatif:
<b:if cond='data:view.isMultipleItems or data:view.isPage'>
<script type='application/ld+json'>{
"@context": "http://schema.org",
"@type": "WebPage",
"name" : "<data:blog.pageTitle/>",
"url" : "<data:blog.url/>"
}</script>
</b:if>
Tambahan: Schema Website
Ada juga Schema Website untuk memunculkan kotak pencarian di Google. Simpan di bawah kode <head>
<script type='application/ld+json'>{ "@context": "http://schema.org", "@type": "WebSite", "url": "<data:blog.homepageUrl/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl/>?q={search_term}", "query-input": "required name=search_term" } }</script>
2. Schema BlogPosting
Simpan di bawah kode <div class='post'> atau <article class='post'>Jika kodenya berbeda, maka samakan dengan kode tersebut dengan menghapus kode setelahnya
<script type='application/ld+json'>{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<data:post.canonicalUrl/>"
},
"headline": "<data:post.title/>",
<b:if cond='data:blog.metaDescription'>"description": "<data:blog.metaDescription.escaped/>",<b:else/>"description": "Silahkan kunjungi postingan <data:view.title.escaped/> untuk membaca artikel selengkapnya dengan klik link di atas.",</b:if>
"datePublished": "<data:post.timestampISO8601/>",
"dateModified": "<data:post.lastUpdatedISO8601/>",
"image": {
"@type": "ImageObject",<b:if cond='data:post.firstImageUrl'>"url": "<b:eval expr='resizeImage(data:post.firstImageUrl,1280,"1280:720")'/>",<b:else/>"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWeJOeKLyBjgw6uG_DcAZz-AF1vWnD3ldjXnY6Hh96ghuSwJVtU8gVQ_ELCEsqq-pxnk_3PtdS_PHf3_tEsooQP9uuiWz1NlE3VlJWF1Oz3IgQYY7CStrxndmZAJJo_uF7ZQPTWC5_yWU/s1280/no-thumbnail.jpg",</b:if>
"height": 720,
"width": 1280
},
"publisher": {
"@type": "Organization",
"name": "<data:blog.title/>",
"logo": {
"@type": "ImageObject",
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8L5m3MFL5e1fiJC0Y5nyb-EyTmUzIxlfZJFp30-gtEoODWU_B1fLLrC1TQgkT6L-y0WfcX5r4Qyf1LWxsTAUON9STHVxfQbxk1SWYBwSFNXKUM1jn6yrJyhcZ6aeUdWNiKHlJnME_vf1y/s1600/batic+on+wp.png",
"width": 600,
"height": 60
}
},
"author": {
"@type": "Person",
"name": "<data:post.author/>"
}
}</script>
Catatan:
- Error Blogposting pada template Simple Blogger bisa diatasi dengan memasang kode di atas, setelah kode yang ada dihapus dulu.
- Untuk blog berita, silakan Pasang Schema ArticleNews.
3. Schema Breadcrumb List
CSSSimpan di atas ]]></b:skin>
.breadcrumbs {line-height: 1.2em;width: auto;overflow: hidden;padding: 0 0 10px;margin: 0 auto 5px;font-size: 90%;color: #888;font-weight: 400;text-overflow: ellipsis;-webkit-text-overflow: ellipsis;white-space: nowrap;border-bottom: 1px solid #eee;}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#777;font-weight:400}
.breadcrumbs a:hover{color:blue}
.breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -3px}
.breadcrumbs svg path{fill:#c8c8c8}
HTML
Simpan di bawah kode <b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
JS:
Simpan di atas kode <b:includable id='comment-form' var='post'>
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isSingleItem'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + "?&max-results=10"' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
</b:loop>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>
Demikian Schema Markup Minimal untuk SEO Blog: Webpage, Blogposting, Breadcrumb List, dan cara memasangnya.
Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
No comments on Schema Markup Minimal untuk SEO Blog: Webpage, Blogposting, Breadcrumb List
Post a Comment