Memasang Schema Structured Data untuk Blog Berita (NewsArticle)
August 1, 2019
Salah satu klien Layanan Premium CB menginginkan schema structured data templatenya dikenali sebagai blog berita atau situs berita (news site) oleh Google.
Semula, schema-nya menggunakan blog karena memang dibuat dengan Blogger, yaitu schema.org/Blog.
Karena kontennya berupa berita (news), CB ganti saja schemanya dengan memasangkan schema baru berupa Schema NewsArticle.
Menurut laman resmi schema: "A NewsArticle is an article whose content reports news, or provides background context and supporting materials for understanding the news."
1. Tema > Edit HTML
2. Ubah kode pembuka <html> di bagian atas kode dengan kode berikut ini:
atau bisa juga dengan mengganti kode <div id='content-wrapper'> dan semisalnya dengan kode berikut ini:
3. Save!
Jika mengalami error di structured data testing tools, mulai dari missing image, author, published, dan sebagainya, lanjutkan dengan langkah berikut ini.
4. Simpan kode berikut ini di bawah kode: <b:includable id='post' var='post'>
5. Simpan kode berikut ini di bawah kode: <div class='post hentry'> atau semisalnya.
6. Tambahkan kode itemprop='headline' di belakang kode judul postingan seperti ini:
Semula, schema-nya menggunakan blog karena memang dibuat dengan Blogger, yaitu schema.org/Blog.
Karena kontennya berupa berita (news), CB ganti saja schemanya dengan memasangkan schema baru berupa Schema NewsArticle.
Menurut laman resmi schema: "A NewsArticle is an article whose content reports news, or provides background context and supporting materials for understanding the news."
Cara #1 Memasang Schema Structured Data untuk Blog Berita (NewsArticle)
1. Tema > Edit HTML
2. Copas kode berikut ini di bawah kode <div class='post'> atau <article class='post'>
<!-- Schema markup for news article Start -->
<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<data:post.url.canonical.jsonEscaped/>"
},
"headline": "<data:post.title.jsonEscaped/>",
"description": "<data:post.snippet/>",
"image": [
"<data:post.firstImageUrl/>"
],
"datePublished": "<data:post.date.iso8601.jsonEscaped/>",
"dateModified": "<data:post.timestampISO8601/>",
"author": {
"@type": "Person",
"name": "<data:post.author/>"
},
"publisher": {
"@type": "Organization",
"name": "Bandung Aktual",
"logo": {
"@type": "ImageObject",
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWZAlWzQ_nB1P5IH241RkiLwkpEfdcZzGwcM1UykGmvamJGw-qe7EvSM80-FTPqOZkYjrz5UWUof8guLgElud6Dzg7Jvkfo7YlIgNL0QAVEIehlgqmX8q-2aPQx0aTR27KigzqBfAqi4mb/s1600/kota-bandung.jpg",
"width": 206,
"height": 60
}
}
}
</script>
<!-- Schema markup for news article End -->
Ganti URL Gambar Warna Merah dengan Link Logo Blog Anda.
3. Save!
Cara #2 Pasang Schema NewsArticle di Blog Berita
2. Ubah kode pembuka <html> di bagian atas kode dengan kode berikut ini:
<HTML dir='ltr' itemscope='' itemtype='http://schema.org/NewsArticle' lang='id'>
atau bisa juga dengan mengganti kode <div id='content-wrapper'> dan semisalnya dengan kode berikut ini:
<div id='content-wrapper' itemscope='' itemtype='http://schema.org/NewsArticle' role='main'>
3. Save!
Jika mengalami error di structured data testing tools, mulai dari missing image, author, published, dan sebagainya, lanjutkan dengan langkah berikut ini.
4. Simpan kode berikut ini di bawah kode: <b:includable id='post' var='post'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'> <b:if cond='data:post.firstImageUrl'> <img expr:src='data:post.firstImageUrl' style='display:none;'/> <meta expr:content='data:post.firstImageUrl' itemprop='url'/> </b:if> <meta content='800' itemprop='width'/> <meta content='800' itemprop='height'/> </div>
<div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
<div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<img alt='logo' src='URL LOGO ANDA' style='display:none;'/>
<meta alt='logo' content='URL LOGO ANDA' itemprop='url'/>
<meta content='600' itemprop='width'/>
<meta content='60' itemprop='height'/>
</div>
<meta expr:content='data:blog.title' itemprop='name'/>
</div>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.author' itemprop='name'/>
</span>
5. Simpan kode berikut ini di bawah kode: <div class='post hentry'> atau semisalnya.
<meta expr:content='data:post.timestamp' itemprop='datePublished'/>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>
<meta expr:itemid='data:post.link ? data:post.link : data:post.url' itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>
6. Tambahkan kode itemprop='headline' di belakang kode judul postingan seperti ini:
<h2 class='post-title entry-title' itemprop='headline'>
<h1 class='post-title entry-title' itemprop='headline'>
7. Save! Simpan template.
Hasilnya
Cara #4 Pasang Schema NewsArticle
Cara lain memasang schema untuk blog berita atau blog dengan konten artikel berita adalah sebagai berikut.
1. Tema > Edit HTML
2. Simpan kode nomor 3 berikut ini di bawah kode:
<b:includable id='post' var='post'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
atau di bawah kode:
<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/Blog'>
3. Ini kodenya:
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<data:post.title/>"
},
"headline": "Article headline",
"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": "URL GAMBAR LOGO",
"width": 600,
"height": 60
}
},
"description": "<data:post.snippet/>"
}
</script>
4. Save!
Kodenya:
Save!
Cara #5 Memasang Schema NewsArticle di Blogger
Simpan kode berikut ini setelah kode:<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/Blog'>
Kodenya:
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<data:post.title/>"
},
"headline": "Article headline",
"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://google.com/logo.jpg",
"width": 600,
"height": 60
}
},
"description": "<data:post.snippet/>"
}
</script>
Save!
Demikian Memasang Schema Structured Data untuk Blog Berita (NewsArticle). Lengkapi dengan mendaftarkan blog berita Anda ke Google News (Google Berita).
Pastikan juga blog berita Anda menggunakan template blog news style seperti detikStyle atau CNN Style. Cek di Galeri Template.
Good Luck & Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
Tidak wajib, yang penting kontennya memang berita dan authornya tidak satu orang (tim)
ReplyDelete