<!DOCTYPE html>
<html>
<head>
<title>SEO Audit</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
margin: 20px;
}
h1 {
font-size: 28px;
margin-top: 0;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
@media screen and (max-width: 600px) {
h1 {
font-size: 24px;
}
p {
font-size: 14px;
}
}
</style>
</head>
<body>
<header>
<h1>SEO Audit</h1>
</header>
<main>
<p>This is a sample SEO audit page. Please enter the URL of the website you want to audit:</p>
<input type="text" id="url-input">
<button onclick="runAudit()">Run Audit</button>
<div id="audit-results"></div>
</main>
<script>
function runAudit() {
// Get the URL input value
var url = document.getElementById("url-input").value;
// Perform the audit
var auditResults = performAudit(url);
// Display the results
displayResults(auditResults);
}
function performAudit(url) {
// Perform the audit logic here and return the results
var results = {
title: "Sample Audit Results",
metaDescription: "This is a sample SEO audit page.",
h1Tags: [
"Sample Heading 1",
"Sample Heading 2"
],
pageSpeedScore: 85,
keywordDensity: 2.5
};
return results;
}
function displayResults(results) {
// Display the results in a table
var html = "<h1>" + results.title + "</h1>";
html += "<p>" + results.metaDescription + "</p>";
html += "<table>";
html += "<tr><th>Heading 1 Tags</th><td>" + results.h1Tags.join(", ") + "</td></tr>";
html += "<tr><th>Page Speed Score</th><td>" + results.pageSpeedScore + "</td></tr>";
html += "<tr><th>Keyword Density</th><td>" + results.keywordDensity + "</td></tr>";
html += "</table>";
// Add the HTML to the results div
document.getElementById("audit-results").innerHTML = html;
}
</script>
</body>
</html>
No comments:
Post a Comment