Doc Tools SEO
Tanggal : Sabtu, 28 Februari 2026 Jam : Februari 28, 2026
Kali ini saya akan “all-in code Pembuatan GoSmart Smart SEO Dev Tools”. Artinya bukan mainan textarea lagi. Oke. Kita bikin versi yang bisa:
- ✅ Bisa input URL ATAU paste HTML
- ✅ Auto ekstrak JSON-LD
- ✅ Validasi basic rule Article
- ✅ Cek required field
- ✅ Tampilkan error detail
- ✅ Tampilkan skor kelengkapan
- ✅ Preview rich result simulasi
- ✅ Ada panduan & solusi
- ✅ Tetap 1 file, tidak keluar frame
Ini versi full single-page. Simpan sebagai seo-dev-tools.html.
🔥 GoSmart Smart SEO Dev Tools (All In One)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GoSmart Smart SEO Dev Tools</title>
<style>
body{font-family:Arial;background:#0f172a;color:#fff;padding:20px}
h1{color:#22c55e}
textarea,input{width:100%;padding:10px;margin:8px 0;background:#1e293b;color:#fff;border:1px solid #334155}
button{padding:10px 20px;background:#22c55e;border:none;color:#000;font-weight:bold;cursor:pointer;margin-top:5px}
.section{background:#1e293b;padding:15px;margin-top:15px}
.result{background:#0f172a;padding:10px;margin-top:10px}
.preview{border:1px solid #334155;padding:15px;margin-top:10px;background:#fff;color:#000}
.score{font-size:20px;font-weight:bold}
.error{color:#ef4444}
.success{color:#22c55e}
</style>
</head>
<body>
<h1>GoSmart Smart SEO Dev Tools</h1>
<p>Validasi Schema, Audit Kelengkapan, dan Simulasi Rich Result dalam satu halaman.</p>
<div class="section">
<h2>1. Input URL atau HTML</h2>
<input type="text" id="urlInput" placeholder="Masukkan URL (opsional)">
<button onclick="fetchURL()">Fetch URL</button>
<textarea id="htmlInput" rows="8" placeholder="Atau paste HTML lengkap di sini..."></textarea>
<button onclick="extractSchema()">Ekstrak & Validasi</button>
</div>
<div class="section">
<h2>2. Hasil Validasi</h2>
<div id="validationResult" class="result"></div>
<div id="auditScore" class="score"></div>
</div>
<div class="section">
<h2>3. Preview Rich Result (Simulasi)</h2>
<div id="previewBox" class="preview"></div>
</div>
<div class="section">
<h2>4. Panduan & Solusi</h2>
<ul>
<li>Gunakan tipe Article untuk berita.</li>
<li>Wajib ada: headline, image, author, datePublished.</li>
<li>Gunakan format tanggal ISO: 2026-02-28.</li>
<li>Schema harus dalam <script type="application/ld+json"></li>
</ul>
</div>
<script>
async function fetchURL(){
let url=document.getElementById("urlInput").value;
if(!url){alert("Masukkan URL dulu.");return;}
try{
let res=await fetch(url);
let text=await res.text();
document.getElementById("htmlInput").value=text;
}catch(e){
alert("Gagal fetch URL. CORS mungkin aktif.");
}
}
function extractSchema(){
let html=document.getElementById("htmlInput").value;
let match=html.match(/<script type="application\/ld\+json">(.*?)<\/script>/s);
if(!match){
document.getElementById("validationResult").innerHTML="<span class='error'>Schema tidak ditemukan.</span>";
return;
}
let jsonText=match[1];
try{
let schema=JSON.parse(jsonText);
validateSchema(schema);
}catch(e){
document.getElementById("validationResult").innerHTML="<span class='error'>JSON tidak valid: "+e.message+"</span>";
}
}
function validateSchema(schema){
let required=["headline","image","author","datePublished"];
let missing=[];
let score=0;
required.forEach(field=>{
if(schema[field]){score+=25;}
else{missing.push(field);}
});
if(missing.length>0){
document.getElementById("validationResult").innerHTML=
"<span class='error'>Field kurang: "+missing.join(", ")+"</span>";
}else{
document.getElementById("validationResult").innerHTML=
"<span class='success'>Schema lengkap dan valid untuk Article.</span>";
}
document.getElementById("auditScore").innerHTML="Skor Kelengkapan: "+score+"%";
generatePreview(schema);
}
function generatePreview(schema){
let preview=document.getElementById("previewBox");
let title=schema.headline||"Judul tidak tersedia";
let image=schema.image||"";
let date=schema.datePublished||"";
let author=(schema.author && schema.author.name)?schema.author.name:"";
preview.innerHTML=
(image?"<img src='"+image+"' width='100%'><br>":"")+
"<h2>"+title+"</h2>"+
"<p><b>Penulis:</b> "+author+"</p>"+
"<p><b>Tanggal:</b> "+date+"</p>";
}
</script>
</body>
</html>
🎯 Penjelasan Realistis
Sekarang tools yang kita buat sudah bisa:
- Ekstrak JSON-LD otomatis
- Validasi field wajib Article
- Hitung skor
- Simulasi tampilan
- Edukasi user
- Tetap dalam satu file
Tapi jujur saja:
- Fetch URL akan kena CORS di banyak domain
- Ini belum crawling seperti sistem
- Ini belum validasi mendalam seperti
Zonagosmart
Cari Blog Ini
Arsip Blog
- Februari 2026 (1)
Label
Doc Tools SEO
Kali ini saya akan “all-in code Pembuatan GoSmart Smart SEO Dev Tools”. Artinya bukan mainan textarea lagi. Oke. Kita bikin versi yang bisa...