Kisi bhi tool website ke liye Free Keyword Research / Planner Tool banana ke liye Google Suggest (Autocomplete API) aur user search intent modifiers (Jaise: best, how, vs, price, free, online) sabse behtareen tareeqa hai. Isme kisi paid API key ki zaroorat nahi padti aur yeh browser ke andar hi real-time keywords generate kar deta hai.
Neeche diya gaya HTML, CSS aur JavaScript code aap apni website ke kisi bhi page ya iframe me seedhe paste kar sakte hain:
Is code ki khasiyat:
Zero Cost / No API Key: Google Autocomplete API ko JSONP method ke zariye browser se fetch karta hai, isliye CORS error nahi aata aur server setup ki zaroorat nahi padti.
Intent Modifiers: Seed keyword ke saath automated modifiers (best, how to, tutorial, alphabets) jodkar relevant long-tail variations nikaalta hai.
CSV Export: Users ek click me keyword list download kar sakte hain.
Ise aap apni website ke kisi naye page par direct paste karke run kar sakte hain. Agar aapko isme Monthly Search Volume ya CPC data bhi integrate karna ho, to uske liye aapko DataForSEO ya RapidAPI ki API keys connect karni hongi.
<!-- <!DOCTYPE html><html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyword Planner Tool</title>
<style>
* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.keyword-tool-container {
max-width: 800px;
margin: 20px auto;
padding: 24px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.keyword-tool-header h2 { margin: 0 0 8px 0; color: #1e293b; font-size: 24px; }
.keyword-tool-header p { margin: 0 0 20px 0; color: #64748b; font-size: 14px; }
.input-group { display: flex; gap: 10px; margin-bottom: 20px; }
.input-group input {
flex: 1;
padding: 12px 16px;
font-size: 15px;
border: 1px solid #cbd5e1;
border-radius: 8px;
outline: none;
}
.input-group input:focus { border-color: #2563eb; }
.input-group button {
padding: 12px 24px;
font-size: 15px;
font-weight: 600;
color: #ffffff;
background-color: #2563eb;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
.input-group button:hover { background-color: #1d4ed8; }
.actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.counter { font-size: 14px; color: #475569; font-weight: 500; }
.export-btn {
padding: 8px 14px;
font-size: 13px;
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 6px;
cursor: pointer;
}
.export-btn:hover { background: #e2e8f0; }
.table-wrapper {
max-height: 450px;
overflow-y: auto;
border: 1px solid #e2e8f0;
border-radius: 8px;
}
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
th { background-color: #f8fafc; color: #475569; position: sticky; top: 0; }
tr:hover { background-color: #f8fafc; }
.badge {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
border-radius: 4px;
background: #eff6ff;
color: #1d4ed8;
}
</style>
</head>
<body>
<div class="keyword-tool-container">
<div class="keyword-tool-header">
<h2>Keyword Planner & Suggestion Tool</h2>
<p>Apna seed keyword enter karein aur long-tail keyword suggestions payein.</p>
</div>
<div class="input-group">
<input type="text" id="seedKeyword" placeholder="Jaise: digital marketing, fitness, python tutorial...">
<button onclick="fetchKeywords()">Generate Keywords</button>
</div>
<div class="actions">
<span class="counter" id="resultCount">Results: 0 keywords</span>
<button class="export-btn" onclick="exportToCSV()">Export to CSV</button>
</div>
<div class="table-wrapper">
<table id="resultsTable">
<thead>
<tr>
<th>#</th>
<th>Keyword Idea</th>
<th>Type</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td colspan="3" style="text-align:center; color:#94a3b8; padding: 24px;">Koi keyword search karein.</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
let generatedKeywords = [];
function fetchJSONP(url, callbackName) {
return new Promise((resolve) => {
const script = document.createElement('script');
window[callbackName] = function(data) {
document.body.removeChild(script);
delete window[callbackName];
resolve(data);
};
script.src = url;
document.body.appendChild(script);
});
}
async function fetchKeywords() {
const input = document.getElementById('seedKeyword').value.trim();
if (!input) return;
const tbody = document.getElementById('tableBody');
tbody.innerHTML = '<tr><td colspan="3" style="text-align:center; padding: 24px;">Keywords nikaale ja rahe hain...</td></tr>';
const modifiers = ['', 'best ', 'how to ', 'free ', 'online ', ' guide', ' tutorial'];
const alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g']; // Zyada long-tail suggestions ke liye
const queries = [];
modifiers.forEach(m => queries.push(m.includes(' ') ? `${m}${input}` : `${input}${m}`));
alphabet.forEach(char => queries.push(`${input} ${char}`));
const keywordSet = new Set();
generatedKeywords = [];
for (let i = 0; i < queries.length; i++) {
const query = queries[i];
const callbackName = `cb_${Date.now()}_${i}`;
const url = `https://suggestqueries.google.com/complete/search?client=chrome&q=${encodeURIComponent(query)}&jsonp=${callbackName}`;
try {
const res = await fetchJSONP(url, callbackName);
if (res && res[1]) {
res[1].forEach(kw => {
const cleanKw = kw.toLowerCase().trim();
if (!keywordSet.has(cleanKw)) {
keywordSet.add(cleanKw);
generatedKeywords.push({
keyword: cleanKw,
type: cleanKw.split(' ').length > 3 ? 'Long Tail' : 'Short Tail'
});
}
});
}
} catch (err) {
console.error('Fetch error:', err);
}
}
renderTable();
}
function renderTable() {
const tbody = document.getElementById('tableBody');
const countDisplay = document.getElementById('resultCount');
tbody.innerHTML = '';
countDisplay.innerText = `Results: ${generatedKeywords.length} keywords`;
if (generatedKeywords.length === 0) {
tbody.innerHTML = '<tr><td colspan="3" style="text-align:center; padding: 24px;">Koi results nahi mile. Doosra term try karein.</td></tr>';
return;
}
generatedKeywords.forEach((item, index) => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${index + 1}</td>
<td><strong>${item.keyword}</strong></td>
<td><span class="badge">${item.type}</span></td>
`;
tbody.appendChild(tr);
});
}
function exportToCSV() {
if (generatedKeywords.length === 0) {
alert('Export karne ke liye pehle keywords generate karein!');
return;
}
let csvContent = "data:text/csv;charset=utf-8,Index,Keyword,Type\n";
generatedKeywords.forEach((row, i) => {
csvContent += `${i + 1},"${row.keyword}",${row.type}\n`;
});
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", `keywords_${Date.now()}.csv`);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
0 Comments