Panduan Memasang Schema Markup Artikel Berita Di Tema AMP dan Non-AMP Blogger

 Data terstruktur dapat membantu Anda mengirim sinyal yang benar ke mesin pencari tentang artikel dan konten Berita Anda. Tapi bagaimana menerapkan Data terstruktur NewsArticle Markup pada tema blogger AMP dan Non-AMP?. Perbedaan AMP dan Responsive Web Design.

Jika Anda adalah pemilik Blog berita yang dihosting di Blogger Google dan mencari panduan untuk menerapkan skrip markup berita pada tema AMP dan Non-AMP Blogger, Anda telah membaca  artikel yang tepat, karna tutorial ini sangat berguna untuk Anda. Mereka yang sudah terbiasa dengan marka skema dan mereka menggunakan markup schema untuk konten umum namun jika Anda menjalankan situs blog berita maka Anda harus menggunakan markup untuk artikel Berita agar dapat mengirim sinyal yang benar ke mesin pencari dan ini akan meningkatkan SEO situs Anda. Pada Umumnya untuk menggunakan markup schema di situs berita, terdapat beberapa properti dari NewsArticles.

Property	Description
dateline	Properti ini digunakan untuk lokasi di mana NewsArticle diproduksi.
printColumn	Jumlah kolom artikel berita di mana NewsArticle muncul dalam edisi cetak.
printEdition	Edisi cetak produk di mana NewsArticle muncul.
printPage	Bidang ini menunjukkan nama halaman cetak NewsArticle yang artikelnya ditemukan.
printSection	Jika NewsArticle muncul di media cetak, maka bidang ini menunjukkan bagian cetak tempat artikel muncul.

Pada dasarnya memang kita tidak bisa menggunakan properti ini di tema blogger untuk situs berita.

Jadi kita harus mencari cara untuk menerapkan markup skema untuk tema NewsArticles pada Blogger. Memasang Struktur Lengkap Schema.org Pada Blogger.

Mengapa menggunakan Schema Markup di situs Berita?
 Tentunya Anda ingin menjadikan situs Anda sangat SEO friendly. Dan untuk meningkatkan skor SEO Anda, Anda harus memvalidasi situs Anda dengan alat uji data struktur Google, dan untuk validasi markup skema yang tepat harus ada dalam tema blogger Anda.

Sebagian besar dari kita menggunakan scuba markup untuk konten tapi jika Anda menjalankan blog berita maka Anda harus menggunakan markup schema untuk NewsArticles. Dan setelah menggunakan markup itu akan mengirimkan sinyal ke mesin pencari tentang berita terbaru Anda. Akibatnya, mesin pencari akan memahami konten dan tampilan Anda sesuai permintaan dan tampil di pencarian.

Saat ini ada 2 jenis situs web yang banyak digunakan oleh para webmaster.

1. AMP - Accelerated Mobile Page
2. Non - AMP - Non Accelerated Mobile Page

Situs AMP dengan data terstruktur : Jika kita menggunakan marka skema di halaman AMP maka pada halaman hasil pencarian mobile, data terstruktur dapat muncul dalam korsel dengan gambar, logo halaman, dan fitur hasil pencarian menarik lainnya.

Situs web non-AMP dengan data terstruktur : Jika situs Anda dirancang tanpa AMP maka Anda harus menggunakan markup schema pada Blog berita Anda.

NewsArticle Schema Markup untuk tema AMP dan Non-AMP Blogger
 Saya telah menyebutkan sebelumnya bahwa proyek terbaru Google yang disebut AMP (Accelerated Mobile Page) dan banyak pemilik situs web sekarang menggunakan dan beralih ke desain web AMP. Situs AMP yang valid harus mematuhi markup skema. Dan markup bisa digunakan dengan 2 cara yang berbeda.

