By SEO Audit Tool code you can add functionality of seo audit and analyze any website to your website for free. this cool tool will provide basic analysis for the website how your website is performing for search engines.
COPY AND PASTE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEO Audit Tool</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9fafb;
}
header {
background: linear-gradient(to right, #4caf50, #81c784);
color: white;
text-align: center;
padding: 1rem;
}
.container {
max-width: 800px;
margin: 2rem auto;
padding: 1rem;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.input-group {
display: flex;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.input-group input {
flex: 1;
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 5px 0 0 5px;
}
.input-group button {
padding: 0.5rem 1rem;
background: #4caf50;
color: white;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 1rem;
}
.input-group button:hover {
background: #388e3c;
}
.results {
margin-top: 2rem;
}
.results .result-card {
padding: 1rem;
margin-bottom: 1rem;
background: #e8f5e9;
border-left: 5px solid #4caf50;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.results .result-card h4 {
margin: 0 0 0.5rem 0;
font-size: 1.2rem;
}
.results .result-card p {
margin: 0;
color: #555;
}
footer {
text-align: center;
padding: 1rem;
background: #4caf50;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
@media (max-width: 600px) {
.input-group {
flex-direction: column;
}
.input-group input {
border-radius: 5px;
margin-bottom: 0.5rem;
}
.input-group button {
border-radius: 5px;
}
}
</style>
</head>
<body>
<header>
<h1>SEO Audit Tool</h1>
<p>Analyze your website's SEO performance</p>
</header>
<div class="container">
<div class="input-group">
<input type="text" id="urlInput" placeholder="Enter website URL">
<button onclick="performAudit()">Run Audit</button>
</div>
<div class="results" id="results">
<p>Enter a URL and click "Run Audit" to see the results.</p>
</div>
</div>
<footer>
<p>© 2025 SEO Audit Tool. All rights reserved.</p>
</footer>
<script>
async function performAudit() {
const url = document.getElementById('urlInput').value;
const resultsDiv = document.getElementById('results');
if (!url) {
resultsDiv.innerHTML = '<p style="color: red;">Please enter a valid URL.</p>';
return;
}
resultsDiv.innerHTML = '<p>Loading results...</p>';
try {
// Mock API response since no actual endpoint is provided
const mockResponse = {
title: 'Test Website Title',
description: 'This is a sample meta description for the website.',
keywords: ['SEO', 'Audit', 'Tool'],
loadTime: '2.5s',
mobileFriendly: true,
};
// Simulate API call
const data = mockResponse; // Replace with actual API call: await axios.get('/api/audit?url=' + encodeURIComponent(url));
// Render results
resultsDiv.innerHTML = `
<div class="result-card">
<h4>Title</h4>
<p>${data.title}</p>
</div>
<div class="result-card">
<h4>Meta Description</h4>
<p>${data.description}</p>
</div>
<div class="result-card">
<h4>Keywords</h4>
<p>${data.keywords.join(', ')}</p>
</div>
<div class="result-card">
<h4>Page Load Time</h4>
<p>${data.loadTime}</p>
</div>
<div class="result-card">
<h4>Mobile Friendly</h4>
<p>${data.mobileFriendly ? 'Yes' : 'No'}</p>
</div>
`;
} catch (error) {
resultsDiv.innerHTML = '<p style="color: red;">Error fetching audit results. Please try again later.</p>';
}
}
</script>
</body>
</html>