hi, kali ini admin akan membagikan tutorial membuat JSON+LD di blogger, sebagaimana diketahui bahwa SEO (Search engine) akan menelusuri merambah website yang akan dicari adalah structure data yang dkenal oleh Search Engine yaitu JSON+LD.
Thema template Blogger rata rata menggunakan katagori struktur data jenis blogposting dengan katagori sbb:
Theme Blogger default JSON LD Blogposting
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<data:post.url.canonical/>"
},
"headline": "<data:post.title.jsonEscaped/>",
"description": "<b:if cond='data:view.isSingleItem'>
<b:if cond='data:blog.metaDescription'>
<b:eval expr='data:blog.metaDescription.jsonEscaped'/>
<b:else/>
<b:eval expr='(data:post.body snippet { length: 150, links: false, linebreaks: false, ellipsis: true }).jsonEscaped'/>
</b:if>
<b:else/>
<b:eval expr='(data:post.body snippet { length: 150, links: false, linebreaks: false, ellipsis: true }).jsonEscaped'/>
</b:if>",
<b:if cond='data:view.isSingleItem'>
"articleBody": "<b:eval expr='(data:post.body snippet { length: 500, links: false, linebreaks: false, ellipsis: true }).jsonEscaped'/>",
</b:if>
"datePublished": "<data:post.date.iso8601.jsonEscaped/>",
"dateModified": "<data:post.lastUpdated.iso8601.jsonEscaped/>",
"expires": "",
"image": {
"@type": "ImageObject",
"url": "<b:eval expr='(data:post.featuredImage ? resizeImage(data:post.featuredImage, 1200, "1200:630") : "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=w1200")'/>",
"height": <b:eval expr='data:post.featuredImage ? 630 : 348'/>,
"width": 1200
},
"publisher": {
"@type": "Organization",
"name": "Blogger",
"logo": {
"@type": "ImageObject",
"url": "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=h60",
"width": 206,
"height": 60
}
},
"author": {
"@type": "Person",
"name": "<data:post.author.name.jsonEscaped/>",
"url": "<b:if cond='data:post.author.profileUrl'>
<data:post.author.profileUrl/>
<b:else/>
https://www.blogger.com
</b:if>"
}
}
</script>
Namun bagimana jika kita ingin menambah Struktur data baru dimana otomatis akan berubah sesuai dengan inputan data yang kita berikan misalkan Struktur Data Jobposting.Tentunya hal ini akan sulit dilakukan, karena Search engine hanya akan mengecek code html saja tidak termasuk javascript, sedangkan data tersebut harus disajikan dengan html.
Berikut yang sudah dilakukan admin.
1. mengambil data dari database untuk mengisi struktur data tiap item Jobposting namun tidak terdeteksi oleh search engine.
2. mengubah langsung dari struktur Blogger API namun ditolak oleh server sehingga hanya menggunakan Timestamp server
3. menambahkan script javascript di suntik ke struktur data namun tidak terdeteksi.
Jadi admin akhirnya membuat struktur data di tiap postingan baru dan otomatisasi agar inputan dari admin akan terekam di struktur data Jobposting.
Berikut Contoh struktur data di tiap postingan Blogger, sebagai catatan anda harus menguasai dulu Blogger API dan Belajar mengambil akses token terlebih dahulu yang sudah kami sajikan di posting sebelumnya.
// Fungsi untuk membuat postingan di Blogger menggunakan access token
async function createBloggerPost(accessToken, title, content, imageUrl, labels, expired, perusahaan, kota, provinsi, tipekaryawan, gajirendah, gajitinggi) {
const blogId = '3012084879947878897'; // Replace with your Blog ID
const postUrl = `https://www.googleapis.com/blogger/v3/blogs/${blogId}/posts/`;
// if (imageUrl) {
// content = `<img src="${imageUrl}" alt="Gambar"><br>` + content;
// }
if (imageUrl) {
content = `<a href="${imageUrl}" target="_blank"><img src="${imageUrl}" alt="Gambar"></a><br>` + `<br><h3>Deskripsi </h3><br>` + content;
}
// Menambahkan konten lain ke halaman
content += `<br><h3> Lokasi ${perusahaan} </h3>`;
content += `<br> Kota : ${kota}`;
content += `<br> Provinsi : ${provinsi}`;
content += `<br><br><h3> Tipe karyawan </h3>`;
content += `<br>Tipe : ${tipekaryawan}`;
content += `<br><br><h3> Kualifikasi </h3>`;
content += `<br>Syarat : ${labels}`;
content += `<br><br><h3> Kisaran gaji Rp. </h3>`;
content += `<br>${gajirendah} s/d ${gajitinggi}`;
content += `<br><br><h3> Expired date </h3>`;
content += `<br> tanggal ${expired}`;
content += `<br><br><button id="lamarButton" disabled>Lamar Sekarang</button>`;
// Buat div untuk menampung tombol
var emailWebsiteButtonsDiv = document.createElement('div');
emailWebsiteButtonsDiv.id = 'emailWebsiteButtons';
// Ekspresi reguler untuk mencari email
var emailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/g;
var emails = [];
var match;
// Cari email dalam teks
while ((match = emailRegex.exec(content)) !== null) {
emails.push(match[0]);
}
// Ekspresi reguler untuk mencari URL (website)
var urlRegex = /(?:https?|ftp):\/\/[\n\S]+/gi;
var urls = [];
// Cari URL dalam teks
while ((match = urlRegex.exec(content)) !== null) {
var url = match[0];
// Abaikan URL yang memiliki prefix https://firebasestorage.googleapis.com
if (!url.startsWith("https://firebasestorage.googleapis.com")) {
urls.push(url);
}
}
// Kosongkan isi tombol sebelum menambahkan yang baru
emailWebsiteButtonsDiv.innerHTML = '';
// Buat tombol untuk setiap email yang ditemukan
emails.forEach(function(email) {
var emailButton = document.createElement('button'); // Buat elemen tombol baru
emailButton.textContent = `Email to ${email}`;
emailButton.setAttribute('onclick', `window.location.href='mailto:${email}'`);
emailWebsiteButtonsDiv.appendChild(emailButton);
emailWebsiteButtonsDiv.appendChild(document.createElement('br')); // Tambahkan baris baru setelah setiap tombol
});
// Buat tombol untuk setiap URL yang ditemukan
urls.forEach(function(url) {
var urlButton = document.createElement('button');
urlButton.textContent = `Visit to ${url}`;
//urlButton.setAttribute('onclick', `window.open('${url}', '_blank')`);
urlButton.setAttribute('onclick', `window.open('${url}', '_blank', 'noopener,noreferrer').rel='nofollow';`);
emailWebsiteButtonsDiv.appendChild(urlButton);
emailWebsiteButtonsDiv.appendChild(document.createElement('br')); // Tambahkan baris baru setelah setiap tombol
});
// Mendapatkan HTML dari elemen terakhir yang dibuat
var buttonHTML = emailWebsiteButtonsDiv.innerHTML;
// Tambahkan hasil HTML tombol ke dalam variabel content
content += buttonHTML;
var jsonLD = `<script type="application/ld+json" id="jsonLD-script">{ "@context": "http://schema.org","@type": "JobPosting","title": "${title}","description": "${content.replace(/<[^>]*>?/gm, '')}","datePosted": "${new Date().toISOString()}","validThrough": "${new Date(expired).toISOString()}","employmentType": "${tipekaryawan}","hiringOrganization": {"@type": "Organization","name": "${perusahaan}","sameAs": "http://www.${perusahaan}.com"},"jobLocation": {"@type": "Place","address": {"@type": "PostalAddress","streetAddress": "Jl.${perusahaan}","addressLocality": "${kota}","addressRegion": "${provinsi}","postalCode": "16820","addressCountry": "ID"}},"baseSalary": {"@type": "MonetaryAmount","currency": "IDR","value": {"@type": "QuantitativeValue","minValue": "${gajirendah}","maxValue": "${gajitinggi}","unitText": "Bulan"}},"jobBenefits": "Manfaat Pekerjaan","skills": "${labels}","qualifications": "${labels}"}</script><style>#jsonLD-script {display: none;}</style>`;
content += jsonLD;
const postData = {
title: title,
// content: content.replace(/\n/g, '<br>'),
content: content.replace(/\n/g, '<br>')
.replace('<br><h3>', '')
.replace(/</g, '<')
.replace(/>/g, '>'),
labels: labels ? labels.split(',').map(label => label.trim()) : []
};
const response = await fetch(postUrl, {
method: 'POST',
headers: {
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json'
},
body: JSON.stringify(postData)
});
Berikut hasil dari penambahan structure data DEMO STRUCTUR DATA atau gunakan salahj satu halaman postingan dari www.lowonganhub.com
Post a Comment