feat: seo checker
This commit is contained in:
Val
parent
dd32488daf
commit
61311386fe
488
app/api/seo-check/route.js
Normal file
488
app/api/seo-check/route.js
Normal file
@ -0,0 +1,488 @@
|
||||
// app/api/seo-check/route.js
|
||||
import { NextResponse } from "next/server";
|
||||
import * as cheerio from "cheerio";
|
||||
|
||||
export async function POST(request) {
|
||||
const startTime = Date.now();
|
||||
|
||||
try {
|
||||
// Validate request
|
||||
let url;
|
||||
try {
|
||||
const body = await request.json();
|
||||
url = body?.url;
|
||||
if (!url) throw new Error("URL is required");
|
||||
} catch (e) {
|
||||
return NextResponse.json(
|
||||
{ error: "Invalid request format" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Validate URL format
|
||||
let parsedUrl;
|
||||
try {
|
||||
parsedUrl = new URL(url);
|
||||
if (!["http:", "https:"].includes(parsedUrl.protocol)) {
|
||||
throw new Error("Invalid protocol");
|
||||
}
|
||||
} catch (e) {
|
||||
return NextResponse.json(
|
||||
{ error: "Please provide a valid HTTP/HTTPS URL" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Fetch HTML with enhanced configuration
|
||||
const controller = new AbortController();
|
||||
const timeout = setTimeout(() => controller.abort(), 15000);
|
||||
|
||||
let response;
|
||||
try {
|
||||
response = await fetch(url, {
|
||||
headers: {
|
||||
"User-Agent":
|
||||
"Mozilla/5.0 (compatible; SEO-Analyzer/1.0; +https://github.com)",
|
||||
Accept: "text/html,application/xhtml+xml",
|
||||
},
|
||||
redirect: "follow",
|
||||
signal: controller.signal,
|
||||
});
|
||||
clearTimeout(timeout);
|
||||
} catch (e) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
error:
|
||||
e.name === "AbortError"
|
||||
? "Request timed out"
|
||||
: `Fetch failed: ${e.message}`,
|
||||
},
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Verify response
|
||||
if (!response.ok) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: `HTTP ${response.status}`,
|
||||
status: response.status,
|
||||
url: response.url,
|
||||
},
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const contentType = response.headers.get("content-type");
|
||||
if (!contentType?.includes("text/html")) {
|
||||
return NextResponse.json(
|
||||
{ error: "URL does not return HTML content" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Parse HTML
|
||||
const html = await response.text();
|
||||
const finalUrl = response.url;
|
||||
let $;
|
||||
try {
|
||||
$ = cheerio.load(html);
|
||||
} catch (e) {
|
||||
return NextResponse.json(
|
||||
{ error: "Failed to parse HTML content" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
|
||||
// Extract security headers
|
||||
const securityHeaders = {
|
||||
https: finalUrl.startsWith("https://"),
|
||||
xFrameOptions: response.headers.get("x-frame-options"),
|
||||
xXSSProtection: response.headers.get("x-xss-protection"),
|
||||
contentTypeOptions: response.headers.get("x-content-type-options"),
|
||||
strictTransportSecurity: response.headers.get(
|
||||
"strict-transport-security"
|
||||
),
|
||||
};
|
||||
|
||||
// Add this new function to analyze charset
|
||||
function analyzeCharset($) {
|
||||
const charsetMeta = $("meta[charset]");
|
||||
if (charsetMeta.length > 0) {
|
||||
return {
|
||||
exists: true,
|
||||
value: charsetMeta.attr("charset")?.toUpperCase() || "UTF-8",
|
||||
declaredInMeta: true,
|
||||
};
|
||||
}
|
||||
|
||||
const httpEquiv = $('meta[http-equiv="Content-Type"]');
|
||||
if (httpEquiv.length > 0) {
|
||||
const content = httpEquiv.attr("content") || "";
|
||||
const charsetMatch = content.match(/charset=([^;]+)/i);
|
||||
if (charsetMatch) {
|
||||
return {
|
||||
exists: true,
|
||||
value: charsetMatch[1].toUpperCase(),
|
||||
declaredInMeta: true,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
exists: false,
|
||||
value: null,
|
||||
declaredInMeta: false,
|
||||
};
|
||||
}
|
||||
|
||||
// Title Tag Analysis
|
||||
function analyzeTitle($) {
|
||||
const title = $("title").first().text().trim();
|
||||
return {
|
||||
exists: title.length > 0,
|
||||
text: title,
|
||||
length: title.length,
|
||||
status:
|
||||
title.length >= 30 && title.length <= 60
|
||||
? "optimal"
|
||||
: title.length < 30
|
||||
? "too_short"
|
||||
: "too_long",
|
||||
};
|
||||
}
|
||||
|
||||
// Meta Description Analysis
|
||||
function analyzeMetaDescription($) {
|
||||
const desc = $('meta[name="description"]').attr("content") || "";
|
||||
return {
|
||||
exists: desc.length > 0,
|
||||
text: desc,
|
||||
length: desc.length,
|
||||
status:
|
||||
desc.length >= 50 && desc.length <= 160
|
||||
? "optimal"
|
||||
: desc.length < 50
|
||||
? "too_short"
|
||||
: "too_long",
|
||||
};
|
||||
}
|
||||
|
||||
// Meta Robots Analysis
|
||||
function analyzeMetaRobots($) {
|
||||
const content = $('meta[name="robots"]').attr("content") || "";
|
||||
return {
|
||||
exists: content.length > 0,
|
||||
content,
|
||||
noindex: content.includes("noindex"),
|
||||
nofollow: content.includes("nofollow"),
|
||||
};
|
||||
}
|
||||
|
||||
// Viewport Analysis
|
||||
function analyzeViewport($) {
|
||||
const viewport = $('meta[name="viewport"]').attr("content") || "";
|
||||
return {
|
||||
exists: viewport.length > 0,
|
||||
content: viewport,
|
||||
mobileFriendly: viewport.includes("width=device-width"),
|
||||
};
|
||||
}
|
||||
|
||||
// Text Analysis Functions
|
||||
function calculateReadabilityScore(text) {
|
||||
// Simple readability score calculation (Flesch-Kincaid approximation)
|
||||
const words = text
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.filter((word) => word.length > 0);
|
||||
const sentences = text.split(/[.!?]+/).filter((s) => s.trim().length > 0);
|
||||
const syllables = words.reduce(
|
||||
(count, word) => count + countSyllables(word),
|
||||
0
|
||||
);
|
||||
|
||||
if (words.length === 0 || sentences.length === 0) return 0;
|
||||
|
||||
const wordsPerSentence = words.length / sentences.length;
|
||||
const syllablesPerWord = syllables / words.length;
|
||||
|
||||
// Flesch Reading Ease Score
|
||||
const score =
|
||||
206.835 - 1.015 * wordsPerSentence - 84.6 * syllablesPerWord;
|
||||
|
||||
// Normalize to 0-100 scale
|
||||
return Math.max(0, Math.min(100, Math.round(score)));
|
||||
}
|
||||
|
||||
function countSyllables(word) {
|
||||
// Simple syllable counting approximation
|
||||
word = word.toLowerCase().replace(/[^a-z]/g, "");
|
||||
if (word.length <= 3) return 1;
|
||||
|
||||
let syllables = word.replace(/[^aeiouy]/g, "").length;
|
||||
syllables -= word.match(/e$/) ? 1 : 0; // Silent e
|
||||
syllables -= word.match(/[aeiouy]{2,}/g)?.length || 0; // Diphthongs
|
||||
return Math.max(1, syllables);
|
||||
}
|
||||
|
||||
// Content Analysis
|
||||
function analyzeContent($) {
|
||||
const bodyText = $("body").text();
|
||||
const words = bodyText
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.filter((word) => word.length > 0);
|
||||
|
||||
return {
|
||||
wordCount: words.length,
|
||||
textLength: bodyText.length,
|
||||
readability: calculateReadabilityScore(bodyText),
|
||||
paragraphCount: $("p").length,
|
||||
listCount: $("ul, ol").length,
|
||||
};
|
||||
}
|
||||
|
||||
// Perform comprehensive analysis
|
||||
const analysis = {
|
||||
url: finalUrl,
|
||||
pageLoadTime: (Date.now() - startTime) / 1000,
|
||||
title: analyzeTitle($),
|
||||
meta: {
|
||||
description: analyzeMetaDescription($),
|
||||
robots: analyzeMetaRobots($),
|
||||
viewport: analyzeViewport($),
|
||||
charset: analyzeCharset($),
|
||||
keywords: $('meta[name="keywords"]').attr("content") || null,
|
||||
},
|
||||
headings: analyzeHeadings($),
|
||||
images: analyzeImages($),
|
||||
links: analyzeLinks($, finalUrl),
|
||||
content: analyzeContent($),
|
||||
technical: {
|
||||
canonical: analyzeCanonical($),
|
||||
language: analyzeLanguage($),
|
||||
schemaMarkup: analyzeSchemaMarkup($),
|
||||
doctype: analyzeDoctype($),
|
||||
},
|
||||
social: {
|
||||
openGraph: analyzeOpenGraph($),
|
||||
twitterCard: analyzeTwitterCards($),
|
||||
},
|
||||
security: securityHeaders,
|
||||
analyzedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
return NextResponse.json(analysis);
|
||||
} catch (error) {
|
||||
console.error("SEO analysis error:", error);
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: "Internal server error during analysis",
|
||||
details:
|
||||
process.env.NODE_ENV === "development" ? error.stack : undefined,
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Analysis Functions
|
||||
function analyzeTitle($) {
|
||||
const title = $("title").first().text().trim();
|
||||
return {
|
||||
exists: title.length > 0,
|
||||
text: title,
|
||||
length: title.length,
|
||||
status:
|
||||
title.length >= 30 && title.length <= 60
|
||||
? "optimal"
|
||||
: title.length < 30
|
||||
? "too_short"
|
||||
: "too_long",
|
||||
};
|
||||
}
|
||||
|
||||
function analyzeMetaDescription($) {
|
||||
const desc = $('meta[name="description"]').attr("content") || "";
|
||||
return {
|
||||
exists: desc.length > 0,
|
||||
text: desc,
|
||||
length: desc.length,
|
||||
status:
|
||||
desc.length >= 50 && desc.length <= 160
|
||||
? "optimal"
|
||||
: desc.length < 50
|
||||
? "too_short"
|
||||
: "too_long",
|
||||
};
|
||||
}
|
||||
|
||||
function analyzeMetaRobots($) {
|
||||
const content = $('meta[name="robots"]').attr("content") || "";
|
||||
return {
|
||||
exists: content.length > 0,
|
||||
content,
|
||||
noindex: content.includes("noindex"),
|
||||
nofollow: content.includes("nofollow"),
|
||||
};
|
||||
}
|
||||
|
||||
function analyzeViewport($) {
|
||||
const viewport = $('meta[name="viewport"]').attr("content") || "";
|
||||
return {
|
||||
exists: viewport.length > 0,
|
||||
content: viewport,
|
||||
mobileFriendly: viewport.includes("width=device-width"),
|
||||
};
|
||||
}
|
||||
|
||||
function analyzeHeadings($) {
|
||||
return {
|
||||
h1: {
|
||||
count: $("h1").length,
|
||||
texts: $("h1")
|
||||
.map((i, el) => $(el).text().trim())
|
||||
.get(),
|
||||
},
|
||||
h2: {
|
||||
count: $("h2").length,
|
||||
texts: $("h2")
|
||||
.map((i, el) => $(el).text().trim())
|
||||
.get(),
|
||||
},
|
||||
h3: {
|
||||
count: $("h3").length,
|
||||
texts: $("h3")
|
||||
.map((i, el) => $(el).text().trim())
|
||||
.get(),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function analyzeImages($) {
|
||||
const images = $("img");
|
||||
const withAlt = images.filter((i, el) => {
|
||||
const alt = $(el).attr("alt");
|
||||
return alt && alt.trim() !== "";
|
||||
}).length;
|
||||
|
||||
return {
|
||||
total: images.length,
|
||||
withAlt,
|
||||
withoutAlt: images.length - withAlt,
|
||||
percentageWithAlt:
|
||||
images.length > 0 ? Math.round((withAlt / images.length) * 100) : 100,
|
||||
};
|
||||
}
|
||||
|
||||
function analyzeLinks($, baseUrl) {
|
||||
const links = $("a[href]");
|
||||
let internal = 0;
|
||||
let external = 0;
|
||||
let nofollow = 0;
|
||||
|
||||
try {
|
||||
const baseDomain = new URL(baseUrl).hostname.replace("www.", "");
|
||||
|
||||
links.each((i, el) => {
|
||||
const href = $(el).attr("href");
|
||||
const rel = $(el).attr("rel") || "";
|
||||
|
||||
if (rel.includes("nofollow")) nofollow++;
|
||||
|
||||
try {
|
||||
const url = new URL(href, baseUrl);
|
||||
if (url.hostname.replace("www.", "") === baseDomain) {
|
||||
internal++;
|
||||
} else {
|
||||
external++;
|
||||
}
|
||||
} catch {
|
||||
internal++; // Relative links
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Link analysis error:", e);
|
||||
}
|
||||
|
||||
return {
|
||||
total: links.length,
|
||||
internal,
|
||||
external,
|
||||
nofollow,
|
||||
nofollowPercentage:
|
||||
links.length > 0 ? Math.round((nofollow / links.length) * 100) : 0,
|
||||
};
|
||||
}
|
||||
|
||||
function analyzeContent($) {
|
||||
const bodyText = $("body").text();
|
||||
const words = bodyText
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.filter((word) => word.length > 0);
|
||||
|
||||
return {
|
||||
wordCount: words.length,
|
||||
textLength: bodyText.length,
|
||||
readability: calculateReadabilityScore(words), // Implement your own formula
|
||||
};
|
||||
}
|
||||
|
||||
function analyzeCanonical($) {
|
||||
const canonical = $('link[rel="canonical"]').attr("href") || "";
|
||||
return {
|
||||
exists: canonical.length > 0,
|
||||
url: canonical,
|
||||
isSelf: canonical === $('meta[property="og:url"]').attr("content"),
|
||||
};
|
||||
}
|
||||
|
||||
function analyzeSchemaMarkup($) {
|
||||
const schemas = $('script[type="application/ld+json"]');
|
||||
const types = [];
|
||||
|
||||
schemas.each((i, el) => {
|
||||
try {
|
||||
const json = JSON.parse($(el).text());
|
||||
if (json["@type"]) types.push(json["@type"]);
|
||||
} catch (e) {
|
||||
console.error("Schema parsing error:", e);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
count: schemas.length,
|
||||
types: [...new Set(types)], // Unique types only
|
||||
};
|
||||
}
|
||||
|
||||
function analyzeOpenGraph($) {
|
||||
return {
|
||||
title: $('meta[property="og:title"]').attr("content") || "",
|
||||
description: $('meta[property="og:description"]').attr("content") || "",
|
||||
image: $('meta[property="og:image"]').attr("content") || "",
|
||||
url: $('meta[property="og:url"]').attr("content") || "",
|
||||
};
|
||||
}
|
||||
|
||||
function analyzeTwitterCards($) {
|
||||
return {
|
||||
card: $('meta[name="twitter:card"]').attr("content") || "",
|
||||
title: $('meta[name="twitter:title"]').attr("content") || "",
|
||||
description: $('meta[name="twitter:description"]').attr("content") || "",
|
||||
image: $('meta[name="twitter:image"]').attr("content") || "",
|
||||
};
|
||||
}
|
||||
|
||||
function analyzeLanguage($) {
|
||||
return $("html").attr("lang") || null;
|
||||
}
|
||||
|
||||
function analyzeDoctype($) {
|
||||
const doctype = $("html")[0]?.prev?.data;
|
||||
return doctype?.includes("<!DOCTYPE") ? doctype : null;
|
||||
}
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
28
app/seo-checker/page.js
Normal file
28
app/seo-checker/page.js
Normal file
@ -0,0 +1,28 @@
|
||||
import Layout from "@/components/layout/Layout";
|
||||
import SEOChecker from "@/components/seoChecker";
|
||||
import Head from "next/head";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Layout headerStyle={4} footerStyle={3} breadcrumbTitle="SEO Checker">
|
||||
<main className="container mx-auto py-12 px-4">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
SEO Analyzer
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
Get a comprehensive SEO report for any webpage
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<SEOChecker />
|
||||
</main>
|
||||
|
||||
<footer className="bg-white py-8 border-t">
|
||||
<div className="container mx-auto px-4 text-center text-gray-500">
|
||||
<p>© {new Date().getFullYear()} SEO Analyzer Tool</p>
|
||||
</div>
|
||||
</footer>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@ -200,7 +200,7 @@ export default function ServicesDetails3() {
|
||||
<h4 className="sidebar__widget-title">SEO Checker</h4>
|
||||
<div className="sidebar__brochure sidebar__brochure-two">
|
||||
<p>Check your website's SEO performance.</p>
|
||||
<Link href="/#seocheck">SEO Checker</Link>
|
||||
<Link href="/seo-checker">SEO Checker</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar__widget sidebar__widget-two">
|
||||
|
||||
@ -229,7 +229,7 @@ export default function ServicesDetails3() {
|
||||
<h4 className="sidebar__widget-title">SEO Checker</h4>
|
||||
<div className="sidebar__brochure sidebar__brochure-two">
|
||||
<p>Check your website's SEO performance.</p>
|
||||
<Link href="/#seocheck">SEO Checker</Link>
|
||||
<Link href="/seo-checker">SEO Checker</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar__widget sidebar__widget-two">
|
||||
|
||||
@ -261,7 +261,7 @@ export default function ServicesDetails3() {
|
||||
<h4 className="sidebar__widget-title">SEO Checker</h4>
|
||||
<div className="sidebar__brochure sidebar__brochure-two">
|
||||
<p>Check your website's SEO performance.</p>
|
||||
<Link href="/#seocheck">SEO Checker</Link>
|
||||
<Link href="/seo-checker">SEO Checker</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar__widget sidebar__widget-two">
|
||||
|
||||
@ -230,7 +230,7 @@ export default function ServicesDetails3() {
|
||||
<h4 className="sidebar__widget-title">SEO Checker</h4>
|
||||
<div className="sidebar__brochure sidebar__brochure-two">
|
||||
<p>Check your website's SEO performance.</p>
|
||||
<Link href="/#seocheck">SEO Checker</Link>
|
||||
<Link href="/seo-checker">SEO Checker</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar__widget sidebar__widget-two">
|
||||
|
||||
@ -228,7 +228,7 @@ export default function ServicesDetails3() {
|
||||
<h4 className="sidebar__widget-title">SEO Checker</h4>
|
||||
<div className="sidebar__brochure sidebar__brochure-two">
|
||||
<p>Check your website's SEO performance.</p>
|
||||
<Link href="/#seocheck">SEO Checker</Link>
|
||||
<Link href="/seo-checker">SEO Checker</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar__widget sidebar__widget-two">
|
||||
|
||||
@ -236,7 +236,7 @@ export default function ServicesDetails3() {
|
||||
<h4 className="sidebar__widget-title">SEO Checker</h4>
|
||||
<div className="sidebar__brochure sidebar__brochure-two">
|
||||
<p>Check your website's SEO performance.</p>
|
||||
<Link href="/#seocheck">SEO Checker</Link>
|
||||
<Link href="/seo-checker">SEO Checker</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar__widget sidebar__widget-two">
|
||||
|
||||
@ -235,7 +235,7 @@ export default function ServicesDetails3() {
|
||||
<h4 className="sidebar__widget-title">SEO Checker</h4>
|
||||
<div className="sidebar__brochure sidebar__brochure-two">
|
||||
<p>Check your website's SEO performance.</p>
|
||||
<Link href="/#seocheck">SEO Checker</Link>
|
||||
<Link href="/seo-checker">SEO Checker</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar__widget sidebar__widget-two">
|
||||
|
||||
@ -230,7 +230,7 @@ export default function ServicesDetails3() {
|
||||
<h4 className="sidebar__widget-title">SEO Checker</h4>
|
||||
<div className="sidebar__brochure sidebar__brochure-two">
|
||||
<p>Check your website's SEO performance.</p>
|
||||
<Link href="/#seocheck">SEO Checker</Link>
|
||||
<Link href="/seo-checker">SEO Checker</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar__widget sidebar__widget-two">
|
||||
|
||||
@ -232,7 +232,7 @@ export default function ServicesDetails3() {
|
||||
<h4 className="sidebar__widget-title">SEO Checker</h4>
|
||||
<div className="sidebar__brochure sidebar__brochure-two">
|
||||
<p>Check your website's SEO performance.</p>
|
||||
<Link href="/#seocheck">SEO Checker</Link>
|
||||
<Link href="/seo-checker">SEO Checker</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar__widget sidebar__widget-two">
|
||||
|
||||
@ -276,7 +276,7 @@ export default function ServicesDetails3() {
|
||||
<h4 className="sidebar__widget-title">SEO Checker</h4>
|
||||
<div className="sidebar__brochure sidebar__brochure-two">
|
||||
<p>Check your website's SEO performance.</p>
|
||||
<Link href="/#seocheck">SEO Checker</Link>
|
||||
<Link href="/seo-checker">SEO Checker</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar__widget sidebar__widget-two">
|
||||
|
||||
@ -55,7 +55,7 @@ export default function Menu() {
|
||||
</Link>
|
||||
</li> */}
|
||||
<li>
|
||||
<Link href="/#seocheck">SEO checker</Link>
|
||||
<Link href="/seo-checker">SEO checker</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/blog" className={isActive("/blog") ? "active" : ""}>
|
||||
|
||||
719
components/seoChecker.js
Normal file
719
components/seoChecker.js
Normal file
@ -0,0 +1,719 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
FiCheckCircle,
|
||||
FiAlertTriangle,
|
||||
FiInfo,
|
||||
FiDownload,
|
||||
FiExternalLink,
|
||||
} from "react-icons/fi";
|
||||
|
||||
const SEOChecker = () => {
|
||||
const [url, setUrl] = useState("");
|
||||
const [seoData, setSeoData] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [activeTab, setActiveTab] = useState("summary");
|
||||
|
||||
const checkSEO = async () => {
|
||||
if (!url) {
|
||||
setError("Please enter a URL");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setSeoData(null);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/seo-check", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ url }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || "Failed to analyze URL");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setSeoData(data);
|
||||
setActiveTab("summary");
|
||||
} catch (err) {
|
||||
setError(err.message || "Failed to check SEO");
|
||||
console.error("SEO check error:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const calculateScores = (data) => {
|
||||
if (!data) return { score: 0, deductions: [], categoryScores: {} };
|
||||
|
||||
let score = 100;
|
||||
const deductions = [];
|
||||
|
||||
// Title (15 points)
|
||||
if (!data.title.exists) {
|
||||
score -= 15;
|
||||
deductions.push({
|
||||
item: "Title Tag",
|
||||
points: -15,
|
||||
message: "Missing completely",
|
||||
});
|
||||
} else {
|
||||
if (data.title.text.length < 30) {
|
||||
score -= 7;
|
||||
deductions.push({
|
||||
item: "Title Length",
|
||||
points: -7,
|
||||
message: "Too short (under 30 chars)",
|
||||
});
|
||||
} else if (data.title.text.length > 60) {
|
||||
score -= 5;
|
||||
deductions.push({
|
||||
item: "Title Length",
|
||||
points: -5,
|
||||
message: "Too long (over 60 chars)",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Meta Description (10 points)
|
||||
if (!data.meta.description.exists) {
|
||||
score -= 10;
|
||||
deductions.push({
|
||||
item: "Meta Description",
|
||||
points: -10,
|
||||
message: "Missing completely",
|
||||
});
|
||||
} else {
|
||||
if (data.meta.description.text.length < 50) {
|
||||
score -= 5;
|
||||
deductions.push({
|
||||
item: "Meta Description",
|
||||
points: -5,
|
||||
message: "Too short (under 50 chars)",
|
||||
});
|
||||
} else if (data.meta.description.text.length > 160) {
|
||||
score -= 3;
|
||||
deductions.push({
|
||||
item: "Meta Description",
|
||||
points: -3,
|
||||
message: "Too long (over 160 chars)",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Headings (15 points)
|
||||
if (data.headings.h1.count === 0) {
|
||||
score -= 10;
|
||||
deductions.push({
|
||||
item: "H1 Heading",
|
||||
points: -10,
|
||||
message: "Missing H1 tag",
|
||||
});
|
||||
} else if (data.headings.h1.count > 1) {
|
||||
score -= 7;
|
||||
deductions.push({
|
||||
item: "H1 Heading",
|
||||
points: -7,
|
||||
message: "Multiple H1 tags",
|
||||
});
|
||||
}
|
||||
|
||||
if (data.headings.h2.count < 2) {
|
||||
score -= 3;
|
||||
deductions.push({
|
||||
item: "H2 Headings",
|
||||
points: -3,
|
||||
message: "Not enough H2 tags",
|
||||
});
|
||||
}
|
||||
|
||||
// Images (10 points)
|
||||
if (data.images?.withoutAlt > 0) {
|
||||
const deduction = Math.min(10, data.images.withoutAlt * 2);
|
||||
score -= deduction;
|
||||
deductions.push({
|
||||
item: "Image Alt Tags",
|
||||
points: -deduction,
|
||||
message: `${data.images.withoutAlt} images missing alt text`,
|
||||
});
|
||||
}
|
||||
|
||||
// Links (10 points)
|
||||
if (data.links?.internal < 5) {
|
||||
score -= 5;
|
||||
deductions.push({
|
||||
item: "Internal Links",
|
||||
points: -5,
|
||||
message: "Few internal links",
|
||||
});
|
||||
}
|
||||
|
||||
if (data.links?.external === 0) {
|
||||
score -= 2;
|
||||
deductions.push({
|
||||
item: "External Links",
|
||||
points: -2,
|
||||
message: "No external links",
|
||||
});
|
||||
}
|
||||
|
||||
// Mobile (10 points)
|
||||
if (!data.meta?.viewport?.mobileFriendly) {
|
||||
score -= 10;
|
||||
deductions.push({
|
||||
item: "Mobile Friendly",
|
||||
points: -10,
|
||||
message: "No responsive viewport",
|
||||
});
|
||||
}
|
||||
|
||||
// Performance (10 points)
|
||||
if (data.pageLoadTime > 3) {
|
||||
const deduction = Math.min(10, Math.floor(data.pageLoadTime - 2) * 2);
|
||||
score -= deduction;
|
||||
deductions.push({
|
||||
item: "Page Speed",
|
||||
points: -deduction,
|
||||
message: `Slow load time (${data.pageLoadTime}s)`,
|
||||
});
|
||||
}
|
||||
|
||||
// Technical SEO (20 points)
|
||||
if (!data.technical?.canonical?.exists) {
|
||||
score -= 5;
|
||||
deductions.push({
|
||||
item: "Canonical URL",
|
||||
points: -5,
|
||||
message: "Missing canonical tag",
|
||||
});
|
||||
}
|
||||
|
||||
if (!data.security?.https) {
|
||||
score -= 5;
|
||||
deductions.push({
|
||||
item: "HTTPS",
|
||||
points: -5,
|
||||
message: "Not using HTTPS",
|
||||
});
|
||||
}
|
||||
|
||||
if (data.technical?.schemaMarkup?.count === 0) {
|
||||
score -= 5;
|
||||
deductions.push({
|
||||
item: "Schema Markup",
|
||||
points: -5,
|
||||
message: "Missing structured data",
|
||||
});
|
||||
}
|
||||
|
||||
if (!data.meta?.robots?.content) {
|
||||
score -= 5;
|
||||
deductions.push({
|
||||
item: "Robots Meta",
|
||||
points: -5,
|
||||
message: "Missing robots meta tag",
|
||||
});
|
||||
}
|
||||
|
||||
// Calculate category scores
|
||||
const categoryScores = {
|
||||
onPage: calculateOnPageScore(data),
|
||||
technical: calculateTechnicalScore(data),
|
||||
content: calculateContentScore(data),
|
||||
mobile: calculateMobileScore(data),
|
||||
};
|
||||
|
||||
return {
|
||||
score: Math.max(0, Math.round(score)),
|
||||
deductions,
|
||||
categoryScores,
|
||||
};
|
||||
};
|
||||
|
||||
const calculateOnPageScore = (data) => {
|
||||
let score = 30;
|
||||
if (!data.title.exists) score -= 15;
|
||||
if (!data.meta.description.exists) score -= 10;
|
||||
if (data.headings.h1.count !== 1) score -= 5;
|
||||
return Math.max(0, score);
|
||||
};
|
||||
|
||||
const calculateTechnicalScore = (data) => {
|
||||
let score = 30;
|
||||
if (!data.technical.canonical.exists) score -= 5;
|
||||
if (!data.security.https) score -= 5;
|
||||
if (data.technical.schemaMarkup.count === 0) score -= 5;
|
||||
if (!data.meta.robots.content) score -= 5;
|
||||
return Math.max(0, score);
|
||||
};
|
||||
|
||||
const calculateContentScore = (data) => {
|
||||
let score = 20;
|
||||
if (data.content.wordCount < 300) score -= 5;
|
||||
if (data.content.readability < 60) score -= 5;
|
||||
if (data.images.withoutAlt > 0) score -= 5;
|
||||
return Math.max(0, score);
|
||||
};
|
||||
|
||||
const calculateMobileScore = (data) => {
|
||||
let score = 20;
|
||||
if (!data.meta.viewport.mobileFriendly) score -= 10;
|
||||
if (data.pageLoadTime > 3) score -= 5;
|
||||
return Math.max(0, score);
|
||||
};
|
||||
|
||||
const renderReportSection = () => {
|
||||
if (!seoData) return null;
|
||||
|
||||
const { score, deductions, categoryScores } = calculateScores(seoData);
|
||||
|
||||
switch (activeTab) {
|
||||
case "summary":
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<ScoreCard
|
||||
title="Overall Score"
|
||||
score={score}
|
||||
max={100}
|
||||
description="Composite SEO health score"
|
||||
/>
|
||||
<ScoreCard
|
||||
title="On-Page SEO"
|
||||
score={categoryScores.onPage}
|
||||
max={30}
|
||||
description="Title, meta, headings"
|
||||
/>
|
||||
<ScoreCard
|
||||
title="Technical SEO"
|
||||
score={categoryScores.technical}
|
||||
max={30}
|
||||
description="Canonical, schema, security"
|
||||
/>
|
||||
<ScoreCard
|
||||
title="Content Quality"
|
||||
score={categoryScores.content}
|
||||
max={20}
|
||||
description="Word count, readability"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
Key Recommendations
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
{deductions
|
||||
.sort((a, b) => a.points - b.points)
|
||||
.map((item, i) => (
|
||||
<li key={i} className="flex items-start">
|
||||
{item.points < -7 ? (
|
||||
<FiAlertTriangle className="text-red-500 mt-1 mr-2 flex-shrink-0" />
|
||||
) : (
|
||||
<FiInfo className="text-yellow-500 mt-1 mr-2 flex-shrink-0" />
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">{item.item}</span>
|
||||
<span
|
||||
className={`font-mono ${
|
||||
item.points < 0
|
||||
? "text-red-500"
|
||||
: "text-green-500"
|
||||
}`}
|
||||
>
|
||||
{item.points}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm">{item.message}</p>
|
||||
<div className="flex justify-between mt-1">
|
||||
<span className="text-xs text-gray-500">
|
||||
Priority:{" "}
|
||||
{item.points < -7
|
||||
? "High"
|
||||
: item.points < -4
|
||||
? "Medium"
|
||||
: "Low"}
|
||||
</span>
|
||||
{item.item === "HTTPS" && !seoData.security.https && (
|
||||
<a
|
||||
href={`https://${seoData.url.replace(
|
||||
/^https?:\/\//,
|
||||
""
|
||||
)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-blue-500 flex items-center"
|
||||
>
|
||||
Try HTTPS <FiExternalLink className="ml-1" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "details":
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Section title="On-Page SEO">
|
||||
<CheckItem
|
||||
label="Title Tag"
|
||||
status={seoData.title.exists ? "good" : "bad"}
|
||||
goodText={`"${seoData.title.text}" (${seoData.title.text.length} chars)`}
|
||||
badText="Missing"
|
||||
recommendation="Include 1 title tag (50-60 chars)"
|
||||
/>
|
||||
<CheckItem
|
||||
label="Meta Description"
|
||||
status={seoData.meta.description.exists ? "good" : "bad"}
|
||||
goodText={`"${seoData.meta.description.text}" (${seoData.meta.description.text.length} chars)`}
|
||||
badText="Missing"
|
||||
recommendation="Write a compelling description (120-160 chars)"
|
||||
/>
|
||||
<CheckItem
|
||||
label="Heading Structure"
|
||||
status={
|
||||
seoData.headings.h1.count === 1 &&
|
||||
seoData.headings.h2.count >= 2
|
||||
? "good"
|
||||
: "bad"
|
||||
}
|
||||
goodText={`1 H1 and ${seoData.headings.h2.count} H2 headings`}
|
||||
badText={
|
||||
seoData.headings.h1.count === 0
|
||||
? "No H1 heading"
|
||||
: seoData.headings.h1.count > 1
|
||||
? "Multiple H1 headings"
|
||||
: "Not enough H2 headings"
|
||||
}
|
||||
recommendation="Use one H1 and multiple H2s for proper structure"
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section title="Technical SEO">
|
||||
<CheckItem
|
||||
label="Canonical URL"
|
||||
status={seoData.technical.canonical.exists ? "good" : "bad"}
|
||||
goodText={`Points to: ${seoData.technical.canonical.url}`}
|
||||
badText="Missing"
|
||||
recommendation="Add canonical URL tag to avoid duplicate content"
|
||||
/>
|
||||
<CheckItem
|
||||
label="Schema Markup"
|
||||
status={
|
||||
seoData.technical.schemaMarkup.count > 0 ? "good" : "bad"
|
||||
}
|
||||
goodText={`${seoData.technical.schemaMarkup.count} schema items found`}
|
||||
badText="Missing"
|
||||
recommendation="Implement structured data for rich snippets"
|
||||
/>
|
||||
<CheckItem
|
||||
label="HTTPS"
|
||||
status={seoData.security.https ? "good" : "bad"}
|
||||
goodText="Secure connection"
|
||||
badText="Not secure"
|
||||
recommendation="Install SSL certificate"
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section title="Content Quality">
|
||||
<CheckItem
|
||||
label="Word Count"
|
||||
status={seoData.content.wordCount >= 300 ? "good" : "bad"}
|
||||
goodText={`${seoData.content.wordCount} words (good length)`}
|
||||
badText={`${seoData.content.wordCount} words (too short)`}
|
||||
recommendation="Aim for at least 300 words of quality content"
|
||||
/>
|
||||
<CheckItem
|
||||
label="Readability"
|
||||
status={seoData.content.readability >= 60 ? "good" : "bad"}
|
||||
goodText={`Score: ${seoData.content.readability}/100 (good)`}
|
||||
badText={`Score: ${seoData.content.readability}/100 (needs improvement)`}
|
||||
recommendation="Simplify complex sentences and reduce jargon"
|
||||
/>
|
||||
<CheckItem
|
||||
label="Image Alt Text"
|
||||
status={seoData.images.withoutAlt === 0 ? "good" : "bad"}
|
||||
goodText="All images have alt text"
|
||||
badText={`${seoData.images.withoutAlt} images missing alt text`}
|
||||
recommendation="Add descriptive alt text to all images"
|
||||
/>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "full-report":
|
||||
return (
|
||||
<div className="space-y-8 bg-white p-6 rounded-lg shadow">
|
||||
<div className="prose max-w-none">
|
||||
<h2 className="text-2xl font-bold">Comprehensive SEO Report</h2>
|
||||
<p className="text-gray-600">
|
||||
Generated for {seoData.url} on{" "}
|
||||
{new Date(seoData.analyzedAt).toLocaleString()}
|
||||
</p>
|
||||
|
||||
<div className="my-6 p-4 bg-gray-50 rounded-lg">
|
||||
<h3 className="text-xl font-semibold mb-2">
|
||||
Executive Summary
|
||||
</h3>
|
||||
<p>
|
||||
Overall SEO Score: <strong>{score}/100</strong> -{" "}
|
||||
{score >= 80
|
||||
? "Excellent"
|
||||
: score >= 60
|
||||
? "Good"
|
||||
: score >= 40
|
||||
? "Needs Improvement"
|
||||
: "Poor"}
|
||||
</p>
|
||||
<p className="mt-2">
|
||||
{score >= 80
|
||||
? "Your site has strong SEO fundamentals."
|
||||
: score >= 60
|
||||
? "Your site has decent SEO but could use some improvements."
|
||||
: score >= 40
|
||||
? "Your site needs significant SEO improvements."
|
||||
: "Your site requires urgent SEO attention."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold mt-8 mb-4">
|
||||
Detailed Findings
|
||||
</h3>
|
||||
|
||||
<h4 className="font-semibold mt-6">On-Page SEO</h4>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li>
|
||||
<strong>Title Tag:</strong>{" "}
|
||||
{seoData.title.exists
|
||||
? `"${seoData.title.text}" (${seoData.title.text.length} characters, ${seoData.title.status})`
|
||||
: "Missing"}
|
||||
</li>
|
||||
<li>
|
||||
<strong>Meta Description:</strong>{" "}
|
||||
{seoData.meta.description.exists
|
||||
? `"${seoData.meta.description.text}" (${seoData.meta.description.text.length} characters, ${seoData.meta.description.status})`
|
||||
: "Missing"}
|
||||
</li>
|
||||
<li>
|
||||
<strong>Headings:</strong> {seoData.headings.h1.count} H1,{" "}
|
||||
{seoData.headings.h2.count} H2, {seoData.headings.h3.count} H3
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4 className="font-semibold mt-6">Technical SEO</h4>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li>
|
||||
<strong>Canonical URL:</strong>{" "}
|
||||
{seoData.technical.canonical.exists
|
||||
? seoData.technical.canonical.url
|
||||
: "Missing"}
|
||||
</li>
|
||||
<li>
|
||||
<strong>Schema Markup:</strong>{" "}
|
||||
{seoData.technical.schemaMarkup.count > 0
|
||||
? `${seoData.technical.schemaMarkup.count} schema items found`
|
||||
: "None detected"}
|
||||
</li>
|
||||
<li>
|
||||
<strong>HTTPS:</strong>{" "}
|
||||
{seoData.security.https ? "Enabled" : "Not enabled"}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4 className="font-semibold mt-6">Content Quality</h4>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li>
|
||||
<strong>Word Count:</strong> {seoData.content.wordCount} words
|
||||
</li>
|
||||
<li>
|
||||
<strong>Readability:</strong> Score{" "}
|
||||
{seoData.content.readability}/100
|
||||
</li>
|
||||
<li>
|
||||
<strong>Images:</strong> {seoData.images.total} total,{" "}
|
||||
{seoData.images.withoutAlt} missing alt text
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={() => window.print()}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-md flex items-center"
|
||||
>
|
||||
<FiDownload className="mr-2" />
|
||||
Download PDF Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-6 bg-white rounded-lg shadow-lg">
|
||||
<div className="mb-8">
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<input
|
||||
type="text"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
placeholder="Enter URL (e.g., https://example.com)"
|
||||
className="flex-1 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
onKeyDown={(e) => e.key === "Enter" && checkSEO()}
|
||||
/>
|
||||
<button
|
||||
onClick={checkSEO}
|
||||
disabled={loading || !url}
|
||||
className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 disabled:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center justify-center min-w-[150px]"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<svg
|
||||
className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
Analyzing...
|
||||
</>
|
||||
) : (
|
||||
"Run Full Analysis"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{error && (
|
||||
<p className="mt-2 text-sm text-red-600 flex items-center">
|
||||
<FiAlertTriangle className="mr-1" /> {error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<div className="text-center py-12">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto"></div>
|
||||
<p className="mt-4 text-gray-600">
|
||||
Running comprehensive SEO analysis...
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">This may take 10-15 seconds</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{seoData && (
|
||||
<>
|
||||
<div className="border-b border-gray-200 mb-6">
|
||||
<nav className="flex space-x-4 overflow-x-auto pb-2">
|
||||
{["summary", "details", "full-report"].map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-4 py-2 text-sm font-medium whitespace-nowrap ${
|
||||
activeTab === tab
|
||||
? "border-b-2 border-blue-500 text-blue-600"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
>
|
||||
{tab
|
||||
.split("-")
|
||||
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
|
||||
.join(" ")}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{renderReportSection()}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Helper Components
|
||||
const ScoreCard = ({ title, score, max, description }) => {
|
||||
const percentage = (score / max) * 100;
|
||||
const getColor = () => {
|
||||
if (percentage >= 80) return "bg-green-500";
|
||||
if (percentage >= 50) return "bg-yellow-500";
|
||||
return "bg-red-500";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white p-4 rounded-lg shadow border border-gray-100">
|
||||
<h3 className="font-medium text-gray-700">{title}</h3>
|
||||
<div className="flex items-end mt-2">
|
||||
<span className="text-3xl font-bold mr-2">{score}</span>
|
||||
<span className="text-gray-500">/ {max}</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2 mt-2">
|
||||
<div
|
||||
className={`h-2 rounded-full ${getColor()}`}
|
||||
style={{ width: `${percentage}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-2">{description}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Section = ({ title, children }) => (
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<h3 className="text-lg font-semibold mb-4">{title}</h3>
|
||||
<div className="space-y-4">{children}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const CheckItem = ({ label, status, goodText, badText, recommendation }) => (
|
||||
<div className="flex items-start">
|
||||
<div className="mr-3 mt-1">
|
||||
{status === "good" ? (
|
||||
<FiCheckCircle className="text-green-500" />
|
||||
) : (
|
||||
<FiAlertTriangle className="text-red-500" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{label}</p>
|
||||
<p className="text-gray-600 text-sm">
|
||||
{status === "good" ? goodText : badText}
|
||||
</p>
|
||||
{status !== "good" && recommendation && (
|
||||
<p className="text-blue-600 text-sm mt-1">
|
||||
Recommendation: {recommendation}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default SEOChecker;
|
||||
1125
package-lock.json
generated
1125
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -20,20 +20,24 @@
|
||||
"@supabase/auth-ui-react": "^0.4.7",
|
||||
"@supabase/ssr": "^0.5.1",
|
||||
"@supabase/supabase-js": "^2.45.2",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/postcss": "^4.1.11",
|
||||
"aos": "^2.3.4",
|
||||
"axios": "^1.7.2",
|
||||
"axios": "^1.10.0",
|
||||
"cheerio": "^1.1.0",
|
||||
"cookies-next": "^4.2.1",
|
||||
"lucide-react": "^0.525.0",
|
||||
"next": "^14.2.5",
|
||||
"nocodb-sdk": "^0.255.0",
|
||||
"node-fetch": "^3.3.2",
|
||||
"postcss": "^8.5.6",
|
||||
"puppeteer": "^24.11.2",
|
||||
"react": "18.2.0",
|
||||
"react-curved-text": "^3.0.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"react-hot-toast": "^2.5.2",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-modal-video": "^2.0.1",
|
||||
"react-phone-number-input": "^3.4.4",
|
||||
"resend": "^3.5.0",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user