• JSON-LD - Banyak digunakan di situs AMP namun juga kompatibel dengan situs web Non-AMP.
• Microdata - Banyak digunakan di situs web Non-AMP namun tidak kompatibel dengan situs AMP.

Rekomendasi Google adalah JSON-LD untuk desain web AMP dan Non-AMP. Silahkan lihat di bawah contoh marka JSON-LD untuk markas schema NewsArticles.

 
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": {
    "@type": "ImageObject",
    "url": "https://google.com/thumbnail1.jpg",
    "height": 800,
    "width": 800
  },
  "datePublished": "2017-02-05T08:00:00+08:00",
  "dateModified": "2017-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "A most wonderful article"
}
</script>

Dan sekarang lihat contoh Microdata di bawah ini untuk markas besar NewsArticles schema. Keduanya bekerja sama namun muncul dengan cara yang berbeda.

<div itemscope itemtype="http://schema.org/NewsArticle">
  <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
  <h2 itemprop="headline">Article headline</h2>
  <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
    By <span itemprop="name">John Doe</span>
  </h3>
  <span itemprop="description">A most wonderful article</span>
  <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://google.com/thumbnail1.jpg"/>
    <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
    <meta itemprop="width" content="800">
    <meta itemprop="height" content="800">
  </div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="https://google.com/logo.jpg"/>
      <meta itemprop="url" content="https://google.com/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Google">
  </div>
  <meta itemprop="datePublished" content="2017-02-05T08:00:00+08:00"/>
  <meta itemprop="dateModified" content="2017-02-05T09:20:00+08:00"/>
</div>

Anda tidak dapat menambahkan atau mengurangi markup di atas pada tema Blogger secara langsung, karena keseluruhan skrip telah disajikan secara manual. Tapi di theme blogger kita harus menggunakan cara yang berbeda sehingga bisa mengirim sinyal ke search engine pada semua Halaman Web yang ada pada situs kita.

Bagaimana menerapkan markup schema untuk NewsArticles di Theme Blogger?
 Anda mungkin bertanya-tanya bagaimana menerapkan markas schema NewsArticles di Theme Blogger? Percayalah bahwa ini sangat mudah dan akan memakan waktu kurang dari 5 menit untuk berintegrasi. Saya akan menunjukkan bagaimana kita bisa menerapkan markup schema NewsArticles untuk Blog berita Anda dengan mudah. Saya berbagi script dalam format JSON-LD, karena format ini bisa digunakan baik dalam tema blogger AMP maupun Non-AMP. Ikuti panduan langkah demi langkah.

Langkah # 1: Buka https://www.blogger.com dan Masuk ke akun Anda

Langkah # 2: Dari Dashboard Blogger klik -> Theme -> Edit HTML

Langkah # 3: Dan cari baris seperti di bawah ini dengan menekan Ctrl + F (Windows) atau CMD + F (Mac)

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/Blog'>

Langkah # 4: Setelah mendapatkan baris di atas silahkan salin markup NewsArticle berikut dan tempel setelah baris artikel <item class = 'post hentry' itemscope = 'itemcope' itemtype = 'http: //schema.org/Blog'>

 
<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>

Langkah # 5: Terakhir klik tombol Save theme .

Anda telah melakukan tugas integrasi marka skema. Tapi bagaimana Anda mengetahui bahwa markup program NewsArticles Anda bekerja dengan sempurna?

Anda harus menguji situs Anda di alat pengujian data terstruktur Google. Cukup melalui langkah-langkah di bawah ini-

Langkah # 1: kunjungi URL di bawah untuk menguji situs web Anda. https://search.google.com/structured-data/testing-tool

Langkah # 2: Dalam Menguji data terstruktur Anda ketik URL situs web Anda dan klik tombol RUN TEST .

Jika semuanya bekerja dengan baik maka akan menampilkan markas schema NewsArticles tanpa ada kesalahan.

Baca Juga : Menentukan atau Memilih Jenis Platform Blog yang mungkin dapat juga membantu Anda.