Komputer dan Elektronik

Breaking

Selasa, 09 Juli 2019

Cara Memasang Schema Org Markup di Blogger

NUSA ANDALAS


Dinamakan, di sebut, atau diistilahkan Microdata Schema Org; yakni sebuah schema markup atau data terstruktur yang di pasang di template blogger, guna memudahkan mesin telusur melakukan indeks terhadap situs web yang kamu miliki.



Sebuah blog, situs, atau website; apabila sudah disematkan (disisipkan/dipasangkan) Microdata Schema Org, maka peringkat artikel dan situsnya akan bagus di Search Engine Result Page (SERP).



Dengan adanya kode 
Microdata Schema Org yang dipasangkan pun, memudahkan situs web tersebut untuk bisa mengalahkan situs-situs pesaing lainnya.


Cara Mengecek Structured Data Testing Tool Google

Guna kelengkapan Content kali ini, coba periksa kembali apakah Microdata Schema Org tidak ada yang error, atau malah ditemukan warning (error).


·         Masuk ke Google: Structured Data Testing Tool
·         Silakan input URL situs web kamu, termasuk HTTP/HTTPS dan WWW/Non-WWW
·         Klik tombol Analisa

Pada analisa yang ditampilkan, kamu akan melihat berbagai elemen yang berbeda-beda; dimulai dari Hatom, Author, MainEntityOfPage, dan banyak lagi.

Jika tidak ditemukannya, baik salah satu atau semua elemen yang dimaksud; dipastikan template blogger yang kamu gunakan saat ini tidak terpasang 
Schema Org Markup.

Sudah terpasang Schema Org Markup tapi salah satu diantaranya error? Silakan baca artikel ini: 
TutorialCara Mengatasi Error di Structured Data Testing Google Microdata (Schema Org).


2 Cara Memasang Schema Org Markup di Blogger dengan 11 Langkah Mudah

Di bawah ini kamu akan diberikan tutorial bagaimana cara membuat dan menambahkan kode Schema Org Markup di template blogger dalam beberapa langkah mudah nan praktis.


Tutorial pemasangan Schema Org Markup di Blogger Theme ini sedikit rumit, dan menyita waktu. Alih-alih ingin menambahkan kode Schema Org Markup, malah template blog menjadi rusak. Maka dari itu, Back-Up template blogger di Notepad :)

Ganti kode 
<nav> dengan kode di bawah ini:

<nav id='topnav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>

Ganti kode 
<body> dengan kode di bawah ini:

<body class='index' itemscope='' itemtype='http://schema.org/WebPage'>

Ganti kode 
<header> atau <header-wrapper> dengan kode di bawah ini:

<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>

Ganti kode 
<content-wrapper> atau <main-wrapper> dengan kode di bawah ini:

<div id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

...atau...

<div id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

Catatan: Cek kembali template blogger kamu apakah menggunakan atribut "Main" atau "Content". Silakan disesuaikan sendiri.

Ganti kode di bawah ini:

<div class='post hentry uncustomized-post-template' >

...dengan kode di bawah ini:

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Ganti kode di bawah ini:

<article class='post hentry' expr:id='data:post.id'>

...dengan kode di bawah ini:

<article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>

Catatan: Jika tidak ada atribut HTML seperti <article, dipastikan atribut HTML yang digunakan adalah atribut HTML dengan kode <post atau berbeda dari pada itu.

Cari dan ganti kode di bawah ini:

<div class='author-profile' itemprop='author' >

...dengan kode di bawah ini:

<span class='fn author' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>

Cari kode ini 
<div id='sidebar-wrapper'> lalu ganti dengan kode di bawah ini:

<div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>

Ganti kode 
<footer id='footer-wrapper'> dengan kode di bawah ini:

<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

Ganti kode 
<div id='footer-credit'> dengan kode di bawah ini:

<footer id='footer-credit' itemscope='itemscope' itemtype='http://data-vocabulary.org/copyrightHolder'>


Khusus untuk kode <footer id='footer-wrapper'> dan <div id='footer-credit'> yang ada di atas, hati-hati ketika ingin mengimplementasikan Schema Org Markup di template blogger. Mengapa? Sebab kedua atribut HTML itu hampir persis sama, dan kebanyakan template blogger jaman sekarang memiliki atribut HTML yang berbeda-beda antara satu dengan lainnya. Jadi, perhatikan baik-baik.

Artikel ini pada dasarnya terdiri dari 2 tutorial yang berbeda tapi masih dalam satu tujuan, yakni memasang Schema Org Markup di Blogger/Blogspot.


Tutorial No. 2 ini sama saja seperti tutorial No. 1 di atas. Sayangnya, kami tidak merekomendasikannya sama sekali. Baiknya gunakan tutorial No. 1 di atas karena lebih lengkap dan meyakinkan :)

Untuk kamu yang kesulitan dan tidak ingin repot, silakan Copas kode di bawah ini, di bawah kode 
<body> atau <body :

<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.canonicalUrl' itemprop='url'/>
<b:else/>
<meta expr:content='data:blog.title' itemprop='name'/>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
</b:if> <meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta content='//
blog-logo-url-square-size-is-good' itemprop='image'/>
</b:if>
</div>

Note: Ganti kode blog-logo-url-square-size-is-good (warna biru) dengan URL logo blog. Jika tidak ada, bisa dengan cara menggunakan kode favicon seperti URL https://example.blogspot.com/favicon.ico/ atau https://www.example.com/favicon.ico/.


Jika boleh menyarankan, alangkah baiknya apabila kamu menggunakan URL logo blog milik kamu sendiri. Jangan pernah menggunakan URL logo blog milik situs web lainnya.

Itulah tutorial tips dan trik bagaimana cara membuat dan memasang Schema OrgMarkup di Blogger dengan 11 langkah mudah.
Description: Cara Memasang Schema Org Markup di Blogger Rating: 3.5 Reviewer: Ferry Anas ItemReviewed: Cara Memasang Schema Org Markup di Blogger