Build an SEO Audit Tool Using JavaScript: Complete Guide

function checkTitle() {
  const title = document.querySelector('title')?.textContent?.trim() || '';
  const length = title.length;

  if (!title) {
    return { check: 'Title Tag', status: 'fail', message: 'Missing title tag entirely' };
  }
  if (length < 30) {
    return { check: 'Title Tag', status: 'warn', message: `Title is only ${length} chars, likely too short` };
  }
  if (length > 60) {
    return { check: 'Title Tag', status: 'warn', message: `Title is ${length} chars, may get truncated` };
  }
  return { check: 'Title Tag', status: 'pass', message: `Title length OK (${length} chars)` };
}

function checkMetaDescription() {
  const meta = document.querySelector('meta[name="description"]');
  const content = meta?.getAttribute('content')?.trim() || '';
  const length = content.length;

  if (!content) {
    return { check: 'Meta Description', status: 'fail', message: 'Missing meta description' };
  }
  if (length < 70 || length > 160) {
    return { check: 'Meta Description', status: 'warn', message: `Description is ${length} chars, outside 70-160 range` };
  }
  return { check: 'Meta Description', status: 'pass', message: `Description length OK (${length} chars)` };
}

function checkHeadings() {
  const h1s = document.querySelectorAll('h1');
  const issues = [];

  if (h1s.length === 0) {
    issues.push('No H1 found on page');
  } else if (h1s.length > 1) {
    issues.push(`Multiple H1 tags found (${h1s.length})`);
  }

  // Check for skipped levels when opening a new section
  const allHeadings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
  let lastLevel = 0;

  allHeadings.forEach(heading => {
    const level = parseInt(heading.tagName[1]);
    if (lastLevel > 0 && level > lastLevel + 1) {
      issues.push(`Skipped from H${lastLevel} to H${level}: "${heading.textContent.trim().slice(0, 40)}"`);
    }
    lastLevel = level;
  });

  return {
    check: 'Heading Structure',
    status: issues.length === 0 ? 'pass' : 'fail',
    message: issues.length === 0 ? 'Heading hierarchy looks clean' : issues.join('; ')
  };
}

function checkImageAltText() {
  const images = [...document.querySelectorAll('img')];
  const missingAlt = images.filter(img => !img.getAttribute('alt'));

  return {
    check: 'Image Alt Text',
    status: missingAlt.length === 0 ? 'pass' : 'warn',
    message: missingAlt.length === 0
      ? `All ${images.length} images have alt text`
      : `${missingAlt.length} of ${images.length} images missing alt text`
  };
}

function checkCanonical() {
  const canonicals = document.querySelectorAll('link[rel="canonical"]');

  if (canonicals.length === 0) {
    return { check: 'Canonical Tag', status: 'fail', message: 'No canonical tag found' };
  }
  if (canonicals.length > 1) {
    return { check: 'Canonical Tag', status: 'fail', message: `${canonicals.length} canonical tags found, should be exactly 1` };
  }
  return { check: 'Canonical Tag', status: 'pass', message: 'Single canonical tag present' };
}

function runSeoAudit() {
  const results = [
    checkTitle(),
    checkMetaDescription(),
    checkHeadings(),
    checkImageAltText(),
    checkCanonical()
  ];

  let score = 100;
  results.forEach(result => {
    if (result.status === 'fail') score -= 20;
    if (result.status === 'warn') score -= 10;
  });

  return {
    score: Math.max(0, score),
    results: results
  };
}

// Run it and log a readable report
const audit = runSeoAudit();
console.log(`SEO Score: ${audit.score}/100`);
console.table(audit.results);

javascript:(function(){
  // ...paste the checkTitle, checkMetaDescription, checkHeadings,
  // checkImageAltText, checkCanonical, and runSeoAudit functions here...
  const audit = runSeoAudit();
  let report = `SEO Score: ${audit.score}/100\n\n`;
  audit.results.forEach(r => {
    report += `${r.status.toUpperCase()}: ${r.check} — ${r.message}\n`;
  });
  alert(report);
})();