import pageData from "~/data/seo-snapshot-app.json"; export function SEOSnapshot() { const { data, updateData } = useData(pageData); const [url, setUrl] = React.useState(''); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); const analysis = data.analysis || null; const history = data.history || []; const analyzeURL = async () => { if (!url.trim()) { setError('Please enter a valid URL'); return; } // Ensure URL has protocol let targetUrl = url.trim(); if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) { targetUrl = 'https://' + targetUrl; } setLoading(true); setError(''); try { // Try multiple CORS proxy services const proxies = [ `https://corsproxy.io/?${encodeURIComponent(targetUrl)}`, `https://api.allorigins.win/get?url=${encodeURIComponent(targetUrl)}`, `https://cors-anywhere.herokuapp.com/${targetUrl}` ]; let response; let responseData; let htmlContent; for (let i = 0; i < proxies.length; i++) { try { response = await fetch(proxies[i]); if (i === 1) { // allorigins format responseData = await response.json(); if (responseData.contents) { htmlContent = responseData.contents; break; } } else { // direct HTML format if (response.ok) { htmlContent = await response.text(); break; } } } catch (proxyError) { console.log(`Proxy ${i + 1} failed:`, proxyError); if (i === proxies.length - 1) { throw new Error('All proxy services failed'); } } } if (!htmlContent) { throw new Error('Failed to fetch page content'); } // Parse HTML content const parser = new DOMParser(); const doc = parser.parseFromString(htmlContent, 'text/html'); // Extract SEO elements const title = doc.querySelector('title')?.textContent || ''; const metaDescription = doc.querySelector('meta[name="description"]')?.getAttribute('content') || ''; const h1Tags = Array.from(doc.querySelectorAll('h1')).map(h => h.textContent.trim()); const h2Tags = Array.from(doc.querySelectorAll('h2')).map(h => h.textContent.trim()); const images = Array.from(doc.querySelectorAll('img')); const imagesWithAlt = images.filter(img => img.getAttribute('alt')); const imagesWithoutAlt = images.length - imagesWithAlt.length; // Calculate SEO score let score = 0; const suggestions = []; // Title check (25 points) if (title.length > 0) { if (title.length >= 30 && title.length <= 60) { score += 25; } else if (title.length > 0) { score += 15; suggestions.push(title.length < 30 ? 'Title is too short (aim for 30-60 characters)' : 'Title is too long (aim for 30-60 characters)'); } } else { suggestions.push('Missing page title'); } // Meta description check (25 points) if (metaDescription.length > 0) { if (metaDescription.length >= 120 && metaDescription.length <= 160) { score += 25; } else if (metaDescription.length > 0) { score += 15; suggestions.push(metaDescription.length < 120 ? 'Meta description is too short (aim for 120-160 characters)' : 'Meta description is too long (aim for 120-160 characters)'); } } else { suggestions.push('Missing meta description'); } // H1 tags check (20 points) if (h1Tags.length === 1) { score += 20; } else if (h1Tags.length === 0) { suggestions.push('Missing H1 tag'); } else { score += 10; suggestions.push('Multiple H1 tags found (should have exactly one)'); } // H2 tags check (15 points) if (h2Tags.length > 0) { score += 15; } else { suggestions.push('No H2 tags found (good for content structure)'); } // Image alt text check (15 points) if (images.length === 0) { score += 15; } else { const altRatio = imagesWithAlt.length / images.length; if (altRatio === 1) { score += 15; } else if (altRatio >= 0.8) { score += 10; suggestions.push(`${imagesWithoutAlt} images missing alt text`); } else { score += 5; suggestions.push(`${imagesWithoutAlt} images missing alt text`); } } const newAnalysis = { url: targetUrl, score, title, metaDescription, h1Count: h1Tags.length, h2Count: h2Tags.length, totalImages: images.length, imagesWithAlt: imagesWithAlt.length, imagesWithoutAlt, suggestions: suggestions.slice(0, 5), timestamp: new Date().toISOString() }; updateData({ ...data, analysis: newAnalysis, history: [newAnalysis, ...history.slice(0, 4)] }); } catch (err) { console.error('Analysis error:', err); setError(`Failed to analyze URL: ${err.message}. Try a different URL or check if the site allows cross-origin requests.`); } finally { setLoading(false); } }; const getScoreColor = (score) => { if (score >= 80) return 'text-green-600'; if (score >= 60) return 'text-yellow-600'; return 'text-red-600'; }; const getScoreBg = (score) => { if (score >= 80) return 'bg-green-100 dark:bg-green-900'; if (score >= 60) return 'bg-yellow-100 dark:bg-yellow-900'; return 'bg-red-100 dark:bg-red-900'; }; return (

🔍 SEO Snapshot Enter a URL to get an instant SEO analysis with actionable insights

setUrl(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && analyzeURL()} className="flex-1" />

{error && ( {error} )} {analysis && (

SEO Score

{analysis.score}/100

{analysis.score >= 80 ? 'Excellent' : analysis.score >= 60 ? 'Good' : 'Needs Improvement'}

Key Metrics

Title Length: = 30 && analysis.title.length <= 60 ? 'default' : 'destructive'}> {analysis.title.length} chars

Meta Description: = 120 && analysis.metaDescription.length <= 160 ? 'default' : 'destructive'}> {analysis.metaDescription.length} chars

H1 Tags: {analysis.h1Count}

H2 Tags: 0 ? 'default' : 'secondary'}> {analysis.h2Count}

Images with Alt: {analysis.imagesWithAlt}/{analysis.totalImages}

)} {analysis && analysis.suggestions.length > 0 && ( Top 5 Improvement Suggestions

⚡ {suggestion}

)} {analysis && ( Page Details

Title

{analysis.title || 'No title found'}

Meta Description

{analysis.metaDescription || 'No meta description found'}

)} {history.length > 0 && ( Recent Analyses

{history.map((item, index) => (

{item.url}

{new Date(item.timestamp).toLocaleDateString()}

{item.score}/100

))}

)}

); }