Skip to content

Commit 068a94a

Browse files
utdevnputdevnp
authored
Merge pull request #2 from utdevnp/update-design
Update design and make functional proxy changer
2 parents bac2c6d + 3eeeb07 commit 068a94a

File tree

3 files changed

+115
-27
lines changed

3 files changed

+115
-27
lines changed

‎checker.js‎

Lines changed: 70 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
let proxyServer = "https://api.allorigins.win/get?url=";
2+
const tagListEmpty = `
3+
<div class="card">
4+
<div class="card-body">
5+
<p class="text-center mt-3">No tags found. Please try entering a URL and search. </p>
6+
</div>
7+
</div>`
8+
9+
function formatResponseTime(milliseconds) {
10+
if (milliseconds < 1000) {
11+
return `${milliseconds.toFixed(2)} ms`;
12+
} else if (milliseconds < 60000) {
13+
const seconds = milliseconds / 1000;
14+
return `${seconds.toFixed(2)} sec`;
15+
} else {
16+
const minutes = milliseconds / 60000;
17+
return `${minutes.toFixed(2)} min`;
18+
}
19+
}
120

221
async function checkSEO() {
322
const url = document.getElementById('url-input').value;
@@ -7,32 +26,38 @@ async function checkSEO() {
726
document.getElementById('status').innerHTML = '';
827
document.getElementById("loadingStatus").innerHTML = "Approaching website ..."
928

10-
if (!url) {
11-
document.getElementById('status').textContent = ` Please enter a valid URL.`;
29+
if (!url || !checkUrl(url)) {
30+
document.getElementById('status').textContent = ` Please enter a valid URL, Eg : (https://www.example.com)`;
31+
document.getElementById('tag-list').innerHTML = tagListEmpty;
1232
return;
1333
}
1434

1535
try {
1636
// Use a proxy server to bypass CORS restrictions (AllOrigins or your custom proxy)
17-
document.getElementById("loadingStatus").innerHTML = "Setting proxy server (api.allorigins.win) ...";
18-
const proxyUrl = 'https://api.allorigins.win/get?url=';
37+
document.getElementById("loadingStatus").innerHTML = `Setting proxy server (${proxyServer}) ...`;
38+
const proxyUrl = proxyServer;
1939
const targetUrl = encodeURIComponent(url);
2040

2141
document.getElementById("loadingStatus").innerHTML = "Bypassing CORS restrictions (AllOrigins or your custom proxy) ...";
22-
42+
const startTime = performance.now();
2343
// Fetch the HTML content of the given URL through the proxy
2444
const response = await fetch(proxyUrl + targetUrl);
2545
if (!response.ok) {
2646
throw new Error('Failed to fetch the URL');
2747
};
28-
48+
2949
document.getElementById("loadingStatus").innerHTML = "Getting response from the website ...";
3050
const data = await response.json();
51+
const endTime = performance.now();
52+
const responseTime = endTime - startTime;
53+
3154
document.getElementById("loadingStatus").innerHTML = "Got response 200 and start analyzing html...";
32-
const html = data.contents; // HTML content of the fetched URL
55+
56+
const html = data.contents;
3357
const parser = new DOMParser();
34-
const doc = await parser.parseFromString(html, 'text/html'); // Parse HTML to DOM
58+
const doc = await parser.parseFromString(html, 'text/html');
3559
document.getElementById("loadingStatus").innerHTML = "Processing result for display...";
60+
3661
// Get all <meta> tags from the document
3762
const metaTags = doc.getElementsByTagName('meta');
3863
const tagList = document.getElementById('tag-list');
@@ -43,15 +68,15 @@ async function checkSEO() {
4368
const name = tag.getAttribute('name');
4469
const property = tag.getAttribute('property');
4570
const content = tag.getAttribute('content');
46-
71+
const httpEquiv = tag.getAttribute('http-equiv');
4772
// Create the base object for the meta tag
4873
let tagObject = {
49-
"Tag name": name || property || "Unknown",
74+
"Tag name": name || property || httpEquiv || "Unknown name",
5075
"Content": content || "No Content",
5176
"isMatch": content ? true : false,
52-
"IsFacebook": (property && property.includes('og:')) ? true : false,
53-
"IsTwitter": (name && name.includes('twitter')) ? true : false,
54-
"isGoogle": (name && name.includes('google')) ? true : false,
77+
"IsFacebook": (property && property.includes('og:')),
78+
"IsTwitter": (name && name.includes('twitter')),
79+
"isGoogle": (name && name.includes('google')),
5580
"fullTag": tag.outerHTML
5681
};
5782

@@ -72,6 +97,7 @@ async function checkSEO() {
7297

7398
// Add icon if isMatch is Yes
7499
let iconHTML = "";
100+
75101
if (tagObject["isMatch"]) {
76102
iconHTML = `<i class="bi bi-check-circle text-success ms-auto"></i> `;
77103
} else {
@@ -111,7 +137,7 @@ async function checkSEO() {
111137

112138
// Display the overall status
113139
if (jsonResults.length > 0) {
114-
document.getElementById('result').innerHTML = `<span class="badge bg-success rounded-pill">${jsonResults.length}</span> meta tags found.`;
140+
document.getElementById('result').innerHTML = `<span class="badge bg-success rounded-pill">${jsonResults.length}</span> meta tags found in ${formatResponseTime(responseTime)}`;
115141
} else {
116142
document.getElementById('status').textContent = 'No meta tags found.';
117143
}
@@ -122,16 +148,38 @@ async function checkSEO() {
122148
}
123149
}
124150

125-
document.getElementById('tag-list').innerHTML = `
126-
<div class="card">
127-
<div class="card-body">
128-
<p class="text-center mt-3">No tags found. Please try entering a URL and searching again. </p>
129-
</div>
130-
</div>`;
151+
document.getElementById('tag-list').innerHTML = tagListEmpty;
131152

132153
document.getElementById('checkBtn').addEventListener('click', async () => {
133-
document.getElementById('loading').innerHTML = ` <div class="spinner-border mt-5" role="status"><span class="visually-hidden">Loading...</span></div> </br> Searching meta tags , it may take while </br>`;
154+
document.getElementById('loading').innerHTML = ` <div class="spinner-border mt-5" role="status"><span class="visually-hidden">Loading...</span></div> </br> Searching meta tags , it may take while, we have to wait for response </br>`;
134155
await checkSEO();
135156
document.getElementById('loading').innerHTML = '';
136157
document.getElementById("loadingStatus").innerHTML = "";
137-
});
158+
});
159+
160+
function checkUrl(input) {
161+
try {
162+
return new URL(input);
163+
} catch (e) {
164+
return false;
165+
}
166+
}
167+
168+
$(document).ready(function () {
169+
170+
let options = {
171+
html: true,
172+
content: $('[data-name="popover-content"]'),
173+
}
174+
let exampleEl = document.getElementById('setProxy');
175+
let popover = new bootstrap.Popover(exampleEl, options);
176+
177+
$('#saveProxyServer').click(function (event) {
178+
event.preventDefault();
179+
proxyServer = checkUrl($('#proxyServerInput').val());
180+
181+
if (!proxyServer) return;
182+
183+
popover.hide();
184+
});
185+
})

‎index.html‎

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,22 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Meta scope - Tool for analyzing website meta tags</title>
7+
<meta charset="UTF-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<title>MetaScope - Analyze and Optimize Meta Tags</title>
10+
<meta name="description" content="MetaScope is an intuitive tool for analyzing website meta tags, including SEO, social media, and verification tags. It highlights missing or mismatched tags and presents results in a user-friendly format.">
11+
<meta name="keywords" content="MetaScope, meta tags analyzer, SEO tags, social media tags, website optimization, SEO tools, tag checker">
12+
<meta name="author" content="MetaScope Team">
13+
<meta property="og:title" content="MetaScope - Analyze and Optimize Meta Tags">
14+
<meta property="og:description" content="MetaScope helps analyze website meta tags for SEO, social media, and verification, making it easy to optimize your site for search engines and sharing.">
15+
<meta property="og:type" content="website">
16+
<meta name="twitter:card" content="summary_large_image">
17+
<meta name="twitter:title" content="MetaScope - Analyze and Optimize Meta Tags">
18+
<meta name="twitter:description" content="MetaScope helps analyze website meta tags for SEO, social media, and verification, making it easy to optimize your site for search engines and sharing.">
19+
<meta name="google-site-verification" content="example-google-site-verification-code">
20+
<meta name="robots" content="index, follow">
21+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
22+
<link rel="icon" type="image/png" href="./meta.svg">
823
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
924
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
1025
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
@@ -35,12 +50,33 @@
3550
class="form-control form-control-lg fs-5 w-100 w-md-80 text-center"
3651
placeholder="Enter your url eg: https://example.com" id="url-input">
3752
<small id="loadingStatus" style="height: 25px; font-size: 12px;"></small>
38-
<button id="checkBtn" style="border-radius: 10px;" class="btn btn-success mb-3 btn-lg">Start analyzing the
39-
website</button>
53+
<div class="col-12 d-flex justify-content-center">
54+
<button id="checkBtn" style="border-radius: 10px; display: inline;" class="btn btn-success mb-3 btn-lg">Start analyzing the
55+
website</button>
56+
57+
<div hidden >
58+
<div data-name="popover-content">
59+
<div class="input-group">
60+
<input type="url" id="proxyServerInput" class="form-control form-control-sm" value="https://api.allorigins.win/get?url=" placeholder="Enter proxy server url" name="proxyName">
61+
<div class="input-group-btn">
62+
<button id="saveProxyServer" style="margin-left: 5px;" class="btn btn-primary" type="submit">
63+
<i class="bi bi-check2-circle"></i>
64+
</button>
65+
</div>
66+
67+
</div>
68+
<div style="display: block;"><small ><a href="">Why you need to change ?</a></small></div>
69+
</div>
70+
</div>
71+
<a id="setProxy" tabindex="0" style="height: 47px; margin-left: 5px; border-radius: 5px;" class="btn btn-lg btn-secondary" role="button" data-bs-toggle="popover" title="Change proxy server" ><i class="bi bi-gear-wide-connected"></i></a>
72+
73+
</div>
74+
4075
</div>
4176
<div class="col-12 justify-content-center align-items-center">
4277
<div class="col-12" id="result"></div>
4378
<p class="text-center text-danger" id="status"></p>
79+
4480
</div>
4581
<div class="row">
4682
<div class="col-8">
@@ -49,7 +85,7 @@
4985
</div>
5086
<div class="col-4">
5187
<div class="alert alert-primary d-flex flex-column align-items-center text-center" role="alert">
52-
<i class="bi bi-type-bold mb-2" style="font-size: 2rem;"></i>
88+
<i class="bi bi-journal-album mb-2" style="font-size: 2rem;"></i>
5389
<div>
5490
<strong>Tip 1:</strong> Use descriptive and keyword-rich titles to improve your page's visibility.
5591
</div>
@@ -85,7 +121,8 @@
85121
</div>
86122

87123
</div>
88-
124+
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
125+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
89126
<script src="./checker.js"></script>
90127
</body>
91128

‎meta.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)