SEO Audit Checklist 2026 — Interactive Tool for Technical & Content SEO

:root {
–bg: #0f1117;
–surface: #1a1d27;
–surface2: #242836;
–border: #2e3348;
–accent: #6c63ff;
–accent2: #ff6b9d;
–accent3: #00d4aa;
–text: #e4e6f0;
–text2: #8b8fa8;
–danger: #ff4757;
–warning: #ffa502;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, ‚Segoe UI‘, system-ui, sans-serif;
background: var(–bg);
color: var(–text);
min-height: 100vh;
line-height: 1.6;
}
.header {
background: linear-gradient(135deg, #1a1d27 0%, #0f1117 100%);
border-bottom: 1px solid var(–border);
padding: 2rem 1.5rem 1.5rem;
text-align: center;
}
.header h1 {
font-size: 1.8rem;
background: linear-gradient(135deg, var(–accent), var(–accent2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
}
.header p { color: var(–text2); font-size: 0.95rem; max-width: 600px; margin: 0 auto; }
.container { max-width: 860px; margin: 0 auto; padding: 1.5rem; }

/* Progress bar */
.progress-section {
background: var(–surface);
border: 1px solid var(–border);
border-radius: 12px;
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
font-size: 0.9rem;
}
.progress-header .label { color: var(–text2); }
.progress-header .score {
font-weight: 700;
font-size: 1.1rem;
}
.progress-bar-bg {
background: var(–surface2);
border-radius: 8px;
height: 10px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
border-radius: 8px;
background: linear-gradient(90deg, var(–danger), var(–warning), var(–accent3), var(–accent));
transition: width 0.5s ease;
}
.score-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
margin-top: 0.75rem;
}
.score-badge.red { background: rgba(255,71,87,0.15); color: var(–danger); }
.score-badge.orange { background: rgba(255,165,2,0.15); color: var(–warning); }
.score-badge.green { background: rgba(0,212,170,0.15); color: var(–accent3); }
.score-badge.purple { background: rgba(108,99,255,0.15); color: var(–accent); }

/* Category sections */
.category {
background: var(–surface);
border: 1px solid var(–border);
border-radius: 12px;
margin-bottom: 1rem;
overflow: hidden;
}
.category-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
cursor: pointer;
user-select: none;
transition: background 0.2s;
}
.category-header:hover { background: var(–surface2); }
.category-title {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
font-size: 1rem;
}
.category-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.category-icon.tech { background: rgba(108,99,255,0.15); }
.category-icon.content { background: rgba(255,107,157,0.15); }
.category-icon.links { background: rgba(0,212,170,0.15); }
.category-icon.social { background: rgba(255,165,2,0.15); }
.category-icon.mobile { background: rgba(100,200,255,0.15); }
.category-icon.schema { background: rgba(200,165,255,0.15); }
.category-meta {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(–text2);
font-size: 0.85rem;
}
.category-count {
background: var(–surface2);
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-size: 0.75rem;
}
.category-body { padding: 0 1.25rem 1rem; display: none; }
.category.open .category-body { display: block; }
.toggle-arrow { transition: transform 0.2s; font-size: 0.8rem; }
.category.open .toggle-arrow { transform: rotate(180deg); }

/* Checklist items */
.checklist-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.65rem 0;
border-bottom: 1px solid rgba(46,51,72,0.5);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item input[type=“checkbox“] {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 2px solid var(–border);
border-radius: 6px;
cursor: pointer;
flex-shrink: 0;
margin-top: 2px;
position: relative;
transition: all 0.2s;
}
.checklist-item input[type=“checkbox“]:checked {
background: var(–accent3);
border-color: var(–accent3);
}
.checklist-item input[type=“checkbox“]:checked::after {
content: ‚✓‘;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #0f1117;
font-size: 12px;
font-weight: 700;
}
.item-text { flex: 1; }
.item-label {
font-size: 0.9rem;
cursor: pointer;
transition: color 0.2s;
}
.checklist-item.checked .item-label {
color: var(–text2);
text-decoration: line-through;
}
.item-desc {
font-size: 0.78rem;
color: var(–text2);
margin-top: 0.15rem;
}
.priority-tag {
font-size: 0.65rem;
padding: 0.1rem 0.45rem;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
flex-shrink: 0;
margin-top: 3px;
}
.priority-tag.critical { background: rgba(255,71,87,0.15); color: var(–danger); }
.priority-tag.high { background: rgba(255,165,2,0.15); color: var(–warning); }
.priority-tag.medium { background: rgba(108,99,255,0.15); color: var(–accent); }
.priority-tag.low { background: rgba(139,143,168,0.15); color: var(–text2); }

/* Export section */
.export-section {
background: var(–surface);
border: 1px solid var(–border);
border-radius: 12px;
padding: 1.25rem;
margin-top: 1.5rem;
text-align: center;
}
.export-section h3 { margin-bottom: 0.5rem; font-size: 1rem; }
.export-section p { color: var(–text2); font-size: 0.85rem; margin-bottom: 1rem; }
.btn {
display: inline-block;
padding: 0.6rem 1.5rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.2s;
text-decoration: none;
}
.btn-primary {
background: linear-gradient(135deg, var(–accent), #8b80ff);
color: #fff;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-secondary {
background: var(–surface2);
color: var(–text);
border: 1px solid var(–border);
margin-left: 0.5rem;
}
.btn-secondary:hover { background: var(–border); }

/* Summary cards */
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.summary-card {
background: var(–surface);
border: 1px solid var(–border);
border-radius: 10px;
padding: 1rem;
text-align: center;
}
.summary-card .number {
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(135deg, var(–accent), var(–accent2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.summary-card .label { font-size: 0.8rem; color: var(–text2); margin-top: 0.25rem; }

/* Footer */
.footer {
text-align: center;
padding: 2rem 1rem;
color: var(–text2);
font-size: 0.8rem;
}
.footer a { color: var(–accent); text-decoration: none; }

/* Responsive */
@media (max-width: 600px) {
.header h1 { font-size: 1.4rem; }
.summary-grid { grid-template-columns: repeat(2, 1fr); }
}

// Priority weights for scoring
const WEIGHTS = { critical: 5, high: 3, medium: 2, low: 1 };

function toggleCategory(id) {
document.getElementById(‚cat-‚ + id).classList.toggle(‚open‘);
}

function updateProgress() {
const items = document.querySelectorAll(‚.checklist-item‘);
let total = 0, checked = 0;
let totalWeight = 0, checkedWeight = 0;
let criticalTotal = 0, criticalChecked = 0;
const catCounts = {};

items.forEach(item => {
const cat = item.closest(‚.category‘);
const catId = cat ? cat.id.replace(‚cat-‚, “) : ‚unknown‘;
const priority = item.dataset.priority || ‚medium‘;
const weight = WEIGHTS[priority] || 1;
const cb = item.querySelector(‚input[type=“checkbox“]‘);
const isChecked = cb.checked;

total++;
totalWeight += weight;
if (!catCounts[catId]) catCounts[catId] = { total: 0, checked: 0 };
catCounts[catId].total++;

if (isChecked) {
checked++;
checkedWeight += weight;
catCounts[catId].checked++;
item.classList.add(‚checked‘);
} else {
item.classList.remove(‚checked‘);
}

if (priority === ‚critical‘) {
criticalTotal++;
if (isChecked) criticalChecked++;
}
});

const pct = total > 0 ? Math.round((checkedWeight / totalWeight) * 100) : 0;

// Update summary cards
document.getElementById(‚total-items‘).textContent = total;
document.getElementById(‚checked-count‘).textContent = checked;
document.getElementById(‚remaining-count‘).textContent = total – checked;
document.getElementById(‚critical-remaining‘).textContent = criticalTotal – criticalChecked;

// Update progress bar
document.getElementById(’score-display‘).textContent = pct + ‚%‘;
document.getElementById(‚progress-fill‘).style.width = pct + ‚%‘;

// Update badge
const badge = document.getElementById(’score-badge‘);
if (pct < 30) {
badge.textContent = 'Needs Work';
badge.className = 'score-badge red';
} else if (pct < 60) {
badge.textContent = 'Getting There';
badge.className = 'score-badge orange';
} else if (pct {
state[‚item_‘ + i] = cb.checked;
});
localStorage.setItem(’seoAudit2026′, JSON.stringify(state));
}

function loadState() {
const saved = localStorage.getItem(’seoAudit2026′);
if (!saved) return;
try {
const state = JSON.parse(saved);
document.querySelectorAll(‚.checklist-item input[type=“checkbox“]‘).forEach((cb, i) => {
if (state[‚item_‘ + i]) cb.checked = true;
});
updateProgress();
} catch(e) {}
}

function exportReport() {
const items = document.querySelectorAll(‚.checklist-item‘);
let report = ‚SEO AUDIT REPORT — ‚ + new Date().toLocaleDateString() + ’n‘;
report += ‚=‘.repeat(50) + ’nn‘;

let currentCat = “;
let total = 0, checked = 0;

items.forEach(item => {
const cat = item.closest(‚.category‘);
const catTitle = cat ? cat.querySelector(‚.category-title‘).textContent.trim() : “;
if (catTitle !== currentCat) {
currentCat = catTitle;
report += ’n## ‚ + catTitle + ’n‘;
}
const cb = item.querySelector(‚input[type=“checkbox“]‘);
const label = item.querySelector(‚.item-label‘).textContent;
const priority = item.querySelector(‚.priority-tag‘) ? item.querySelector(‚.priority-tag‘).textContent : “;
const status = cb.checked ? ‚✅‘ : ‚⬜‘;
total++;
if (cb.checked) checked++;
report += status + ‚ [‚ + priority + ‚] ‚ + label + ’n‘;
});

const pct = total > 0 ? Math.round((checked / total) * 100) : 0;
report += ’n‘ + ‚=‘.repeat(50) + ’n‘;
report += ‚SCORE: ‚ + checked + ‚/‘ + total + ‚ (‚ + pct + ‚%)n‘;
report += ‚Generated by DataGate.ch SEO Audit Tooln‘;

const blob = new Blob([report], { type: ‚text/plain‘ });
const url = URL.createObjectURL(blob);
const a = document.createElement(‚a‘);
a.href = url;
a.download = ’seo-audit-report-‚ + new Date().toISOString().slice(0,10) + ‚.txt‘;
a.click();
URL.revokeObjectURL(url);
}

function resetAll() {
if (!confirm(‚Reset all checkboxes? This cannot be undone.‘)) return;
document.querySelectorAll(‚.checklist-item input[type=“checkbox“]‘).forEach(cb => {
cb.checked = false;
});
localStorage.removeItem(’seoAudit2026′);
updateProgress();
}

// Initialize
loadState();