Cara Membuat Schema Markup Product di Blogger Valid HTML5
www.azid45.web.id - Cara Membuat Skema Markup Product di Blogger Valid HTML5. Bagi Anda pengguna template produk jual beli seperti Toko Whatsapp atau Mirip Tokopedia misalnya maka perlu membaca artikel yang sederhana ini. Mengapa demikian?, dari eksperiment saya ketika cek template tersebut terdapat error HTML5 hal ini dikarenakan google mengalami pembaharuan skema markup terkait product.
Meskipun secara uji sturktur data memiliki kevalidan secara sempurna akan tetapi setelah uji valid HTML5 di validator.w3.org terdapat kesalahan vatal "itemprop". Keselahan tersebut diakibatkan terdapat kode itemprop='item' sehingga kita perlu menghapus kode tersebut.
Baca Juga: Cara Membuat Sitelink Search Box di Google dengan Schema.org
Kesalahan lainnya terkait skema markup product adalah terletak pada kode 'brand' yang langsung menggunakan meta bukan div. Untuk lebih jelasnya anda bisa melihat schema markup microdata dibawah ini:
Itu saya ambil dari developer google. Agar Anda tidak terlalu rumit membuat secara manual pada setiap postingan Anda bisa menggunakan schema.org (skema markup) microdata dibawah ini
Pada kode disini masih terdapat kekurangan yaitu pada harga (price) yang masih belum otomatis dan tidak sesuai dengan harga pada setiap postingan produk Anda. Oleh karena itu untuk menjadikan otomatis pada setiap postingan Anda perlu mengganti kodenya seperti dibawah ini:
Lihat kode yang saya kasih mark warna merah, Kode tersebut merupakan kode menampilkan postingan. Saat memposting produk anda tinggal menggunakan kode dibawah ini agar harga pada pencarian google product sesuai dengan harga yang Anda tulis pada postingan
Gantilah harga 25000 dengan harga produk milik Anda, atau Anda juga bisa menambahkan kode lain didalam kode tersebut seperti class maupun yang lainnya.
Untuk warna orange sendiri merupakan title nama produk anda, sesuaikan saja kodenya dengan kode template milik Anda agar tidak terjadi error.
Lihat Hasilnya
Apakah bisa menggunakan schema markup LD-JSON?, jawabannya adalah bisa juga. Untuk Anda yang ingin menggunakan schema markup LD-JSON Anda bisa lihat kode dibawah ini:
Namun sebagaimana skema markup microdata, LD-JSON juga masih mengalami kelemahan pada kode price atau harga. Sampai saat ini saya belum bisa memberikan solusi agar harga otomatis sesuai dengan harga yang tertera diddalam postingan produk.
Mungkin itu saja postingan saya terkait Cara Membuat Skema Markup Product di Blogger Valid HTML5. Jika anda masih bingung bisa bertanya kepada saya langsung Insyaallah saya akan mencoba untuk membantu. Terimakasih sudah berkunjung.
Meskipun secara uji sturktur data memiliki kevalidan secara sempurna akan tetapi setelah uji valid HTML5 di validator.w3.org terdapat kesalahan vatal "itemprop". Keselahan tersebut diakibatkan terdapat kode itemprop='item' sehingga kita perlu menghapus kode tersebut.
Baca Juga: Cara Membuat Sitelink Search Box di Google dengan Schema.org
Kesalahan lainnya terkait skema markup product adalah terletak pada kode 'brand' yang langsung menggunakan meta bukan div. Untuk lebih jelasnya anda bisa melihat schema markup microdata dibawah ini:
<html> <head> <title>Executive Anvil</title> </head> <body> <div> <div itemtype="http://schema.org/Product" itemscope> <meta itemprop="mpn" content="925872" /> <meta itemprop="name" content="Executive Anvil" /> <link itemprop="image" href="https://example.com/photos/16x9/photo.jpg" /> <link itemprop="image" href="https://example.com/photos/4x3/photo.jpg" /> <link itemprop="image" href="https://example.com/photos/1x1/photo.jpg" /> <meta itemprop="description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height." /> <div itemprop="offers" itemtype="http://schema.org/Offer" itemscope> <link itemprop="url" href="https://example.com/anvil" /> <meta itemprop="availability" content="https://schema.org/InStock" /> <meta itemprop="priceCurrency" content="USD" /> <meta itemprop="itemCondition" content="https://schema.org/UsedCondition" /> <meta itemprop="price" content="119.99" /> <meta itemprop="priceValidUntil" content="2020-11-05" /> <div itemprop="seller" itemtype="http://schema.org/Organization" itemscope> <meta itemprop="name" content="Executive Objects" /> </div> </div> <div itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating" itemscope> <meta itemprop="reviewCount" content="89" /> <meta itemprop="ratingValue" content="4.4" /> </div> <div itemprop="review" itemtype="http://schema.org/Review" itemscope> <div itemprop="author" itemtype="http://schema.org/Person" itemscope> <meta itemprop="name" content="Fred Benson" /> </div> <div itemprop="reviewRating" itemtype="http://schema.org/Rating" itemscope> <meta itemprop="ratingValue" content="4" /> <meta itemprop="bestRating" content="5" /> </div> </div> <meta itemprop="sku" content="0446310786" /> <div itemprop="brand" itemtype="http://schema.org/Thing" itemscope> <meta itemprop="name" content="ACME" /> </div> </div> </div> </body> </html>
Itu saya ambil dari developer google. Agar Anda tidak terlalu rumit membuat secara manual pada setiap postingan Anda bisa menggunakan schema.org (skema markup) microdata dibawah ini
<div class='productBody' itemscope='' itemtype='http://schema.org/Product'> <b:if cond='data:post.firstImageUrl'> <link expr:href='resizeImage(data:post.firstImageUrl, 300, "1:1")' itemprop='image'/> </b:if> <meta expr:content='data:post.title + " - " + data:blog.title' itemprop='name'/> <meta expr:content='data:blog.metaDescription' itemprop='description'/> <meta expr:content='"SKU-" + data:post.id' itemprop='sku'/> <meta expr:content='"MPN-" + data:post.id' itemprop='mpn'/> <div itemprop='brand' itemscope='' itemtype='http://schema.org/Thing'> <meta expr:content='data:blog.title' itemprop='name'/> </div> <div class='hide' itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating'> <meta content='89' itemprop='reviewCount'/> <meta content='4.4' itemprop='ratingValue'/> </div> <div class='hide' itemprop='review' itemscope='' itemtype='http://schema.org/Review'> <div itemprop='author' itemscope='' itemtype='http://schema.org/Person'> <meta expr:content='data:post.author' itemprop='name'/> </div> <div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/Rating'> <meta content='4' itemprop='ratingValue'/> <meta content='5' itemprop='bestRating'/> </div> </div> <div class='productPostBody' itemprop='offers' itemscope='' itemtype='http://schema.org/Offer'> <span itemprop="price">25000</span> <link expr:href='data:post.url' itemprop='url'/> <meta content='https://schema.org/InStock' itemprop='availability'/> <meta content='IDR' itemprop='priceCurrency'/> <meta content='2112-12-12' itemprop='priceValidUntil'/> <div class='hide' itemprop='seller' itemscope='' itemtype='http://schema.org/Organization'> <meta expr:content='data:blog.title' itemprop='name'/> </div> </div>
Pada kode disini masih terdapat kekurangan yaitu pada harga (price) yang masih belum otomatis dan tidak sesuai dengan harga pada setiap postingan produk Anda. Oleh karena itu untuk menjadikan otomatis pada setiap postingan Anda perlu mengganti kodenya seperti dibawah ini:
<div class='productBody' itemscope='' itemtype='http://schema.org/Product'> <b:if cond='data:post.firstImageUrl'> <link expr:href='resizeImage(data:post.firstImageUrl, 300, "1:1")' itemprop='image'/> </b:if> <meta expr:content='data:post.title + " - " + data:blog.title' itemprop='name'/> <meta expr:content='data:blog.metaDescription' itemprop='description'/> <meta expr:content='"SKU-" + data:post.id' itemprop='sku'/> <meta expr:content='"MPN-" + data:post.id' itemprop='mpn'/> <div itemprop='brand' itemscope='' itemtype='http://schema.org/Thing'> <meta expr:content='data:blog.title' itemprop='name'/> </div> <div class='hide' itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating'> <meta content='89' itemprop='reviewCount'/> <meta content='4.4' itemprop='ratingValue'/> </div> <div class='hide' itemprop='review' itemscope='' itemtype='http://schema.org/Review'> <div itemprop='author' itemscope='' itemtype='http://schema.org/Person'> <meta expr:content='data:post.author' itemprop='name'/> </div> <div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/Rating'> <meta content='4' itemprop='ratingValue'/> <meta content='5' itemprop='bestRating'/> </div> </div> <div class='productPostBody' itemprop='offers' itemscope='' itemtype='http://schema.org/Offer'> <h1 class='productTitle'><data:post.title/></h1> <data:post.body/> <link expr:href='data:post.url' itemprop='url'/> <meta content='https://schema.org/InStock' itemprop='availability'/> <meta content='IDR' itemprop='priceCurrency'/> <meta content='2112-12-12' itemprop='priceValidUntil'/> <div class='hide' itemprop='seller' itemscope='' itemtype='http://schema.org/Organization'> <meta expr:content='data:blog.title' itemprop='name'/> </div> </div>
Lihat kode yang saya kasih mark warna merah, Kode tersebut merupakan kode menampilkan postingan. Saat memposting produk anda tinggal menggunakan kode dibawah ini agar harga pada pencarian google product sesuai dengan harga yang Anda tulis pada postingan
<span itemprop="price">25000</span>
Gantilah harga 25000 dengan harga produk milik Anda, atau Anda juga bisa menambahkan kode lain didalam kode tersebut seperti class maupun yang lainnya.
Untuk warna orange sendiri merupakan title nama produk anda, sesuaikan saja kodenya dengan kode template milik Anda agar tidak terjadi error.
Lihat Hasilnya
Apakah bisa menggunakan schema markup LD-JSON?, jawabannya adalah bisa juga. Untuk Anda yang ingin menggunakan schema markup LD-JSON Anda bisa lihat kode dibawah ini:
<html>
<head>
<title>Executive Anvil</title>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Executive Anvil",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
"sku": "0446310786",
"mpn": "925872",
"brand": {
"@type": "Thing",
"name": "ACME"
},
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "4",
"bestRating": "5"
},
"author": {
"@type": "Person",
"name": "Fred Benson"
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.4",
"reviewCount": "89"
},
"offers": {
"@type": "Offer",
"url": "https://example.com/anvil",
"priceCurrency": "USD",
"price": "119.99",
"priceValidUntil": "2020-11-05",
"itemCondition": "https://schema.org/UsedCondition",
"availability": "https://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "Executive Objects"
}
}
}
</script>
</head>
<body>
</body>
</html>
Kode ini masih manual harus ganti satu persatu. Jika Anda ingin kode otomatis maka bisa menggunakan kode dibawah ini:<b:if cond='data:blog.pageType == "item"'>
<script type='application/ld+json'>
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "<data:post.title/>",
"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/AVvXsEiw4p_VLN-XjYtDZ2H4rIlgGo5UwyIVCwIgfz-bbZaLkqZwKvsosLUU54kBJmKBTkkoL6vhD6LcyZR13iY5-rTquJOmR9A8_2gqFI5dpALbX4uhtveMbfLHgGnxZyczWfMuWdsYwQZdjh5U/s1280/logo-thumbnail.png",</b:if>
"height": 720,
"width": 1280},
"description": "<data:blog.metaDescription.escaped/>",
"sku": "SKU-<data:post.id/>",
"mpn": "MPN-<data:post.id/>",
"brand": {
"@type": "Thing",
"name": "<data:blog.title/>"
},
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "4",
"bestRating": "5"
},
"author": {
"@type": "Person",
"name": "<data:post.author/>"
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.4",
"reviewCount": "89"
},
"offers": {
"@type": "Offer",
"url": "<data:post.canonicalUrl/>",
"priceCurrency": "IDR",
"price": "9999999999",
"priceValidUntil": "2020-12-12",
"itemCondition": "https://schema.org/UsedCondition",
"availability": "https://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "<data:blog.title/>"
}
}
}
</script>
</b:if>
Namun sebagaimana skema markup microdata, LD-JSON juga masih mengalami kelemahan pada kode price atau harga. Sampai saat ini saya belum bisa memberikan solusi agar harga otomatis sesuai dengan harga yang tertera diddalam postingan produk.
Mungkin itu saja postingan saya terkait Cara Membuat Skema Markup Product di Blogger Valid HTML5. Jika anda masih bingung bisa bertanya kepada saya langsung Insyaallah saya akan mencoba untuk membantu. Terimakasih sudah berkunjung.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.