Kemarin-kemarin kan waktu aku tes memakai alat penguji kaya search console, selalu kudapati peringatan berwarna oren: "Item tanpa nama".
Saat kucek, ternyata ada kolom "Headline" dan kolom "gambar" yang tidak terpasang di template blogku. Coba lihat gambarnya berikut ini.
Tentu saja aku bingung cara memvalidasinya.
Tapi aku tak menyerah dan terus googling sendiri.
Nah, akhirnya aku berhasil menemukan cara memperbaiki hal tersebut dengan menyematkan kode LD+JSon Schema.org.
Proses penyematan kode ini sendiri tidaklah sulit.
Hanya ada dua langkah. Prosesnya bisa diikuti langsung dari langkah-langkah berikut ini.
Aku mencupliknya dari blog Romeltea.
Cara Memasang Schema Markup Webpage
Schema webpage untuk menunjukkan bahwa blog kita adalah halaman website, bukan aplikasi (apps). Berikut ini cara memasangnya.
1. Klik Tema > Edit HTML
2. Copas kode shema Webpage berikut ini di bawah kode <body>
<script type='application/ld+json'>{
"@context": "http://schema.org",
"@type": "WebPage",
"name" : "<data:blog.pageTitle/>",
"url" : "<data:blog.url/>"
}</script>
Untuk template bawaan Blogger, sudah ada kode berikut ini di bawah kode <body …>
<b:if cond='data:blog.pageType == "index"'>
<div itemscope='itemscope' itemtype='http://schema.org/Blog' 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>
Ganti Bog menjadi Webpage dan hapus kode style display none, sehingga menjadi begini:
<div itemscope='itemscope' itemtype='http://schema.org/Webpage'>
Cara Memasang Schema Markup BlogPosting
1. Klik Tema > Edit HTML
2. Copas kode shema Blogposting berikut ini di bawah kode <div class=’post’>
Di template bawaan Blogger, sudah ada schema Blogposting. Hapus semua kode tersebut hingga menyisakan kode <div class=’post’>
<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/AVvXsEgZOTxlxFhytLOAPTkEbOm-pZwbiSRFP1BZ8ODrUs455dWbC6kzo_6gbQ4djUOJQ_ykvHFIIdN9DJIigt6Bov60xasri0mB3e74qa8NbnFoi6sr9junXO4ilxatA8SMR8Xm-g7xUZKR2X4/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/AVvXsEgzvEX1AkoZKCoC5OE9sEOYCxHFwBprU7EfusTJraSWSYoqQOhTsUodZKfZZ_oIekdRynqzD6_zaU4-5BsdrBrMhhtLADaXpskV2cThB5b7fECRtl7d_-6Lt0RBax1PWLmPCtkp9l1GXj-s/s1600/batic+on+wp.png",
"width": 600,
"height": 60
}
},
"author": {
"@type": "Person",
"name": "<data:post.author/>"
}
}</script>
Cara Memasang Schema Markup NewsArticle
Jika blog/web Anda merupakan situs berita, atau ingin blog Anda dikenali sebagai website berkonten berita (news), gunakan sechema markup NewsArticle berikut ini di bawah kode <div class=’post’>
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<data:post.title/>"
},
"headline": "<data:post.title/>",
"image": {
"@type": "ImageObject",
"url": "<data:post.firstImageUrl/>",
"height": 800,
"width": 800
},
"datePublished": "<data:post.timestampISO8601/>",
"dateModified": "<data:post.timestampISO8601/>",
"author": {
"@type": "Person",
"name": "<data:post.author/>"
},
"publisher": {
"@type": "Organization",
"name": "<data:blog.title/>",
"logo": {
"@type": "ImageObject",
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBJHlxXuOdmINi1Snh59RpSc-6jS91cwAyjeCmq0c1LTbUfaZYRM02XJlm_QjWwWCXXDdOWgSC94QJiVRWOZeumsdkWbe1SzSwL_EK6Wvh9i_x2vYqFLy-FyZ-o-W7B6ubbHdiR5DFDwQX/s1600-r/detik+style+blogger+template.png",
"width": 600,
"height": 60
}
},
"description": "<data:post.snippet/>"
}
</script>
Simpan Template!
Schema Breadrcumb
Untuk schema Breadcrumb List, silakan buka Cara Memasang Breadcrumb di Blogger.
Demikian tips seo tentang memasang schema markup blog di Blogger. Untuk di blog selfhosted CMS WordPress, bisa gunakan plugin Schema.
Hasilnya?
Well, setelah kucek ulang lewat alat penguji kaya, ternyata berhasil dengan baik. Hehehe... Silakan lihat gambarnya!
0 komentar:
Post a Comment