-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlatest.html
324 lines (301 loc) · 14.6 KB
/
latest.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- the metas and links for sharing the website -->
<meta name="description" content="The SEO behind a better more Modern website lies behind having not all there are more than 72.. But most Important Link Elements and Metas📈📝.">
<title>SEO Checker Analyzer</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #1A202C; /* Dark Blue Background */
color: #F7FAFC; /* White Text */
}
.btn-orange { background-color: #ED8936; }
.btn-red { background-color: #E53E3E; }
.btn-yellow { background-color: #ECC94B; }
.btn-blue { background-color: #2B6CB0; }
.btn:hover { opacity: 0.8; }
.text-accent { color: #F6AD55; } /* Orange Accent */
.dark-accent { color: #63B3ED; } /* Light Blue */
#progressBar {
height: 4px;
background-color: #F6AD55; /* Orange Accent */
width: 0;
transition: width 0.5s ease;
}
#progressContainer {
width: 100%;
margin-bottom: 1rem;
position: relative;
}
#progressText {
position: absolute;
top: -1.5rem;
right: 0;
font-size: 0.875rem; /* Smaller font size */
font-weight: bold;
color: #F6AD55; /* Orange Accent */
}
</style>
</head>
<body class="font-mono">
<div class="flex justify-center items-center min-h-screen p-4">
<div class="w-full max-w-screen-md p-6">
<h1 class="text-6xl font-bold mb-4">Soo..<br>What is the <span>SEO-Head-Analyzer?🤔</span></h1>
<br><br>
<h2 class="text-2xl">
Have you ever shared your website link on social media, only to find it doesn’t display as expected? Or maybe you’ve searched for your site on a browser and encountered a poorly configured title, description, or missing icons?💻🌵
<br><br>The SEO behind a better more Modern website lies behind having not all (there are <u>more than 72..</u>) But most Important <b>Link Elements and Metas</b>.
<br><br>This tool was made for you! ✨🚀
<hr><br>Modern, effective SEO involves using a wide array of link elements and meta tags—there are more than 72 that could impact your website’s performance!📈📝
<br><br>Before you Share, drop your website Link here to analyze and optimize your SEO.
</h2>
<br><br>
<h1 class="text-4xl font-bold text-accent mb-8">Head Elements Analyzer</h1>
<form id="urlForm" class="mb-8">
<label for="url" class="block text-lg mb-2">Enter your website URL:</label>
<input type="text" id="url" name="url" class="w-full p-2 rounded-md bg-gray-800 border border-gray-700 text-white" placeholder="https://example.com">
<button type="submit" class="btn-blue w-full mt-4 p-2 rounded-md text-white btn">Analyze</button>
</form>
<div id="progress" class="hidden">
<div id="progressContainer">
<div id="progressBar"></div>
<div id="progressText">0%</div>
</div>
<h2 class="text-2xl font-bold text-yellow-500 mb-4">Fetching and Analyzing...</h2>
</div>
<div id="results" class="hidden">
<h2 class="text-2xl font-bold text-yellow-500 mb-4">Suggested Enhancements:</h2>
<div id="snippets" class="space-y-4"></div>
</div>
<div id="error" class="hidden">
<h2 class="text-2xl font-bold text-red-500 mb-4">Error:</h2>
<p id="error-message" class="text-red-300"></p>
</div>
</div>
</div>
<script>
// List of required and recommended <head> elements
const requiredElements = [
{
name: 'Favicon',
snippet: '<link rel="icon" href="/favicon.ico" type="image/x-icon">',
description: 'Adds a favicon to your site, displayed in browser tabs.',
check: (content) => content.includes('<link rel="icon"')
},
{
name: 'Charset',
snippet: '<meta charset="UTF-8">',
description: 'Specifies the character encoding for the HTML document.',
check: (content) => content.includes('<meta charset="')
},
{
name: 'Viewport',
snippet: '<meta name="viewport" content="width=device-width, initial-scale=1.0">',
description: 'Sets the viewport to make your website responsive.',
check: (content) => content.includes('<meta name="viewport"')
},
{
name: 'Title',
snippet: '<title>Your Website Title</title>',
description: 'Defines the title of the document, shown in the browser tab.',
check: (content) => content.includes('<title>')
},
{
name: 'Meta Description',
snippet: '<meta name="description" content="Your website description">',
description: 'Provides a short description of your website, crucial for SEO.',
check: (content) => content.includes('<meta name="description"')
},
{
name: 'Open Graph Title',
snippet: '<meta property="og:title" content="Your Site Title">',
description: 'Defines the title of your website when shared on social media.',
check: (content) => content.includes('<meta property="og:title"')
},
{
name: 'Open Graph Site Name',
snippet: '<meta property="og:site_name" content="Your Site Name">',
description: 'Specifies the name of your site for Open Graph.',
check: (content) => content.includes('<meta property="og:site_name"')
},
{
name: 'Open Graph Type',
snippet: '<meta property="og:type" content="website">',
description: 'Defines the type of content for Open Graph.',
check: (content) => content.includes('<meta property="og:type"')
},
{
name: 'Open Graph Image',
snippet: '<meta property="og:image" content="https://example.com/image.jpg">',
description: 'Specifies the image that will appear when your site is shared on social media.',
check: (content) => content.includes('<meta property="og:image"')
},
{
name: 'Open Graph URL',
snippet: '<meta property="og:url" content="https://example.com">',
description: 'Specifies the canonical URL of your site for Open Graph.',
check: (content) => /<meta property="og:url" content="[^"]*">/.test(content)
},
{
name: 'Twitter Card',
snippet: '<meta name="twitter:card" content="summary_large_image">',
description: 'Defines the Twitter card type to show when shared.',
check: (content) => /<meta name="twitter:card" content="[^"]*">/.test(content)
},
{
name: 'Twitter Title',
snippet: '<meta name="twitter:title" content="Your Site Title">',
description: 'Sets the title for Twitter cards.',
check: (content) => /<meta name="twitter:title" content="[^"]*">/.test(content)
},
{
name: 'Twitter Description',
snippet: '<meta name="twitter:description" content="Your website description">',
description: 'Sets the description for Twitter cards.',
check: (content) => /<meta name="twitter:description" content="[^"]*">/.test(content)
},
{
name: 'Twitter Image',
snippet: '<meta name="twitter:image" content="https://example.com/image.jpg">',
description: 'Specifies the image to be used in Twitter cards.',
check: (content) => /<meta name="twitter:image" content="[^"]*">/.test(content)
},
{
name: 'Theme Color',
snippet: '<meta name="theme-color" content="#000000">',
description: 'Sets the browser’s theme color to match your branding.',
check: (content) => content.includes('<meta name="theme-color"')
},
{
name: 'Robots',
snippet: '<meta name="robots" content="index, archive, follow">',
description: 'Provides instructions to search engine crawlers about the page.',
check: (content) => content.includes('<meta name="robots"')
},
{
name: 'MS Tile Color',
snippet: '<meta name="msapplication-TileColor" content="#2b5797">',
description: 'Specifies the tile color for Windows start screen tiles.',
check: (content) => content.includes('<meta name="msapplication-TileColor"')
},
{
name: 'Safari Pinned Tab',
snippet: '<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#484848">',
description: 'Provides a pinned tab icon for Safari.',
check: (content) => content.includes('<link rel="mask-icon"')
},
{
name: 'Apple Touch Icon',
snippet: '<link rel="apple-touch-icon" href="/apple-touch-icon.png">',
description: 'Specifies an icon for Apple devices.',
check: (content) => /<link rel="apple-touch-icon" href="[^"]*">/.test(content)
},
{
name: 'Canonical Link',
snippet: '<link rel="canonical" href="https://example.com">',
description: 'Specifies the canonical URL of your page to avoid duplicate content issues.',
check: (content) => /<link rel="canonical" href="[^"]*">/.test(content)
},
{
name: 'Alternate Stylesheet',
snippet: '<link rel="alternate stylesheet" href="/styles/alternate.css" title="Alternate Style">',
description: 'Defines an alternate stylesheet that users can switch to.',
check: (content) => /<link rel="alternate stylesheet" href="[^"]*" title="[^"]*">/.test(content)
},
{
name: 'Preconnect',
snippet: '<link rel="preconnect" href="https://example.com">',
description: 'Specifies origins that the browser should preconnect to for faster loading.',
check: (content) => /<link rel="preconnect" href="[^"]*">/.test(content)
}
];
document.getElementById('urlForm').addEventListener('submit', function (e) {
e.preventDefault();
const url = document.getElementById('url').value;
const corsProxy = document.getElementById('corsProxy').value || 'https://cors-anywhere.herokuapp.com/';
if (!url || !isValidUrl(url)) {
alert('Please enter a valid URL.');
return;
}
document.getElementById('progress').classList.remove('hidden');
document.getElementById('results').classList.add('hidden');
document.getElementById('error').classList.add('hidden');
fetchWebsiteContent(url, corsProxy).then((content) => {
if (content) {
analyzeContent(content);
}
});
});
function isValidUrl(url) {
const pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+ // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
return !!pattern.test(url);
}
async function fetchWebsiteContent(url, corsProxy) {
try {
const response = await fetch(`${corsProxy}${url}`); // Use CORS proxy if needed
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const content = await response.text();
updateProgress(50); // Update progress to 50% after fetching content
return content; // Return fetched HTML content as text
} catch (error) {
displayError(error.message);
}
}
// Function to analyze fetched HTML content
function analyzeContent(content) {
const parser = new DOMParser();
const doc = parser.parseFromString(content, 'text/html');
let passedChecks = 0;
const passedElements = [];
const failedElements = [];
requiredElements.forEach(element => {
if (element.check(doc)) {
passedElements.push(element);
passedChecks++;
} else {
failedElements.push(element);
}
});
displayResults(passedElements, failedElements);
updateProgress(100); // Update progress to 100% after analysis
document.getElementById('results').classList.remove('hidden');
}
// Functions to display results
function displayResults(passedElements, failedElements) {
const passedContainer = document.getElementById('passed');
const failedContainer = document.getElementById('failed');
passedContainer.innerHTML = '';
failedContainer.innerHTML = '';
passedElements.forEach(element => {
passedContainer.innerHTML += `<div class="bg-green-500 p-4 rounded-md">${element.name} is present.</div>`;
});
failedElements.forEach(element => {
failedContainer.innerHTML += `<div class="bg-red-500 p-4 rounded-md">${element.name} is missing. Suggested: ${element.snippet} <br> ${element.description}</div>`;
});
}
// Function to display errors
function displayError(message) {
document.getElementById('progress').classList.add('hidden');
document.getElementById('results').classList.add('hidden');
document.getElementById('error').classList.remove('hidden');
document.getElementById('error-message').innerText = message;
}
function updateProgress(percentage) {
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
progressBar.style.width = `${percentage}%`;
progressText.innerText = `${percentage}%`;
}
</script>
</body>
</html>