Cara Memasang Schema Org Markup di Blogger
Ada 2 Cara Memasang Schema Org Markup di Blogger dengan 11 Langkah Mudah
Di bawah ini kamu akan diberikan tutorial bagaimana cara membuat dan menambahkan kode Schema Org Markup di template blogger dalam beberapa langkah mudah nan praktis.
Tutorial pemasangan Schema Org Markup di Blogger Theme ini sedikit rumit,
dan menyita waktu. Alih-alih ingin menambahkan kode Schema Org Markup, malah
template blog menjadi rusak. Maka dari itu, Back-Up template blogger di Notepad
:)
Ganti kode <nav> dengan kode di bawah ini:
<nav id='topnav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'
role='navigation'>
Ganti kode <body> dengan kode di bawah ini:
<body class='index' itemscope=''
itemtype='http://schema.org/WebPage'>
Ganti kode <header> atau <header-wrapper> dengan kode di bawah ini:
<div id='header-wrapper'
itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
Ganti kode <content-wrapper> atau <main-wrapper> dengan kode di bawah ini:
<div id='content-wrapper'
itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
...atau...
<div id='main-wrapper'
itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
Catatan: Cek kembali template blogger kamu apakah menggunakan atribut "Main" atau "Content". Silakan disesuaikan sendiri.
Ganti kode di bawah ini:
<div class='post hentry
uncustomized-post-template' >
...dengan kode di bawah ini:
<div class='post hentry
uncustomized-post-template' itemscope='itemscope'
itemtype='http://schema.org/BlogPosting'>
Ganti kode di bawah ini:
<article class='post hentry'
expr:id='data:post.id'>
...dengan kode di bawah ini:
<article class='post hentry'
expr:id='data:post.id' itemscope=''
itemtype='http://schema.org/BlogPosting'>
Catatan: Jika tidak ada atribut HTML seperti <article, dipastikan atribut HTML yang digunakan adalah atribut HTML dengan kode <post atau berbeda dari pada itu.
Cari dan ganti kode di bawah ini:
<div class='author-profile'
itemprop='author' >
...dengan kode di bawah ini:
<span class='fn author'
itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
Cari kode ini <div id='sidebar-wrapper'> lalu ganti dengan kode di bawah ini:
<div id='sidebar-wrapper'
itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
Ganti kode <footer id='footer-wrapper'> dengan kode di bawah ini:
<footer id='footer-wrapper'
itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
Ganti kode <div id='footer-credit'> dengan kode di bawah ini:
<footer id='footer-credit'
itemscope='itemscope' itemtype='http://data-vocabulary.org/copyrightHolder'>
Khusus untuk kode <footer
id='footer-wrapper'> dan <div
id='footer-credit'> yang ada di atas, hati-hati
ketika ingin mengimplementasikan Schema Org Markup di template blogger.
Mengapa? Sebab kedua atribut HTML itu hampir persis sama, dan kebanyakan
template blogger jaman sekarang memiliki atribut HTML yang berbeda-beda antara
satu dengan lainnya. Jadi, perhatikan baik-baik.
Artikel ini pada dasarnya terdiri dari 2 tutorial yang berbeda tapi masih dalam satu tujuan, yakni memasang Schema Org Markup di Blogger/Blogspot.
Tutorial No. 2 ini sama saja seperti tutorial No. 1 di atas. Sayangnya,
kami tidak merekomendasikannya sama sekali. Baiknya gunakan tutorial No. 1 di
atas karena lebih lengkap dan meyakinkan :)
Untuk kamu yang kesulitan dan tidak ingin repot, silakan Copas kode di bawah ini, di bawah kode <body> atau <body :
<div itemscope='itemscope'
itemtype='http://schema.org/Blog' style='display: none;'>
<b:if cond='data:blog.pageType != "index"'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.canonicalUrl' itemprop='url'/>
<b:else/>
<meta expr:content='data:blog.title' itemprop='name'/>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
</b:if> <meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta content='//blog-logo-url-square-size-is-good' itemprop='image'/>
</b:if>
</div>
<b:if cond='data:blog.pageType != "index"'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.canonicalUrl' itemprop='url'/>
<b:else/>
<meta expr:content='data:blog.title' itemprop='name'/>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
</b:if> <meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta content='//blog-logo-url-square-size-is-good' itemprop='image'/>
</b:if>
</div>
Note: Ganti kode blog-logo-url-square-size-is-good (warna biru) dengan URL logo blog. Jika tidak ada, bisa dengan cara menggunakan kode favicon seperti URL https://example.blogspot.com/favicon.ico/ atau https://www.example.com/favicon.ico/.
Jika boleh menyarankan, alangkah baiknya apabila kamu menggunakan URL logo
blog milik kamu sendiri. Jangan pernah menggunakan URL logo blog milik situs
web lainnya.
Itulah tutorial tips dan trik bagaimana cara membuat dan memasang Schema OrgMarkup di Blogger dengan 11 langkah mudah.
Post a Comment