Cara Menambahkan Schema Markup Webpage, Website, Blogposting, dan Article di Blogger

Baca Juga

Tutorial blogging tentang Cara Menambahkan Schema Markup Webpage, Website, Blogposting, dan Article di Blogger ini bagian dari tips SEO.

Cara Menambahkan Schema Markup (Image: GoliveUK)

Schema Markup adalah pemberian kode agar data konten blog atau postingan terstruktur dengan baik. Kita bisa mengeceknya di Structured Data Testing Tool milik Google.

Pemasanan kode skema markup ini di template Blogger untuk mendapatkan peringkat yang lebih baik di Google.

Skema markup akan berdampak pada perubahan signifikan dalam SEO situs web Anda. Menggunakan skema artikel, mesin pencari menambahkan hasil terbaik dari deskripsi meta Anda untuk ditampilkan di hasil pencarian.

Untuk blog atau website berbasis Blogger, schema markup terpenting meliputi

1. Webpage
2. Website 
3. Blogposting
4. Article (Opsional)

Schema Webpage untuk keperluan snippet atau ringkasan artikel homepage di halaman pencarian. Schema Website untuk sitelink searchbox. Blogposting untuk menampilkan struktur artikel (judul dan ringkasan artikel) di Google.

Cara Menambahkan Schema Markup di Blogger

Schema #1 Webpage dan WebSite

1. Klik Tema > Edit HTML
2. Simpan kode berikut ini di atas kode </head>

<b:if cond='data:view.isHomepage'>
<script type='application/ld+json'>
{
  "@context": "http://schema.org",
  "@graph":
  [
  {
  "@type": "Webpage",
  "url": "<data:blog.canonicalHomepageUrl/>",
  "name": "<data:blog.title/>",
  "headline":"<data:blog.title/>",
  <b:if cond='data:blog.metaDescription'>"description": "<data:blog.metaDescription.escaped/>",<b:else/>"description": "Silahkan kunjungi <data:blog.title/> untuk membaca postingan-postingan menarik.",</b:if>
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "<data:blog.canonicalHomepageUrl/>"
  },
  "publisher": {
    "@type": "Organization",
    "name": "<data:blog.title/>",
    "url": "<data:blog.canonicalHomepageUrl/>",
    "logo": {
        "url": "https://1.bp.blogspot.com/-YDvkfjfGDbA/XkJrKWEXNTI/AAAAAAABDJs/zvPePNb_xF47M3YE6yBG3SgyjzQdWeywgCLcBGAsYHQ/google-logo.JPG",
        "width": 600,
        "height": 60,
        "@type": "ImageObject"
    }
  },
  "image": {
    "@type": "ImageObject",
    "url": "https://1.bp.blogspot.com/-YDvkfjfGDbA/XkJrKWEXNTI/AAAAAAABDJs/zvPePNb_xF47M3YE6yBG3SgyjzQdWeywgCLcBGAsYHQ/google-logo.JPG",
    "width": 1280,
    "height": 720
    }
  },
  {
  "@type": "WebSite",
  "url": "<data:blog.canonicalHomepageUrl/>",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "<data:blog.canonicalHomepageUrl/>search?q={q}",
    "query-input": "required name=q"
    }
  }
  ]
}
</script>
</b:if>

Schema #2 Blogposting

LD-JSON Script Schema.org BlogPosting Untuk Blogger ini untuk data terstruktur sebuah halaman web. Script ld-json ini lebih sederhana dan lebih mudah dipasang dan dimengerti Google.

1. Klik Tema > Edit HTML
2. Hapus kode hentry pada kode yang seperti ini <article class='post hentry'>
3. Simpan kode berikut inii di bawah kode <article class='post'> atau <div class='post'> setelah kode hentry dihapus.

<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
<script type='application/ld+json'>{
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "<data:post.canonicalUrl/>"
    },
  "headline": "<data:view.title.escaped/>",
  <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,&quot;1280:720&quot;)'/>",<b:else/>"url": "https://4.bp.blogspot.com/-8kN5uucyxDI/XD6vAIw18dI/AAAAAAAA7kU/uTwzqq0EbvgGyzRaNuLpjzARZIKOWbVoACLcBGAs/s1280/no-thumbnail.jpg",</b:if>
    "height": 720,
    "width": 1280
 },
  "publisher": {
    "@type": "Organization",
    "name": "<data:blog.title/>",
    "logo": {
      "@type": "ImageObject",
      "url": "https://1.bp.blogspot.com/-YDvkfjfGDbA/XkJrKWEXNTI/AAAAAAABDJs/zvPePNb_xF47M3YE6yBG3SgyjzQdWeywgCLcBGAsYHQ/google-logo.JPG",
      "width": 600,
      "height": 60
      }
    },
  "author": {
    "@type": "Person",
    "name": "<data:post.author/>"
  }
}</script>
</b:if>

Catatan: URL image yang ditandai adalah logo blog dengan ukuran 600x60, ganti dengan logo Anda sendiri.

Cara Menambahkan Schema Markup Webpage, Website, dan Blogposting di Blogger Sumber kode: Kompi Ajaib.

Schema #3 Markup Article

Sebenarnya schema #1 dan #2 di atas sudah cukup. Namun, jika ingin menggunakan schema markup article (bukan blogposting), maka abaikan schema blogposting dan ikuti panduan berikut ini.

1. Klik Tema > Edit HTML
2. Cari (Ctrl+F) kode  <div class='post hentry'>
3. Hapus dan ganti kode tersebut dengan kode berikut ini:

<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/Article'>

4. Temukan kode  <b:if cond='data:post.title'> 
5. Hapus dan ganti dengan kode ini:

 <b:if cond='data:post.title'>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' itemprop='url'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' itemprop='url'>
<data:post.title/>

Save ! Simpan perubahan kode tema.

Demikian Cara Menambahkan Schema Markup Webpage, Website, Blogposting, dan Article di Blogger. Wasalam. (www.komunikasipraktis.com).*